input[type='text'], input[type='number'], input[type='email'], input[type='file']{
	border-radius: 3px;
}
.user-card {
background-image: linear-gradient(to right top, #26314f, #2e4b70, #2f6792, #2885b4, #0fa5d3);
}

.user-card-label {
	color: #6f5f5f;
}
.user-card-info {
	color: #808080;
}
.user-img {
	width: 100px;
	height: 100px;
	max-width: 150px;
	border-radius: 50% !important;
}


	.menu-etudiant {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1.5rem;
		background:#fff;
		text-align: center;
		padding: 10px;
		font-size: 1em;
	}

	.menu-etudiant div a div {
		margin-top: 1rem;
	}

	.menu-etudiant div a.current {
		color: #428BCA;
	}

	  .portlet {
	    margin: 0 1em 1em 0;
	    padding: 0.3em;
	  }
	  .portlet-header {
	    padding: 0.2em 0.3em;
	    margin-bottom: 0.5em;
	    position: relative;
	  }
	  .portlet-toggle {
	    position: absolute;
	    top: 50%;
	    right: 0;
	    margin-top: -8px;
	  }

	  .portlet.sousCategories {
	  	border: none !important;
	  }

	  .portlet-placeholder {
	    border: 1px dotted black;
	    margin: 0 1em 1em 0;
	    height: 50px;
	  }

	  .menu-center-class {
	  	display: flex !important;
    	justify-content: space-between !important;
    	align-items: center !important;
	  }

	.js .inputfile {
	    width: 0.1px;
	    height: 0.1px;
	    opacity: 0;
	    overflow: hidden;
	    position: absolute;
	    z-index: -1;
	}

	.inputfile + label {
	    max-width: 80%;
	    /*font-size: 1.25rem;*/
	    /* 20px */
	    font-weight: 700;
	    /*text-overflow: ellipsis;*/
	    white-space: nowrap;
	    cursor: pointer;
	    display: inline-block;
	    overflow: hidden;
	    padding: 0.625rem 1.25rem;
	    /* 10px 20px */
	}

	.no-js .inputfile + label {
	    display: none;
	}

	.inputfile:focus + label,
	.inputfile.has-focus + label {
		outline: none !important;
	    /*outline: 1px dotted #000;*/
	    /*outline: -webkit-focus-ring-color auto 5px;*/
	}

	.inputfile + label * {
	    /* pointer-events: none; */
	    /* in case of FastClick lib use */
	}

	.inputfile + label svg {
	    width: 1em;
	    height: 1em;
	    vertical-align: middle;
	    fill: currentColor;
	    margin-top: -0.25em;
	    /* 4px */
	    margin-right: 0.25em;
	    /* 4px */
	}

	.inputfile-pictures + label {
	    color: #d3394c;
	    /*background-color: #d3394c;*/
	}

	/*.inputfile-pictures:focus + label,
	.inputfile-pictures.has-focus + label,
	.inputfile-pictures + label:hover {
	    background-color: #722040;
	}*/

	.no-bg-no-border {
		background: transparent;
    	border: none;
	}

	.card {
	  	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
	  	transition: box-shadow .25s, -webkit-box-shadow .25s;
		/*margin: .5rem 0 1rem 0;*/
		border-radius: 2px;
	}

	.card-header {
		background-color: #f2f2f2;
		padding: 0;margin: 0;
		padding: .5rem 0 1rem 0;
		margin-bottom: 1rem;
	}

	.card-bloc-content {
		background-color: #fbfbfb;
	}

	.card .title {
	    /*text-transform: uppercase;*/
	    font-size: 1.5rem;
	    font-weight: 500;
	}

	.card-wrapper {
		transition: box-shadow .25s !important;
	    padding: 24px !important;
	    /*margin: .5rem 0 1rem 0 !important;*/
	    border-radius: 2px !important;
	    background-color: #fff !important;
	    border: 1px solid #e7e7e7 !important;
	}

	.card-panel {
		transition: box-shadow .25s !important;
	    padding: 24px !important;
	    /*margin: .5rem 0 1rem 0 !important;*/
	    border-radius: 2px !important;
	    background-color: #fff !important;
	    border: 1px solid #e7e7e7 !important;
	}

	.card-panel .card-header {
		display: flex;
		align-items: center;
		background-color: #efefef !important;
		border: 1px solid #efefef !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.no-padding {
		padding: 0 !important;
	}
	.no-margin {
		margin: 0 !important;
	}

	.categories {
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
	  	transition: box-shadow .25s !important;
	 	border-radius: 2px !important;
	    background-color: #fff !important;
	    border: 1px solid #e7e7e7 !important;
	    margin-top: 1em !important;
	}

	.resident-header {
		margin-bottom: 15px;
	}

	.welcome-msg {
		/*font-size: 32px;*/
		font-weight: 500;
	}

	.articles {
		padding: 0 !important;
		margin: 0 !important;
		font-size: 11px !important;
		margin-top: 2px !important;
	}

	.articleName {
		height: 30px !important;
		display: flex ;
		align-items: center !important;
		margin-top: 5px;
	}

	.articleName h6 {
		margin:0 !important;padding:0 !important;
	}

	.categories .articles:hover {
		border-left: 1px solid #2c3e50;
	}

	.showInputNombres, .showLabelReplacementCost  {
		margin-top: .5em;
	}

	.common-card:hover {
		box-shadow: 0 4px 4px 0 rgba(0,0,0,0.14), 0 2px 10px 0 rgba(0,0,0,0.12), 0 6px 2px -4px rgba(0,0,0,0.2) !important;
	}

	.mycheckbox { display: none !important; }

	.mycheckbox + label {
	  display: block;
	  position: relative;
	  padding-left: 35px;
	  margin-bottom: 20px;
	  font: 14px/20px 'Open Sans', Arial, sans-serif;
	  color: #222;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	}

	.mycheckbox + label:last-child { margin-bottom: 0; }

	.mycheckbox + label:before {
	  content: '';
	  display: block;
	  width: 20px;
	  height: 20px;
	  border: 1px solid #222;
	  position: absolute;
	  left: 0;
	  top: 0;
	  opacity: .6;
	  -webkit-transition: all .12s, border-color .08s;
	  transition: all .12s, border-color .08s;
	}

	.mycheckbox:checked + label:before {
	  width: 10px;
	  top: -5px;
	  left: 5px;
	  border-radius: 0;
	  opacity: 1;
	  border-top-color: transparent;
	  border-left-color: transparent;
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg);
	}

	.btn-material-success {
		text-decoration: none !important;
	    color: #4caf50 !important;
	    background-color: #fff !important;
	    text-align: center !important;
	    letter-spacing: .5px !important;
	    -webkit-transition: background-color .2s ease-out !important;
	    transition: background-color .2s ease-out !important;
	    cursor: pointer !important;
	    font-size: 14px !important;
    	outline: 0 !important;
    	border-radius: 2px !important;
    	height: 36px !important;
	    line-height: 36px !important;
	    padding: 0 16px !important;
	    text-transform: uppercase !important;
	    vertical-align: middle !important;
	    -webkit-tap-highlight-color: transparent !important;
        border: none !important;
        font-weight: normal !important;

        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	}
	
	.btn-material-success:hover{
		background: #4caf50 !important;
		color: #fff !important;
	}

	.btn-material-rounded-primary {
		text-decoration: none !important;
	    color: #3f51b5 !important;
	    text-align: center !important;
	    letter-spacing: .5px !important;
	    -webkit-transition: background-color .2s ease-out !important;
	    transition: background-color .2s ease-out !important;
	    cursor: pointer !important;
	    font-size: 14px !important;
    	outline: 0 !important;
	    line-height: 40 !important;
	    text-transform: uppercase !important;
	    vertical-align: middle !important;
	    -webkit-tap-highlight-color: transparent !important;
        border: none !important;
        font-weight: normal !important;

        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        border-radius: 50% !important;

        z-index: 99;
        display: inline-block;
        align-self: flex-end;
        width: 40px !important;
        height: 40px !important;
        background: #fff;
        padding: 10px;
        margin-bottom: -25px;
	}

	.btn-material-rounded-primary:hover{
		background: #3f51b5;
		color: #fff !important;
	}

	.btn-material-default {
		text-decoration: none !important;
	    color: #333333 !important;
	    background-color: #fff !important;
	    text-align: center !important;
	    letter-spacing: .5px !important;
	    -webkit-transition: background-color .2s ease-out !important;
	    transition: background-color .2s ease-out !important;
	    cursor: pointer !important;
	    font-size: 14px !important;
    	outline: 0 !important;
    	border-radius: 2px !important;
    	height: 36px !important;
	    line-height: 36px !important;
	    padding: 0 16px !important;
	    text-transform: uppercase !important;
	    vertical-align: middle !important;
	    -webkit-tap-highlight-color: transparent !important;
        border: none !important;
        font-weight: normal !important;

        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        border-radius: 3px !important;
	}

	.btn-material-default:hover{
		background: #333333 !important;
		color: #fff !important;
	}

	.btn-material-danger {
		text-decoration: none !important;
	    color: #ff3660 !important;
	    background-color: #fff !important;
	    text-align: center !important;
	    letter-spacing: .5px !important;
	    -webkit-transition: background-color .2s ease-out !important;
	    transition: background-color .2s ease-out !important;
	    cursor: pointer !important;
	    font-size: 14px !important;
    	outline: 0 !important;
    	border-radius: 2px !important;
    	height: 36px !important;
	    line-height: 36px !important;
	    padding: 0 16px !important;
	    text-transform: uppercase !important;
	    vertical-align: middle !important;
	    -webkit-tap-highlight-color: transparent !important;
        border: none !important;
        font-weight: normal !important;

        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        border-radius: 3px !important;
	}

	.btn-material-danger:hover{
		background: #ff3660 !important;
		color: #fff !important;
	}

	.btn-material-reverse, .btn-material:hover {
	    text-decoration: none !important;
	    color: #fff !important;
	    background-color: #26314f !important;
	    text-align: center !important;
	    letter-spacing: .5px !important;
	    -webkit-transition: background-color .2s ease-out !important;
	    transition: background-color .2s ease-out !important;
	    cursor: pointer !important;
	    font-size: 14px !important;
    	outline: 0 !important;
    	border-radius: 2px !important;
    	height: 36px !important;
	    line-height: 36px !important;
	    padding: 0 16px !important;
	    text-transform: uppercase !important;
	    vertical-align: middle !important;
	    -webkit-tap-highlight-color: transparent !important;
        border: none !important;
        font-weight: normal !important;

        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	}

	.btn-material {
		text-decoration: none !important;
	  	color: #26314f !important;
	    background-color: #fff !important;
	    text-align: center !important;
	    letter-spacing: .5px !important;
	    -webkit-transition: background-color .2s ease-out !important;
	    transition: background-color .2s ease-out !important;
	    cursor: pointer !important;
	    font-size: 14px !important;
    	outline: 0 !important;
    	border-radius: 2px !important;
    	height: 36px !important;
	    line-height: 36px !important;
	    padding: 0 16px !important;
	    text-transform: uppercase !important;
	    vertical-align: middle !important;
	    -webkit-tap-highlight-color: transparent !important;
        border: none !important;
        font-weight: normal !important;

        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	}
 
	.waves-effect {
		/*position: relative;*/
	    cursor: pointer;
	    display: inline-block;
	    overflow: hidden;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    -webkit-tap-highlight-color: transparent;
	    vertical-align: middle;
	    z-index: 1;
	    -webkit-transition: .3s ease-out;
	    transition: .3s ease-out;
	}

	/** Materila card **/
	.card-material {
		transition: box-shadow .25s;
		padding: 20px;
		/*margin: 0.5rem 0 1rem 0;*/
		border-radius: 2px;
		background-color: #FFF;
	  	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	}

	/*Checkboxes*/
	.toggle-button--ilma {
	  width: 100px;
	  height: 20px; }
	  .toggle-button--ilma label {
	    position: absolute;
	    left: 0;
	    width: 20px;
	    height: 20px;
	    line-height: 20px;
	    transition: all 0.2s;
	    background: #fff;
	    border-radius: 2px;
	    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
	    .toggle-button--ilma label:before, .toggle-button--ilma label:after {
	      position: absolute;
	      top: 0;
	      left: 30px;
	      transition: all 0.2s .1s ease-out; }
	    .toggle-button--ilma label:before {
	      content: attr(data-on-text); }
	    .toggle-button--ilma label:after {
	      content: attr(data-off-text); }
	  .toggle-button--ilma input + label:before {
	    opacity: 0;
	    transform: translate(20px, 0); }
	  .toggle-button--ilma input + label:after {
	    opacity: 1;
	    transform: translate(0, 0); }
	  .toggle-button--ilma input:checked ~ label:before {
	    opacity: 1;
	    transform: translate(0, 0); }
	  .toggle-button--ilma input:checked ~ label:after {
	    opacity: 0;
	    transform: translate(20px, 0); }
	  .toggle-button--ilma input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button--ilma input[type=checkbox]:checked ~ .toggle-button__icon:after {
	    background: #61B136;
	    transition: none;
	    transform-origin: left center; }
	  .toggle-button--ilma input[type=checkbox]:checked ~ .toggle-button__icon:before {
	    animation: iconShowBefore .3s;
	    transform: translate(0, 0) rotate(45deg) scale(0.6, 1); }
	  .toggle-button--ilma input[type=checkbox]:checked ~ .toggle-button__icon:after {
	    animation: iconShowAfter .6s;
	    transform: translate(4px, 6px) rotate(-45deg); }
	  .toggle-button--ilma .toggle-button__icon {
	    position: absolute;
	    height: 20px;
	    width: 20px;
	    top: 0;
	    left: 0; }
	    .toggle-button--ilma .toggle-button__icon:before, .toggle-button--ilma .toggle-button__icon:after {
	      width: calc(20px - 6px);
	      height: 3px;
	      border-radius: 3px;
	      background: #fff;
	      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	      margin-left: -4px;
	      top: 40%;
	      background: #FF5335;
	      transform-origin: center center; }
	    .toggle-button--ilma .toggle-button__icon:before {
	      transform: rotate(45deg); }
	    .toggle-button--ilma .toggle-button__icon:after {
	      transform: rotate(-45deg); }
	  .toggle-button--ilma:hover label {
	    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
	  .toggle-button--ilma:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:before {
	    animation: iconHoverBefore .2s; }
	  .toggle-button--ilma:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:after {
	    animation: iconHoverAfter .2s; }

	@keyframes iconShowBefore {
	  0% {
	    transform: translate(0, 0) rotate(45deg) scale(0, 1); }
	  100% {
	    transform: translate(0, 0) rotate(45deg) scale(0.6, 1); } }

	@keyframes iconShowAfter {
	  0% {
	    opacity: 0; }
	  49% {
	    opacity: 0; }
	  50% {
	    opacity: 1;
	    transform: translate(4px, 6px) rotate(-45deg) scale(0, 1); }
	  100% {
	    transform: translate(4px, 6px) rotate(-45deg) scale(1, 1); } }

	@keyframes iconHoverBefore {
	  0% {
	    transform: rotate(45deg) scale(1, 1); }
	  100% {
	    transform: rotate(45deg) scale(1.2, 1.2); } }

	@keyframes iconHoverAfter {
	  0% {
	    transform: rotate(-45deg) scale(1, 1); }
	  50% {
	    transform: rotate(-45deg) scale(1.2, 1.2); } }



.wave1, .wave2{height: 30px;width: 100%;z-index: 12;left: 0;bottom: 0;}

.wave1 {
  -webkit-animation: wave-animation1 8.7s infinite linear; /* Safari 4+ */
  -moz-animation:    wave-animation1 8.7s infinite linear; /* Fx 5+ */
  -o-animation:      wave-animation1 8.7s infinite linear; /* Opera 12+ */
  animation:         wave-animation1 8.7s infinite linear; /* IE 10+ */
}
.wave2 {
  -webkit-animation: wave-animation1 6.3s infinite linear; /* Safari 4+ */
  -moz-animation:    wave-animation1 6.3s infinite linear; /* Fx 5+ */
  -o-animation:      wave-animation1 6.3s infinite linear; /* Opera 12+ */
  animation:         wave-animation1 6.3s infinite linear; /* IE 10+ */
}

@-webkit-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-moz-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-o-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% {background-position: 1601px 0;}
}

.wave1 {
    background: url('http://www.templates-preview.com/bootstrap-templates/300111854/images/wave1.png') 0 0 repeat-x;
}
.wave2 {
    background: url('http://www.templates-preview.com/bootstrap-templates/300111854/images/wave2.png') 0 0 repeat-x;
}

#pushBtn {
	margin: 5px;
	display: flex;
    justify-content: center;
    align-items: center;
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	background-color: white;
	color: #26314F;
	padding:auto;
}