@charset "utf-8";
body {
	margin: 0px;
	/*font-family: 'Roboto', sans-serif;*/
	font-family: 'Quicksand', sans-serif;
	color: rgb(58, 58, 61);
}

div {
	box-sizing: border-box !important;
}
.bg-sweet-blue {
	background-color:#e9f1fe !important;
}

.bg-success {
	background-color:#22ce93 !important;
}
.bg-danger {
	background-color:#ff4141 !important;
}
.text-grey {
	color:#CCC;
}

td, th {
	text-align: center;
	vertical-align: middle;
	border-left:solid 1px #FFF
}

table {
	font-size:0.7rem;
}
table .client {
	text-align:left;
}
table .client .cmd {
	font-weight:bold;
	font-size:1rem;
}
table .client .date {
	font-weight:bold;
	font-size:0.7rem;
	margin-left:1rem;
}
table .client .name {
	font-weight:bold;
	font-size:0.8rem;
}
table .price {
	text-align:right;
}
table .total {
	text-align:right;
	font-weight: bold;
	font-size:0.8rem;
}
table .icon {
	font-size:1.3rem;
}


.td-screen-1-hide, .td-screen-2-hide, .td-screen-3-hide, .td-screen-4-hide {
	display: table-cell;
}
.td-screen-1-show {
	display: none; 
}
.nav-link {
	cursor:pointer !important;
}
.nav-icon-container{
	border-right:solid 1px #EBEBEB;
	width:60px; height:60px;
	margin-right:1rem;
	cursor: pointer;
}
.nav-icon {
	text-align: center;
	color:#2b3046;
	font-size:2.2rem;
	transition: 200ms;
}

.nav-icon:hover, .nav-icon-off {
	color:#2048fb;
	transform: rotate(90deg);
	transition: 200ms;
}
.nav-icon-off {
	color:#2048fb;
	transform: rotate(90deg);
}
.nav-icon-off:hover {
	color:#2b3046;
}
.inline-bloc-screen-1-hide {
	display: inline-block; 
}
.inline-bloc-screen-1-show {
	display:none;
}

.side-content {
	width:14%;
	position:fixed; top:0px;left:0px; bottom:0px; overflow:scroll; background-color:#2b3046;
	z-index:10000;
}
.side-nav-colapse {
	display: none;
	position:absolute; top:15px; right:15px; z-index:10000;;
	height:30px; width:30px;
	font-size:2rem; text-align:center; line-height:30px; color:#FFF;
	cursor:pointer;
}
.main-content {
	position:fixed; 
	overflow:scroll; 
	background-color:#f7f9fc; 
	box-sizing:border-box;
}

.main-full {
	top:0px; bottom:0px; left:0px; right:0px; 
}
.main-std {
	top:0px; bottom:0px; left:14%; right:0px; 
}
.main-content-dashboard {
	box-shadow:0px 0px 20px rgba(0,0,0,0.1);
	padding: 0px 1.5rem 1rem 1.5rem;
}
.main-content-dashboard .heading {
	padding: 0px;
}
.main-content-header{
	box-sizing:border-box; box-shadow:0px 0px 20px rgba(0,0,0,0.2); position:relative;
}
.main-content-filter{
	position:absolute; top:10px; right:0.7rem; width:100%; box-sizing:border-box; box-shadow:0px 0px 20px rgba(0,0,0,0.2);
	z-index:1000 !important;
}
.bloc {
	padding:1rem 1.5rem;
	border-radius:10px;
	margin-top:1rem;
}
.bloc-dashed {
	border:1px dashed #616d9f;
}
.bloc-on {
	background-color: #e9f1fe;
}
.bloc h2 {
	font-size:2rem !important;
	padding:0px !important;
}
.bloc h3 {
	font-size:1.4rem !important;
	padding:0px !important;
}
.vignette {
	padding:2rem !important;
	background-color: #f7f9fc !important;
	cursor: pointer;
}
.vignette:hover {
	background-color: #FFF !important;
}


.header-bar {
	height:60px; box-shadow:0px 0px 20px rgba(0,0,0,0.1);
	overflow: hidden;
}
.header-bar .logo {
	padding-top: 0px;
}
.header-bar .icon {
	color: rgb(151, 151, 157);
	font-size: 26px;
	line-height: 50px;
	height: 50px;
	width: 50px;
	text-align: center;
	margin: 5px 0.5rem;
	padding: 0px;
	box-sizing: border-box;
	border-radius: 50%;
	cursor:pointer;
	overflow:hidden;
	background-size:cover;
}
.header-bar .icon:hover, .header-bar .icon-on {
	color: rgb(58, 58, 61);
}

.header-bar .account {
	border: 2px solid #333;
	opacity: 0.8;
}
.header-bar .account:hover, .header-bar .account-on {
	opacity: 1;
}


.side-menu {
	padding:1rem 1rem;
}

.side-menu ul li a {
	color:#b7c0e8;
	text-decoration: none;
}
.side-menu ul li a:hover {
	color:#FFF;
}

.side-menu .item {
	padding:1rem 1rem;
	border-top:dashed 1px #616d9f;
	cursor: pointer;
}
.side-menu .item:first-child {
	border-top:none;
}
.side-menu .item:hover, .side-menu ul li:hover {
	background-color: #3c4361;
	color: #FFF;
}

.side-menu .item:hover h2 {
	color: #FFF;
}

.side-menu .item h2 {
	font-size:1rem;
	color:#b7c0e8;
}

.side-menu .item-detail {
	font-size:0.9rem;
	color:#b7c0e8;
}

.side-menu ul {
	margin:0px; padding:0px;
}

.side-menu ul li {
	list-style: none;
	padding:0.5rem 0rem 0.5rem 1rem;
	cursor: pointer;
}

.side-menu ul li:last-child {
	margin-bottom:2rem;
}

.document-content {
	padding: 1rem 2rem;
}

.document-content h1 {
	font-size:2rem;
	color:rgb(58, 58, 61);
	padding:1.2rem 0 1.2rem 0;
	font-weight:600;
	text-align: center;
}
.document-content h2 {
	font-size:1rem;
	color:rgb(58, 58, 61);
	padding:2rem 0rem 1.5rem 0rem;
	font-weight:600;
}
/*
.document-content h1::after {
	content:"";
	height:1px;
	background-color:#CCC;
	display: block;
	box-sizing: border-box;
	margin-top:0.8rem;
	margin-left:50px;
	margin-bottom:2rem;
	width:30%;
}
*/
.document-content .thead-blue tr {
	background-color:#61646e !important;
	color:#FFF;
}

.user-connect-form {
	width:25%;
	height: 100vh;
	margin: auto;
}


.ajax-content {
	position: fixed;
	top:0px;
	z-index: 20000;
	width: 100%;
	height:100vh;
	background-color:rgba(255,255,255,0.8);
	padding:2rem;
}
.ajax-content .dashboard {
	height:100%;
	background-color: #FFF;
	position: relative;
	padding:0px;
}
.ajax-content .ajax-colapse, .user-account .user-account-colapse {
	position:absolute;
	top:0px; right:10px;
	font-size:2rem;
	cursor: pointer;
}
.ajax-content .ajax-colapse {
	font-size:2rem;
}
.user-account, .parameters, .notifications {
	width:25%;
	position: absolute;
	top:60px; right:0px; bottom: 0px;
}
.user-account .avatar {
	width:100%;
	border-radius:1rem;
}
.user-account .user-account-colapse {
	font-size:1.4rem;
}
.user-account h2 {
	font-size:1.6rem;
}
.user-account h3 {
	font-size:1.2rem;
}
.user-account ul, .parameters ul, .notifications ul {
	padding:0px;
	margin:1rem 0px 0px 0px;
}
.user-account ul li, .parameters ul li, .notifications ul li {
	list-style: none;
	padding:0.5rem;
	margin:0px 0px 2px 0px;
	background-color:#e9f1fe;
	cursor: pointer;
}
.user-account ul li:hover, .parameters ul li:hover, .notifications ul li:hover {
	background-color:#d6e5fd;
}

.parameters, .notifications, .account {
	overflow: scroll;
}
.notifications .readed-link {
	text-align:right;
	padding:0.5rem 0px;
	cursor: pointer;
	text-decoration: underline;
}
.notifications .readed {
	background-color: #f7f9fc !important;
	cursor: default !important;
}
.notifications .notif:hover {
	background-color:#d6e5fd;
}
.notifications .notif {
	display:block;
	padding:1rem;
	background-color:#e9f1fe;
	border-bottom:#EBEBEB dashed 1px;
	cursor: pointer;
}
.notifications .notif .avatar {
	display:inline-block;
	width:20%;
	border-radius:10px;
	box-sizing: border-box;
	margin:0.2rem 0px 0px 0px;
}
.notifications .notif .avatar img {
	width:100%;
}
.notifications .notif .subject {
	display:inline-block;
	width:70%;
	padding-left:1rem;
	box-sizing: border-box;
	margin:0px;
}
.notifications .notif .subject .title {
	font-size:1.2rem;
}
.notifications .notif .subject .description {
	font-size:0.8rem;
}

.parameters h2 {
	padding:1rem;
	font-size:1.4rem;
	border:1px dashed #616d9f;
	border-radius:10px 0px 10px 0px;
	margin-top:1rem;
}
.parameters h2 span {
	font-size:1rem;
	font-weight: bolder;
}
.parameters .assistance {
	padding:1rem;
}
.parameters .assistance .bloc {
	text-align: center;
	border:1px dashed #616d9f;
	background-color:#e9f1fe;
	padding: 1rem;
	border-radius:10px;
	cursor: pointer;
}
.parameters .assistance .bloc:hover {
	background-color:#d6e5fd;
}

.shadow-light {
	box-shadow:0px 0px 20px rgba(0,0,0,0.1);
}
.vertical-align {
	margin: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
  }

/* Responsive */

/* screen-4 */
@media screen and (min-width: 1369px) and (max-width: 1600px) {
	.td-screen-1-hide, .td-screen-2-hide, .td-screen-3-hide {
		display:table-cell;
	}

	.td-screen-4-hide {
		display: none;
	}
	
	.side-nav-colapse {
		display: none !important;
	}
	.side-content {
		width:16% !important;
	}
	.main-std {
		left:16% !important;
	}
	.side-menu .item h2 {
		font-size:0.9rem !important;
	}
	table .icon {
		font-size:1.1rem;
	}
	.inline-bloc-screen-1-show {
		display:none;
	}
	.td-screen-1-show {
		display: none; 
	}
	.user-connect-form {
		width:30%;
		height: 100vh;
	}
}
/* screen-3 */
@media screen and (min-width: 1025px) and (max-width: 1368px) {
	.td-screen-1-hide, .td-screen-2-hide {
		display:table-cell;
	}
	
	.td-screen-3-hide, .td-screen-4-hide {
		display: none;
	}
	.side-nav-colapse {
		display: none !important;
	}
	.side-content {
		width:18% !important;
	}
	.main-std {
		left:18% !important;
	}
	.side-menu .item h2 {
		font-size:0.9rem !important;
	}
	table .icon {
		font-size:0.9rem;
	}
	.inline-bloc-screen-1-show {
		display:none;
	}
	.td-screen-1-show {
		display: none; 
	}
	.user-connect-form {
		width:40%;
		height: 100vh;
	}
}
/* screen-2 */
@media screen and (min-width: 801px) and (max-width: 1024px) {
	.td-screen-1-hide  {
		display:table-cell;
	}
	
	.td-screen-2-hide, .td-screen-3-hide, .td-screen-4-hide {
		display: none;
	}
	
	.side-nav-colapse {
		display: none !important;
	}
	.side-content {
		width:18% !important;
	}
	.main-std {
		left:18% !important;
	}
	.side-menu .item h2 {
		font-size:0.9rem !important;
	}
	table .icon {
		font-size:0.9rem;
	}
	.inline-bloc-screen-1-show {
		display:none;
	}
	.td-screen-1-show {
		display: none; 
	}
	.user-connect-form {
		width:60%;
		height: 100vh;
	}
}
/* screen-1 */
@media screen and (max-width: 800px) {	
	.td-screen-1-hide, .td-screen-2-hide, .td-screen-3-hide, .td-screen-4-hide {
		display: none;
	}
	
	.side-nav-colapse {
		display: block !important;
	}
	.side-content {
		width:100% !important;
	}
	.main-std {
		left:0% !important; 
	}
	.side-menu {
		padding:1rem 0rem !important;
	}
	.side-menu .item h2 {
		font-size:0.8rem !important;
	}
	.document-content {
		padding: 1rem 0px !important;
	}
	.document-content h1 {
		text-align: center !important;
	}
	.main-content-dashboard .heading {
		padding: 0rem !important;
		text-align: center !important;
	}
	
	.main-content-dashboard {
		margin:0px;
		padding:0px 0px 1rem 0px !important;
		width: 100% !important;
	}
	.main-content-filter{
		position:static !important;
	}
	table .icon {
		font-size:0.9rem;
	}
	.td-screen-1-show {
		display: table-cell; 
	}
	.inline-bloc-screen-1-hide {
		display: none !important; 
	}
	.inline-bloc-screen-1-show {
		display:inline-block !important;
	}
	.icon-screen-1 {
		font-size: 1.4rem !important;
	}
	.user-connect-form {
		width:90%;
		height: 100vh;
	}
}