/* Interface par défaut */
/* Ensemble de l'interface de base.html */

html, body {
	z-index: 0;
	margin: 0;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}

/* Style du texte au dessus du bouton GPS */
.suivi_gps_text {
	font-size: 12px;
	position: fixed;
	top: 80px;
	left: 5px;
}

/* Style du bouton GPS */
.switch {
	display: inline-block;
	position: fixed;
	top: 100px;
	left: 5px;
	width: 70px;
	height: 40px;
	cursor: pointer;
	overflow: hidden;
}

.switch input {
	position: absolute;
	top: -30px;
	left: -30px;
	width: 0;
	height: 0;
}

.switch input + span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #99b4df;
	border-radius: 20px;
}

.switch input:checked + span {
	background: #346abf;
}

.switch input + span:before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 4px;
	width: 32px;
	height: 32px;
	background: white;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all .5s;
}

.switch input:checked + span:before {
	left: 34px;
}

@font-face {
	font-family: 'Loose-Light';
	src: url("/static/fonts/Loose-Light.woff2") format('woff2'),
		 url("/static/fonts/Loose-Light.woff") format('woff'),
		 url("/static/fonts/Loose-Light.ttf") format('truetype'),
		 url("/static/fonts/Loose-Light.eot") format('embedded-opentype'),
		 url("/static/fonts/Loose-Light.otf") format('opentype');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: 'Loose-Light', sans-serif;
}

#search-icon {
	position: fixed;
	border: none;
	border-radius: 10px;
	top: 50px;
	right: 10px;
	z-index: 1000;
	background-color: rgba(255, 255, 255, 0.3);
	height: 30px;
	justify-content: center;
}

#search-results {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  width: 100%;
}

.search-result {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.search-result:hover {
  background-color: #f0f0f0;
}



/**  --------------------------
		   Flashups
--------------------------  **/
.flashup_danger {
	color: rgb(255, 89, 89);
}

.flashup_success {
	color: rgb(128, 255, 89);
}

.flashup_normal {
	color: rgb(202, 104, 23);
}

#flashup-container {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 5500;
}

.page_flashup_message {
	padding: 20px;
}

.page_flashup_container { /* .popup-container        ✓ */
	display: none;
	position: relative;
	right: -100%;
	transition: transform 1s, right 1s;
	z-index: 6000;
	background: #bad0e6;
	padding: 5px;
	margin-bottom: 12px;
	border-radius: 5px;
	box-shadow: 
	5px 5px #7daccc inset, /* Ombre en bas à droite */
	5px -5px #7daccc inset; /* Ombre en haut à droite */
}

.page_flashup_container.show { /* .popup-container.show        ✓ */
	right: 0;
	display: block;
}

.page_flashup_container.hide {
	right: -100%; /* Le flashup repart vers la droite pour disparaître */
}


/**  --------------------------
		   Tchat
--------------------------  **/
#tchat-container {
	position: absolute;
	top: 0;
	left: -100%;
	height: 100vh; /* ou 100% si vous voulez qu'il prenne la hauteur de son parent */
	background-color: #5d66e2;
	border: 3px solid #5dc3e2;
	padding: 10px;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	overflow-y: auto; /* pour que le contenu défile si nécessaire */
	transition: left 0.5s;
}

#toggle-chat {
	color: #000000;
	background-color: rgb(39, 107, 255);
	padding: 5px;
	cursor: pointer;
	border-radius: 10px;
	display: block;
	border: none;
	position: relative;
	width: 100%;
}

#close-chat-font {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #000000;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 1998;
}

#tchat {
	top: 0%;
	left: 0%;
	width: 100%;
	height: 90%;
	overflow-y: scroll;
	position: relative;
	z-index: 2005;
	font-size: 18px;
	text-align:center;
	flex-grow: 1;
	overflow-y: auto; /* pour que le contenu défile si nécessaire */
}

.load-more-messages {
	color: #a8a8a8;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 5px 5px 10px;
	cursor: pointer;
	border-radius: 40px 40px 0px 0px;
	display: block;
	border: none;
	position: relative;
	width: 100%;
}

.load-more-messages:hover, .load-more-messages:active {
	color: #a8a8a8;
	background-color: rgba(0, 0, 0, 0.4);
}

.custom-button {
	border: none;
	background-color: transparent;
	padding: 0;
	cursor: pointer;
}

.error_message {
	font-size: 20px;
	color: rgb(163, 0, 0);
	padding: 20px;
}

.success_message {
	font-size: 20px;
	color: rgb(8, 163, 0);
	padding: 20px;
}

.gris {
	color: #bfbfbf;
}

.CodeBlock {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.tchat-link {
	color: #8ab4f8;
	text-decoration: underline;
}

.img_message {
	width: 30px;
	height: 30px;
}

.cursor_passage {
	text-align: left;
	background-color: rgba(0, 0, 0, 0.3);
}

.cursor_passage:hover, .cursor_passage:active {
	background-color: rgba(0, 0, 0, 0.4);
}

.nickname {
	position: relative;
	top: 5px;
	left: 3px;
}

.message-content {
	white-space: normal;
	word-wrap: break-word;
	color: rgb(148, 148, 148);
	padding: 0px 6px 0px 8px;
}

.msg_timestamp {
	color: #a8a8a8;
	top: 1px;
	display: inline-block;
	position: relative;
	line-height: 1.5;
	font-size: 12px;
}

#messageInput {
	width: 100%;
	left: 0%;
	margin: 0%;
	padding: 0%;
	background-color: transparent;
	color: rgb(148, 148, 148);
	border: 0px solid #000;
	border-radius: 10px;
	line-height: 1.5;
	font-size: 18px;
	position: relative;
	resize: none;
}

#messageInput:focus {
	outline: none;
}

#messageDiv {
	display: inline-block;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 0px 0px 20px 20px;
	margin: 0%;
	padding: 10px;
	justify-content: center;
	align-items: center;
	flex-grow: 0; /* pour que le messageDiv ne prenne pas toute la hauteur disponible */
}

#messageDiv:hover, #messageDiv:active {
	background-color: rgba(0, 0, 0, 0.4);
}

#sendDiv {
	display: flex;
	height: 100%;
	width: max-content;
	position: relative;
	margin-left: auto;
}

.sendBtn {
	font-size: 30px;
	text-decoration: none;
}

.sendBtn:hover, .sendBtn:active {
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 14px;
}

#pseudo {
	color: black;
	display: block;
	justify-content: center;
	align-content: center;
}

#command-proposals {
	max-height: 300px;
	overflow-y: scroll;
	::-webkit-scrollbar {
		background-color: #5d66e2;
	}
}

.command-proposal {
	margin: 0;
    padding: 0;
	margin-bottom: 10px;

}

.background-font {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
}

.popup-font {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.popup-content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(54, 54, 54);
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	z-index: 20;
}


@media only screen and (max-width: 600px) {
	#tchat-container {
		width: 100%;
	}
	#flashup-container {
		width: 64%;
	}
}

@media only screen and (min-width: 601px) and (max-width: 700px) {
	#tchat-container {
		width: 70%;
	}
	#flashup-container {
		width: 70%;
	}
}

@media only screen and (min-width: 701px) {
	#tchat-container {
		width: 50%;
	}
	#flashup-container {
		width: 54%;
	}
}

@media only screen and (min-width: 901px) {
	#flashup-container {
		width: 40%;
	}
}
















.n {
	padding:5px
}

#az-website-title a {
	text-decoration: none
}

.az-m-image-align-1 {
	text-align:left
}

.az-m-image-align-2 {
	text-align:right
}

.az-m-image-align-3 {
	text-align:center
}

.btn_img {
	width: 250px;
}

.img_post {
	max-width: 98%;
	max-height: 250px;
	position: relative;
}

#imageInput {
	display: none; /* Cache l'élément input */
}

.popup-container {
	display: none;
	position: fixed;
	right: -100%;
	transition: right 2s;
	z-index: 30;
	
	top: 0%;
	width: 30%;
	background: #151617;
	padding: 5px 5px 10px;
	margin-bottom: 12px;
	border-radius: 5px;
	box-shadow: 
	5px 5px #0b0c0d inset, /* Ombre en bas à droite */
	5px -5px #0b0c0d inset; /* Ombre en haut à droite */
}

.popup-container.show {
	right: -1%;
}

.popup-overlay {
	display: none;
}

.hidden {
	display:none
}

.message-popup {
	color: rgb(92, 38, 0);
	font-size: 14px;
}