/*==============================
1. Base / Reset
==============================*/
* {
  box-sizing: border-box;
  line-height: 1.6;
  margin: 0;
  padding: 0;

  /* uncomment this line if you want to find overflow issues visually */

  /* outline: 1px solid #f00 !important; */
}

body {
  display: flex;
  flex-flow: column;
  font-family: Outfit, sans-serif;
  color-scheme: light dark;
  background-color: var(--c-gray-300);
  color: var(--c-gray-950);
  overflow: auto;
}

/*==============================
2. Variables / Tokens
==============================*/
:root {
  --c-primary-950: #E24525;
  --c-primary-900: #EF5333;
  --c-primary-700: #EA6C52;
  --c-primary-600: #F7A999;

  --c-secondary-950: #07404E;
  --c-secondary-900: #015367;
  --c-secondary-800: #006F8A;
  --c-secondary-500: #99BAC2;
  --c-secondary-400: #B9C7C9;

  --c-gray-950: #0C2933;
  --c-gray-800: #6E8286;
  --c-gray-500: #E4E8E9;
  --c-gray-400: #E8ECED;
  --c-gray-300: #F6F8F9;
  --c-gray-100: #FFFFFF;

  --c-system-info-900: #007AFF;
  --c-system-success-900: #22AC52;
  --c-system-error-900: #D64522;

  --c-green-900: #27BC5A;
  --c-green-800: #45CE74;
  --c-green-200: #D6F2C6;

  --c-red-800: #E83030;
  --c-red-300: #EFBBB0;
  --c-red-250: #FBCEC3;
  --c-red-200: #F4DCD6;

  --c-yellow-700: #F18335;
  --c-yellow-500: #F6B425;

  --c-blue-700: #403BEF;

  --c-overlay-100: #00033;

  /* remove me between here */
  /* goji colors */
  --goji-red: #d64522;
  --light-red: #e05c48;
  --gold: #e4ca74;
  --leaf-green: #9ac88e;
  --dark-green: #667e77;
  --bright-blue: #015367;
  --dark-blue: #192e37;
  --black: #12100b;
  --sky-grey: #d4d3d2;
  --white: #fff;

  /* UI kit colors
  See https://css-tricks.com/what-do-you-name-color-variables/
  the higher the nr, the darker the color
  */

  --c-blue-900: #0c2933;
  --c-blue-700: #007aff;
  --c-blue-500: #015367;
  --c-blue-300: #006f8a;
  --c-blue-200: #4bb8ef;
  --c-blue-100: #01536766;
  --c-red-700: #e83030;
  --c-red-600: #d64522;
  --c-red-500: #ea6c52;
  --c-red-400: #ef5333;
  --c-green-700: #9ac88e;
  --c-green-600: #22ac52;
  --c-green-500: #27bc5a;
  --c-green-400: #45ce74;
  --c-green-200: #d6f2c6;
  --c-yellow-700: #f18335;
  --c-yellow-600: #f6b425;
  --c-orange-600: #f18335;
  --c-gold-500: #e4ca74;
  --c-grey-900: #eff2f3;
  --c-grey-800: #6e8286;
  --c-grey-700: #667e77;
  --c-grey-600: #99bac2;
  --c-grey-500: #b9c7c9;
  --c-grey-400: #e8eced;
  --c-grey-300: #e4e8e9;
  --c-grey-200: #f6f8f9;
  --c-pink-600: #f7a999;
  --c-pink-500: #efbbb0;
  --c-pink-300: #fbcec3;
  --c-pink-200: #f4dcd6;
  --c-neutral-100: #1b1b1b;

  /* theme colors used often */
  --primary-text-color: var(--c-blue-900);
  --secondary-text-color: var(--c-grey-800);
  --accent-text-color: var(--c-green-400);
  --primary-background-color: var(--c-grey-200);
  --secondary-background-color: var(--white);
  --icon-background-color: var(--c-grey-200);
  --primary-cta-color: var(--c-red-400);
  --secondary-cta-color: var(--c-blue-500);
  --stroke-color: var(--c-grey-400);
  --health-metric-green-color: var(--c-green-500);
  --health-metric-yellow-color: var(--c-yellow-600);
  --health-metric-red-color: var(--c-red-400);
  --health-metric-grey-color: var(--c-grey-500);
  --health-metric-orange-color: var(--c-orange-600);
  --line-chart-color1: var(--c-yellow-600);
  --line-chart-color2: var(--c-pink-500);
  --line-chart-color3: var(--c-pink-200);
  --health-positive-metric-color: var(--c-green-400);
  --positive-metric-color: var(--c-green-200);
  --negative-metric-color: var(--c-pink-300);
  --grey-color: #e5e8e9; /* color not in UI kit */
  --primary-button-background-color: var(--c-red-400);
  --primary-button-background-hover-color: var(--c-red-500);
  --primary-button-background-pressed-color: #e24525; /* color not in UI kit */
  --primary-button-background-disabled-color: var(--c-pink-600);
  --secondary-button-background-color: var(--c-blue-500);
  --secondary-button-background-hover-color: var(--c-blue-300);
  --secondary-button-background-pressed-color: #07404e; /* color not in UI kit */
  --secondary-button-background-disabled-color: var(--c-grey-600);
  --tertiary-button-background-color: var(--white);
  --tertiary-button-border-color: var(--c-grey-400);
  --tertiary-button-border-hover-color: var(--c-grey-500);
  --tertiary-button-border-pressed-color: var(--c-grey-800);
  --tertiary-button-background-disabled-color: var(--c-grey-200);
  --tertiary-button-border-disabled-color: var(--c-grey-400);
  --navigation-menu-item-hover-color: var(--c-grey-300);
  /* until here */
}
/*==============================
3. Typography
==============================*/
/* example usage: .text.header.semibold */

.text {
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semi-bold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.header {
  font-size: 2.5rem;
  line-height: 150%;
}

.metrics {
  font-size: 2.125rem;
}

.title {
  font-size: 1.875rem;
  line-height: 150%;
}

.title2 {
  font-size: 1.25rem;
  line-height: 145%;
}

.subtitle {
  font-size: 1.125rem;
  line-height: 145%;
}

.subtitle1 {
  font-size: 1rem;
  line-height: 150%;
}

.button-text {
  font-size: 1rem;
}

.caption {
  font-size: 0.875rem;
  color: var(--c-gray-800);
}

.text-regular {
  font-size: 1rem;
  line-height: 150%;
}

.text-medium {
  font-size: 0.875rem;
  line-height: 145%;
}


.placeholder {
  font-size: 0.875rem;
  line-height: 145%;
}

.subtext-bold {
  font-size: 0.75rem;
  line-height: 145%;
}

.subtext-semibold,
.subtext-medium,
.subtext-regular {
  font-size: 0.75rem;
}

.metrics-subtext,
.hint {
  font-size: 0.625rem;
  line-height: 100%;
}

/*==============================
4. Layout / Grid
==============================*/
/* utility classes for spacing, flex, grid */

.main-layout {
  margin: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  width: 90rem; /* not certain if we should force this */
  min-width: 90rem;
  max-width: 90rem;
  padding: 2rem 2.75rem;
  background-color: var(--c-gray-300);
  position: relative;
}

/* page */

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.page .page-title {
  padding-bottom: 1.5rem;
}

.page .title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 1.875rem;
  padding-bottom: 1.5rem;
}

/* remove between here */
.page-title {
  font-size: 2.5rem;
  line-height: 4.5rem;
  color: var(--primary-text-color);
}
/* until here */

.row {
  display: flex;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
}

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2rem;
  background-color: var(--c-gray-100);
  width: 100%;
  padding: 1.5rem;
}

/*==============================
5. Components
==============================*/
/* Buttons, modals, navbars, etc. */

/* Navigationbar */

.navigationbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 3.375rem;
  margin-bottom: 2rem;
  z-index: 1;
}

.navigationbar .btn.image-button {
  width: 7.5rem;
  border-radius: 0;
  background-color: transparent;
  content: url("/assets/AG_logo_complete_lightmode.svg");
}

.navigationbar .buttons {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: auto;
  gap: 1.25rem;
}

.navigationbar .btn.secondary {
  width: 11.375rem;
  height: 3.375rem;
}

.navigationbar
.click-away-listener
.dropdown-with-title
.dropdown-menu{
  top: 3.5rem;
}

/* navigation */

.navigation {
  display: flex;
  flex-direction: column;
  margin-top: 1.125rem;
  width: 100%;
}

.navigation .navigation-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.2rem 0;
  width: 100%;
  cursor: pointer;
  height: 2.75rem;
  padding: 0.75rem;
  border-radius: 1.5rem;
  text-decoration: none;
  color: var(--primary-text-color);

  &:hover {
    background-color: var(--navigation-menu-item-hover-color);
  }

  &:focus {
    background-color: var(--navigation-menu-item-hover-color);
  }
}

.navigation-menu-item .navigation-menu-icon-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  font-size: 0.875rem;
}

.navigation-menu-item .btn {
  width: 100%;
  padding: 0 0 0 1rem;
  font-size: 0.875rem;
  background-color: transparent;
  border:0;

  &:hover {
    border:0;
  }
}

.header .row .btn.header-content.icon-button {
  --icon-bg-color: var(--c-gray-950);
  color: var(--c-gray-100);
  width: 3.375rem;
  height: 3.375rem;
}

/* Buttons */

/* usage : .button.primary .button.icon .button.menu etc */
.btn {
  border: none;
  color: white;
  border-radius: 1.875rem;
  width: 11.25rem;
  height: 3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  padding: 0 1.5rem;
  -webkit-transition: background-color ease-out;
  -moz-transition: background-color ease-out;
  -o-transition: background-color ease-out;
  -ms-transition: background-color ease-out;
  transition: background-color ease-out;
  transition-duration: 300ms;
}

.primary {
  background-color: var(--c-primary-900);


  &:hover {
    background-color: var(--c-primary-950);
  }

  &:active {
    background-color: var(--c-primary-700);
  }

  &:disabled {
    background-color: var(--c-primary-600);
  }
}

.secondary {
  background-color: var(--c-secondary-900);

  &:hover {
    background-color: var(--c-secondary-950);
  }

  &:active {
    background-color: var(--c-secondary-800);
  }

  &:disabled {
    background-color: var(--c-secondary-500);
  }
}

.tertiary {
  background-color: var(--c-gray-100);
  border: 1px solid var(--c-gray-400);
  color: var(--c-gray-950);

  &:hover {
    border: 1px solid var(--c-gray-800);
  }

  &:active {
    border: 1px solid var(--c-secondary-400);
  }

  &:disabled {
    background-color: var(--c-secondary-300);
    border: 1px solid var(--c-secondary-400);
    color: var(--c-gray-800);
  }
}

.dropdown-button {
  width: 100%;
  background-color: var(--c-gray-100);
  border: 1px solid var(--c-gray-400);
  color: var(--c-gray-950);

  &:hover {
    border: 1px solid var(--c-gray-800);
  }

  &:active {
    border: 1px solid var(--c-secondary-400);
  }

  &:disabled {
    background-color: var(--c-secondary-300);
    border: 1px solid var(--c-secondary-400);
    color: var(--c-gray-800);
  } 
}

.btn .placeholder {
  color: var(--c-gray-800);
}

.icon-button {
  border-radius: 50%;
  width: 2.625rem;
  min-width: 2.625rem;
  height: 2.625rem;
  --icon-bg-color: var(--c-gray-500);
  background-color: var(--icon-bg-color);
  --icon-color: var(--c-gray-950);
  color: var(--icon-color);
  padding: 0;

  &:hover {
    background-color: var(--c-secondary-400);
  }

  &:active {
    background-color: var(--c-gray-950);
    color: var(--c-gray-100);
  }

  &:disabled {
    background-color: var(--c-gray-300);
    border: 1px solid var(--c-gray-400);
    color: var(--c-gray-800);
    cursor: default;
  }
}

.menu-button {
  border-radius: 50%;
  border: none;
  width: 3.375rem;
  height: 3.375rem;
  background-color: var(--c-gray-500);
  color: var(--c-gray-950);
  padding: 0;

  &:hover {
    background-color: var(--c-secondary-400);
  }

  &:active {
    color: var(--c-gray-100);
    background-color: var(--c-gray-950);
  }

  &:disabled {
    background-color: var(--c-gray-300);
    border: 1px solid var(--c-gray-400);
    color: var(--c-gray-800);
    cursor: default;
  }
}

.trash .btn.icon-button {
  --icon-color: var(--c-red-800);
}

.logout {
  color: var(--goji-red);
}

.image-button {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;

  &:hover {
    filter: brightness(70%);
  }

  &:active {
    filter: brightness(100%);
  }
}

.form .tag-button  {

  & .btn {
    width: fit-content;
    height: 2rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  }

  & .text.button-text {
    font-size: 0.75rem;
  }

  & .heroicons {
    width: 1rem;
    height: 1rem;
  }
}

/* choice button */

.choice-button {
  display: flex;
  flex-direction: column;
  width: 13.25rem;
  height: 10.375rem;
  background-color: var(--white);
  border: 1px solid var(--c-grey-400);
  padding: 0.8rem;
  gap: 0.8rem;
  border-radius: 1rem;
  cursor: pointer;

  &:hover {
    border: 1px solid var(--c-blue-500);
  }

  &:active {
    border: 1px solid var(--c-blue-500);
  }

  &:disabled {
    background-color: var(--tertiary-button-background-disabled-color);
    border: 1px solid var(--tertiary-button-border-disabled-color);
  }

  &.selected{
    border: 1px solid var(--c-blue-500);
  }
}

.choice-button .information {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.choice-button .information .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 2rem;
  background-color: var(--c-grey-400);
  color: var(--c-red-400);
}

.choice-button .information .information-icon {
  color: var(--c-grey-500);
  position: relative;
}

.choice-button .information .information-icon .information {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-grey-200);
  border-radius: 0.625rem;
  box-shadow: 4px 4px 4px 0 rgb(0 0 0 / 40%);
  right: 0;
  top: 0;
}

.choice-button .title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-text-color);
  width: 100%;
  text-align: left;
  height: 1.25rem;
}

.choice-button .description {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--secondary-text-color);
  width: 100%;
  height: 3rem;
  white-space: normal;
  text-align: left;
}

/* end choice button */

/* heroicons */

.heroicons {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 2.625rem;
  height: 2.625rem;
}

.heroicons .size7-2 {
  width: 0.45rem;
  height: 0.45rem;
}

.heroicons .size10 {
  width: 0.625rem;
  height: 0.625rem;
}

.heroicons .size12 {
  width: 0.75rem;
  height: 0.75rem;
}

.heroicons .size14 {
  width: 0.875rem;
  height: 0.875rem;
}

.heroicons .chevron-icon-up {
  rotate: 180deg;
}

.heroicons .size16 {
  width: 1rem;
  height: 1rem;
}

.heroicons .size18 {
  width: 1.125rem;
  height: 1.125rem;
}

.heroicons .size20 {
  width: 1.25rem;
  height: 1.25rem;
}

.heroicons .size24 {
  width: 1.5rem;
  height: 1.5rem;
}

/* links */
.link {
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;

  &.default {
    color: var(--c-gray-950);
  }

  &.red {
    color: var(--c-red-400);
  }
}

/* tables using flexbox, see https://css-tricks.com/accessible-simple-responsive-tables */

.table {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.cell {
  font-size: 0.875rem;
  font-weight: 300;
  text-align: left;
  padding: 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.table .header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
}

.table .header .cell {
  color: var(--c-gray-800);
}

.table .row {
  display: flex;
  align-items: center;
  border-radius: 3.125rem;
  background-color: var(--c-gray-300);
  padding: 0.75rem 0.5rem 0.75rem 1.75rem;
  cursor: pointer;
  height: 3.625rem;
  -webkit-transition: background-color ease-out;
  -moz-transition: background-color ease-out;
  -o-transition: background-color ease-out;
  -ms-transition: background-color ease-out;
  transition: background-color ease-out;
  transition-duration: 300ms;
  gap: 0.2rem;

  &:hover {
    background-color: var(--c-gray-400);
  }

  &:active {
    background-color: var(--c-secondary-400);
  }
}

.table .row .cell:nth-child(1) {
  font-weight: 500;
}


.table-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* tabs */

.tabs {
  position: relative;
  background-color: var(--c-gray-300);
  border-radius: 1.875rem;
  padding: 0.1rem;
  width: fit-content;
}

.tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tab .tab-label {
  position: absolute;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.2rem;
  cursor: pointer;
}

.tab .tab-label.selected {
  font-weight: 400;
}

.tab [type="radio"] {
  appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 1.5rem;
  gap: 0.625rem;
  min-width: 8.75rem;
  height: 3.125rem;
  background-color: var(--primary-background-color);
  border-radius: 1.875rem;
  cursor: pointer;

  &:checked {
    background-color: var(--secondary-background-color);
  }
}


/* performance cards */

.performance-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  background-color: var(--c-gray-100);
  width: 20.375rem;
  max-width: 20.375rem;
  min-width: 20.375rem;
  height: 6.8125rem;
  padding: 1.5rem 1.25rem;
  position: relative;
}

.performance-panel .heroicons {
  width: 0.875rem;
  height: 0.875rem;
}

.performance-trend {
  width: 3.3125rem;
  height: 1.25rem;
  border-radius: 1.25rem;

  & .row {
    gap: 0.25rem;
    justify-content: center;
  }
}

.performance-trend.trend-up {
  background-color: var(--c-green-200);
}

.performance-trend.trend-down {
  background-color: var(--c-red-250);
}

.performance-trend.trend-zero {
  background-color: var(--c-grey-300);
}

.performance-icon-name {
  gap: 0.5rem;
}

.performance-trend .trend-i {
  font-size: 0.75rem;
}


/* health bar  */

.health-bar-view {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-gray-100);
  border-radius: 1.875rem;
  width: 5.5rem;
  height: 2.125rem;
  gap: 0.5rem;
}

.health-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.15rem;
}

.health-bars .bar1 {
  width: 0.1875rem;
  height: 0.4375rem;
  border-radius: 0.25rem;
}

.health-bars .bar2 {
  width: 0.1875rem;
  height: 0.625rem;
  border-radius: 0.25rem;
}

.health-bars .bar3 {
  width: 0.1875rem;
  height: 0.875rem;
  border-radius: 0.25rem;
}

.health-bars .red {
  background-color: var(--c-red-800);
}

.health-bars .green {
  background-color: var(--c-green-800);
}

.health-bars .gray {
  background-color: var(--c-gray-500);
}

.health-bars .orange {
  background-color: var(--c-yellow-500);
}

.health-bar-view .value {
  color: var(--c-gray-950);
  font-weight: 300;
}
.health-bar-view .no-value {
  color: var(--c-gray-500);
}

/* cost in table */

.cost-table-view {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15rem;
}

.cost-table-view .red,
.app-site-rate .rate .red,
.app-site-rate .trend-down {
  color: var(--c-red-800);
}

.cost-table-view .yellow,
.app-site-rate .rate .yellow,
.app-site-rate .trend-flat {
  color: var(--c-yellow-500);
}

.cost-table-view .green,
.app-site-rate .rate .green,
.app-site-rate .trend-up {
  color: var(--c-green-800);
}

.cost-table-view .gray {
  color: var(--c-gray-500);
}

.cost-table-view .cost-v {
  font-size: 0.875rem;
}

.cost-table-view .trend-up {
  line-height: 0.625rem;
  color: var(--c-red-800);
}

.cost-table-view .trend-down {
  line-height: 0.625rem;
  color: var(--c-green-800);
}

/* modal */
.modal {
  /* note we do not allow overflow */

  display: flex;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0);
  background-color: rgb(0 0 0 / 40%);
}

.right-side-modal {
  /* note we do not allow overflow */

  display: flex;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0);
  background-color: rgb(0 0 0 / 40%);
  transform: translateX(100%);
  transition-delay: 0.35s;
}

/* right-side-panel */
.right-side-modal .right-side-panel {
  position: fixed;
  right: 0;
  justify-content: flex-start;
  background-color: var(--white);
  width: 30.625rem;
  border-top-left-radius: 1.75rem;
  border-bottom-left-radius: 1.75rem;
  height: 100%;
  box-shadow: 0 0.25rem 0.5rem 0 rgb(12 41 51 / 20%);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 2.5rem 1.55rem 2.5rem 2.5rem; /* we keep 10px for a scroll bar on the right */
}

.right-side-modal.slide-in {
  transform: translateX(0);
  transition-delay: 0s;
}

.right-side-panel.slide-in {
  transform: translateX(0);
}

.navigation-panel.slide-in {
  transform: translateX(0);
}

.right-side-panel .container {
  display: flex;
  flex-direction: column;
  width: 25.625rem;
  justify-content: flex-start;
  gap: 0;
}

.right-side-panel .container .header,
.right-side-panel .container .content,
.right-side-panel .container .footer {
  width: 25.625rem;
}

.right-side-panel .header .text {
  text-wrap: wrap;
  max-width: 22.625rem;
}

.right-side-panel .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(100% - 7.5rem);
  overflow: auto;
}

.right-side-panel .header .icon-button {
  --icon-bg-color: var(--c-gray-100);
}

.right-side-panel .footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  right: 2.5rem;
  gap: 0.5rem;
}

.right-side-panel .footer .btn {
  min-width: 12.5625rem;
  width: 100%;
}

.right-side-panel .footer .full-width {
  width: 100%;
}

/* try to remove me */
.right-side-panel-content .title-row .icon-button {
  --icon-bg-color: var(--c-gray-100);
}

/* dropdown */

.dropdown {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.click-away-listener .dropdown .dropdown-menu {
  width: 100%;
  padding: 0.5rem;
}

.dropdown-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  top: 3.2rem;
  max-height: 19rem;
  background-color: var(--secondary-background-color);
  border: none;
  border-radius: 1.75rem;
  box-shadow: 0 0.25rem 0.5rem rgb(12 41 51 / 4%);
  overflow-y: auto;
}

.dropdown-with-title .dropdown-menu {
  position: absolute;
  width: 15.3125rem;
  z-index: 1;
  top: 0;
  left: 0.1rem;
  padding-top: 1rem;
}


.dropdown-relative {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.dropdown-relative .dropdown-absolute {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 10.25rem;
  top: 3.5rem;
  left: 0;
}

.dropdown .dropdown-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 3rem;
  background-color: var(--secondary-background-color);
  color: var(--primary-text-color);
  border: 1px solid var(--primary-background-color);
  border-radius: 1.875rem;
  padding: 0.875rem 1rem;
}

.dropdown .dropdown-menu .dropdown-menu-item {
  list-style-type: none;
  display: flex;
  width: 100%;
  padding: 0.5rem 1.125rem 0.5rem 1.1rem;
  height: 2rem;
  justify-content: space-between;
  align-items: center;

  &:hover {
    background-color: var(--primary-background-color);
    border-radius: 1.5rem;
  }
}

/* make a dropdown an absolute view using the class absolute */


.dropdown .dropdown-menu .dropdown-menu-item .dropdown-menu-item-i {
  font-size: 1.125rem;
}

.dropdown .dropdown-menu ul.dropdown-ul {
  width: 100%;
  min-width: 9.125rem;
}

.dropdown .dropdown-menu li.dropdown-li {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  color: var(--dropdown-li-color);
  font-weight: 400;

  a.dropdown-a {
    display: block;
    width: 100%;

    .dropdown-item-row {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: center;
    }
  }
}

/* Calendar */

.interval-calendar {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 27.5rem;
  padding: 0.25rem 0;
  margin-top: 1rem;
  gap: 0.1rem;
  border-radius: 1rem;
  background-color: var(--primary-background-color);
}

.calendar {
  position: absolute;
  display: inline-grid;
  width: 13.25rem;
  height: 14.15rem;
  background: var(--primary-background-color);
  padding: 0.875rem;
  border-radius: 1rem;
  box-shadow: 0 2.5rem 1.875rem -1.25rem rgb(0 0 0 30%);

  .month {
    display: flex;
    justify-content: space-between;
    width: 11.75rem;
    height: 1.625rem;
    gap: 0.2rem;
    align-items: center;
    color: var(--primary-text-color);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    font-weight: 300;

    .year {
      font-weight: 600;
      width: 5.5rem;
    }

    .month-navigation {
      display: flex;
      width: 5.5rem;
      gap: 0.5rem;
      justify-content: flex-end;
    }

    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      color: var(--primary-text-color);
      border-radius: 1rem;
      transition-duration: 0.2s;
      position: relative;

      &:hover {
        background: #eee;
      }
    }

    .nav.inactive {
      color: var(--c-grey-500);

      &:hover {
        background: var(--primary-background-color);
      }
    }
  }

  .days {
    display: grid;
    justify-content: center;
    width: 11.75rem;
    height: 1.625rem;
    align-items: center;
    grid-template-columns: repeat(7, 0fr);
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 0.875rem;

    span {
      width: 1.625rem;
      place-self: center center;
      text-align: center;
    }
  }

  .dates {
    display: grid;
    width: 11.75rem;
    grid-template-columns: repeat(7, 0fr);

    button {
      cursor: pointer;
      outline: 0;
      border: 0;
      background: transparent;
      font-size: 0.875rem;
      font-weight: 100;
      color: var(--c-neutral-100);
      place-self: center center;
      width: 1.625rem;
      height: 1.625rem;
      border-radius: 1.625rem;
      transition-duration: 0.2s;

      &:disabled {
        color: var(--c-grey-500);
        cursor: default;
      }

      &.today {
        box-shadow: inset 0 0 0 1px var(--c-pink-200);
      }

      &:first-child {
        grid-column: 1;
      }

      &:focus {
        background: var(--c-red-600);
        color: var(--white);
        width: 1.4rem;
        height: 1.4rem;
      }

      &:hover:not([disabled]) {
        background: var(--c-grey-600);
      }

      &.day-selected {
        background: var(--c-red-600);
        color: var(--white);
        width: 1.625rem;
        height: 1.625rem;
      }

      &.day-interval {
        background: var(--c-pink-200);
        border-radius: 0;
      }

      &.other-month {
        display: none;
        color: var(--primary-background-color);
        width: 1.625rem;
        height: 1.625rem;
        cursor: default;
      }
    }
  }
}

.interval-calendar .calendar {
  display: flex;
  flex-direction: column;
  position: relative;
}

.calendar-start-end-date {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  background: transparent;
}

/* modal cancel dialogue */

.modal .cancel-dialogue {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  margin: auto;
  background-color: var(--white);
  width: 30.625rem;
  height: 17.25rem;
  border-radius: 2rem;
  padding: 2.5rem;
}

.cancel-dialogue .cancel-title {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.cancel-dialogue .cancel-description {
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-text-color);
  text-align: center;
}

.cancel-dialogue .cancel-dialogue-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.cancel-dialogue-buttons .btn {
  width: 12.5625rem;
}

/* click away listener */

.click-away-listener {
  position: relative;
}

/* media icon */

.media-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  min-width: 2.625rem;
  border-radius: 1.875rem;
  background-color: var(--white);
}

.media-icon .media-icon-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  min-width: 2.625rem;
  border-radius: 1.875rem;
  overflow: hidden;
  border: 1px solid var(--c-grey-300);
}

.media-icon .media-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-icon .dynamic-content {
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

/* text tooltip */

[tooltiptext]::before {
  /* needed - do not touch */
  content: attr(tooltiptext);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;

  /* customizable */
  transition: all 0.15s ease;
  padding: 1rem;
  font-size: 0.625rem;
  font-weight: 400;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
  color: var(--primary-text-color);
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 0.25rem 0 rgb(0 0 0 / 4%);
  width: 15.6875rem;
  max-width: 15.6875rem;
  height: 4.3125rem;
}

[tooltiptext]:hover::before {
  /* needed - do not touch */
  opacity: 1;

  /* customizable */
  background: var(--c-grey-200);
  margin-top: -6.25rem;
  margin-left: 1.25rem;
}

[tooltiptext]:not([tooltiptext-persistent])::before {
  pointer-events: none;
}

.email[tooltiptext]::before {
  width: 4rem;
  height: 2rem;
  margin-top: -4.25rem;
  margin-left: -2rem;
  text-align: center;
}

.edit-media[tooltiptext]::before {
  width: 2rem;
  height: 1.5rem;
  margin-top: -3.8rem;
  margin-left: -0.65rem;
  text-align: center;
}

.launching[tooltiptext]::before {
  width: 3rem;
  height: 1rem;
  margin-top: -4rem;
  margin-left: -0.65rem;
  text-align: center;
  padding: 0.5rem;
}

.updating[tooltiptext]::before {
  width: 6rem;
  height: 2rem;
  margin-top: -5rem;
  margin-left: -0.65rem;
  text-align: center;
  padding: 0.5rem;
}


/* absolute image tooltip */

.tooltip-image-absolute,
.tooltip-div-absolute {
  position: absolute;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
}

.tooltip-image-absolute .tooltip-image-view-absolute {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22.75rem;
  height: 13.5rem;
  background: var(--c-grey-300);
  border-radius: 0.75rem;
  padding: 1rem 4rem;
  z-index: 100;
  transition: opacity 0.35s;
  overflow: hidden;

  .image-container-absolute {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .dynamic {
      object-fit: contain;
    }

    .video {
      width: auto;
      height: 100%;
    }
  }
}

.tooltip-div-absolute {
  top: -11rem;
  left: 0rem;
}
.tooltip-div-absolute .tooltip-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 16rem;
  max-height: 8.9rem;
  background: var(--c-grey-300);
  border-radius: 1rem;

  padding: 1rem;
  z-index: 100;
  transition: opacity 0.35s;

  box-shadow: rgb(0 0 0 / 10%) 0 0.25rem 0.25rem;
  overflow: hidden;
}
.tooltip-content .row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}

.tooltip-content p {
  color: var(--primary-text-color);
  font-size: 0.625rem;
  font-weight: 400;
}

.tooltip-content p.value {
  font-weight: 600;
}

/* global notifications */

.notifications-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  max-width: 20rem;
  max-height: 30rem;
  position: fixed;
  right: 4.5rem;
  bottom: 2.5rem;
  z-index: 1;
}

.notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 12rem;
  height: 2rem;
  background-color: var(--white);
  border-radius: 1rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  cursor: pointer;
  box-shadow: 0 0.25rem 0.25rem 0 rgb(0 0 0 / 20%);

  &:hover {
    background-color: var(--tertiary-button-background-hover-color);
  }
}


.notifications .summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;

  .dot {
    display: flex;
    width: 1rem;
    height: 1rem;
    background-color: var(--c-green-500);
    border-radius: 50%;
  }

  .description {
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--primary-text-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80%;
  }
}

.notifications-container .expansion {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: 0;
  transform: scaleY(0);
  overflow: hidden;
  background-color: var(--white);
  border-radius: 1rem;
  opacity: 0;
  margin-bottom: 0;
  box-shadow: 0 0.25rem 0.25rem 0 rgb(0 0 0 / 20%);
  transition:
  transform 0.5s ease,
  max-height 0.5s ease,
  margin-bottom 0.5s ease,
  opacity 0.5s ease;

  &.visible {
    transform: scaleY(1);
    margin-bottom: 0.5rem;
    max-height: 1000px;
    opacity: 1;
  }

  .expand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 2rem;

    &.underline {
      border-bottom: 1px solid var(--primary-background-color);
    }

    .heroicons.icon-button {
      border-radius: 50%;
      width: 1.125rem;
      height: 1.125rem;
      background-color: var(--white);

    }
  }
}

.notifications-container .expansion .expand ,
.notifications-container .expansion.visible .expand {
  width: 100%;
  padding: 1rem;
}

.notifications-container .notify {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 1px);
  padding: 0.5rem 0;
  opacity: 1;
  transition-delay: 3s;
  transition-property: height, opacity;
  transition-timing-function: ease;
  transition-duration: 2s;

  &.shrinking {
    height: 0;
    opacity: 0;
  }

  .activity {
    font-size: 0.750rem;
    color: var(--secondary-text-color);
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 0.5rem;
  }

  .description {
    font-size: 0.750rem;
    color: var(--primary-text-color);
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .completed {
    font-size: 0.750rem;
    color: var(--c-green-500);
    font-weight: 400;
  }
}

/* progress bar */

.progress-bar {
  width: 100%;
  height: 100%;

  .label {
    font-size: 0.625rem;
    font-weight: 400;
    width: fit-content;
    margin-left: auto;
  }

  .background {
    width: 100%;
    height: 0.125rem;
    position: relative;
    background-color: var(--c-grey-400);
    border-radius: 0.125rem;
  }

  .progress-fill {
    position: absolute;
    top: -0.0625rem;
    left: 0;
    width: 100%;
    height: 0.250rem;
    background-color: var(--c-green-500);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    transition: transform 2s ease-in-out;
    border-radius: 0.125rem;
  }
}

/* global alerts */


.alerts {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: absolute;
  z-index: 2;
  padding-top: 1rem;
}

.alert {
  display: flex;
  flex-direction: row;
  /* width: 27.54rem; */
  height: 3.5rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.75rem;
  color: var(--white);
  font-size: 0.875rem;
  padding: 1rem;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.alert.visible {
  opacity: 1;
}

.alert .click {
  margin-left: auto;
}

.click .btn.icon-button {
  --icon-bg-color: transparent;
  color: var(--white);
  cursor: pointer;
}

.alert.info {
  background-color: var(--c-blue-700);
}

.alert.warning {
  background-color: var(--c-yellow-700);
}

.alert.success {
  background-color: var(--c-green-600);
}

.alert.error {
  background-color: var(--c-red-600);
}

button:focus,
input:focus {
  outline: none;
}

/* loader */
/* HTML: <div class="loader"></div> Taken from: https://css-loaders.com/dots/ */

.loader {
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  animation: l5 1s infinite linear alternate;
}

@keyframes l5 {
  0% {
    box-shadow: 1rem 0 #9ac88e, -1rem 0 #d6f2c6;
    background: #9ac88e;
  }

  33% {
    box-shadow: 1rem 0 #9ac88e, -1rem 0 #d6f2c6;
    background: #d6f2c6;
  }

  66% {
    box-shadow: 1rem 0 #d6f2c6, -1rem 0 #9ac88e;
    background: #d6f2c6;
  }

  100% {
    box-shadow: 1rem 0 #d6f2c6, -1rem 0 #9ac88e;
    background: #9ac88e;
  }
}

/* pagination */

.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
}

.pagination .pagination-label {
  display: flex;
  align-items: center;
}

.pagination-label .pagination-label-start,
.pagination-label .pagination-label-end {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.pagination-label .pagination-label-emphasis {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-text-color);
  margin: 0 0.2rem;
}

.pagination .pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pagination-controls .last-page-index {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn.icon-button.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  background-color: var(--white);
  border-radius: 50%;
  padding: 1rem;
  color: var(--c-gray-950);

  &:hover {
    border: 1px solid var(--tertiary-button-border-hover-color);
    background-color: var(--c-grey-200);
  }

  &:active {
    border: 1px solid var(--tertiary-button-border-pressed-color);
    background-color: var(--c-grey-300);
  }

  &:disabled {
    background-color: var(--tertiary-button-background-disabled-color);
    border: 1px solid var(--tertiary-button-border-disabled-color);
  }
}

.btn.icon-button.pagination.pagination-page-selected {
  background-color: var(--c-blue-900);
  color: var(--white);
}

/* generic percentage button */

.percentage-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 1.875rem;
  width: 5rem;
  height: 1.625rem;
  padding: 0 0.4rem;
}

.percentage-button .btn.icon-button {
  --icon-bg-color: transparent;
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
}

.percentage-button .percentage {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

/* step counters */

.step-counter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-counter .step-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.step-counter .step-col .step-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-counter .step-col .step-row .step-circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--white);
  border-radius: 50%;
  margin: 0 0.3125rem;
}

.step-counter .step-col .step-row .step-circle.step-selected {
  background-color: var(--c-blue-500);
  margin: 0 0.6875rem;
}

.step-counter .step-col .step-row .step-circle .step-id {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--c-blue-100);
  border-radius: 50%;
  border: 0.25rem solid var(--white);
  font-size: 1rem;
  font-weight: 400;
  color: var(--white);
}

.step-counter .step-col .step-row .step-circle .step-id.step-selected,
.step-counter .step-col .step-row .step-circle .step-id.step-completed {
  background-color: var(--c-blue-500);
}


.step-counter .step-col .step-title {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-blue-900);
  margin-top: 0.5rem;
}

.step-counter .step-col .step-row .step-line-left {
  display: flex;
  width: 3.25rem;
  height: 0.125rem;
  background-color: var(--c-blue-100);
  border-top-right-radius: 0.125rem;
  border-bottom-right-radius: 0.125rem;
}

.step-counter .step-col .step-row .step-line-left.step-selected {
  background-color: var(--c-blue-500);
  width: 2.875rem;
}

.step-counter .step-col .step-row .step-line-left.step-completed {
  background-color: var(--c-blue-500);
  border-top-right-radius: 0.125rem;
  border-bottom-right-radius: 0.125rem;
}

.step-counter .step-col .step-row .step-line-right {
  display: flex;
  width: 3.25rem;
  height: 0.125rem;
  background-color: var(--c-blue-100);
  border-top-left-radius: 0.125rem;
  border-bottom-left-radius: 0.125rem;
}

.step-counter .step-col .step-row .step-line-right.step-selected {
  background-color: var(--c-blue-500);
  width: 2.875rem;
  border-radius: 0.125rem;
}

.step-counter .step-col .step-row .step-line-right.step-completed {
  background-color: var(--c-blue-500);
}

.step-counter .step-col:first-child .step-row .step-line-left {
  opacity: 0;
}

.step-counter .step-col:nth-last-child(1) .step-row .step-line-right {
  opacity: 0;
}

/* Placeholders, see: https://css-tricks.com/almanac/pseudo-selectors/p/placeholder/ */

input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: Outfit, sans-serif;
}

input[type="text"]::-moz-placeholder,
input[type="password"]::-moz-placeholder {
  /* Firefox 19+ */
  font-family: Outfit, sans-serif;
}

input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder {
  /* IE 10+ */
  font-family: Outfit, sans-serif;
}

input[type="text"]:-moz-placeholder,
input[type="password"]:-moz-placeholder {
  /* Firefox 18- */
  font-family: Outfit, sans-serif;
}

/*==============================
6. Pages / Contextual Overrides
==============================*/

/* My Overview page */

.page-container.my-overview {
  margin-top: 1.125rem;
}

.my-overview .table-container {
  margin-top: 1rem;
}

.empty-view-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.empty-view-container .btn.secondary {
  width: 15.3125rem;
  height: 3.375rem;
}

.empty-view-container img {
  content: url("/assets/empty_view.png");
}

.empty-view-container .empty-view-message {
  text-align: center;
  white-space: wrap;
  padding: 2rem 0;
  width: 38%;
}

.row.performance {
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 0.625rem;
}

.my-overview .campaigns {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.my-overview .link.red {
  margin-left: auto;
  padding-right: 1.5rem;
}

/* My overview campaign table */
.my-overview-table.cell:nth-child(1) {
  width: 40%;
}

.my-overview-table.cell:nth-child(2) {
  width: 30%;
}

.my-overview-table.cell:nth-child(3) {
  width: 10%;
}

.my-overview-table.cell:nth-child(4) {
  width: 8%;
}

.my-overview-table.cell:nth-child(5) {
  width: 12%;
}




/* campaigns page */

.campaigns-title {
  margin-bottom: 2rem;
  width: 100%;

  & .text.header.medium {
    padding: 0 2rem;
    width: 80%;
  }

  & .interval-button {
    margin-left: auto;
  }


}

/* Campaigns table */

.campaigns-table.cell:nth-child(1) {
  width: 5%;
}

.campaigns-table.cell:nth-child(2) {
  width: 36%;
}

.campaigns-table.cell:nth-child(3) {
  width: 15%;
}

.campaigns-table.cell:nth-child(4) {
  width: 10%;
}

.campaigns-table.cell:nth-child(5) {
  width: 8%;
}

.campaigns-table.cell:nth-child(6) {
  width: 14%;
}

.campaigns-table.cell:nth-child(7) {
  width: 12%;
  overflow: visible;
}

.cell .buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  position: relative;
}

.buttons .menu-absolute {
  position: absolute;
  z-index: 1;
  top: 1.5rem;
  right: 1.5rem;
}

.content .campaign-summary .table .column .row.campaign-summary,
.content .table .column .row.tracking-summary {
  padding: 0 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cell.campaign-summary {
  padding: 0;
}

.container .content:has(.tracking-summary) {
  margin-top: 2rem;
}

.campaign-summary .table .row.campaign-summary  .cell.campaign-summary:nth-child(1),
.table .row.tracking-summary  .cell.tracking-summary:nth-child(1) {
  width: 12%;

  & .heroicons {
    background-color: var(--c-gray-100);
  }
}

.table .row.campaign-summary  .cell.campaign-summary:nth-child(2) {
  width: 70%;
}

.campaign-summary .table .row.campaign-summary .cell.campaign-summary:nth-child(3) {
  width: 18%;
}
/* campaign details page */

.campaign-detail-performance {
  width: 13.25rem;
  max-width: 13.25rem;
  min-width: 13.25rem;
  height: 6.625rem;
}

.campaign-detail-performance.health-performance {
  color: var(--white);
}

.health-performance.green {
  background-color: var(--c-green-900);
}
.health-performance.red {
  background-color: var(--c-red-800);
}
.health-performance.orange {
  background-color: var(--c-yellow-500);
}

.suggestion-row .btn {
  --icon-bg-color: var(--c-gray-100);
}

/* App Site table */

.table .app-site-table.header {
  padding-left: 0.2rem;
}

.table .app-site-table.row {
  background-color: var(--white);
  cursor: default;
  padding-left: 0.2rem;
}

.app-site-table.cell:nth-child(1) {
  width: 10%;
}

.app-site-table.cell:nth-child(2) {
  width: 50%;
}

.app-site-table.cell:nth-child(3) {
  width: 20%;
}

.app-site-table.cell:nth-child(4) {
  width: 20%;
}


/* Modal Right side panel */

.right-side-panel .content:has(.suggestions) {
  height: calc(100% - 2.5rem);
}

.right-side-panel .content .suggestions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 25.625rem;
  height: 100%;
}

.right-side-panel .suggestion-detail {
  display: block;
  gap: 1rem;
  overflow-y: auto;
}

.date-health {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.5rem;
  margin-bottom: 1.5rem;
}

/* advertisers page */

/* Advertisers table */
.advertisers-table.row {
  padding-right: 0.5rem;
}

.advertisers-table.cell:nth-child(1) {
  width: 2%;
}

.advertisers-table.cell:nth-child(2) {
  width: 40%;
}

.advertisers-table.cell:nth-child(3) {
  width: 40%;
}

.advertisers-table.cell:nth-child(4) {
  width: 10%;
}

.advertisers-table.cell:nth-child(5) {
  width: 8%;
}

/* campaign reports page */

.tables-content .horizontal-end .btn.tertiary,
.rollup .btn.tertiary  {
  width: 13rem;
  height: 3.375rem;
}

.btn.tertiary.interval {
  width: fit-content;
  height: 3.375rem;
  background-color: var(--c-grey-300);
  color: var(--c-gray-950);
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  cursor: default;
}

.table-parameters .form {
  margin-top: -0.3rem;
}

.interval-button .btn {
  width: 100%;
  height: 3.375rem;
  background-color: var(--c-gray-500);
  border: 0;
  color: var(--c-gray-950);
  font-size: 0.875rem;
  cursor: default;
}

.sorting-label {
  display: flex;
  align-items: center;
  color: var(--secondary-text-color);
}

.sorting-label .btn {
  --icon-bg-color: transparent;
  width: 2rem;
  height: 2rem;
}

.campaign-report-table.header {
  width: 100%;
}


.campaign-report-table.row {
  height: 2rem;
  cursor: default;
}

.campaign-report-table.row:nth-child(even) {
  background-color: var(--c-grey-900);
}

.campaign-report-table .media-data .media-icon,
.campaign-report-table .media-data .media-icon .media-icon-content {
  min-width: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.campaign-report-table.header-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  padding: 1rem;
}

.campaign-report-table.table-content {
  display: flex;
  flex-direction: column;
  background-color: var(--c-grey-200);
  border-radius: 1.875rem;
  padding: 1rem;
  gap: 0.25rem;
}

.tables-content .pagination {
  width: 100%;
}

.table.table-5cols .campaign-report-table.cell {
  width: 20%;
}

.table.table-6cols .campaign-report-table.cell {
  width: 17%;
}

.table.table-7cols .campaign-report-table.cell {
  width: 14%;
}

.table.table-8cols .campaign-report-table.cell {
  width: 14%;
}

.table.table-8cols .campaign-report-table.cell:nth-child(1) {
  width: 10%;
}
.table.table-8cols .campaign-report-table.cell:nth-child(2) {
  width: 10%;
}

.table.table-8cols .campaign-report-table.cell:nth-child(3) {
  width: 20%;
}

.table.table-8cols .campaign-report-table.cell:nth-child(6) {
  width: 20%;
}

/* tracking page */

.campaign-creation.tracking-container .frame .campaign-creation-content {
  height: 21.25rem;
  width: 32rem;
  margin: 0;
}


.new-tracking-event .btn.secondary {
  width: 12rem;
  height: 3.375rem;
}

.new .btn.secondary {
  width: 20rem;
  height: 3.375rem;
}

.tracking-advertiser-filter {
  display: flex;
  height: 3.375rem;

  & .btn {
    width: 16.875rem;
  }
}

.user-input-title.with-icon .btn.icon-button {
  --icon-bg-color: transparent;
  --icon-color: var(--c-secondary-400);

  &:hover {
    color: var(--c-gray-950)
  }
}

.installation-buttons {
  display:flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;

  & .btn {
    width: 24rem;
  }
}

.gtm-installation .btn {
  width: 27.5rem;
}


/* campaign creation page */

.budget-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .budget-tabs-wrapper {
    margin: 0 auto;
  }
}

.new-ad .btn.secondary {
  width: 15.875rem;
  height: 3.375rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Ads table */
.ads-table .row {
  padding: 0 0.5rem;
  width: 27.5rem;
  cursor: default;
}

.ads-table {
  .column .text {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.ads-table.cell:nth-child(1) {
  width: 18%;
}

.ads-table.cell:nth-child(2) {
  width: 45%;
  height: 2.5rem;
}

.ads-table.cell:nth-child(3) {
  width: 25%;
  height: 2.5rem;
}

.ads-table.cell:nth-child(4) {
  width: 12%;
  margin-left: auto;
  overflow: visible;
}

.new-media .btn.secondary {
  width: 18.625rem;
  height: 3rem;
  font-size: 0.875rem;
  font-weight: 500;
  margin-left: auto;
  margin-top: 0.5rem;
}

.grey-button .btn {
  background-color: var(--c-grey-200);
  color: var(--primary-text-color);
  border: 0;
  width: 4.375rem;
  height: 2.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.625rem;

  &:hover {
    filter: brightness(70%);
  }

  &:focus {
    filter: brightness(100%);
  }

  &:disabled {
    background-color: #ccc;
    color: #666;
  }

  &:hover:disabled {
    filter: brightness(100%);
  }
}

.placement-dropdown {
  position: absolute;
  top: 3rem;
  right: -7.5rem;
  z-index: 1;
}

.placement-dropdown .dropdown-menu {
  width: 10.25rem;
  height: 5.5rem;
}

.placement-dropdown .dropdown .dropdown-menu .dropdown-item-row .heroicons {
  background-color: transparent;
}

.placement-media-icons {
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: flex-start;
  width: 4.5rem;
  height: 2.625rem;
}

.placement-media-icons .placement-media-right-icon {
  position: absolute;
  right: 0;
}

/* targeting */

.targeting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 2rem;
}

.targeting .form .targeting-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 42rem;
  margin: 0 auto;
}

.targeting .content .form .form-group textarea {
  width: 25.625rem;
  max-height: 19rem;
}


.textarea-fixed {
  width:100%;
  height: 220px;
  overflow-y: auto;
  resize: none;
  background-color: var(--c-gray-100);
  color: var(--c-gray-950);
  padding: 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-family: inherit;
}

.textarea-fixed.error {
  border: 1px solid var(--c-system-error-900);
}

.text-area-validation-errors {
  display: flex;
  flex-direction: column;
}

.text-area-validation-errors .user-input-title {
  margin-top: 1rem;
}

.targeting .form .buttons {
  width: 100%;
  max-width: 27.5rem;
  height: 3.375rem;

  & .btn {
    width: 100%;
  }
}

.targeting .dropdown-with-title {
  top: 4rem;
}

/* site-listings */

.site-listing-table.cell:nth-child(1) {
  width: 12%;
}

.site-listing-table.cell:nth-child(2) {
  width: 68%;
  height: 2.5rem;
}

.site-listing-table.cell:nth-child(3) {
  width: 20%;

  & .row {
    padding: 0;
    background-color: transparent;
  }
}

/* keywords */

.keyword-table.cell:nth-child(1) {
  width: 12%;
}

.keyword-table.cell:nth-child(2) {
  width: 68%;
  height: 2.5rem;
}

.keyword-table.cell:nth-child(3) {
  width: 20%;

  & .row {
    padding: 0;
    background-color: transparent;
  }
}
/* audiences */

.campaign-creation .frame .campaign-creation-content:has(.audience-table) {
  width: 100%;
  margin: 0;
}

.audience-search {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.audience-search .dropdown.absolute {
  top: 5.5rem;
  background-color: green;
  left: 0.1rem;
  z-index: 1;
  border-radius: 1.75rem;
  width: 100%;
  box-shadow: 0 0.25rem 0.5rem 0 rgb(12 41 51 / 6%);
}

.audience-table .column,
.site-listing-table .column,
.keyword-table .column {
  width: 42rem;
}

.audience-table .row {
  cursor: default;
}


.audience-table,
.site-listing-table {
  .column .text {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.audience-table.cell:nth-child(1) {
  width: 12%;
}

.audience-table.cell:nth-child(2) {
  width: 68%;
  height: 2.5rem;
}

.audience-table.cell:nth-child(3) {
  width: 20%;

  & .row {
    padding: 0;
    background-color: transparent;
  }
}


/* Campaign summary */

.campaign-summary .summary-table {
  padding: 0 0.2rem;
}

.campaign-creation .frame .campaign-creation-content:has(.campaign-summary) {
  width: 100%;
  margin: 0;
}

.campaign-summary {
  width: 100%;
}

.campaign-summary .summary-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 35.5rem;
  overflow-y: auto;
}

.row.summary-table {
  width: 28.4375rem;
}

.campaign-summary .validation-error {
  padding-left: 1rem;
  color: var(--goji-red);
  font-size: 0.625rem;
}

.summary-table .column:has(.show-ads) {
  background-color: var(--c-secondary-400);
  border-radius: 1.875rem;
  width: 28.4375rem;
  padding: 0 0 0.5rem 0;

  & .row.summary-table {
    background-color: var(--c-secondary-400);
  }

  & .show-ads .ads-view {
    display: flex;
    flex-direction: column;
    width: 27.4375rem;
    margin: 0 auto;
    gap: 0.5rem;

    & .row {
      padding: 0 0.2rem;
      background-color: var(--c-gray-100);
    }
  }
}

.ads-view .cell:nth-child(1) {
  width: 18%;
}

.ads-view .cell:nth-child(2) {
  width: 40%;
  height: 2.5rem;

  .column .text {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.ads-view .cell:nth-child(3) {
  width: 30%;
  height: 2.5rem;
}

.ads-view .cell:nth-child(4) {
  width: 12%;
  overflow: visible;

  & .heroicons {
    background-color: var(--c-gray-500);
  }
}

.summary-table.cell:nth-child(1) {
  width: 12%;

  & .heroicons {
    background-color: var(--white);
  }
}

.summary-table.cell:nth-child(2) {
  width: 68%;
}

.summary-table.cell:nth-child(3) {
  width: 20%;

  & .btn {
    margin-left: auto;
  }
}

/* Campaign Creation Navigation */
.campaign-creation-navigation {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  padding-bottom: 2rem;
  background-color: var(--white);
}

.campaign-creation-navigation .navigation-link {
  margin-left: auto;
  margin-bottom: 0.5rem;
}

.campaign-creation-navigation .navigation-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: auto;
  height: 3rem;
}

.campaign-creation-navigation .navigation-cancel {
  margin-right: auto;

  .btn {
    width: 12.5625rem;
  }
}

.campaign-creation-navigation .navigation-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 25.625rem;

  .btn {
    width: 12.5625rem;
  }
}

.payments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28.4375rem;
  height: 100%;
  margin: auto;
}

.payments.done {
  width: 30.625rem;
  padding: 2.5rem;
  gap: 2rem;
  text-align: center;
}

.payments.done .btn {
  width: 15rem;
}

.done-title {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.done-summary {
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-text-color);
}

.payments .payment-title {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--primary-text-color);
  padding-bottom: 2.75rem;
  text-align: center;
}

.payment-description {
  display: flex;
  justify-content: center;
}

.payments .payment-summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 12.375rem;
  justify-content: space-between;
  align-items: space-between;
}

.payment-summary .payment-summary-row,
.payments .payment-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-summary-row .payment-summary-row-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

.payment-summary-row .payment-summary-row-amount {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.payments .payment-divider {
  display: flex;
  width: 100%;
  height: 1px;
  background-color: var(--c-grey-300);
}

.payments .payment-summary-row-total-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.payments .payment-summary-row-total-amount {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.payments .payment-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.payment-buttons .btn {
  width: 13.96875rem;
}

.payments .payment-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

.payment-logos .payment-logo {
  width: 3.25rem;
  height: 3.25rem;
}

.payments .validation-errors {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-bottom: 1rem;
}

.payments .validation-errors .validation-error {
  color: var(--goji-red);
  font-size: 0.625rem;
}

/* Login Page */

/* resets the padding set at the main-layout class */
.main-layout:has(.login-page) {
  padding: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
}

.login-page {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
  background-color: var(--white);
}

.login-page .form {
  gap: 2rem;
  width: 25.625rem;
  height: 18.625rem;
}

.btn.login-signup {
  width: 25.625rem;
}
.message-container {
  gap: 0.75rem;
  width: 25.625rem;
  height: 6.5625rem;
}

.email-link-sent {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.form-title {
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 2.813rem;
  font-style: normal;
  text-align: center;
  color: var(--primary-text-color);
  width: 25.625rem;
  height: 2.8125rem;
}

.form-subtitle {
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5rem;
  color: var(--primary-text-color);
  text-align: center;
  padding-top: 0.75rem;
}

.input-group {
  gap: 0.5rem;
  width: 25.625rem;
  height: 4.75rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.input-password-container {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.password-icon {
  width: 1.4375rem;
  height: 1.4375rem;
  position: absolute;
  top: 0.8rem;
  right: 0.9375rem;
  cursor: pointer;
  color: #07404e;
}

.gtm-name {
  width: 100%;
  color: var(--primary-text-color);
  text-overflow: ellipsis;
  overflow: hidden;
}

.login-page .forgot-password-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-top: 2rem;
  gap: 2rem;
  width: 26.25rem;
  height: 1.25rem;
}

.login-page .forgot-password {
  /* width: 7.25rem; according to design when font-family is 'Gilroy' */
  width: 8rem;
  height: 1.25rem;
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem;
  margin: 0.5rem;
  line-height: 1.25rem;
  text-align: center;
  background-color: var(--white);
  color: var(--c-grey-800);
  cursor: pointer;
}

.login-page .sign-up-component {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 39.5rem;
  height: 1.5rem;
}

.login-page .signup-label {
  height: 1.5rem;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  color: var(--c-grey-800);
}

.log-in-signup-link {
  height: 1.1875rem;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1875rem;
  text-align: center;
  background-color: var(--white);
  color: var(--primary-text-color);
  cursor: pointer;
}


/* Sign Up Page */

/* resets the padding set at the main-layout class */
.main-layout:has(.sign-up-page) {
  padding: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
}

.sign-up-page {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
  background-color: var(--white);
}

.sign-up-page .finish-signup-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sign-up-page .finish-signup-image img {
  object-fit: cover;
}

.sign-up-page .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  max-width: 25.625rem;
}

.sign-up-page .message-container {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
  height: auto;
}

.sign-up-page .form-title {
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 2.813rem;
  color: var(--primary-text-color);
}

.sign-up-page .form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.sign-up-page .input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}

.sign-up-page .login-component {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.sign-up-page .form-group {
  width: 100%;
}

.sign-up-page .password-requirements {
  font-size: 0.75rem;
  color: var(--secondary-text-color);
  line-height: 1rem;
  margin-top: -0.5rem;
}

.sign-up-page .terms-notice {
  font-size: 0.75rem;
  color: var(--secondary-text-color);
  text-align: center;
  line-height: 1rem;
  margin-top: 1rem;
}

.sign-up-page .terms-notice a {
  color: var(--primary-text-color);
  text-decoration: underline;
}

.sign-up-page .social-login {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.sign-up-page .social-login .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--white);
  border: 1px solid var(--c-grey-300);
  color: var(--primary-text-color);
}

.sign-up-page .social-login img {
  width: 1.25rem;
  height: 1.25rem;
}

.sign-up-page .sign-up-component {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 1.5rem;
  margin-top: 2rem;
}

.sign-up-page .login-label {
  height: 1.5rem;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  color: var(--c-grey-800);
}

.sign-up-page .btn {
  width: 100%;
  font-size: 0.875rem;
}

.sign-up-page .log-in:hover {
  text-decoration: underline;
}

/* resets the padding set at the main-layout class */
.main-layout:has(.create-new-password) {
  padding: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  background-color: var(--white);
}

/* Create new password */
.create-new-password {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: var(--white);
}

.create-new-password .form {
  gap: 2rem;
  width: 25.625rem;
}

.create-new-password .form-subtitle {
  display: flex;
  padding-top: 1.5rem;
}

.create-new-password .info {
  padding-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  width: 25.625rem;
  height: 2.25rem;
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--c-grey-800);
}

.create-new-password .btn {
  width: 100%;
}

/* Email Verification Page */

/* resets the padding set at the main-layout class */
.main-layout:has(.email-verification-page) {
  padding: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
}

.email-verification-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  /* Use dvh for dynamic viewport height */
  background-color: var(--primary-background-color);
  padding: 2rem;
  /* Add some padding */
  color: var(--primary-text-color);
}

.email-verification-page .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 40rem;
  gap: 0.5rem;
  /* Adjust max-width as needed */
}

.email-verification-page .title {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--primary-text-color);
  margin-bottom: 1.5rem;
}

.email-verification-page .text {
  font-size: 1rem;
  color: var(--primary-text-color);
  line-height: 1.6;
  margin-bottom: 0.5rem;
  max-width: 30rem;
  text-wrap: wrap;
}

.email-verification-page .email {
  font-weight: 600;
  color: var(--primary-text-color);
  margin-bottom: 1.5rem;
}

.email-verification-instruction {
  font-size: 1rem;
  color: var(--primary-text-color);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 30rem;
}

.email-verification-page .btn {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-text-color);
  text-decoration: underline;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  height: inherit;
  width: 100%;
}

.email-verification-page .links-container {
  display: flex;
  flex-direction: column;
}

.links-container .button.disabled {
  color: var(--secondary-text-color);
  text-decoration: none;
  cursor: default;
}

.sign-up-page .dropdown-relative .dropdown-button {
  width: 100%;
  text-align: left;
  justify-content: space-between;
  background-color: var(--primary-background-color);
  border: 1px solid var(--input-border-color);
  color: var(--primary-text-color);
}

.sign-up-page .dropdown-relative .dropdown-button:hover {
  border-color: var(--input-border-color-hover);
}

.sign-up-page .dropdown-relative .dropdown-button span {
  color: var(--secondary-text-color);
}

.sign-up-page .dropdown-relative .dropdown-button span:not(:empty) {
  color: var(--primary-text-color);
}

.sign-up-page .radio-button-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 1rem;
}

.currencies {
  display: flex;
  flex-direction: column;
  position: relative;
}

.currencies .btn {
  width: 10rem;
}

.currencies .dropdown.absolute {
  width: fit-content;
  top: 5.2rem;
  position: absolute;
  z-index: 1;
}


.flag {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
}

.flag img {
  object-fit: contain;
}

.flag img.eur {
  content: url("/assets/european.webp");
}

.flag img.usd {
  content: url("/assets/united-states.webp");
}

.flag img.gbp {
  content: url("/assets/united-kingdom.webp");
}

.sign-up-page .dropdown-absolute {
  width: 100%;
}

.sign-up-page .button.button-full {
  width: 100%;
  box-sizing: border-box;
}

.sign-up-page .dropdown-absolute .dropdown-menu {
  max-height: 9.375rem;
  overflow-y: auto;
}

/* Found us dropdown styles */

.found-us-container {
  width: 100%;
}

.dropdown.absolute.found-us-dropdown {
  top: 5.5rem;

}

.found-us-dropdown {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 1rem;
}

.found-us-dropdown .dropdown-container {
  display: flex;
}

.found-us-dropdown button.tertiary.navigation {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  gap: 0.75rem;
  width: 100%;
  height: 3rem;
  border: 1px solid var(--c-grey-400);
  border-radius: 1.875;
}

.found-us-dropdown .dropdown-content {
  flex-grow: 1;
  color: inherit;
  text-align: left;
  text-wrap: auto;
  color: var(--secondary-text-color);
  font-size: 0.875rem;
  font-weight: 400;
  font-family: Outfit, sans-serif;
  opacity: 1; /* Firefox */
}

.found-us-dropdown .dropdown-content .selection {
  color: var(--primary-text-color);
}

/* Continue button in finish signup */
.continue-button {
  background-color: #a6c1c8;
  border: none;
  color: white;
  border-radius: 2rem;
  font-weight: 500;
  margin-top: 1rem;
  transition: background-color 0.2s ease;
}

.continue-button:hover {
  background-color: #8eaeb7;
}

.continue-button:disabled {
  background-color: #d8e0e2;
  cursor: not-allowed;
}

/* Verify Email Page */
.verify-email-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.verify-email-content {
  background-color: var(--secondary-background-color, #fff);
  padding: 2rem 3rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.verify-email-content h2 {
  color: var(--primary-text-color, #192e37);
  margin-bottom: 0.5rem;
}

.verify-email-content p {
  color: var(--secondary-text-color, #6e8286);
}

@media (max-width: 992px) {
  .login-page {
    flex-direction: column;
  }

  .login-page .container {
    width: 100%;
    height: 100dvh;
    justify-content: flex-start;
    padding-top: 5rem;
  }
}

/* Media query for smaller screens */
@media (max-width: 992px) {
  .sign-up-page,
  .login-page {
    flex-direction: column;
  }

  .left {
    width: 100%;
    height: 30vh;
    order: 1;
  }

  .right {
    width: 100%;
    height: auto;
    padding: 2rem 1rem;
    order: 2;
  }

  .sign-up-page .container {
    gap: 1rem;
  }

  .sign-up-page .form {
    gap: 0.75rem;
  }
}

/*==============================
7. Utilities / Helpers
==============================*/
/* .text-center, .d-none, .mt-2, etc. */

.full-width {
  width: 100%;
}

.fit-content-width {
  width: fit-content;
}

.full-height {
  height: 100%;
}

.fit-content-height {
  height: fit-content;
}

.horizontal-space-between {
  justify-content: space-between;
}

.horizontal-space-around {
  justify-content: space-around;
}

.horizontal-centered {
  justify-content: center;
}

.horizontal-start {
  justify-content: flex-start;
}

.horizontal-end {
  justify-content: flex-end;
}

.vertical-centered {
  align-items: center;
}

.vertical-start {
  align-items: flex-start;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.gap05 {
  gap: 0.5rem;
}
.gap1 {
  gap: 1rem;
}

.primary-color {
  color: var(--c-grey-950);
}
.secondary-color {
  color: var(--c-grey-800);
}

.left {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  background-color: var(--c-grey-200);
}

.left img {
  display: flex;
  width: 60%;
  height: 60%;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  height: 100%;
}

/* user inputs */
.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  position: relative;
}

.form-group.date-selection {
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-group.interval-date-selection {
  display: flex;
  flex-direction: column;
  width: 27.5rem;
  height: 100%;
}

.form-group.interval-date-selection .interval-date-selection-row {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 1.875rem;
}

.interval-date-selection-row .user-input-date-label {
  color: var(--secondary-text-color);
  font-size: 0.875rem;
}

.interval-date-selection-row .interval {
  display: flex;
  width: 100%;
  height: 3rem;
  border-radius: 1.875rem;
  border: 1px solid var(--c-grey-400);
  cursor: pointer;

  &:hover {
    border: 1px solid var(--tertiary-button-border-hover-color);
  }

  &:active {
    border: 1px solid var(--tertiary-button-border-pressed-color);
  }
}

.date-selection .interval-date-selection-row .interval {
  margin-top: 0;
  height: 3.375rem;
}

.interval-date-selection-row .left,
.interval-date-selection-row .right,
.interval-date-selection-row .interval .left,
.interval-date-selection-row .interval .right {
  background-color: white;
  align-items: flex-start;
  padding: 0 0.5rem 0 1rem;
  border-radius: 1.875rem;
}

.interval .left .input-date-selection,
.interval .right .input-date-selection {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: flex-start;
}


.form-group .input-date-selection {
  width: 7.5rem;
  color: var(--primary-text-color);
  font-size: 0.875rem;
}

.interval .left .input-date-selection.selected,
.interval .right .input-date-selection.selected {
  border-bottom: 1px solid var(--c-red-600);
}

.interval .right .input-date-selection .heroicons.end {
  margin-left: auto;
}

.form-group.date-selection .user-input-date-label {
  color: var(--secondary-text-color);
  font-size:  0.875rem;
  margin-bottom: 0.75rem;
}

.form-group.date-selection .input-date-selection-calendar {
  display: flex;
  flex-direction: column;
}

.form-group.date-selection .input-date-selection {
  display: flex;
  border-radius: 1.875rem;
  width: 13.25rem;
  height: 3rem;
  background-color: var(--white);
  border: 1px solid var(--c-grey-400);
  padding: 0.875rem 1rem;
  gap: 0.75rem;
  position: relative;
}

.form-group.date-selection .input-date-selection .heroicons {
  color: var(--primary-text-color);
}

.form-group.date-selection .input-date-selection .hide-input-label {
  width: 7.5rem;
  color: var(--secondary-text-color);
  font-size: 0.875rem;
}

.form-group.date-selection .input-date-selection .hide-input-label.selected {
  color: var(--primary-text-color);
}

.form .currency-input {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.currency-dropdown {
  top: 5.5rem;
  z-index: 1;
  width: 11.75rem;
}

.form .number-input {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.campaign-creation-content .right-side-panel-content .main .form {
  align-items: flex-start;
  gap: 2rem;
}

.form .number-input .legend {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 300;
  pointer-events: none; /* Allows clicking through to input */
  z-index: 1;
  min-width: 20px;
}

.form .number-input input[type="text"].with-legend {
  padding-left: 2rem; /* Make room for legend */
}

.form .errors {
  margin-top: 15px;
  display: block;
  font-size: 1rem;
  color: var(--goji-red);
  width: 100%;
  text-align: left;
}

.form .user-input-title {
  color: var(--primary-text-color);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  width: 100%;
}

.user-input-title.with-icon {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

.form .user-input-subtitle {
  color: var(--secondary-text-color);
  font-size: 0.625rem;
  position: absolute;
  right: 1rem;
}

.form .user-input-date-selection {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
}

.form-group .validation-error {
  display: block;
  font-size: 0.625rem;
  color: var(--goji-red);
  width: 100%;
  text-align: left;
}

::placeholder {
  color: var(--secondary-text-color);
  font-size: 0.875rem;
  font-weight: 400;
  font-family: Outfit, sans-serif;
  opacity: 1; /* Firefox */
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem;
  outline: none;
  border: 1px solid var(--c-grey-400);
  background-color: var(--white);
  display: inline-block;
  box-sizing: border-box;
  border-radius: 1.875rem;
  font-family: inherit;
  color: var(--primary-text-color);
}

.search-bar input[type="text"] {
  border: 1px solid transparent;
}

/* Fixes the ugly colors of input autofill */

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group textarea:-webkit-autofill,
.form-group textarea:-webkit-autofill:hover,
.form-group textarea:-webkit-autofill:focus,
.form-group select:-webkit-autofill,
.form-group select:-webkit-autofill:hover,
.form-group select:-webkit-autofill:focus {
  border: 1px solid var(--c-grey-400);
  -webkit-text-fill-color: var(--primary-text-color);
  caret-color: black;
  transition: background-color 5000s ease-in-out 0s;
  font-size: inherit;
  font-family: inherit;
}

.all-campaigns-link,
.new-ad-link,
.show-more-suggestions,
.remove-audiences-link,
.navigation-link {
  margin-left: auto;
  color: var(--c-red-400);
  font-size: 0.875rem;
  padding-right: 1.5rem;
  cursor: pointer;
}

/* OLD CSS below here  */

.light-mode {
  color-scheme: light;
}

.dark-mode {
  color-scheme: dark;
}



.gtm-container .dropdown-menu {
  position: absolute;
  overflow-y: auto;
}

.tracking-container .dropdown-menu {
  max-height: 8rem;
}

.found-us-dropdown .dropdown-menu {
  position: absolute;
  top: unset;
  max-height: 6rem;
  overflow-y: auto;
}

.tracking-controls-container
.advertiser-name-selector .btn {
  height: 100%;
}

.tracking-controls-container
.advertiser-name-selector
.click-away-listener
.dropdown-with-title {
  top: 1.5rem;
}

.chart-container
.advertiser-name-selector
.click-away-listener
.dropdown-with-title {
  top: 1.5rem;
}

.chart-container .dropdown-closed-container {
  width: 17.25rem;
}

.campaign-table-header-container
.click-away-listener
.dropdown-with-title
.dropdown-menu {
  top: 1.6rem;
}


.tracking-controls-container
.click-away-listener
.dropdown-with-title
.dropdown-menu {
  top: 0.5rem;
}



/* modal repeat dialogue */

.modal .repeat-dialogue {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  margin: auto;
  background-color: var(--white);
  width: 30.625rem;
  border-radius: 2rem;
  padding: 2.5rem;
}

.repeat-dialogue .repeat-title {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.repeat-dialogue .repeat-description {
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-text-color);
  text-align: center;
  margin-bottom: 2rem;
}

.repeat-dialogue .input-date-selection {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: flex-start;
}

.repeat-dialogue .repeat-dialogue-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin-top: 2rem;
}


.navigation-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.right-side-panel-content .header {
  display: block;
  flex-grow: 1;
}

.right-side-panel-content .main {
  display: block;
  flex-grow: 20;
  overflow-y: auto;
  margin-bottom: 3rem;
}

.right-side-panel-content .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.125rem;
}

.user-profile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.125rem;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-profile .profile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-grey-300);
  color: var(--secondary-text-color);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1rem;
  width: 3.375rem;
  height: 3.375rem;
  padding: 0.7rem;
  border-radius: 1.6875rem;
}

.user-profile .user-information {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 3.25rem;
}

.user-profile .user-information .user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-text-color);
  margin: 0;
  line-height: 1.25rem;
}

.user-profile .user-information .company-name {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--secondary-text-color);
  text-overflow: ellipsis;
  overflow: hidden;
  width: 15rem;
  margin: 0;
  line-height: 1rem;
}

.user-profile .user-information .user-email {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--secondary-text-color);
  margin: 0;
  line-height: 1rem;
}



/* page */

.main-layout .page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.page .page-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding-bottom: 1.5rem;
}

.page-title {
  font-size: 2.5rem;
  line-height: 4.5rem;
  color: var(--primary-text-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* My Overview page */

.empty-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.campaign-performance-panel {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  border-radius: 2rem;
  background-color: var(--secondary-background-color);
  padding: 1.5rem;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.main-layout:has(.campaign-creation) {
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
  background-color: var(--white);
}

.main-layout .campaign-creation {
  background-color: var(--white);

  /* override padding of main-layout */

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow-y: auto;
}

.campaign-creation .frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.625rem 2.75rem;
  width: 100%;
  height: 100%;
}

.campaign-creation .frame .form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 2rem;
}

.campaign-creation .frame .campaign-creation-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  width: 27.5rem;
  margin: 2rem;
  gap: 2rem;
}

.campaign-creation-content .step-title {
  font-size: 2.5rem;
  text-align: center;
}

.campaign-creation-content .step-description {
  font-size: 1rem;
  text-align: center;
  font-weight: 400;
  width: 27rem;
  height: 3.25rem;
}

.campaign-creation-content .step-description.wide {
  width: 29rem;
}

.step-title:has(.tracking-container) {
  width: 35rem;
}

.tracking-container .step-title {
  padding-bottom: 1rem;
}

.tracking-container .step-description {
  padding-bottom: 1rem;
}


.select-input {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.select-input .loader {
  margin-left: 2rem;
  margin-top: 0.5rem;
}

.selected-items,
.selected-audiences {
  display: flex;
  gap: 0.5rem;
  flex-flow: row wrap;
  width: 100%;
  margin-top: 0.5rem;
  max-height: 19rem;
  overflow-y: auto;
}

.selected-audiences .remove-row {
  width: 100%;
  display: flex;
}

.remove-row .remove-audiences-link {
  margin-left: auto;
}

.selected-language-container {
  margin-top: 0.5rem;
}

.media-uploader-viewer {
  flex-flow: column;
  width: 100%;
  max-height: 25.625rem;
}

.media-uploader-viewer .media-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--c-grey-800);
  border-radius: 1rem;
  width: 100%;
  height: 9.75rem;
  margin-bottom: 0.5rem;
}

.media-uploader .media-uploader-icon {
  content: url("/assets/blank_page.png");
  width: 5rem;
  height: 5rem;
}

.media-uploader .media-uploader-instruction {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

.media-uploader .media-uploader-instruction .media-click {
  font-size: 0.75rem;
  color: var(--secondary-text-color);
  text-decoration: var(--secondary-text-color) underline;
  cursor: pointer;
}

.media-uploader .media-uploader-instruction p {
  font-size: 0.75rem;
  color: var(--secondary-text-color);
  text-decoration-color: var(--secondary-text-color);
}

.uploaded-media-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.75rem;
}

.uploaded-media-viewer.server-media {
  padding-bottom: 1rem;
  margin-top: 0.75rem;
}

.uploaded-media-viewer .invalid-media-dimensions {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.uploaded-media-viewer .invalid-media-dimensions .invalid-media-dimensions-msg {
  font-size: 0.75rem;
  color: var(--c-red-600);
  margin-right: 0.5rem;
}

.uploaded-media {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--c-grey-200);
  height: 3.625rem;
  border-radius: 3.75rem;
  padding: 0.5rem;
  gap: 0.5rem;
  border: var(--uploaded-media-border);
}

.uploaded-media .media-edit-options {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.uploaded-media .media-edit-options .media-edit-warning {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-red-600);
  white-space: nowrap;
}

.uploaded-media .media-edit-options .media-edit-success {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-green-400);
  white-space: nowrap;
}

.uploaded-media .media-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin-right: 0.5rem;
}

.uploaded-media .media-data .media-file-size {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.uploaded-media .media-data .media-filename {
  font-size: 0.75rem;
  color: var(--primary-text-color);
  font-weight: 600;
}

.uploaded-media .media-data .media-file-size .media-filename {
  font-size: 0.75rem;
  color: var(--primary-text-color);
  font-weight: 600;
}

.uploaded-media .media-data .media-file-size .media-filesize {
  font-size: 0.75rem;
  color: var(--secondary-text-color);
  font-weight: 500;
}

.uploaded-media .media-data .media-uploader-background {
  display: flex;
  width: 100%;
  height: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--c-grey-400);
  align-items: center;
  justify-content: flex-start;
}

.uploaded-media .media-data .media-uploader {
  display: block;
  width: var(--media-uploader-width-percentage);
  height: 0.25rem;
  border: none;
  border-radius: 0.25rem;
  background-color: var(--media-uploader-background-color);
  padding: 0;
  margin: 0;
}

/* Modal Media Editor */

.modal .media-resizer-container {
  display: flex;
  flex-direction: column;
  z-index: 1;
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  padding: 1.5rem 1.75rem;
}

.media-resizer-container .media-resizer {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  padding: 2rem;
  overflow: auto;
}

.media-resizer .media-resizer-title-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.media-resizer .media-resizer-title-button .media-resizer-title {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.media-resizer .media-resizer-subtitle {
  display: flex;
}

.media-resizer .media-resizer-subtitle-text {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--secondary-text-color);
}

.media-resizer .media-resizer-subtitle-accent {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-text-color);
  margin: 0 0.2rem;
}

.media-resizer .editor-row {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  height: 100%;
}

.media-resizer .editor-row .editor-column {
  display: flex;
  flex-direction: column;
  width: calc(50% - 4rem);
  height: 100%;
  padding-bottom: 0.5rem;
  gap: 0.5rem;
  overflow-y: auto;
}

.editor-column-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.media-resizer .editor-row .editor-column .column-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-text-color);
  margin-top: 1rem;
  gap: 0.75rem;
}

.editor-column .resizer-save-cancel-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  gap: 0.5rem;
  align-items: center;
  margin-top: auto;
  height: 5.5rem;
}

/* Preview of media to edit */

.preview-media-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 17.9375rem;
  border-radius: 1.5rem;
  margin-bottom: 1rem;
  background-color: var(--c-grey-300);
  position: relative;
}

.preview-media-container .preview-media {
  max-width: auto;
  max-height: 100%;
}

.preview-media-container .percentage-button-container {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

.crop-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 17rem;
  height: 17rem;
  max-height: 17.9375rem;
}

.editor-column .resize-frames {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.2rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.resize-frames .selected-frames {
  background-color: var(--white);
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  gap: 0.2rem;
  list-style-type: none;
  width: 100%;
  max-height: calc(100% - 0.1rem);
  min-height: 5rem;
  overflow-y: auto;
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 0.5rem 0.3rem 0 rgb(12 41 51 / 4%);
}

.selected-frames .selected-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--primary-text-color);
  height: 2.5rem;

  &:hover {
    background: var(--c-grey-200);
  }
}

.selected-frames .selected-frame .selected-frame-label,
.selected-frames .selected-frame input,
.selected-frames .selected-frame .frame-outline {
  display: flex;
  align-items: center;
  inset: 0;
  overflow: hidden;
}

.installation .radio-button-input {
  color: var(--c-grey-800);
}

.installation input[type="radio"]:checked + label {
  color: var(--c-blue-900);
}

.selected-frames .selected-frame input[type="radio"] {
  opacity: 0;
}

.selected-frames .selected-frame input[type="radio"]:checked + label,
.checked + label.selected-frame-label {
  background: var(--c-grey-200);
}

.selected-frames .selected-frame .selected-frame-label {
  cursor: pointer;
  width: 100%;
}

.selected-frames .selected-frame .frame-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  background-color: var(--c-grey-300);
  pointer-events: none;
  margin-left: auto;
  align-self: center;
  overflow: hidden;
}

.selected-frames .selected-frame .frame-outline .frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--frame-width);
  height: var(--frame-height);
  border-radius: 0.25rem;
  padding: 0;
  background-color: var(--c-blue-500);
  pointer-events: none;
}

.audience-panel .audience-save-cancel-buttons {
  display: flex;
  flex-direction: row;
  background-color: var(--white);
  gap: 1rem;
  justify-content: space-between;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  width: 25.625rem;
  height: 5.5rem;
}

/* Modal Media guidelines */
.modal .media-guidelines {
  display: flex;
  flex-direction: column;
  z-index: 1;
  margin: auto;
  background-color: var(--white);
  width: 39.8125rem;
  height: fit-content;
  border-radius: 1.75rem;
  box-shadow: 0 0.25rem 0.5rem 0 rgb(12 41 51 / 20%);
  padding: 1.5rem;
}

.media-guidelines .modal-title-close-button {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: fit-content;
  align-items: flex-start;
  justify-content: space-between;
}

.media-guidelines .btn.icon-button {
  --icon-bg-color: transparent;
}

.media-guidelines .modal-title-close-button .modal-title {
  font-size: 1.875rem;
  color: var(--primary-text-color);
}

.media-guidelines .media-guidelines-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: 0.75rem;
  word-break: break-all;
  white-space: pre-wrap;
  font-weight: 400;
  color: var(--primary-text-color);

  p {
    font-weight: 600;
    margin: 0.5rem 0;
  }

  ul {
    list-style-position: inside;
    padding-inline-start: 0.5rem;
  }

  a {
    margin: 0.2rem 0;
  }
}

.right-side-panel-content .redirect-buttons {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  padding: 0 1.5rem 0 2.6rem;
}

.content .campaign-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* Campaign details page */

.campaign-detail-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.campaign-detail-content .empty-view-message {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: pre-wrap;
  min-width: 36rem;
  height: 6rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.campaign-detail-content .campaign-detail-empty-view-message {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
  white-space: pre-wrap;
  padding-top: 1rem;
}

.campaign-detail-content .campaign-detail-empty-state {
  content: url("/assets/empty_state.png");
}

.campaign-detail-content .campaign-detail-chart-empty-state {
  content: url("/assets/empty_state_charts.svg");
}

.campaign-detail-content .campaign-detail-top-sites-apps-empty-state {
  margin-top: 2rem;
  content: url("/assets/empty_state_top_sites_apps.svg");
}

.campaign-details-interval {
  white-space: pre;
}

.campaign-performance-panel .campaign-performance-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.campaign-performance-row .campaign-performance-left-column {
  display: flex;
  flex-direction: column;
  width: 54.5rem;
  min-width: 54.5rem;
  height: 100%;
  gap: 1rem;
}

.campaign-performance-left-column .column-title,
.campaign-performance-right-column .column-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

.chart-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 26.5rem;
}

.chart-container .chart-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.chart-row .chart-interval {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  width: 12.875rem;
  height: 3.375rem;
  border-radius: 1.875rem;
  color: var(--primary-text-color);
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.5rem;
  padding: 0 1.5rem;
}

.campaign-performance-left-column .chart-container,
.campaign-performance-left-column .top-site-apps-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--c-grey-200);
  border-radius: 1.25rem;
  padding: 1.5rem;
  gap: 1.5rem;
}

.campaign-performance-left-column .top-site-apps-area {
  height: 100%;
}

.chart-container.chart-empty,
.top-site-apps-area.chart-empty {
  height: 26.5rem;
}

.chart-container .campaign-detail-charts {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.campaign-detail-charts .chart-area-legend-area {
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.chart-area-legend-area .chart-area-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.chart-area-legend .chart-area-legend-color {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--legend-color);
}

.chart-area-legend .chart-area-legend-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

/* campaign graph tooltip */

.tooltip-container {
  background-color: var(--white);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: fit-content;
  padding: 5;
  box-sizing: border-box;
  border-radius: 6;
  border-style: solid;
  border-width: 1;
  border-color: var(--c-grey-300);
}

.tooltip-rows {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.campaign-performance-row .campaign-performance-right-column {
  display: flex;
  flex-direction: column;
  width: 26rem;
  min-width: 26rem;
  height: 100%;
  gap: 1rem;
}

.app-site-icon {
  display: flex;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  align-items: center;
  border-radius: 50%;
  background-color: var(--c-grey-200);
}

.app-site-rate {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.app-site-rate .rate.green {
  color: var(--health-metric-green-color);
}

.app-site-rate .rate.yellow {
  color: var(--health-metric-yellow-color);
}

.app-site-rate .rate.red {
  color: var(--health-metric-red-color);
}

.app-site-rate .rate.grey {
  color: var(--health-metric-grey-color);
}

/* suggestions */

.campaign-performance-right-column .suggestions-title-row {
  display: flex;
  align-items: center;
}

.campaign-performance-right-column .suggestions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.suggestions .suggestion {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-background-color);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin: 0;
}

.campaign-performance-right-column .suggestions .suggestion {
  width: 26rem;
}

.right-side-panel .content .suggestions .suggestion {
  width: 25.625rem;
}

.suggestions .suggestion.empty-state {
  height: 5.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.suggestion .suggestion-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.suggestion-content-row {
  display: flex;
  width: 18.75rem;
}

.suggestion-title {
  width: 14.875rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

.suggestion-description {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.suggestion-detail .suggestion-type {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.suggestion-skip-accept-buttons {
  display: flex;
  width: 100%;
  gap: 1rem;
  margin-top: auto;
}

.suggestion-health-row {
  display: flex;
  width: fit-content;
  align-items: center;
  height: 1.75rem;
  gap: 0.2rem;
  margin-top: 0.1rem;
}

.suggestion-health-score-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.suggestion-health {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--health-metric-green-color);
}

.suggestion-trend-up-icon {
  color: var(--health-metric-green-color);
}

.suggestion .suggestion-column {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.suggestion-buttons-row {
  display: flex;
  margin-top: auto;
  width: 100%;
  gap: 0.5rem;
}

.suggestion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  background-color: var(--c-grey-300);
}

.suggestion-icon.small {
  width: 1.875rem;
  height: 1.875rem;
}

.suggestion-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 25.625rem;
  gap: 1rem;
}

/* Blacklist hour suggestion */

.blacklist-hours {
  gap: 1.5rem;
}

.blacklist-hours .blacklist-item-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blacklist-item-row .blacklist-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  background-color: var(--c-grey-300);
}

.blacklist-item-row .blacklist-item-column {
  display: flex;
  flex-direction: column;
}

.blacklist-item-column .blacklist-column-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.blacklist-item-column .blacklist-column-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

.blacklist-hours .performance-distribution {
  display: flex;
  padding: 2rem 0;
}

/* Blacklist-sites suggestion */

.blacklist-sites {
  gap: 1.5rem;
}

.blacklist-sites .sites-apps {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 0;
  max-height: 15rem;
  overflow: auto;
}

.sites-apps .sites-title {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--primary-text-color);
  gap: 1rem;
}

.sites-apps .site {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--secondary-text-color);
  padding-left: 1rem;
}

/* Disable ads suggestion */

.disable-ads {
  display: flex;
  flex-direction: column;
  max-width: 25.625rem;
}

.disable-ads .disable-ad,
.disable-ads .best-ad {
  display: flex;
  flex-direction: column;
}

.disable-ad .ad-name,
.best-ad .ad-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

.disable-ad .ad-preview-url,
.best-ad .ad-preview-url {
  object-fit: contain;
  max-width: 25.625rem;
  padding: 1rem 0;
}

.disable-ad .campaign-goal,
.best-ad .campaign-goal {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--primary-text-color);
}

.disable-ad .disable-ad-actual {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--health-metric-red-color);
}

.best-ad .best-ad-actual {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--health-metric-green-color);
}

/* update max bid suggestion */

.update-max-bid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.update-max-bid-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--c-grey-300);
}

.update-max-bid-column .update-max-bid-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.update-max-bid-column .update-max-bid-row.indent {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 4rem;
}

.update-max-bid-old {
  font-size: 1rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.update-max-bid-new {
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

/* update goal value suggestion */

.update-goal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.update-goal .update-goal-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.goal-old {
  font-size: 1rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

/* Update Budget suggestion */

.update-budget {
  display: flex;
  flex-direction: column;
}

.update-budget .update-budget-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.update-budget-row .budget {
  color: var(--secondary-text-color);
}

/* Blacklist keywords suggestion */

.blacklist-keywords {
  display: flex;
  flex-direction: column;
}

.blacklist-keywords .blacklist-keywords-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blacklist-keywords .blacklist-keywords-title {
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-text-color);
  gap: 1rem;
}

.blacklist-keywords .blacklist-keyword {
  padding-left: 3.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

/* top-ads */

.top-ads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 26rem;
  height: 18.3125rem;
  background-color: var(--primary-background-color);
  border-radius: 1.25rem;
  padding: 1.5rem;
}

.top-ads.empty-state {
  height: 9rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.top-ads .top-ads-title,
.top-ads.empty-state .top-ads-title,
.audience-age-gender .audience-age-gender-title,
.device-breakdown .device-breakdown-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

.top-ad {
  display: flex;
  width: 100%;
  height: 3.5625rem;
  background-color: var(--secondary-background-color);
  border-radius: 3.75rem;
  padding: 0.6875rem 1rem 0.6875rem 0.5rem;
  align-items: center;
}

.top-ad .top-ad-icon-content {
  display: flex;
  width: 13.5625rem;
  gap: 0.5rem;
}

.top-ad-icon-content .top-ad-content {
  display: flex;
  flex-direction: column;
}

.top-ad-content .top-ad-filename {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.top-ad-content .top-ad-campaign-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.top-ad .top-ad-ctr-trend {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.top-ad-ctr-trend .top-ad-ctr {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--health-metric-green-color);
}

.top-ad-ctr-trend .trend-up {
  color: var(--health-metric-green-color);
}

/* Audience, age and gender */

.audience-age-gender,
.device-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 26rem;
  height: 16.75rem;
  background-color: var(--primary-background-color);
  border-radius: 1.25rem;
  padding: 1.5rem;
}

.audience-age-gender.empty-state,
.device-breakdown.empty-state {
  height: 7.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.device-breakdown {
  height: 11.25rem;
  gap: 0.5rem;
}

.device-breakdown .chart-area-legend-area {
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.device-breakdown .chart-area-legend-area .chart-area-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.device-breakdown .chart-area-legend .chart-area-legend-color {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--legend-color);
}

.device-breakdown .chart-area-legend .chart-area-legend-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-text-color);
}

.audience-age-gender-charts {
  display: flex;
  justify-content: center;
  align-items: center;
}

.audience-age-gender-charts .left-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.audience-age-gender-charts .left-column .column-title,
.audience-age-gender-charts .right-column .column-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary-text-color);
  padding-bottom: 1rem;
}

.audience-age-gender-charts .right-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading-container {
  display: flex;
  width: 100%;
  align-items: center;
}

.loading-container .loader {
  margin-left: 50%;
}


/* Ads and Audiences table */

.ads-audience-table-container {
  width: 100%;
}


.advertiser-filter .dropdown.absolute {
  top: 3.5rem;
  z-index: 1;
}

.ads-audiences-menu-button .dropdown {
  position: relative;
}

.ads-audiences-menu-button .icon-button {
  &:hover {
    background-color: var(--c-blue-900);
    color: var(--white);
  }

  &:active {
    background-color: var(--c-blue-900);
    color: var(--white);
  }
}

.ads-audiences-menu-button .dropdown .dropdown-menu {
  position: absolute;
  width: 12.6rem;
  padding: 0.5rem 1.5rem;
  top: 0;
  right: 0;
}

.ads-audiences-table.header {
  padding: 0.5rem;
}

.ads-audiences-table.row {
  padding: 0.5rem;
  cursor: default;
}

.ads-audiences-table.cell:nth-child(1) {
  width: 10%;
  padding: 0;
}

.ads-audiences-table.cell:nth-child(2) {
  width: 20%;
}

.ads-audiences-table.cell:nth-child(3) {
  width: 10%;
}

.ads-audiences-table.cell:nth-child(4) {
  width: 28%;
}

.ads-audiences-table.cell:nth-child(5) {
  width: 28%;
}

.ads-audiences-table.cell:nth-child(6) {
  width: 4%;
}

/* Users table */
.users-table.cell:nth-child(1) {
  width: 30%;
}

.users-table.cell:nth-child(2) {
  width: 15%;
}

.users-table.cell:nth-child(3) {
  width: 45%;
}

.users-table.cell:nth-child(4) {
  width: 10%;
}

/* reporting navigation table */

.reporting-navigation-table.cell:nth-child(1) {
  width: 2%;
}

.reporting-navigation-table.cell:nth-child(2) {
  width: 50%;
}

.reporting-navigation-table.cell:nth-child(3) {
  width: 25%;
}

.reporting-navigation-table.cell:nth-child(4) {
  width: 15%;
}

.reporting-navigation-table.cell:nth-child(5) {
  width: 10%;
}

.reporting-navigation-table.cell .report-navigation {
  display: flex;
  justify-content: flex-end;
  width: 7.3rem;
}

.reporting-navigation-table.row,
.reporting-navigation-table.header {
  padding-right: 0.2rem;
}

/* reporting navigation table */

.tables .table-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  padding-right: 8rem;
}

.tables .table-list .empty-state.campaign-report {
  padding-right: 38rem;
}

.tables .table-list .empty-state .empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 0.5rem;
}

.link-arrow-top-right {
  position: absolute;
  top: -7rem;
  right: 3rem;
  transform: rotate(-90deg);
  content: url("/assets/arrow4.png");
}


.empty-view-container .link-arrow-top-right {
  top: 6rem;
  right: 20rem;
}


.tables .table-list .empty-state .empty-content .message {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
  white-space: pre-wrap;
}

.tables .table-list .empty-state .empty-content img {
  content: url("/assets/empty_state_charts.svg");
  width: 20rem;
  height: 14rem;
}




.rollup .dropdown.absolute {
  width: 11.375rem;
}

.rollup-button-label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
}

/* campaign selection tabs */

.tab-row {
  display: flex;
  width: 100%;
  align-items: center;
}

.tab-row.resize-frame-selection {
  display: flex;
  width: 100%;
  align-items: center;
}

.tab-row.resize-frame-selection .tabs {
  height: 2.75rem;
}

.tab-row.resize-frame-selection .tabs .tab [type="radio"] {
  min-width: 11.25rem;
  width: 100%;
}

.tab-row.campaign-details .tabs .tab [type="radio"] {
  min-width: 11.25rem;
  height: 3.125rem;
}

.tab-row.campaign-details-chart .tabs {
  background-color: var(--c-grey-300);
}

.tab-row.campaign-details-chart .tabs .tab [type="radio"] {
  min-width: 11rem;
  height: 3.125rem;
  background-color: var(--c-grey-300);

  &:checked {
    background-color: var(--white);
  }
}

.show-more-suggestions {
  padding-right: 2.2rem;
}

[type="radio"]:checked ~ .selected-frame-label {
  font-weight: 600;
}

/* Campaign selector advertiser filter */

.campaign-filter {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.campaign-filter .filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign-filter .icon-button .filter-i {
  font-size: 1.125rem;
}

.chart-container .dropdown .dropdown-menu .dropdown-menu-item {
  padding: 0.5rem 0.125rem 0.5rem 0.625rem;
}

/* light mode */
@media (prefers-color-scheme: light) {
  :where(.navigationbar img) {
    content: url("/assets/AG_logo_complete_lightmode.svg");
  }
}

@media (prefers-color-scheme: dark) {
  :where(.navigationbar img) {
    content: url("/assets/AG_logo_complete_lightmode.svg"); /* change when darkmode is implemented */
  }
}

.icon-with-text {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  color: var(--primary-button-background-color);
  cursor: pointer;
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.guidelines-link {
  display: flex;
  font-size: 0.85rem;
  color: var(--primary-text-color);
  width: 27.5rem;
  height: 100%;
  justify-content: start;
}

.navigation-bar-separator {
  margin-top: 0.75rem;
}

.tables-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  border-radius: 2rem;
  background-color: var(--secondary-background-color);
  padding: 1.5rem;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.tables-content .tables {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 6.25rem;
}

.table-list {
  padding-top: 1rem;
}

.status-dot {
  display: flex;
  align-items: center;
}

.status-dot.active::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--c-green-400);
  border-radius: 50%;
  margin-right: 0.75rem;
}

.status-dot.stopped::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--c-red-700);
  border-radius: 50%;
  margin-right: 0.75rem;
}

.status-dot.paused::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--c-yellow-600);
  border-radius: 50%;
  margin-right: 0.75rem;
}

.status-dot.expired::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--c-grey-800);
  border-radius: 50%;
  margin-right: 0.75rem;
}

.status-dot.scheduled::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--c-orange-600);
  border-radius: 50%;
  margin-right: 0.75rem;
}

.status-dot.draft::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--c-blue-200);
  border-radius: 50%;
  margin-right: 0.75rem;
}

.advertiser-controls-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.advertiser-controls-container .button-search {
  display: flex;
  gap: 0.2rem;
}

.advertiser-filter {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 3rem;
}

.advertiser-panel-content {
  margin-top: 2rem;
  width: 100%;
}

.advertiser-panel-row {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

.advertiser-panel-row .item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  background-color: var(--c-grey-300);
}

.advertiser-panel-row .item-column {
  display: flex;
  flex-direction: column;
}

.advertiser-panel-row .item-column .column-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.advertiser-panel-row .item-column .column-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-text-color);
}

.advertiser-panel-row-details {
  display: flex;
  flex-direction: column;
}

.advertiser-panel-column-title {
  color: var(--secondary-text-color);
  font-size: 0.875rem;
}

.advertiser-panel-column-text {
  color: var(--primary-text-color);
  font-size: 0.875rem;
}

.advertiser-panel-column-text-status {
  color: var(--primary-text-color);
  font-size: 0.875rem;
  text-transform: capitalize;
}


.advertiser-panel-button.selected .button {
  width: 25.625rem;
}

.advertiser-edit-panel-button {
  width: 25.625rem;
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  bottom: 2.5rem;
  display: flex;
  justify-content: space-evenly;
}

.search-bar-container {
  position: relative;
  height: 100%;
}

.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-grey-800);
  color: var(--secondary-text-color);
  border-radius: 1.875rem;
  width: 16.25rem;
  height: 3.375rem;
  padding: 0 0.75rem;
}

.search-input {
  border: none;
  border-radius: 1.875rem;
  outline: none;
  width: 100%;
  padding-left: 0.75rem;
  color: var(--c-grey-800);
  font-size: 0.875rem;
  background-color: var(--secondary-background-color);
}

.search-input::placeholder {
  color: var(--secondary-text-color);
  font-weight: 400;
  font-family: inherit;
}

.search-bar-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 15.625rem;
  overflow-y: auto;
  background-color: var(--white);
  border-bottom-left-radius: 1.75rem;
  border-bottom-right-radius: 1.75rem;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
  color: var(--primary-text-color);
  font-size: 0.875rem;
  margin-top: 0.219rem;
  width: 16.438rem;
}

.search-bar-dropdown-item {
  padding: 0.5rem 1.5rem;
  cursor: pointer;
}

.search-bar-dropdown-item:hover {
  background-color: var(--c-grey-200);
}

.search-bar-dropdown-item.no-results {
  color: var(--c-grey-600);
  cursor: default;
  pointer-events: none;
}

.radio-button-input {
  display: flex;
  color-scheme: auto;
  gap: 0.5rem;
}

.clear-icon {
  cursor: pointer;
}

/* resets the padding set at the main-layout class */
.main-layout:has(.reset-password) {
  padding: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  background-color: var(--white);
}

/* Reset password */

.reset-password {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;
  margin: auto;
  background-color: var(--white);
}

.reset-password.container {
  gap: 2rem;
  height: 27.6875rem;
  padding: 2.5rem;
}

.reset-password .message-container {
  gap: 2rem;
  height: 8.8125rem;
}

.reset-password .form-subtitle {
  display: flex;
  gap: 2rem;
  padding-top: 2rem;
}

.reset-password .icon-with-text {
  padding: 0;
  gap: 0.75rem;
  color: var(--primary-text-color);
  position: absolute;
  width: 3.75rem;
  height: 2.4375rem;
  left: 2.75rem;
  top: 2rem;
  text-decoration: none;
}

.reset-password .form {
  gap: 2rem;
}

.reset-password .back-to-login {
  display: flex;
  justify-content: end;
  width: 25.625rem;
  padding-top: 2rem;
  padding-right: 0.1rem;
  height: 1.125rem;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.125rem;
  text-align: right;
  color: var(--c-red-700);
  text-decoration: none;
}

.campaigns-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  border-radius: 2rem;
  background-color: var(--secondary-background-color);
  padding: 1.5rem;
  gap: 1.5rem;
  margin-top: 1.5rem;
  color-scheme: auto;
}

.campaigns-content .campaigns {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 6.25rem;
}

.name-table-view {
  font-weight: 600;
}

.ellepsis-button.open {
  background-color: var(--c-blue-900);
  color: var(--white);
}

.campaign-panel-content {
  margin-top: 2rem;
}

.campaign-panel-row {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
  background-color: var(--c-grey-200);
  border-radius: 2rem;
  padding: 0.5rem;
}

.campaign-panel-row-details {
  display: flex;
  flex-direction: column;
}

.campaign-panel-column-title {
  color: var(--secondary-text-color);
  font-size: 0.875rem;
}

.campaign-panel-column-text {
  color: var(--primary-text-color);
  font-size: 0.875rem;
}

.campaign-panel-column-text-status {
  color: var(--primary-text-color);
  font-size: 0.875rem;
  text-transform: capitalize;
}

.campaign-buttons-view {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.campaign-buttons-view > * {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tracking table */

.tracking-table.cell:nth-child(1) {
  width: 27%;
}

.tracking-table.cell:nth-child(2) {
  width: 45%;
}

.tracking-table.cell:nth-child(3) {
  width: 20%;
}

.tracking-table.cell:nth-child(4) {
  width: 8%;
  overflow: visible;
}

/* Empty tracking row */

.empty-tracking-row.cell:nth-child(1) {
  width: 33%;
}

.empty-tracking-row.cell:nth-child(2) {
  width: 33%;
}

.empty-tracking-row.cell:nth-child(3) {
  width: 33%;
}


.tracking-controls-container .button.secondary,
.tracking-controls-container .dropdown-closed-container {
  width: 13.0625rem;
  height: 3.375rem;
}

.tracking-table-empty-state {
  content: url("/assets/empty_file_search.svg");
  padding-top: 1rem;
}

.tracking-controls-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 3.375rem;
  gap: 0.5rem;
}

.create-new-tracking-button {
  width: 13.0625rem;
}

.tracking-advertiser-name {
  font-weight: 500;
}

.dropdown-with-title-container {
  position: relative;
  flex-direction: column;
  display: flex;
}

.dropdown-with-title-container a.button.secondary {
  position: relative;
}


.dropdown-with-title {
  position: absolute;
}

.dropdown-title {
  width: 7.0625rem;
  height: 1.25rem;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--primary-text-color);
}

.red-icon {
  color: var(--primary-cta-color);
}

/* Tracking setup */

.gtm-icon-size {
  max-width: 40%;
}

.campaign-table-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.advertiser-name-selector {
  height: 100%;
  position: relative;
}

.advertiser-name-selector .content {
  height: 100%;
  position: relative;
}


.rollup-dropdown {
  position: absolute;
  width: 11.25rem;
  margin-top: 3.5rem;
  z-index: 1;
}

.dropdown-closed-container {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--c-grey-400);
  color: var(--primary-text-color);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 1.875rem;
  width: 12.5rem;
  height: 100%;
  padding: 0 1rem;
  justify-content: space-between;
  cursor: pointer;
}

.advertiser-name-selector .dropdown {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 1.75rem;
}

.advertiser-name-selector .dropdown-menu {
  position: relative;
  width: 100%;
}

.advertiser-name-selector .dropdown-ul {
  overflow-y: auto;
}

.dropdown-with-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.create-new-tracking-link {
  color: var(--c-red-400);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  gap: 1rem;
  width: 100%;
  height: 2.75rem;
  background: var(--c-grey-200);
  border-radius: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25rem;
  align-content: center;
  margin-top: 0.375rem;
}

.select-gtm-container .button-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  width: 27.5rem;
  height: 1.25rem;
  font-style: normal;
  padding-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-blue-900);
}


#connect-gtm {
  width: 27.5rem;
  margin-bottom: 1rem;
}

.code {
  display: block;
  padding: 1.5rem;
  gap: 0.75rem;
  width: 25.625rem;
  background: var(--c-grey-200);
  border-radius: 1.5rem;
  font-style: normal;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-all;
  color: var(--c-blue-900);
  margin-bottom: 2rem;
  margin-top: 1rem;
}

#close {
  width: 25.625rem;
}

.gtm-container {
  position: relative;
}

.gtm-accounts {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  gap: 0.5rem;
  position: relative;
}

.gtm-accounts .btn.secondary {
  width: 22rem;
}

.gtm-accounts .selected-tracking {
  margin-top: 2rem;
}

.gtm-accounts .gtm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gtm-accounts .button-label {
  font-style: normal;
  padding-bottom: 0.5rem;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-blue-900);
}

.gtm-accounts .button.tertiary {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--c-grey-800);
  padding: 0 1rem;
  gap: 0.75rem;
  width: 27.5rem;
  height: 3rem;
  background: var(--c-grey-100);
  border: 1px solid var(--c-grey-400);
  border-radius: 1.875;
}

.gtm-accounts .dropdown-with-link.absolute {
  top: 5.5rem;
}

.gtm-error {
  display: flex;
  font-size: 0.85rem;
  color: var(--primary-text-color);
  width: 27.5rem;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.gtm-container .icon-with-text {
  width: 27.5rem;
  display: flex;
  color: var(--secondary-button-background-color);
  justify-content: center;
  align-items: center;
}

.gtm-buttons .button.tertiary {
  width: 2.5rem;
}

.gtm-buttons {
  display: flex;
  flex-direction: column;
}

.gtm-buttons .btn {
  width: 27.5rem;
  margin-bottom: 2rem;
  justify-content: flex-start;
}

.installation .right-side-panel-content {
  overflow-y: scroll;
}

.installation .right-side-modal .right-side-panel {
  padding-bottom: 6.5rem;
  width: 32rem;
}

.instruction {
  width: 100%;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-blue-900);
}

.instruction.code-title {
  min-height: 1.25rem;
  max-height: 2.5rem;
  font-weight: 500;
}

.instruction.code-subtitle {
  margin-top: 1rem;
  font-weight: 400;
  min-height: 2.5rem;
  max-height: 5rem;
}

.code {
  width: 100%;
}

.email .button.primary {
  width: 22.625rem;
}

.selected-tracking .button.tertiary {
  margin-bottom: 2rem;
  width: 27.5rem;
}

.selected-drafts-tracking .btn.tertiary {
  width: 27.5rem;
}

.drafts-tracking .btn.tertiary {
  width: 27.5rem;
}

.installation .button.tertiary {
  &:disabled {
    background: var(--c-grey-500);
  }
}

.radio {
  margin-top: 2rem;
  margin-bottom: 3.5rem;
}

.radio .advertiser-panel-row {
  margin-left: 3.1875rem;
  margin-bottom: 0.5rem;
}

.radio .advertiser-panel-row {
  font-weight: 500;
}

.radio .advertiser-panel-row label {
  font-weight: 400;
}

.select-gtm-container {
  display: flex;
  flex-direction: column;
}

.tracking-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.drafts-tracking {
  display: flex;
}

.clickable {
  cursor: pointer;
}

.red-trash-icon {
  color: var(--c-red-700);
}

.users-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  border-radius: 2rem;
  background-color: var(--secondary-background-color);
  padding: 1.5rem;
  gap: 1.5rem;
  margin-top: 1.5rem;
  color-scheme: auto;
}

.users-content .users {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 6.25rem;
}

.users-table.row {
  &:hover {
    background-color: var(--c-grey-400);
  }
}

.users-buttons-view {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.users-buttons-view > * {
  width: 2.625rem;
  height: 2.625rem;
  background-color: var(--c-grey-300);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* reporting page */

.table-controls-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.page .page-title-row .table-controls-container {
  margin-left: auto;
  width: fit-content;
}

.table-controls-container .search {
  background-color: var(--white);
  border-radius: 1.875rem;
}

.table-controls-container .table-parameters {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.table-controls-container .table-parameters .date-selection {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.2rem;
}

.table-controls-container .search .search-bar {
  width: 12.5rem;
  position: relative;
}

.table-controls-container .advertiser-filter .search .dropdown.absolute {
  top: 3.5rem;
}

.form .user-input-title {
  font-size: 0.875rem;
}

.dropdown-placeholder,
.selected-drafts-tracking .gtm-name,
.selected-tracking .gtm-name {
  width: 100%;
  color: unset;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}

.right-side-panel-content .installation-panel {
  bottom: 1rem;
}

.scheduling {
  color: var(--c-grey-500);
  font-weight: 500;
}

.job-scheduling {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-right: 1rem;
  align-items: flex-end;
}

.job-scheduling-content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.calendar-container {
  width: 100%;
}

.create-campaign-dropdown {
  position: absolute;
  left: -2rem;
}

.create-campaign-dropdown .dropdown .dropdown-menu {
  width: 16rem;
  padding: 1rem;
}
.role-dropdown {
  top: 5.5rem;
  z-index: 1;
}

.role-container {
  width: 100%;
}
#user-invite {
  gap: 1rem;
}