@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('https://usercentrics.com/wp-content/themes/usercentrics/fonts/roboto.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('https://usercentrics.com/wp-content/themes/usercentrics/fonts/roboto-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('https://usercentrics.com/wp-content/themes/usercentrics/fonts/roboto-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('https://usercentrics.com/wp-content/themes/usercentrics/fonts/roboto-condensed-700.woff2') format('woff2');
}

:root {
  --main-background-primary: #f8f8f8;
  --main-background-secondary: #e9ecf1;
  --card-headline-color: #000000;
  --card-headline-hover-color: #000000;
  --label-background: #262626;
  --label-text: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
}

a[href*=users] {
  font-family: 'Roboto', sans-serif;
}

.shadow,
.bg-white.content-actions.content-actions--static,
#new-comment {
  box-shadow: 0 9px 28px 8px #0000000d, 0 3px 6px -4px #0000001f;
}

body {
  color: var(--black);
}

[data-zapnito-navbar-search-input] {
  background-color: var(--white);
}

[data-zapnito-navbar-button] {
  background-color: #4dbeff;
}

[data-zapnito-navbar-button]:hover {
  background-color: #66c7ff;
}

[data-test-universal-sidebar] li * {
  color: var(--black);
  border-radius: 0;
}

[data-zapnito-dropdown-menu] {
  background-color: var(--white);
}

[data-zapnito-dropdown-menu-item],
[data-zapnito-dropdown-menu-item] i,
[data-zapnito-dropdown-menu-item] svg {
  color: var(--black) !important;
}

[data-zapnito-dropdown-menu-item]:hover {
  background-color: var(--main-background-primary);
}

[data-zapnito-dropdown-menu-item]:hover i,
[data-zapnito-dropdown-menu-item]:hover svg {
  color: var(--black) !important;
}

.tf-btn {
  padding: 24px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

[data-zapnito-main] {
  background-color: var(--main-background-secondary);
}

[data-zapnito-main] button {
  border: none;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

[data-zapnito-universal-sidebar] {
  background-color: var(--main-background-primary);
}

[data-test-universal-sidebar] li a:hover, [data-test-universal-sidebar] li > button:hover {
  background-color: #ffffff;
}

[data-test-universal-sidebar] li .bg-gray-300 {
  background-color: #ffffff;
  border-left: 2px solid var(--blue);
}

[data-zapnito-content-card-title] {
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
}

.bg-brand-primary .tf-btn--primary,
.bg-brand-primary button {
  background-color: var(--brand-secondary);
  color: var(--white);
}

.bg-brand-secondary .tf-btn--primary,
.bg-brand-secondary button {
  background-color: var(--brand-primary);
  color: var(--black);
}

[data-zapnito-content-card] a[href*=badges] {
  background-color: var(--label-background);
  color: var(--label-text);
  border-radius: 500px;
}

[data-test-room-widget] [data-test-room-name] h3 {
  color: var(--black);
}

[data-test-users-widget] [data-test-person-card="widget"] a {
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  color: var(--black);
}

[data-zapnito-card] a[href*=users] {
  color: var(--black);
}

[data-theme-widget-channel-title-card] [data-theme-widget-channel-title-card-cta] {
  background-color: var(--brand-secondary);
  color: var(--white);
  padding: 16px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

/*ROOMS*/
[data-zapnito-main] header.bg-cover > div {
  background-color: var(--brand-primary);
  --tw-bg-opacity: 1;
}

[data-test-room-header] h1, [data-test-room-header] p {
  color: var(--black);
}

[data-test-room-header] [data-test-single-select] button {
  background-color: var(--brand-secondary);
  color: var(--white);
}

[data-test-room-header] [data-test-room-nav] a[href*=rooms] {
  background-color: var(--brand-primary);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: 4px;
}

[data-test-room-header] [data-test-room-nav] a[href*=rooms].enforce-active-link--room-nav {
  background-color: var(--black) !important;
  color: var(--white) !important;
  border: 2px solid var(--black);
  border-radius: 4px;
}

[data-test-room-content] article h2, [data-test-room-content] article h2 a {
  color: var(--black);
}

[data-test-room-content] article h2 a:hover {
  color: var(--brand-primary);
}

[data-test-room-content-type=posts] > div:first-of-type > a:last-of-type {
  background-color: var(--brand-primary);
  color: var(--black);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

[data-test-room-content-card-id] h3 a,
[data-test-room-content-card-id]:hover h3 a {
  color: var(--black) !important;
}

[data-test-room-content-nav] > a {
  background-color: transparent;
  color: var(--black);
  border: 2px solid var(--black);
}

[data-test-room-content-nav] > a.enforce-active-link--content-type-nav {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

[data-test-search-field]::placeholder {
  color: var(--gray-800);
}

[data-test-room-name] h3 {
  color: var(--black);
  font-weight: 700;
}

.btn.btn--default.follow.follow-btn,
.btn.btn--default.vote.gtm-like,
[data-likeable-id],
[data-follow-id],
#host .actions .btn.btn--default {
  background: transparent;
  height: 36px;
  border: 2px solid var(--black);
  color: var(--black);
  border-radius: 4px;
  line-height: 34px;
}

.event-detail__sidebar .tf-card .btn.btn--default.btn--block {
  background: transparent;
  color: var(--black);
  transition: color ease-in-out .3s;
}

.event-detail__sidebar .tf-card .btn.btn--default.btn--block svg {
  stroke: var(--black);
  transition: stroke ease-in-out .3s;
}

.event-detail__sidebar .tf-card .btn.btn--default.btn--block:hover {
  color: var(--brand-primary);
}

.event-detail__sidebar .tf-card .btn.btn--default.btn--block:hover svg {
  stroke: var(--brand-primary);
}

.content__poster .btn.btn--default.follow.follow-btn,
.content__poster .btn.btn--default.vote.gtm-like,
.content__poster [data-likeable-id],
.content__poster [data-follow-id] {
  border-color: var(--white);
  color: var(--white);
}

.expert__banner .btn.btn--default.follow.follow-btn,
.expert__banner .btn.btn--default.vote.gtm-like,
.expert__banner [data-likeable-id],
.expert__banner [data-follow-id] {
  border-color: var(--white);
  color: var(--white);
}

/*Discussions*/
[data-test-discussion] h1,
[data-test-room-discussions-list] h1,
[data-test-room-discussions-empty] h3 {
  color: var(--black);
}

[data-test-room-discussions-empty] button {
  background-color: var(--brand-primary);
  color: var(--black);
}

/*Channel*/
[data-test-zapnito-channel-contents] article .meta__author-link {
  color: var(--black);
}

[data-test-zapnito-channel-contents] article h1 a {
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  color: var(--black);
}

/*Courses*/
[data-zapnito-card] button.bg-white {
  border: 2px solid var(--black);
  color: black;
}

[data-zapnito-card] button.bg-white:hover {
  background-color: var(--white);
  color: #5d5e60;
  border-color: #5d5e60;
}

/*Events*/
section.event-detail__main nav[role=navigation] {
  display: none;
}

section.event-detail__main nav[role=navigation] + .event-detail__inner {
  margin-top: 0;
}