diff -r 000000000000 -r bca7a7e058a3 src/pyams_skin/resources/less/messages.less
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_skin/resources/less/messages.less	Thu Feb 13 11:43:31 2020 +0100
@@ -0,0 +1,328 @@
+
+@import "colors.less";
+
+/**
+ * Messages boxes
+ */
+
+.MessageBox {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(80, 80, 80, .7);
+	z-index: 100000;
+
+	@media screen and (max-width:450px) and (max-width:767px) {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		background: rgba(80, 80, 80, .7);
+		z-index: 100000;
+	}
+}
+
+.MessageBoxContainer {
+	top: 35%;
+	color: #fff;
+	position: relative;
+	width: 100%;
+	background-color: @messageBgColor;
+	padding: 20px;
+
+	&.info {
+		width: 60%;
+		left: 20%;
+		background-color: rgba(255, 255, 255, 0.9);
+		color: @textColor;
+	}
+
+	@media screen and (max-width:450px) and (max-width:767px) {
+		top: 25%;
+		color: #fff;
+		position: relative;
+		width: 100%;
+		background-color: @messageBgColor;
+	}
+
+	input,
+	select {
+		width: 50%;
+		padding: 5px;
+
+		@media screen and (max-width:450px) and (max-width:767px) {
+			width: 50%;
+			padding: 5px;
+		}
+	}
+}
+
+.MessageBoxMiddle {
+	position: relative;
+	left: 20%;
+	width: 60%;
+
+	@media screen and (max-width:450px) and (max-width:767px) {
+		position: relative;
+		left: 0;
+		width: 100%;
+		padding: 3px;
+	}
+	.MsgTitle {
+		letter-spacing: -1px;
+		font-size: 24px;
+		font-weight: 300;
+
+		@media screen and (max-width:450px) and (max-width:767px) {
+			font-size: 22px;
+		}
+	}
+	.pText {
+		font-style: 30px;
+	}
+	@media screen and (max-width:450px) and (max-width:767px) {
+		font-style: 10px;
+	}
+}
+
+.MessageBoxButtonSection {
+	width: 100%;
+	height: 30px;
+	text-align: right;
+
+	@media screen and (max-width:450px) and (max-width:767px) {
+		width: 100%;
+		height: 30px;
+	}
+	button {
+		margin-right: 7px;
+		padding-left: 15px;
+		padding-right: 15px;
+		font-size: 14px;
+		font-weight: 700;
+
+		@media screen and (max-width:450px) and (max-width:767px) {
+			float: right;
+			margin-right: 5px;
+			padding-left: 15px;
+			padding-right: 15px;
+		}
+	}
+}
+
+.LoadingBoxContainer {
+	top: 20%;
+	color: #fff;
+	position: relative;
+	width: 100%;
+	background-color: @messageBgColor;
+
+	.MsgTitle {
+		font-size: 26px;
+	}
+	.pText {
+		font-style: 30px;
+	}
+}
+
+.LoadingBoxMiddle {
+	position: relative;
+	left: 20%;
+	width: 50%;
+	padding: 10px;
+}
+
+#LoadingPoints {
+	position: absolute;
+}
+
+#divMiniIcons {
+	position: fixed;
+	width: 415px;
+	right: 10px;
+	bottom: 180px;
+	z-index: 9999;
+	float: right;
+
+	.cajita {
+		text-align: center;
+		vertical-align: middle;
+		padding: 4px 6px;
+		color: #FFF;
+		float: right;
+		cursor: pointer;
+		display: block;
+		background-color: red;
+		font-size: 17px;
+		margin-left: 4px;
+		margin-top: 5px;
+
+		&:active {
+			top: 1px;
+			left: 1px;
+			position: relative;
+		}
+	}
+}
+
+#divSmallBoxes {
+	position: fixed;
+	right: 0;
+	top: 0;
+	z-index: 9999;
+
+	@media screen and (max-width:450px) and (max-width:767px) {
+		position: fixed;
+		width: 90%;
+		right: 0;
+		top: 0;
+	}
+}
+
+.BigBox {
+	position: fixed;
+	right: 10px;
+	bottom: 10px;
+	background-color: #004d60;
+	padding: 10px 10px 5px;
+	width: 390px;
+	height: 150px;
+	color: #fff;
+	z-index: 99999;
+	box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	border-left: 5px solid rgba(0, 0, 0, .15);
+	overflow: hidden;
+
+	span {
+		font-size: 17px;
+		font-weight: 300;
+		letter-spacing: -1px;
+		padding: 5px 0!important;
+		display: block;
+	}
+	p {
+		font-size: 13px;
+		margin-top: 10px;
+	}
+
+	@media screen and (max-width:450px) and (max-width:767px) {
+		width: 88%;
+	}
+	.bigboxicon {
+		font-size: 30px;
+		text-align: left;
+		position: absolute;
+		top: 120px;
+		left: 6px;
+		z-index: 0;
+	}
+	.bigboxnumber {
+		width: 100%;
+		text-align: right;
+		font-size: 25px;
+	}
+}
+
+.SmallBox {
+	position: absolute;
+	right: 5px;
+	top: 20px;
+	width: 420px;
+	color: #fff;
+	z-index: 9999;
+	overflow: hidden;
+	border: 1px solid transparent;
+
+	@media screen and (max-width:450px) and (max-width:767px) {
+		width: 95%;
+	}
+	&:hover {
+		border: 1px solid #fff;
+		cursor: pointer;
+
+		@media screen and (max-width:450px) and (max-width:767px) {
+			-webkit-box-shadow: 0 0 10px #888;
+			box-shadow: 0 0 10px #888;
+			cursor: pointer;
+		}
+	}
+	.foto {
+		font-size: 30px;
+		position: absolute;
+		left: 20px;
+	}
+	.textoFull {
+		width: 93%;
+		float: left;
+		padding-left: 20px;
+
+		@media screen and (max-width:450px) and (max-width:767px) {
+			width: 93%;
+			float: left;
+			padding-left: 20px;
+		}
+	}
+	.textoFoto {
+		width: 78%;
+		margin: 3px 20px 3px 80px;
+		float: left;
+
+		@media screen and (max-width:450px) and (max-width:767px) {
+			width: 55%;
+			margin: 3px 20px 3px 80px;
+			float: left;
+		}
+	}
+	span {
+		font-size: 17px;
+		font-weight: 300;
+		letter-spacing: -1px;
+		display: block;
+		margin: 4px 0;
+
+		@media screen and (max-width:450px) and (max-width:767px) {
+			font-size: 16px;
+		}
+	}
+	p {
+		font-size: 13px;
+		margin-top: 2px;
+
+		@media screen and (max-width:450px) and (max-width:767px) {
+			font-size: 12px;
+			margin-top: 2px;
+		}
+	}
+}
+
+.btnClose {
+	position: absolute;
+	right: 10px;
+	height: 16px;
+	width: 15px;
+	cursor: pointer;
+	font-size: 18px;
+	opacity: .5;
+	display: block;
+	top: 15px;
+
+	&:hover {
+		opacity: 1;
+	}
+}
+
+.miniPic {
+	position: absolute;
+	bottom: 8px;
+	right: 9px;
+}
+
+.miniIcon {
+	height: 100%;
+	font-size: 20px;
+}