@font-face {
	font-family: 'Radio-Canada Display';
	font-style: normal;
	font-weight: normal;
	src: url('Radio-Canada-Display_Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Radio-Canada Display';
	font-style: italic;
	font-weight: normal;
	src: url('Radio-Canada-Display_Italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Radio-Canada Display';
	font-style: normal;
	font-weight: bold;
	src: url('Radio-Canada-Display_Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Radio-Canada';
	font-style: normal;
	font-weight: 300;
	src: url('Radio-Canada_Light.woff2') format('woff2');
}

@font-face {
	font-family: 'Radio-Canada';
	font-style: normal;
	font-weight: normal; /*400*/
	src: url('Radio-Canada_Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Radio-Canada';
	font-style:	italic;
	font-weight: normal; /*400*/
	src: url('Radio-Canada_Italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Radio-Canada';
	font-style: normal;
	font-weight: 500;
	src: url('Radio-Canada_Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Radio-Canada';
	font-style: normal;
	font-weight: bold; /*700*/
	src: url('Radio-Canada_Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Mono Sans';
	font-style: normal;
	font-weight: normal;
	src: local('Noto Mono Sans Regular'), url('Noto-Sans-Mono_Regular.woff2') format('woff2');
}


[v-cloak] {
	display:none;
	opacity: 0;
}

html {
	height: 100%;
}

body {
	margin: 0pt;
	color: #ffffff;
	background: #191716;
	font-size: 12pt;
	font-family: 'Radio-Canada', sans-serif;
	font-weight: normal;
	height: 100%;
}

@media print {
	body {
		color: #000000;
		background: #ffffff;
		font-size: 10pt;
	}
}

@media screen and (max-width: 480px) {
	body {
		font-size: 10pt;
	}
}

::selection {
	background-color: #191716;
	color: #ffffff;
}

a {
	color: #123F52;
	text-decoration: underline;
	text-decoration-color: #247ba0;
	cursor: pointer;
}
a:link    { color: #123F52; }
a:visited { color: #123F52; }
a:hover   { color: #191716; }
a:active  { color: #191716; }
a::after { text-decoration: none;}

@media print {
	a:link, a:visited {
		color: #191716;
		text-decoration: underline dotted;
		text-decoration-thickness: 0.5px;
	}
}

table {
	margin: 0pt auto;
    border-spacing: 0pt;
}

th, td {
	padding: 3pt;
	color: #191716;
	background-color: #ffffff;
	border: 1px solid #606060;
	/* By default, cells only have a right and bottom border */
	border-width: 0px 1px 1px 0px;
}

/* The top row must add a top border and the left colums must add a left border */
table tr:first-child td, table tr:first-child th { border-top-width: 1px; }
table tr td:first-child, table tr th:first-child { border-left-width: 1px; }

/* Set the border radius on the four corner cells */
table tr:first-child td:first-child, table tr:first-child th:first-child { border-top-left-radius:  1pt; }
table tr:first-child td:last-child,  table tr:first-child th:last-child  { border-top-right-radius: 1pt; }
table tr:last-child  td:first-child, table tr:last-child  th:first-child { border-bottom-left-radius: 1pt; }
table tr:last-child  td:last-child,  table tr:last-child  th:last-child  { border-bottom-right-radius: 1pt; }

th {
	background-color: #191716 !important;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}

th {
	a {
		color: #38c3ff;
		text-decoration-color: #38c3ff;
	}
	a:link    { color: #38c3ff; }
	a:visited { color: #38c3ff; }
	a:hover   { color: #ffffff; }
	a:active  { color: #ffffff; }
}

pre, textarea {
	font-family: 'Noto Sans Mono', monospace;
	font-weight: normal;
}

input, select, textarea, button {
	font-size: 10pt;
	padding: 0pt 4pt;
	margin: 1pt 2pt;
	color: #191716;
	border: 1px solid #191716;
	border-radius: 2pt;
	background: #ffffff;
	min-height: 20pt;
	min-width: 18pt;
	box-sizing: border-box;
}

input[type="radio"] {
	min-height: auto;
	min-width: auto;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	display: none;
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

button:enabled:hover {
	color: #ffffff;
	cursor: pointer;
	background: #191716;
}

.focus {
	background: #247ba0;
	color: #ffffff;
}

ul li { list-style-type: disc; }
ul ul li { list-style-type: circle; }
ul ul ul li { list-style-type: square; }
ol li { list-style-type: decimal; }
ol ol li { list-style-type: lower-alpha; }
ol ol ol li { list-style-type: lower-roman; }

@media screen and (max-width: 480px) {
	ul { padding-inline-start: 2em; }
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Radio-Canada Display', sans-serif; font-weight: bold;
	page-break-after: avoid;
}

h1 { font-size: 16pt; border-bottom: 1px solid #d0d0d0; margin-left: 4pt; text-transform: uppercase; }
h2 { font-size: 15pt; border-bottom: 1px dotted #d0d0d0; margin-left: 8pt; }
h3 { font-size: 14pt; border-bottom: 1px dotted #f0f0f0; margin-left: 12pt; }
h4 { font-size: 13pt; margin-left: 16pt; }
h5 { font-size: 12pt; margin-left: 20pt; }
h6 { font-size: 11pt; margin-left: 24pt; }

@media screen and (max-width: 480px) {
	h1 { font-size: 11pt; }
	h2 { font-size: 10pt; }
	h3 { font-size: 10pt; }
	h4 { font-size: 9pt; }
	h5 { font-size: 9pt; }
}

img {
	border: none;
}

p {
	margin: 12pt 8pt;
	padding: 0pt;
	page-break-inside: avoid;
}

/* -------------------------------------- Header  -------------------------------------- */

#app {
	min-width: 100%;
}

#header {
	height: 44pt;
	font-family: 'Radio-Canada Display', sans-serif;
	overflow: hidden;
	background: #191716;
}

#header #title {
	margin: 0pt;
	padding: 8pt 4pt 8pt 50pt;
	font-size: 22pt;
	line-height: 36pt;
	display: inline-block;
	background: url(siteicon.png) 4pt 4pt no-repeat;
	background-size: 40pt;
	border: none;
	font-variant: small-caps;
	text-transform: none;
}

#header #menu {
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 4pt;
	right: 4pt;
	overflow: hidden;
}

@media print {
	#header {
		height: auto;
		background: none;
	}

	#header #title {
		text-shadow: none;
		background: none;
		padding: 0px;
	}

	#header #menu {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	#header {
		height: 36pt;
	}

	#header #title {
		font-size: 16pt;
		padding: 8pt 4pt 8pt 40pt;
		line-height: 30pt;
		background-size: 30pt;
	}
}

#header #menu > div {
	display: inline-block;
}

#header #menu a {
	margin: 1pt;
	font-size: 10pt;
	text-transform: uppercase;
	padding: 4pt;
	text-decoration: none;
	background: #ffffff;
	color: #191716;
	display: inline-block;
	border-radius: 2pt;
	vertical-align: top;
}

#header #menu .avatar {
	height: 26pt;
	width: 26pt;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#header #menu #menu_show {
	height: 26pt;
	width: 26pt;
	font-size: 24pt;
	line-height: 44pt;
	text-align: center;
	background-color: #505050;
}

a.current {
	background-color: #efa00b !important;
	font-weight: bold;
}

#header #menu a:hover {
	background-color: #aa160e;
	color: #ffffff;
}

@media screen and (max-width: 480px) {
	#header #menu a {
		font-size: 8pt;
	}

	#header #menu .avatar {
		height: 18pt;
		width: 18pt;
	}

	#header #menu #menu_show {
		height: 18pt;
		width: 18pt;
	}
}

#header #menu form input {
	vertical-align: top;
	padding: 0pt;
	margin: 0pt;
	font-size: 9pt;
}

.menu-enter-active {
	transition: all 0.5s ease;
}
.menu-leave-active {
	transition: all 0.5s ease;
}
.menu-enter, .menu-leave-to {
	opacity: 0;
	transform: translateY(-100%);
}
.menu-enter-to, .menu-leave {
	opacity: 1;
	transform: translateY(0);
}

.menu-show-enter-active {
	transition: all 0.5s ease;
}
.menu-show-leave-active {
	transition: all 0.5s ease;
}
.menu-show-enter, .menu-show-leave-to {
	opacity: 0;
	transform: scaleX(0%);
}
.menu-show-enter-to, .menu-show-leave {
	opacity: 1;
	transform: scaleX(100%);
}
/* -------------------------------------- Messages ------------------------------------- */

#messages {
	font-size: 11pt;
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 100;
	color: #ffffff;
	line-height: 20pt;
	box-shadow: 3pt 3pt 8pt rgba(0,0,0,0.5);
}

.messages-enter-active {
	transition: all 0.5s ease;
}

.messages-leave-active {
	transition: all 0.5s ease;
}

.messages-enter, .messages-leave-to {
	opacity: 0;
	transform: translateX(-100%) rotate(-90deg);
	transform-origin: bottom left;
}

.messages-enter-to, .messages-leave {
	opacity: 1;
	transform: translateX(0) rotate(0);
	transform-origin: bottom left;
}

#messages div {
	padding: 2pt;
	cursor: not-allowed;
	border: 1px solid #191716;
	border-radius: 0pt 3pt 3pt 0pt;
}
#messages div.success {
	background-color: #247ba0;
}
#messages div.info {
	background-color: #191716;
}
#messages div.error {
	background-color: #aa160e;
	font-weight: bold;
}

/* ------------------------------------- Navigation ------------------------------------- */

#navigation {
	height: 24pt;
	background-color: #aa160e;
	background-image: url(skulls.png);
	background-size: 48pt;
	padding: 4pt;
	font-size: 10pt;
	border-bottom: 1px solid #191716;
	color: #191716;
}

@media print {
	#navigation {
		display: none;
	}
}

#navigation input, #navigation select, #navigation button {
	height: 23pt;
	line-height: 22pt;
	border: 1px solid #191716;
}

#navigation > a, #navigation span, #navigation > div > a {
	display: inline-block;
	height: 22pt;
	min-width: 18pt;
	line-height: 22pt;
	text-align: right;
	padding: 0pt 4pt;
	border: 1px solid #191716;
	border-radius: 2pt;
	background: #ffffff;
	text-decoration: none;
}

#navigation > div {
	display: inline
}

#navigation > a:after, #navigation > div > a:after {
	content: ' \00BB';
	color: #aa160e;
	font-size: 9pt;
}

#navigation a:hover, #navigation #navmenu:hover span {
	background: #191716 !important;
	color: #ffffff;
}

#navigation #navmenu {
	display: inline;
}

#navigation #navmenu span {
	padding: 0pt 4pt;
	text-align: center;
	font-weight: bold;
}

#navigation #navmenu ul {
	position: absolute;
	z-index: 10;
	display: none;
	background: #ffffff;
	padding: 0pt;
	margin: 0pt;
	border: 1px solid #191716;
	border-radius: 2pt;
}

#navigation #navmenu ul li {
	list-style: none;
	padding: 4pt;
	border-top: 1px solid #d0d0d0;
}

#navigation #navmenu ul li.newgroup {
	border-top: 1px solid #191716;
}

#navigation #navmenu ul li:hover, #navigation #navmenu ul li:hover a {
	background: #191716;
	color: #ffffff;
}

#navigation #navmenu:hover ul, #navigation #navmenu ul:hover {
	display: block;
}

#tooltip {
	border: 1px solid #191716;
	border-radius: 2pt;
	max-width: 200pt;
	background-color: #efa00b;
	padding: 2pt 3pt 3pt 3pt;
	font-size: 10pt;
	color: #191716;
	position: absolute;
	top: 0pt;
	display: none;
	z-index: 1000;
	box-shadow: 3pt 3pt 8pt rgba(0,0,0,0.5);
	transition: opacity 0.35s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.autocomplete {
	border: 1px solid #191716;
	border-radius: 0pt 0pt 2pt 2pt;
	background-color: #f0f0f0;
	padding: 4px;
	color: #191716;
	position: absolute;
	top: 0pt;
	left: 0pt;
	display: block;
	z-index: 20;
	box-shadow: 3pt 3pt 8pt rgba(0,0,0,0.5);
}

.autocomplete > div {
	border-radius: 2pt;
	padding: 0pt 2pt;
	display: flex;
	flex-direction: row;
	cursor: pointer;
}

.autocomplete > div:hover {
	background: #247ba0;
	color: #ffffff;
}

.autocomplete > div.focus {
	background: #247ba0;
	color: #ffffff;
	border: 1px dashed #191716;
}

.autocomplete > div > span {
	height: auto;
	line-height: inherit;
	padding: 0pt;
	width: max-content;
	text-align: unset !important;
	border: none !important;
	border-radius: inherit;
	background: transparent !important;
	text-decoration: none;
}

.autocomplete > div > span:first-child {
	flex-grow: 1;
}

.autocomplete > div > span:last-child {
	font-size: smaller;
	font-style: italic;
}

#wait {
	position: fixed;
	top: 0pt;
	bottom: 0pt;
	left: 0pt;
	right: 0pt;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px) grayscale(1) brightness(0.8);
}

#wait div {
	width: 48pt;
	height: 48pt;
	border: 6pt solid #ffffff;
	border-top-color: #aa160e;
	border-radius: 50%;
	box-shadow: 0pt 0pt 12pt -1pt #191716;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1.5s ease infinite;
}
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#status {
	position: fixed;
	bottom: 0pt;
	right: 0pt;
	font-size: 11pt;
	line-height: 20pt;
	z-index: 9000;
	color: #ffffff;
	background-color: #404040;
	padding: 2pt;
	border: 1px solid #191716;
	border-radius: 3pt 0pt 0pt 0pt;
}