* {
  outline: none;
}

html {
  font: 12px/12px "Open Sans";
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100%;
}
html body, html #main {
  min-height: 600px;
  min-width: 900px;
  padding: 0;
  margin: 0;
}
html body, html .login-bg {
  background: url("../images/back.jpg") no-repeat fixed center center #351f12;
  background-size: cover;
}
html .vh-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

p {
  margin: 0;
  padding: 0;
}

/* Custom dialog/modal headers */
.ngdialog h1 {
  margin: -15px -13px 15px;
  padding: 15px 40px 15px 12px;
  border-radius: 4px 4px 0 0;
  color: #000;
  font-size: 15px;
}
.ngdialog.error h1 {
  background-color: #d2322d;
}
.ngdialog.wait h1 {
  background-color: #428bca;
}
.ngdialog.notify h1 {
  background-color: #eeeeee;
}
.ngdialog.confirm h1 {
  background-color: #333333;
}
.ngdialog.error h1, .ngdialog.wait h1, .ngdialog.confirm h1 {
  color: #ffffff;
}
.ngdialog .ngdialog-close {
  border: none;
  background: transparent;
  height: 30px;
  width: 30px;
}

.ngchange_transition {
  transition: opacity ease 0.5s;
  opacity: 0;
}
.ngchange_transition.absolute {
  position: absolute;
  width: 100%;
  height: 100%;
}
.ngchange_transition.in {
  opacity: 1;
}

#main {
  padding: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.main-wrapper {
  padding: 10px 0;
  margin: 0;
}

.login-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(10px);
}

.login-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(50, 50, 50, 0.5);
  transition: opacity 0.15s ease;
}
.login-wrapper.auth-swapping {
  opacity: 0.92;
}

.login-header {
  font: 20px/30px "Open Sans";
  color: #fff;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateY(-25%) translateX(-50%);
  text-align: center;
}

.login-form {
  position: relative;
  padding: 20px 20px 20px 43px;
  width: 210px;
}
.login-form .form-group {
  padding: 0 0 10px;
}
.login-form .form-group input {
  width: 170px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.3);
  outline: none !important;
  border: none;
  border-radius: 5px;
  color: #fff;
  font: 500 11px/20px "Open Sans";
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.login-form .form-group input::placeholder {
  opacity: 0.9;
}
.login-form .form-group input:hover {
  background: rgba(255, 255, 255, 0.36);
}
.login-form .form-group input:focus {
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.login-form .submitButton {
  border: none;
  position: absolute;
  display: block;
  right: 0;
  bottom: 33px;
  color: #333;
  text-decoration: none;
  border-radius: 999px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  font-size: 16px;
  line-height: 12px;
  height: 28px;
  width: 28px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.login-form .submitButton:hover {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.login-form .submitButton:active {
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.login-form .submitButton i {
  margin: -3px 0 0 -2px;
  display: block;
}

.login-bottom_buttons {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateY(-10%) translateX(-50%);
}
.login-bottom_buttons a {
  color: #FFF;
  text-align: center;
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
  margin: 0 20px;
  font-size: 12px;
  line-height: 16px;
  width: 60px;
  vertical-align: top;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.login-bottom_buttons a:hover {
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.92;
}
.login-bottom_buttons a:active {
  color: rgba(255, 255, 255, 0.72);
  opacity: 0.72;
}
.login-bottom_buttons a i {
  font-size: 30px;
  line-height: 35px;
  padding: 0 0 10px;
  display: block;
  text-align: center;
}

@font-face {
  font-family: "notepad";
  src: url("../fonts/notepad.eot?8a6n6e");
  src: url("../fonts/notepad.eot?8a6n6e#iefix") format("embedded-opentype"), url("../fonts/notepad.ttf?8a6n6e") format("truetype"), url("../fonts/notepad.woff?8a6n6e") format("woff"), url("../fonts/notepad.svg?8a6n6e#notepad") format("svg");
  font-weight: normal;
  font-style: normal;
}
.icon {
  font-family: "notepad";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mail:before {
  content: "\e002";
}

.icon-bell:before {
  content: "\e006";
}

.icon-unlock:before {
  content: "\e008";
}

.icon-head:before {
  content: "\e074";
}

.icon-power:before {
  content: "\e086";
}

.icon-arrow-right:before {
  content: "\e095";
}

.icon-notification:before {
  content: "\e803";
}

.icon-question:before {
  content: "\e804";
}

.icon-trash-empty:before {
  content: "\e806";
}

.icon-plus:before {
  content: "\e807";
}

.icon-search:before {
  content: "\e808";
}

.notes-list-wrapper {
  padding: 0;
  width: 900px;
  height: 558px;
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 10px 25px #000;
}
.notes-list-wrapper.notes-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 16px/1.4 "Open Sans", sans-serif;
  background: rgba(50, 50, 50, 0.5);
}

.notes-header {
  background: url("../images/title.png") repeat-x scroll left top transparent;
  box-shadow: 0 0 10px #000;
  position: relative;
  overflow: hidden;
  padding: 0 15px;
  text-align: center;
}
.notes-header input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  height: 37px;
  color: #564040;
  font: bold 14px/37px Arial;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 -1px 0 rgb(0, 0, 0);
  margin: 0;
  padding: 0 2px;
  vertical-align: bottom;
  width: 100%;
  text-align: center;
}

.notes-list-box {
  border: 1px solid rgba(0, 0, 0, 0.6);
  background: #f0eeed;
  height: 100%;
}

.notes-list-container {
  padding: 16px 0 0 13px;
  margin: 0;
  width: 230px;
  float: left;
  height: 504px;
}
.notes-list-container ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 212px;
  border: 1px solid #bab6b6;
  background: url("../images/notes-list-bg.png") repeat-y scroll left top transparent;
  height: 460px;
  overflow-x: hidden;
  overflow-y: auto;
}
.notes-list-container ul li.selected-note {
  background: #e0decd;
}
.notes-list-container ul li {
  padding: 0;
  margin: 0;
  border-bottom: 1px dotted #bab6b6;
  display: block;
  cursor: pointer;
  background: #f0eeed;
}
.notes-list-container ul li .note-title {
  margin: 0;
  padding: 0 16px;
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-height: 36px;
}
.notes-list-container ul li .note-title .title {
  color: #000;
  font: 14px/20px "Neucha", cursive;
  margin: 0;
  padding: 0 2px;
  vertical-align: bottom;
  width: 100%;
}
.notes-list-container ul li .note-title .noteDate {
  color: #bab6b6;
  display: block;
  font: 10px/10px Arial;
  margin: 0;
  padding: 0;
  width: 100%;
}

.notes-list-controls-container {
  padding: 10px 0;
  margin: 0;
}
.notes-list-controls-container .addNote {
  background: linear-gradient(to top, #f0efef, #fefdfd);
  border: 1px solid #b3b2b1;
  border-radius: 3px;
  color: #868686;
  cursor: pointer;
  font: 14px/18px Arial;
  height: 20px;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 26px;
}
.notes-list-controls-container .addNote:hover {
  background: linear-gradient(to top, #e8e7e7, #f8f7f7);
}
.notes-list-controls-container .addNote:active {
  background: #e4e3e3;
}

.note-container {
  padding: 0;
  margin: 0;
  width: 654px;
  float: right;
  background: #eeeab0;
  box-shadow: 0 0 6px #555;
  height: 521px;
  position: relative;
}

.note-container-top {
  background: url("../images/note-top.png") repeat-x scroll left top transparent;
  height: 521px;
}

.note-container-bottom {
  background: url("../images/note-end.png") repeat-x scroll left bottom transparent;
  height: 521px;
}
.note-container-bottom .note-date {
  color: #be775c;
  font: 14px/20px Arial;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 15px;
  text-align: right;
  top: 20px;
  width: 150px;
}
.note-container-bottom .note-text {
  padding: 50px 0 0;
  margin: 0;
}
.note-container-bottom .note-text .textarea-scroll {
  height: 400px;
  width: 100%;
}
.note-container-bottom .note-text .textarea {
  background: transparent url("../images/editor-line.png") repeat scroll left -5px;
  border: medium none;
  font: 24px/36px "Neucha", cursive;
  min-height: 400px;
  padding: 0 30px;
  resize: none;
  width: 100%;
  background-attachment: local;
  overflow: visible;
  box-sizing: border-box;
  caret-color: #3d2418;
}

.note-controls-container {
  bottom: 20px;
  left: 0;
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.note-controls-container form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
.note-controls-container button {
  background: transparent;
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #b65e3f;
  font: bold 22px/22px Arial;
  transition: opacity 0.15s ease;
}
.note-controls-container button:hover {
  opacity: 0.78;
}
.note-controls-container button:active {
  opacity: 0.55;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url("../fonts/opensans_normal.woff2") format("woff2"), url("../fonts/opensans_normal.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("../fonts/opensans_semibold.woff2") format("woff2"), url("../fonts/opensans_semibold.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../fonts/opensans_bold.woff2") format("woff2"), url("../fonts/opensans_bold.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../fonts/opensans_italic.woff2") format("woff2"), url("../fonts/opensans_italic.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 600;
  src: local("Open Sans Semibold Italic"), local("OpenSans-SemiboldItalic"), url("../fonts/opensans_semibold_italic.woff2") format("woff2"), url("../fonts/opensans_semibold_italic.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 700;
  src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../fonts/opensans_bold_italic.woff2") format("woff2"), url("../fonts/opensans_bold_italic.woff") format("woff");
}

/*# sourceMappingURL=app.css.map */