
dialog
{
	padding: 0px;
	border: 0px;
}

.notification
{
	width: 300px;
}

.notification-label
{
  font-weight: bold;
	width: -webkit-fill-available;
  text-align: center;
  background-color: lightgray;
	padding: 2%;
}

.notification-body .icons-contener > *
{
	flex-direction: column;
  align-items: center;
	
	display: none;
}

.notification.success .icons-contener .success,
.notification.error .icons-contener .error,
.notification.advertissement .icons-contener .advertissement,
.notification.information .icons-contener .information,
.notification.password .icons-contener .password
{
	display: flex;
}

.notification-body .icons-contener img
{
	width: 48px;
	height: 48px;
	margin: 5px;
}

.notification-body .message
{
	margin: 5% 1%;
	font-family: serif;
  text-align: center;
}

.message > *
{
	text-align: justify;
  margin: 2%;
}

.notification-body .message img
{
	height: 20px;
	vertical-align: text-bottom;
}

.notification:not(.password) .password-input
{
	display: none;
}

.notification-body .password-input
{
	width: -webkit-fill-available;
	margin: 5%;
	line-height: var(--desktop-line-height);
	
	padding: revert;
	border: revert;
}

.notification.success .cancel-button,
.notification.error .cancel-button,
.notification.information .cancel-button
{
	display: none;
}

.notification label
{
	background-color: revert;
	color: revert;
}

.notification:not(.save-choice) .save-choice
{
	display: none;
}

.notification-footer
{
	display: flex;
	justify-content: space-evenly;
	padding: 2%;
  background-color: lightgray;
}

.notification-footer > *
{
	padding: 1%;
	border: 1px solid #00BCD4;
	min-width: 60px;
	text-align: center;
	cursor: pointer;
  font-weight: bold;
}

/*
	pour permettre le positionnement de .notification-banner
*/
.content-body
{
	position: relative;
}

/*
	L'élément de cette classe ne sert qu'à permettre le positionnement
	de l'élément SPAN.
*/
.notification-banner
{
	text-align: center;
	position: absolute;
	top: 5%;
	left: 0px;
	width: 100%;
	/*
		HACK pour ne pas empêcher le clic sur les éléments d'en 
		dessous, comme la valeur par défaut de la propriété 'overflow' est
		visible, le SPAN sera le seul visible.
	*/
	height: 0%;
	z-index: 1;
}

.notification-banner span
{
	padding: 1%;
	box-shadow: 1px 1px 10px 0px black;
}

.notification-banner.success span
{
	background-color: green;
}

.notification-banner.error span
{
	background-color: red;
}

.notification-banner.advertissement span
{
	background-color: orange;
}