/* 

    Created on : Feb 9, 2018, 1:04:11 PM

    

*/

/*

 * Theme : White

*/

/*

 * Theme : Black

*/

::-webkit-scrollbar {

  width: 4px;

  height: 4px; }



::-webkit-scrollbar-button {

  width: 0px;

  height: 0px; }



::-webkit-scrollbar-thumb {

  background: #e1e1e1;

  border: 4px solid #ffffff;

  border-radius: 50px; }



::-webkit-scrollbar-thumb:hover {

  background: #ffffff; }



::-webkit-scrollbar-thumb:active {

  background: #ffffff; }



::-webkit-scrollbar-track {

  background: #666666;

  border: 0px none #ffffff;

  border-radius: 50px; }



::-webkit-scrollbar-track:hover {

  background: #666666; }



::-webkit-scrollbar-track:active {

  background: #333333; }



::-webkit-scrollbar-corner {

  background: transparent; }



::selection {

  background-color: #ffffff;

  color: #ffffff; }



html, body {

  font-size: 13px;

  color: #000000;

  background-color: #ffffff;

  font-family: 'Lato', sans-serif;

  padding: 0px;

  margin: 0px;

  box-sizing: border-box; }



.fa {

  font-size: 1rem; }



textarea, input, select, toast-msg {

  font-family: 'Lato', sans-serif; }



a {

  text-decoration: none; }



.none {

  display: none; }



.left {

  float: left; }



.right {

  float: right; }



.clearfix:after {

  content: " ";

  clear: both; }



.text-center {

  text-align: center; }



/*

Application Specific

*/

.main-header {

  padding: 0.8em 0em;

  background-color: #161616;

  box-shadow: 2px 0px 3px #666;

  line-height: 1.8em;

  z-index: 1;

  position: relative; }

.main-header .fa {

  padding: 0px 1.25rem;

  font-size: 1.8em;

  cursor: pointer; }

.main-header .brand-icon {

  font-weight: bold;

  font-size: 1.8em; }



.sidebar {

  position: fixed;

  left: 0%;

  /*box-shadow: 0px 2px 3px $boxShadowColor;*/

  /*height: calc(100% -  3.4rem);*/

  z-index: 1;

  overflow-y: auto;

  bottom: 0px;

  right: 0px;

  left: auto;

  height: auto;

  font-size: 0.7em;

  width: auto; }

.sidebar .menu-item {

  /*border-bottom: 1px solid $menuBorderColor;*/

  padding: 1.1rem;

  font-size: 1.8em;

  cursor: pointer;

  display: none;

  float: left; }

.sidebar .menu-item .icon {

  vertical-align: middle;

  font-size: inherit; }

.sidebar .menu-item .title {

  position: fixed;

  width: 0px;

  font-weight: bold;

  font-size: 1rem;

  z-index: 2;

  margin-left: 1.8em;

  background-color: #000;

  border-radius: 6px;

  overflow: hidden; }

.sidebar .menu-item .title .hint {

  padding: 0.5rem; }

.sidebar .menu-item:hover .title {

  width: inherit; }



.content {

  /*margin-left: 4.3rem;*/

  /*margin-top: 3px;*/

  /*margin-top: 68.8px;*/

  /*position: fixed;*/ }

.content .note-textarea {

  outline: none;

  width: 100%;

  height: calc(100vh - 6rem);

  position: relative;

  border: none;

  line-height: 1.6em;

  padding: 10px;

  font-size: 1.2em;

  background-color: #ffffff;

  color: #000000;

  resize: none; }

.content .note-textarea:disabled {

  background-color: #333;

  color: #999; }

.content .note-hidden {

  position: fixed;

  left: -9999px; }



.overlay {

  position: fixed;

  z-index: 2;

  left: 0px;

  right: 0px;

  top: 0px;

  bottom: 0px;

  background-color: rgba(0, 0, 0, 0.8);

  display: none; }



.info-menu {

  position: fixed;

  z-index: 3;

  top: 0px;

  right: -100%;

  height: 100%;

  box-shadow: -2px 0px 5px #666;

  background-color: #ffffff;

  /*display: none;*/

  width: 300px;

  overflow-y: auto; }

.info-menu .close-info {

  position: absolute;

  top: 0;

  right: 1rem;

  font-size: 1.8em;

  color: #666;

  cursor: pointer;

  line-height: 1.8em; }

.info-menu .close-info:hover {

  color: #ffffff; }

.info-menu .social {

  font-size: 1.5em; }

.info-menu .social a {

  margin-right: 0.5em;

  display: inline-block;

  color: #666; }

.info-menu .social a:last-child {

  margin-right: 0px; }

.info-menu .social a:hover {

  color: #999; }



.home-icon {

  color: #ffffff; }



.home-icon:hover {

  color: #ffffff; }



.toast-msg {

  /*padding: 0.35em;*/

  font-weight: bold;

  font-size: 1em; }



.modal {

  color: #ffffff; }



hr {

  border-top: 1px solid rgba(255, 255, 255, 0.1); }



.none {

  display: none; }



.note-tabs-scroll {

  width: 100%;

  overflow-x: auto;

  overflow-y: hidden;

  white-space: nowrap;

  position: relative; }



.note-tabs-scroll-container {

  position: relative; }



#note-tabs-container {

  display: table;

  position: relative;

  padding-right: 2.5em; }

#note-tabs-container #note-tabs {

  display: table-row; }

#note-tabs-container .tab {

  display: table-cell;

  padding: 0.6em;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  border-right: 1px solid rgba(255, 255, 255, 0.1);

  cursor: pointer;

  background-color: #222; }

#note-tabs-container .tab .tab-title {

  border: none;

  outline: none;

  background-color: inherit;

  color: #ffffff;

  cursor: pointer;

  height: 1em; }

#note-tabs-container .tab .unsaved-indicator {

  opacity: 0;

  font-weight: bold; }

#note-tabs-container .tab .tab-title {

  /*background-color: inherit;*/ }

#note-tabs-container .tab.selected {

  background-color: #666; }

#note-tabs-container .tab.modified {

  /*background-color: #FF6600;*/ }

#note-tabs-container .tab.modified .unsaved-indicator {

  opacity: 1; }



.note-tab-add {

  position: absolute;

  padding: 1em;

  /*height: 2.2em;*/

  float: right;

  top: 0px;

  right: 0px;

  cursor: pointer;

  background-color: #ffffff;

  border-left: 1px solid rgba(255, 255, 255, 0.1);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.note-tab-add .fa {

  font-size: 1em; }



.note-list {

  height: 50vh;

  overflow-y: auto; }

.note-list .item-index {

  cursor: pointer; }

.note-list .item-index .fa-sort {

  cursor: move; }

.note-list .item-index .name {

  width: 70%; }



#book-name {

  font-weight: bold;

  font-size: 1.8em;

  position: absolute;

  left: 2.5em;

  cursor: pointer; }



/* The switch - the box around the slider */

.switch {

  position: relative;

  display: inline-block;

  width: 50px;

  height: 30px; }

.switch input {

  display: none; }

.switch .slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s; }

.switch .slider:before {

  position: absolute;

  content: "";

  height: 20px;

  width: 20px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s; }

.switch input:checked + .slider {

  background-color: #2196F3; }

.switch input:focus + .slider {

  box-shadow: 0 0 1px #2196F3; }

.switch input:checked + .slider:before {

  -webkit-transform: translateX(20px);

  -ms-transform: translateX(20px);

  transform: translateX(20px); }

.switch .round {

  border-radius: 34px; }

.switch .round:before {

  border-radius: 50%; }



.progress-bar-container {

  position: fixed;

  z-index: 5;

  width: 100%;

  height: 0.2em;

  background-color: rgba(255, 0, 0, 0.3);

  bottom: 0px;

  left: 0px;

  right: 0px; }

.progress-bar-container .progress-bar {

  position: absolute;

  left: 0;

  bottom: 0px;

  width: 30%;

  height: inherit;

  background-color: red; }



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