html, body{
	width: 100%;
    height: 100%;
    background: #024a9221;
    overflow: hidden;
}

[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak {
	display: none;
}


.z-loading {
    background: transparent;
    border: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 39, 41, 0.3);
    text-align: center;
    display: table;
    position: fixed;
    margin: -20px;
}

.z-loading-indicator {
    border: none;
    background-color: transparent;
    background-image: url(../img/Spinner.gif);
    background-repeat: no-repeat;
    color: #1e0f40;
    font-size: 16px;
    font-weight: 600;
    background-position: top;
    display: table-cell;
    vertical-align: middle;
}

.lmask {
  position: absolute;
  height: 100%;
  width: 100%; 
  background-color: #222e5b70;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;;
  text-align: center;
    display: table;
  
}

.l-mask-indicator {
    border: none;
    background-color: transparent;
    color: #1e0f40;
    font-size: 16px;
    font-weight: 600;
    background-position: top;
    display: table-cell;
    vertical-align: middle;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

$strokeColor: #B8B8B8;
$heartColor: #E21737;
$size: 180px; // change this to manipulate overall size
$totalAnim: 7s;
$delay: 1s;
$squareLen: 240;
$circleLen: 188.522;
$heartLen: 308.522;
$svgSize: 90px;
$circleW: 60px;

.heart-loader {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  margin-top: $size/-2;
  width: $size;
  height: $size;
  overflow: visible;
  
  &__group {
    transform-origin: 0 $svgSize;
    animation: group-anim $totalAnim $delay infinite;
  }
  
  &__square {
    stroke: $strokeColor;
    stroke-dasharray: $squareLen, $squareLen;
    stroke-dashoffset: $squareLen;
    animation: square-anim $totalAnim $delay infinite;
  }
  
  &__circle {
    stroke: $strokeColor;
    stroke-dasharray: $circleLen, $circleLen;
    stroke-dashoffset: $circleLen;
    transform-origin: $circleW $circleW/2;
    
    &.m--left {
      animation: left-circle-anim $totalAnim $delay infinite;
    }
    
    &.m--right {
      animation: right-circle-anim $totalAnim $delay infinite;
    }
  }
  
  &__heartPath {
    stroke: $heartColor;
    fill: transparent;
    stroke-dasharray: $heartLen, $heartLen;
    stroke-dashoffset: $heartLen;
    animation: heart-anim $totalAnim $delay infinite;
  }
}
@keyframes square-anim {
  12% {
    stroke-dashoffset: 0;
  }
  43% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes left-circle-anim {
  12% {
    stroke-dashoffset: $circleLen;
  }
  31% {
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
  41% {
    stroke-dashoffset: 0;
    transform: translateY($circleW/-2);
  }
  43% {
    stroke-dashoffset: 0;
    transform: translateY($circleW/-2);
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    transform: translateY($circleW/-2);
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    transform: translateY($circleW/-2);
    opacity: 0;
  }
}
@keyframes right-circle-anim {
  12% {
    stroke-dashoffset: $circleLen;
  }
  31% {
    stroke-dashoffset: 0;
    transform: translateX(0);
  }
  41% {
    stroke-dashoffset: 0;
    transform: translateX($circleW/2);
  }
  43% {
    stroke-dashoffset: 0;
    transform: translateX($circleW/2);
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    transform: translateX($circleW/2);
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    transform: translateX($circleW/2);
    opacity: 0;
  }
}
@keyframes group-anim {
  43% {
    transform: rotate(0);
  }
  54% {
    transform: rotate(-45deg);
  }
  90% {
    transform: rotate(-45deg);
    opacity: 1;
  }
  97% {
    transform: rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes heart-anim {
  55% {
    stroke-dashoffset: $heartLen;
    fill: transparent;
  }
  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  87% {
    stroke-dashoffset: 0;
    fill: $heartColor;
  }
  100% {
    stroke-dashoffset: 0;
    fill: $heartColor;
  }
}







/*=================================================================
============================LOGIN PAGE===========================
==================================================================*/
.login{
	height: 100%;
	width: 800px;
	margin: auto;
}

.login-container{
	height: 550px;
	width: 100%;
}

.login-container .carousel-inner{
	height: 100%;
}

.carousel-inner .item-content{
	text-align: center;
    color: #fff;
        margin: 20px 0;
}

.carousel-inner .item-content .title{
	     color: #51cccd;
    font-size: 24px;
    font-weight: 500;
    margin: 10px 0;
}

.carousel-inner .item-content p{
	display: block;
    font-size: 15px;
    color: #fff;
    text-shadow: 0 0 1px #000;
}

.login-container .carousel{
	height: calc(100% - 20px);
    margin: 10px 0;
    background-image: linear-gradient(to left, #024f9a, #003a73);
    border-radius: 12px;
    box-shadow: 0px 0px 30px #517190;
}

.login-container .forms{
	background: #fff;
	height: calc(100% - 40px);
    margin: 20px 0;
        border-radius: 0px 12px 12px 0px;
}

.login-container .forms .nav-form{
	text-align: center;
}

.login-container .forms .nav-form button{
	border-bottom: 2px solid #e6e6e6;
	color: #013c76;
}

.login-container .forms .nav-form button.active{
	border-bottom: 2px solid #013c78;
    background: #51cccd;
    box-shadow: 0px -2px 3px 0px rgba(2, 74, 145, 0.24), 4px -2px 2px 0 rgba(145, 189, 255, 0.23), 0 3px 1px -2px rgba(0,0,0,.12);
}
.ff{
	
}
.forms .tab-pane{
	display: none;
	text-align: center;
    margin-top: 30px;
}

.forms .tab-pane.active{
	display: block;
}

.forms .tab-pane .title1 {
   font-weight: bold;
    color: #024a91;
    font-size: 18px;
    padding-bottom: 15px;
}

.tab-login form{
	    max-width: 300px;
    text-align: left;
    margin: auto;
    padding-top: 30px;
}

.login-container .forms form md-icon{
	color: #51cccd;
}

md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder, md-input-container.md-default-theme label, md-input-container label{
	color: #0a4f94de;
}

md-input-container.md-default-theme .md-input, md-input-container .md-input {
    color: #0a4f94de;
    border-color: #0a4f94de;
}

.md-button.md-secondary.md-raised {
	color: rgba(255, 255, 255, 0.87)!important;
    background-color: #51CCCD;
    font-size: 15px;
}

.md-button.md-secondary.md-default-theme.md-raised:not([disabled]).md-focused, .md-button.md-secondary.md-raised:not([disabled]).md-focused {
    background-color: #51CCCD!important;
}

md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value label, md-input-container:not(.md-input-invalid).md-input-has-value label {
    color: rgb(81, 204, 205);
}
.md-button.md-secondary.md-default-theme.md-raised:not([disabled]):hover, .md-button.md-secondary.md-raised:not([disabled]):hover {
    background-color: rgb(73, 200, 202);
}

.md-button.md-default-theme.md-raised, .md-button.md-raised {
    color: rgb(81, 204, 205);
    background-color: rgb(250,250,250);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #0a4f94de;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  transition: background-color 5000s ease-in-out 0s;
   background-color: #fff!important;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #fff!important;
    background-image: none;
    color: #0a4f94de!important;
}

.forms .tab-signin{
	margin-top: 20px;
}

.tab-signin form{
	    max-width: 400px;
    text-align: left;
    margin: auto;s
}

.tab-signin .part2 form{
	margin-top: 30px;
}











/*=================================================================
============================PAGE HEADER===========================
==================================================================*/
header md-toolbar{
	min-height: 56px;
	 height: 56px;
	 background: #003a73;
    background-image: linear-gradient(to left, #024f9a, #003a73);
        padding: 0 25px;
}


header md-toolbar.mtoolbar{
	background: #021e38;
    background-image: none;
}

   

header md-toolbar .logo{
	
}

header md-toolbar .logo img{
	max-height: 40px;
    margin: 7px 0;
}

header md-toolbar .logo span{
	
}

header md-toolbar .search i{
	color:    white;
	opacity:0.5
}

header md-toolbar .search input{
	background: transparent;
    border: none;
    color:    white;
}

header md-toolbar .search input:focus{
	outline: none;
}

header md-toolbar .actions .md-button{
	text-transform: none;
	font-size: 16px;
}

header md-toolbar .actions .md-button.logout{
	line-height: 20px;
    margin: 0;
    min-height: 20px;
    padding-left: 0;
    font-size: 12px;
    color: #51cccd;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .hidden-xs {
        display:none;
    }
}

.page-body{
	height: calc(100% - 56px);
    width: 100%;
   /*  background: #024a9221 */
}


md-toolbar.manager-toolbar{
	min-height: 20px;
    background: #173c67;
}

md-toolbar.manager-toolbar .md-button{
	line-height: 20px;
    min-height: 20px;
    padding-left: 0;
    font-size: 12px;
    color: #fff;
}

md-toolbar.manager-toolbar .md-button .fa{
	padding-right: 10px
}

.mheader{
	background: #021d38;
}

/*=================================================================
============================PAGE SIDENAV===========================
==================================================================*/
.page-sidenav, .page-component {
	    height: 100%;
	    background: transparent;
	    padding: 0 20px;
	    overflow: auto;	
}

.page-sidenav .list-modules{
	background: transparent;
}

.page-sidenav .li-module{
	background: #fff;
	margin: 10px;
	padding: 0 10px;
}

.page-sidenav .li-module.active{
	border-left: 4px solid #013d77;
}

.page-sidenav .list-modules a{
	    color: #0058ad;
    font-weight: 600;
    font-size: 14px;
}

.page-sidenav .list-modules .list-fonc md-list-item,.page-sidenav .list-modules .list-fonc md-list-item .md-list-item-inner:before, md-list-item:before{
	min-height: 40px!important;
	    padding-left: 4px;
}

.page-sidenav .list-modules .list-fonc md-list-item a{
	color: #005ab1;
    font-size: 14px;
}

.page-sidenav .list-modules .list-fonc2 md-list-item,.page-sidenav .list-modules .list-fonc md-list-item .md-list-item-inner:before, md-list-item:before{
	min-height: 30px!important;
	    padding-right: 0px;
}

.page-sidenav .list-modules .list-fonc2{
	border-left: 2px solid #66a6e4;
    margin-left: 3px;
}

.page-sidenav .list-modules .list-fonc2 md-list-item a{
	    color: #08549e;
    font-weight: 500;
    font-size: 13px;
}

.page-sidenav .list-modules .list-fonc3{
	border-left:2px solid #b2d9ff;
    margin-left: 10px;
}

.page-sidenav .list-modules .list-fonc3 md-list-item a{
	    color: #65a6e5;
    font-weight: 500;
    font-size: 12px;
}

.page-sidenav .list-modules a.active{
	    color: #013d77!important;
    font-weight: 600!important;
    font-size: 13px!important;
    text-decoration: none;
}
/* .page-sidenav .list-modules .list-fonc3{
	display: none;
}  */




.msidenav{
	height: 100%;
    background: #021d38;
}








/*=================================================================
============================= GENERALITES ==========================
==================================================================*/

a:focus, a:hover {
    color: #51cccd;
    text-decoration: underline;
}





/*=================================================================
========================CENTER CONTENT TEXT========================
==================================================================*/
.page-component  .introduction, .page-component  .content-presentation{
	background: #fff;
    margin: 20px 0 0 0;
    padding: 10px 20px;
}

.page-component .introduction .title, .page-component .content-presentation .title{
	color: #013d77;
    font-weight: 600;
    font-size: 16px;
}

.page-component {
	padding:18px 30px 18px 10px;
}

.page-component.mcomponent {
	padding:0px;
	    background: #fff;
}

.page-component .presentation{
	background: #fff;
	height: fit-content;
	padding: 10px 20px;
}

.page-component .barService{
	background: #fff;
	padding: unset;
}

.page-component .presentation .header{
	 color: #013c78;
}

.page-component .presentation .header {
	display: block;
    font-size: 26px;
}

.page-component .presentation .header .subtitle, accueil .introduction .title{
	display: block;
    font-size: 14px;
}

.page-component .presentation .body, accueil .introduction .body {
	margin-top: 10px;
}

.page-component .presentation .header .title{
  	font-size: 26px;
  }





/*=================================================================
============================BOX STATS ACCUEIL======================
==================================================================*/
.body .box{
	    height: 140px;
    margin: 0px 20px 20px 20px;
   max-width: 400px!important;
}

.body .boxer{
	height: 120px;
    margin: unset;
   width: 100%;
}

.body .box .color{
	background-image: linear-gradient(to left, #0d63b7, #003a73);
    width: 20%;
}

.grr{
     background-image: linear-gradient(to left, #797b7d, #c0c7ce);
     width: 20%;
}

.body .boxer .color{
	    background-image: linear-gradient(to left, #0d63b7, #003a73);
    width: 20%;
}

.body .box .image{
border-radius: 50%;
    border: 6px solid #51cccd;
    height: 96px;
    width: 96px;
    text-align: center;
    padding-top: 16px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: -48px;
    background: #fff;
}
.body .boxer .image{
border-radius: 50%;
    border: 6px solid #51cccd;
    height: 96px;
    width: 96px;
    padding-top: 16px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: -48px;
    background: #fff;
}

.body .box .content{
	width: 60%;
	text-align: center;
    padding: 15px;
    color:#7f8284;
    height: auto;
    margin: auto;
}
.body .boxer .content{
	width: 100%;
    padding: 15px;
    color:#7f8284;
    height: auto;
    margin: auto;
}

.body .box .content .title{
	display: block;
    color: #013d77;
    font-weight: 600;
    font-size: 16px;
}

.body .boxer .content .title{
	display: block;
	width:100%;
    color: #013d77;
    font-weight: 600;
    font-size: 16px;
}

.body .box .image img{
	max-height: 64px;
    max-width: 64px;
}
.body .boxer .image img{
	max-height: 64px;
    max-width: 64px;
}







/*=================================================================
============================CENTER TITLE============================
==================================================================*/
.title1 {
	height: 90px;
    margin: 0px 20px 20px 0px;
  background: #fff;
  width: 100%;
}

.title1 .color{
	    background-image: linear-gradient(to left, #0d63b7, #003a73);
    width: 64px;
}

.title1 .image{
    border-radius: 50%;
    border: 5px solid #51cccd;
    height: 60px;
    width: 60px;
    text-align: center;
    padding-top: 16px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: -30px;
    background: #fff;
}

.title1 i{
	
    font-size: 30px;
    line-height: 18px;
}

.title1 .content{
    padding: 15px;
    color:#7f8284;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.title1 .content .title{
	display: block;
    color: #013d77;
    font-weight: 600;
    font-size: 24px;
}

.title1 .image img{
	max-height: 40px;
    max-width: 40px;
    margin-top: -10px;
}

.title1 .image2 img{
    
}


/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
ul[dnd-list] .dndDraggingSource {
    display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
ul[dnd-list] .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
}

/**
 * Show selected elements in green
 */
ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}



.img-list img{
	max-width: 100px;
	max-height: 75px
}

.img-list .div-img{
	height: 150px;
}

/*=================================================================
============================INPUT==============================
==================================================================*/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    white;
     opacity:  0.5;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    white;
    opacity:  0.5;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    white;
   opacity:  0.5;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    white;
    opacity:  0.5;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    white;
    opacity:  0.5;
}

::placeholder { /* Most modern browsers support this now. */
   color:    white;
    opacity:  0.5;
}









/*=================================================================
============================SCROLLBAR==============================
==================================================================*/
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-button {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-thumb {
	background: #51cccd;
	border: 0px none #51cccd;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #51cccd;
}

::-webkit-scrollbar-thumb:active {
	background: #51cccd;
}

::-webkit-scrollbar-track {
	background: #024a9205;
	border: 0px none #51cccd;
}

::-webkit-scrollbar-track:hover {
	background: #024a9205;
}

::-webkit-scrollbar-track:active {
	background: #024a9205;
}

::-webkit-scrollbar-corner {
	background: #ccc;
}

body {
	scrollbar-base-color: #51cccd;
	scrollbar-3dlight-color: #51cccd;
	scrollbar-highlight-color: #51cccd;
	scrollbar-track-color: #51cccd;
	scrollbar-arrow-color: #51cccd;
	scrollbar-shadow-color: #51cccd;
	scrollbar-dark-shadow-color: #51cccd;
}

@
-moz-document url-prefix (http: //), url-prefix (https: //) {scrollbar {
	-moz-appearance:none!important;
	background: #51cccd !important;
}

thumb, scrollbarbutton {
	-moz-appearance: none !important;
	background-color: #51cccd !important;
}

thumb:hover, scrollbarbutton:hover {
	-moz-appearance: none !important;
	background-color: #51cccd !important;
}

scrollbar[orient="vertical"] {
	min-width: 5px !important;
}



