@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
  	--clr-gray-100: #f7f7f7;
  	--clr-gray-200: #f1f1f1;
  	--clr-gray-300: #e7e7e7;
  	--clr-gray-400: #c5c5c5;
 	--clr-gray-500: #a7a7a7;
    --clr-gray-600: #7d7d7d;
  	--clr-gray-700: #696969;
  	--clr-gray-800: #494949;
  	--clr-gray-900: #272727;
  
  	--clr-primary-50-rgb: 216,243,242;
  	--clr-primary-200: #4ECDC4;
    --clr-primary-200-rgb: 78,205,196;
  	--clr-primary-300: #00B7AB;
  	--clr-primary-500: #009585;
  
  	--font-size-body: 1rem;
  
  	--font-weight-body: 400;
  	--font-weight-headings: 800;
  
  	--border-color: rgba(39,39,39,.16);
  	--border-radius-small: .5rem;
  
  	--outline: .25rem solid rgba(var(--clr-primary-200-rgb), .48);
  	--outline-offset: .125rem;
  	
  	--input-padding-x: 1rem;
  	--input-padding-y: .625rem;
  
  	--box-shadow-base: 0px .35rem 1rem 0 transparent;
    --box-shadow-interaction: 0px .35rem 1rem 0 rgba(var(--clr-primary-50-rgb), .8);
  
  	--transition: .2s cubic-bezier(0, .73, .2, 1);
  
  	--color-brand: var(--clr-primary-200);
  	--background-gradient: linear-gradient(180deg,var(--clr-gray-300) 0,#fff);
}


html, .html, body, .body {
  	font-family: 'Manrope', sans-serif !important;
  	font-weight: var(--font-weight-body);
  	color: var(--clr-primary-700);
  	font-size: var(--font-size-body) !important;
  	line-height: 1.6;
  	letter-spacing: 0 !important;
  	background: white;
}

h1, h2, h3, h4, h5, h6 {
 	font-weight: var(--font-weight-headings);
 	color: var(--clr-gray-900);
}

p {
	font-size: var(--font-size-body) !important;
}

a {
	text-decoration: none;
    cursor: pointer;
    background-color: transparent;
	color: var(--clr-primary-200) !important;
  	letter-spacing: 0 !important;
}

a:hover,
a:active {
	color: var(--clr-primary-500) !important;
}

a:focus {
  	outline: var(--outline);
  	outline-offset: var(--outline-offset);
}

.btn,
button,
[role=button],
[class*=Button] {
  	letter-spacing: 0 !important;
 	font-weight: bold;
  	color: white !important;
  	background-color: var(--clr-primary-200) !important;
  	border: 1px solid var(--border-color) !important;
  	border-radius: var(--border-radius-small) !important;
  	transition: var(--transition);
	padding: var(--input-padding-y) var(--input-padding-x);
}

.btn:hover,
button:hover,
[role=button]:hover,
[class*=Button]:hover {
	background-color: var(--clr-primary-300) !important;
}

.btn:active,
button:active,
[role=button]:active,
[class*=Button]:active {
 	background-color: var(--clr-primary-500) !important; 
}

.btn svg,
button svg,
[role=button] svg,
[class*=Button] svg {
 	color: white !important;
  	fill: white !important;
}

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
  	line-height: 1.6 !important;
  	height: auto !important;
  	font-size: var(--font-size-body) !important;
    padding: var(--input-padding-y) var(--input-padding-x) !important;
  	border-radius: var(--border-radius-small) !important;
  	border: 1px solid var(--border-color) !important;
  	transition: var(--transition) !important;
  	box-shadow: var(--box-shadow-base) !important;
}

input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="file"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
input[type="week"]:hover,
select:hover,
textarea:hover {
  	border-color: var(--clr-primary-200) !important;
  	box-shadow: var(--box-shadow-interaction) !important;
}

input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="file"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
	outline: var(--outline) !important;
  	outline-offset: 0 !important;
}

/* Specific overwrites */
#headerContainer {
  	background-color: var(--clr-gray-100);
  	background-image: var(--background-gradient);
}

.Header__name, .Header__searchTitle {
 	color: var(--clr-gray-900);
}

.Header__description {
  	color: var(--clr-gray-700);
}

symbol[id] {
 	/* fill: var(--clr-primary-200); */
}

[data-id="portal_name"] {
  	display: none;
}

.AppContainer__backToTop {
  	--color-brand: white;
}

.SearchContainer__globalSearch {
 	background: transparent !important; 
}

symbol#search {
  	fill: white;
}

.SearchContainer__searchBoxIcon {
 	top: 50%;
  	transform: translateY(-50%);
}

.SearchContainer__downArrow {
 	border-top-color: var(--clr-primary-200);
}

.AvatarText__avatarText {
  	border-radius: 100px;
  	background-color: var(--clr-primary-200);
  	border: 1px solid var(--border-color);
  	color: white;
  	font-weight: bold;
}

[id="articleReview"] [data-id="vote_enabled"] {
 	display: flex;
  	align-items: center;
  	gap: .25rem;
}

[data-id="like_article"],
[data-id="dislike_article"] {
  	display: block;
  	margin-left: .25rem;
  	padding: .25rem .5rem;
}

[data-id="dislike_article"] {
  	transform: rotateX(180deg) rotateY(180deg) translateY(0) !important;
}

/* Hide some shizzle*/
[data-id*="share"],
[class*=socialIcon] {
  	display: none !important;
}