/*----------------------------------------------------------------- */
/* GENERAL
/*----------------------------------------------------------------- */

html
{
	font-size: var(--font-size__rem-constant);
	line-height: normal; /* fix normalize.css */

	position: relative;

	overflow-x: hidden;

	box-sizing: border-box;
	min-height: 100%;
}

*,
*:before,
*:after
{
	box-sizing: inherit;
}

::selection
{
	color: var(--color__white);
	background: var(--color__blue);
}

::selection
{
	color: var(--color__white);
	background: var(--color__blue);
}

body
{
	font-family: var(--font-family__default);
	font-size: var(--font-size__default);
	font-weight: var(--font-weight__normal);

	transition: background-color var(--transition-duration__default), color var(--transition-duration__default);
	text-align: left;

	color: var(--color__content-text);
	background: var(--color__body-bg);

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body[data-dialog='sidebar-mobile']
{
	overflow: hidden;

	height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote,
figure
{
	margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	font-family: var(--font-family__heading);
	font-weight: var(--font-weight__medium);

	transition: color var(--transition-duration__default);

	color: var(--color__content-heading);
}

h1
{
	font-size: var(--font-size__h1);

	margin: 0;
}

h2
{
	font-size: var(--font-size__h2);

	margin: 40px 0 20px 0;
}

h3
{
	font-size: var(--font-size__h3);

	margin: 40px 0 15px 0;
}

h4,
h5,
h6
{
	font-size: var(--font-size__h4);

	margin: 30px 0 15px 0;
}

strong
{
	font-weight: var(--font-weight__bold);
}

a,
a:visited
{
	transition: text-decoration var(--transition-duration__default), color var(--transition-duration__default), background-color var(--transition-duration__default), border-color var(--transition-duration__default);
	text-decoration: underline;

	color: var(--color__content-text);
}

a:hover
{
	text-decoration: none;
	text-decoration: underline transparent solid;

	color: var(--color__content-text);
}

a:focus,
a:active
{
	color: var(--color__blue);
}

button
{
	font-size: var(--font-size__default); /* fix normalize.css */

	padding: 0;

	cursor: pointer;
	transition: color var(--transition-duration__default), background-color var(--transition-duration__default), text-decoration var(--transition-duration__default);

	color: var(--color__blue);
	border: none;
	background: none;
}

button:hover
{
	color: var(--color__blue-light);
}

button:focus
{
	outline: none;
}

ul,
ol
{
	margin: 0;
	padding: 0;

	list-style-type: none;
}

ol
{
	counter-reset: list-counter;
}

blockquote,
figure
{
	margin-right: 0;
	margin-left: 0;
}

figcaption
{
	font-size: 1.6rem;
	font-style: italic;

	padding: 5px 0 0 0;

	text-align: center;
}

img
{
	display: block;

	max-width: 100%;
	height: auto;
}

iframe
{
	border: 0;
}

hr
{
	margin: var(--padding__default) 0;

	transition: border-color var(--transition-duration__default);

	border: none;
	border-top: 1px solid var(--color__menu-line);
}

.hidden
{
	display: none !important;
}

.sticky
{
	position: sticky;
	z-index: 999;
	top: 0;
}

.overlay
{
	position: fixed;
	z-index: 1000;
	top: 0;
	bottom: 0;
	left: -100%;

	width: 100%;

	transition: left 0.01s var(--transition-duration__default), opacity var(--transition-duration__default);

	opacity: 0;
	background: var(--color__black);
}

[data-dialog='sidebar-mobile'] .overlay,
[data-dialog='menu-user'] .overlay
{
	left: 0;

	transition: left 0.01s, opacity var(--transition-duration__default);

	opacity: 0.5;
}

.container
{
	position: relative;

	height: inherit;
	margin: 0 auto;

	transition: max-width var(--transition-duration__default);
}

.container_website
{
	overflow: hidden;

	max-width: var(--width__website);
}

.container_layout
{
	max-width: var(--width__layout);
}

.container_content
{
	max-width: var(--width__content);
}

@media (min-width: 1921px)
{
	.container_website
	{
		border-right: 1px solid var(--color__menu-line);
		border-left: 1px solid var(--color__menu-line);
	}
}

/* ICONS & SHAPES
----------------------------------------- */
.icon,
.shape
{
	display: inline-block;
}

/* BUTTONS
----------------------------------------- */
.btn
{
	font-size: var(--font-size__default);
	font-weight: var(--font-weight__normal);

	position: relative;

	padding: 8px 22px;

	cursor: pointer;
	transition: color var(--transition-duration__default), background-color var(--transition-duration__default);
	text-decoration: none;

	color: var(--color__white);
	border: none;
	border-radius: 5px;
	background-color: var(--color__blue);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn:hover
{
	text-decoration: none;

	color: var(--color__white);
	background: var(--color__blue-dark);
}

/* BADGES
----------------------------------------- */
.badges
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;

	gap: 10px;
}

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

a.badge
{
	font-size: var(--font-size__small-extra);
	font-weight: var(--font-weight__bold);

	padding: 6px 10px 7px 10px;

	text-decoration: none;
	text-transform: uppercase;

	color: var(--color__content-text);
	border: 1px solid var(--color__dark-light);
	border-radius: 3px;
}

a.badge:hover
{
	text-decoration: none;

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

a.badge_color-blue
{
	border-color: var(--color__blue);
	background-color: var(--color__blue);
}

a.badge_color-blue:hover
{
	color: var(--color__blue);
	border-color: var(--color__alert_general-bg);
	background-color: var(--color__alert_general-bg);
}

a.badge_color-green
{
	border-color: var(--color__green);
	background-color: var(--color__green);
}

a.badge_color-green:hover
{
	color: var(--color__green);
	border-color: var(--color__alert_success-bg);
	background-color: var(--color__alert_success-bg);
}

a.badge_color-red
{
	border-color: var(--color__red);
	background-color: var(--color__red);
}

a.badge_color-red:hover
{
	color: var(--color__red);
	border-color: var(--color__alert_danger-bg);
	background-color: var(--color__alert_danger-bg);
}

a.badge_color-yellow
{
	border-color: var(--color__yellow);
	background-color: var(--color__yellow);
}

a.badge_color-yellow:hover
{
	color: var(--color__yellow);
	border-color: var(--color__alert_warning-bg);
	background-color: var(--color__alert_warning-bg);
}

a.badge_color-aquamarine
{
	border-color: var(--color__blue-lightest);
	background-color: var(--color__blue-lightest);
}

a.badge_color-aquamarine:hover
{
	color: var(--color__blue-lightest);
	border-color: var(--color__alert_info-bg);
	background-color: var(--color__alert_info-bg);
}

a.badge_color-dark
{
	border-color: var(--color__dark);
	background-color: var(--color__dark-light);
}

a.badge_color-dark:hover
{
	color: var(--color__white);
	border-color: var(--color__alert_dark-bg);
	background-color: var(--color__alert_dark-bg);
}