html {
  height: 100%;
}
body {
  min-height: 100%;
}

.main-form {
  max-width: 95%;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}





@font-face {
  font-family: "icon";
  src: url("icon.woff?3") format("woff");
}


*::before,
*::after {
  font-family: "icon"!important;
  vertical-align: middle;
  line-height: 1;
  color: inherit;
}




/* General styles (layout, forms, multi-pages elements…) */
@charset "utf-8";


/* ANIMATIONS
------------------------------------------------------------*/
@keyframes appearSlow {
  0%   { transform-origin: 50% 50%; transform: scale(0.4 , 1.4); }
  100% { transform-origin: 50% 50%; transform: scale(1, 1); }
}
@keyframes md-ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  50% {
    transform: scale(25, 25);
    opacity: .5;
  }
  100% {
    opacity: 0;
    transform: scale(25, 25);
  }
}
@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}




/* GENERAL FORM STUFF
----------------------------------------------------------*/
.text, *[type='submit'] {
  box-sizing: border-box;
  padding: 5px;
  background: none;
}

.text {
  margin: 0;
  padding: 15px;
  border: 1px solid transparent;
  border-bottom-color: silver;
  border-radius: 0;
  background: white no-repeat;
  position: relative;
}

.text:invalid {
  box-shadow: none;
  outline: none;
  border-bottom-color: red;
}

.text:focus {
  box-shadow: 0px 0px 5px 2px silver;
  z-index: 2;
}

button:hover {
  cursor: pointer;
}

/* FORMS defaults
-------------------------------------------------------------*/

/*input buttons */
.submit-bttns {
  text-align: right;
  margin: 20px auto 5px;
  box-sizing: border-box;
  width: 100%;
  max-width: 700px;
  padding: 0 20px;
}

.submit-bttns .button-delete {
  float: left;
  min-width: 140px;
}

.submit {
  color: white;
  font-weight: 500;
  vertical-align: middle;
  padding: 6px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  border: 0px solid transparent;
  min-width: 100px;
  text-transform: uppercase;
}
.button-cancel:hover,
.button-delete:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.button-submit {
  min-width: 140px;
  background: #2196f3;
}

.button-delete {
  color: #f44336;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
  transition: box-shadow .2s;
  background: white;
}

.button-cancel {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
  background: white;
  color: #555;
  margin-right: 5px;
  transition: box-shadow .2s;
}

.submit[disabled] {
  color: silver;
  background: #eee;
  box-shadow: none;
  cursor: auto;
}

.submit {
  position: relative;
  overflow: hidden;
}

.submit:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
}

/* for mouse focus */
.submit:focus:hover::after {
  animation: md-ripple 1s ease-out;
}
/* for keyboard focus */
.submit:focus:not(:hover)::after {
  background: rgba(255, 255, 255, .2);
  transform: scale(1, 1);
  border-radius: 0;
  opacity: 1;
}

#enregistrer {
  border: none;
  background-color: transparent;
  color: black;
}

#enregistrer:focus {
  color: red;
  transition: color 1s;
}


#enregistrer::before {
  content: "\e900";
  font-size: 1.6em;
  width: 48px;
  height: 48px;
  display: inline-block;
  text-align: center;
  line-height: 48px;
}

#enregistrer:disabled {
  transition: opacity .5s;
  opacity: .2;
}

/* MAIN PAGES TILES Styles
*************************************/

/* form writing */
.notebloc, #post-new-note, #popup-wrapper, #popup
 {
  padding: 15px;
  background: #fefefe;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
  border-radius: 15px;
}


#post-new-note {
  position: relative;
  z-index: 1;
  max-width: 550px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 15px;
  margin: 50px auto 70px;
}

#post-new-note::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 0 17px 0 rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease-in-out 0s;
  z-index: -1;
  border-radius: inherit;
}

#post-new-note:hover::after,
#post-new-note.focusedField::after {
  opacity: 1;
}

#post-new-note:hover {
  color: #333;
}

/* Notes page */
/* NOTES
------------------------------------------------------------ */
.notes-menu-buttons {
  margin: 2px 0;
  padding: 0;
  text-align: right;
}

.notes-menu-buttons > li {
  display: inline-block;
}

.notes-menu-buttons button::before {
  font-size: 1.6em;
}

.notes-menu-buttons button {
  vertical-align: middle;
}

#list-notes {
  text-align: center;
}

#post-new-note {
  cursor: pointer;
}

#post-new-note .contain::before {
  content: "\e944";
  font-size: 1.3em;
  color: rgba(0, 0, 0, .5);
  margin-right: 10px;
  line-height: inherit;
}

#post-new-note .contain {
  line-height: 3em;
  color: rgba(0, 0, 0, .3);
}

.notebloc {
  box-sizing: border-box;
  max-height: 300px;
  width: 240px;
  word-wrap: break-word;
  position: relative;
  z-index: 1;
  vertical-align: text-top;
  display: inline-flex; 
  flex-direction: column;
  background-color: #fafaba;
  transition: box-shadow .2s ease-in;
  margin: 10px;
  padding: 0 0 50px;
  overflow: hidden;
  text-align: left;
  border-radius: 2px;

}

.notebloc:hover {
  box-shadow: 0 2px 15px rgba(0,0,0,0.30);
}

.notebloc .title > h2,
#popup.popup-note .title > h2 {
  padding: 15px;
  margin: 0;
  font-size: 1.1em;
  font-weight: 700;
}

.notebloc > .content {
  white-space: pre-line;
  overflow-y: hidden;
}

.notebloc > .content,
#popup.popup-note .content {
  margin: 0;
  padding: 15px;
  font-size: 1em;
  flex: 1;
}

.noteCtrls {
  position: relative;
  margin: 0;
  padding: 0 5px 5px;
  display: flex;
  align-items: center;
}

.noteCtrls > button {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  padding: 0;
  color: rgba(0, 0, 0, .6);
  transition: opacity .2s ease-in;
}

.noteCtrls > button::before {
  font-size: 1.6em;
}

.noteCtrls > button.colorIcon::before { content: "\e946"; }
.noteCtrls > button.supprIcon::before { content: "\e90f"; }

.noteCtrls > .colors {
  display: none;
  position: absolute;
  list-style: none;
  height: 95px;
  width: 95px;
  left: 4px;
  bottom: 4px;
  margin: 0;
  padding: 0;
  background-color: white;
  border-radius: 2px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
  line-height: 0;
}

.noteCtrls .colorIcon:focus + .colors,
.noteCtrls .colors:hover {
  display: block;
}

.noteCtrls > .colors > li {
  box-sizing: border-box;
  border: 1px silver solid;
  cursor: pointer;
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px 0 0 5px;
}

.noteCtrls > .colors > li:hover {
  opacity: .95;
  border-color: gray;
}

.noteCtrls li > button:focus,
.noteCtrls li > button::-moz-focus-inner {
  background-color: rgba(0, 0, 0, .05);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  outline: none;
  border-color: transparent;
}


/* on popup display */

#popup.popup-note {
  min-height: 300px;
  min-width: 360px;
  width: 600px;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.3), 0 0px 12px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden; /* for rounded corners */
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  resize: both;
  display: flex;
  flex-direction: column;
  animation:  appearSlow .2s;
  border-radius: 2px;
}

#popup.popup-note > textarea.content {
  background: transparent;
  border: 0;
  resize: none;
  font-family: inherit;
}

#popup.popup-note > .date {
  padding: 0 15px;
  text-align: right;
  font-style: italic;
  font-size: .9em;
  color: #666;
}
#popup.popup-note .submit-bttns {
  width: auto;
  flex: 1;
  padding: 0;
  margin: 5px 10px;
}

#popup.popup-note .noteCtrls .submit {
  background: white;
  box-shadow: none;
  color: #222;
  font-size: .9em;
}

#popup.popup-note .noteCtrls .button-cancel {
  background: transparent;
}

#popup-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0, .5);
  background: rgba(229, 229, 229, .75);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 100px;
  z-index: 150;
  animation: fade-in .2s;
  border-radius: 0;

}