/*
	Nom 	: fo.css
	Descr	: Style du FrontOffice
	Projet	: MyUP!
	
	Par		: Jérémie Dupraz 
	Date 	: 30/11/2020
	Version	: 0.6
*/


body, html {
  height: 100vh;
  margin: 0;
}

body { 
	background: #202344; 
	font-family: 'Montserrat';
	font-size: 18px;
}

.modal-content {
	background: #2d315e;
	color: white;
}


.text-blue-up { color: #98a3ff; }

.container.login {
	align-items: center;
	display: flex;
	justify-content: center;
	height: 80%;
	width: 100%;
}
.container.login img { width: 180px; }


#menu { background: #2d315e; }
#menu .logo { width: 60%; }

#user img {
	height: 50px;
}



/* LOGIN & DENIED */
.logo_fullpage { 
	text-align: center; 
	padding-top: 20px;
}
.logo_fullpage img { width: 100px; }

#join_device {
	width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}


/* DASHBOARD */


#menu ul { 
	margin-top: 50%;
	padding: 0px;
}
#menu li {
	margin-top: 4rem;
	list-style-type:none;
	/*text-align: center;*/
}
#menu li div { display: inline-block; }
#menu li .icon { 
	width: 98%; 
	text-align: center;
}
#menu li .select {
	width: 2%;
}
#menu li.active { color: white; }
#menu li.active > .select {
	height: 30px; 
	background-color: white;
	border-radius: 20%;
}
#menu li img { height:30px; }


#app-list { }
.app-container {
	float: left;
	margin-top: 2.5rem !important;
	margin-bottom: 2.5rem !important;
	text-align: center;
	width: 33%;
	height: 240px;
}
	.app {
		width:70%;
		margin:auto;
	}
		.app:hover > img, 
		.app:active > img {
			transform: scale(.90);
		}
	
		.app > img {
			padding-top:10px;
			padding-bottom: 10px;
			height: 8rem;
			transition: all .2s ease-in-out;
		}
		.app_name span {
			color: #98a3ff;
			font-size: 16px;
		}
		
	h4.message { 
		margin: 2rem;
		font-size: 24px;
		text-align: center;
	}
	
.pointer.action {
	text-align: center !important;
	font-size: 16px;
}
.pointer.action img { width: 50px; }
.pointer.action:hover > img, 
.pointer.action:active > img {
	transform: scale(.90);
}


.visio-contact {
	margin-top: 1.5rem;
	margin-right: 1.5rem;
}
.visio-contact .fas { color: #f4a43a; }

/*#call .fas.fa-bell {
	margin-bottom: 1rem;
	-webkit-animation: ring 5s .7s ease-in-out infinite;
	-webkit-transform-origin: 50% 4px;
	-moz-animation: ring 5s .7s ease-in-out infinite;
	-moz-transform-origin: 50% 4px;
	animation: ring 5s .7s ease-in-out infinite;
	transform-origin: 50% 4px;	
}*/


.pointer { cursor: pointer; }
.inline { display: inline-block; }
.nobottommargin { margin-bottom:0px; }



@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }
  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }
  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}