body {
  margin: 0px;
  font-family:Verdana, Geneva, Tahoma, "Helvetica Neue", sans-serif;
  font-size: 0.9em;
  background-color: #1f2b3d;
}

.msgUnauthorized {
  color: #e3e3e3;
  font-weight: bold;
  margin-top: 3em;
  text-align: center;
  font-size: 3.2em;
}


/*** GENERIC ************************************************************/

.split-area {
  position: absolute;
  display: flex;
  flex: 1 1 0%;
  flex-direction: row;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  outline: none;
  overflow: hidden;
  /*BTSEL*/
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.split-sidebar {
  flex: 0 0 auto;
  position: relative;
  height: 100%;
  outline: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.split-sidebar::-webkit-scrollbar {
  width: 0 !important;
}

.split-separator {
  cursor: col-resize;
  width: 5px;
  height: 100%;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.EditorButtonLoadImage{
   display: none;
}


#msgBoxDialog {
  display: none;
}
#msgBoxDialog-Title {
  font-weight: bold;
}
#msgBoxDialog-Message {
  padding: 18px 18px 14px 18px;
}
.tox-button--large {
  padding: 4px 30px !important;
}





.rename-text-input {
  /* display: none; */
  position: relative;
  top: -22px;
  left: 21px;
  height: 18px;

  font-size: 1.02em;
  font-weight: bold;
  white-space: nowrap;
  padding: 4px 4px;
  border: 0px;
}
.rename-text-input-group {
  width: calc( 100% - 50px) !important;
  color: #d2d2d2;
  background-color: #131313;
}
.rename-text-input-folder {
  width: calc( 100% - 32px) !important;
  color: #d2d2d2;
  background-color: #165388;
}
.rename-text-input:focus {
  outline: none;
}
.rename-text-input * {
  pointer-events: none;
}




/*** CATEGORIES ******************************************************/

/* --- SPLIT ----------------------*/

#categ-split {
  background-color: #323232;
  border-right: 1px solid #242424;
}
#categ-split:hover {
  background-color: #676767;
  border-right: 1px solid #000000;
}

.categ-split-darkmode {
  background-color: #323232 !important;
  border-right: 1px solid #010101 !important;
}
.categ-split-darkmode:hover {
  background-color: #262626 !important;
  border-right: 1px solid #010101 !important;
}

/* --- SIDEBAR --------------------*/

#categ-sidebar {
  width: 240px;
  min-width: 140px;
  max-width: 400px;
  color: #e2e2e2;
  background-color: #323232;
  user-select: none;
}

#categ-sidebar-top {
  overflow: auto;
  height: calc( 100% - 40px );
}
#categ-sidebar-top:hover#categ-sidebar-top::-webkit-scrollbar {
  width: 8px !important;
  background-color: #323232;
}
#categ-sidebar-top:hover#categ-sidebar-top::-webkit-scrollbar-thumb {
  background-color: #555555;
  border-radius: 4px;
}

#categ-sidebar-bottom {
  display: block;
  height: 40px;
  overflow: hidden;
}


/* --- BUTTONS --------------------*/

.side-button {
  margin: 10px 0 10px 0px;
  padding: 16px 18px;
  color: #ffffff;
  cursor: pointer;
}
.side-button:hover {
  background-color: #3179b9;
}

.fa-button {
  position: relative;
  top: 2px;
  margin-right: 5px;
  padding: 3px 3px 2px 4px;
  font-size: 1.2em;;
  color: #ffffff;
  background-color: #3179b9;
  border-radius: 4px;
}

.side-right-buttons {
  display: none;
  position: relative;
  float: right;
  top: 4px;
  right: -10px;
  color: #e6e6e6;
}
.side-right-buttons:hover {
  color: #ffffff;
}
.side-right-button1 {
  font-size: 1em;
  margin-right: 2px;
}
.side-right-button2 {
  position: relative;
  top: -1px;
  font-size: 0.7em;
}
.side-button:hover .side-right-buttons {
  display: unset;
}

/* --- GROUP ----------------------*/

.side-group {
  margin: 10px 0 0 3px;
  padding: 10px 16px;
  max-height: 21px;
  cursor: pointer;
  color: #ffffff;
  border-top: 1px solid #555555;
  border-bottom: 1px solid transparent;
  background-color: #2a2929;
}
.side-group:hover {
  color: #ffffff;
  background-color: #494949;
  background-color: #222222;
}

.side-group:hover .fa-selector {
  color: #ffffff;
}

.side-group-href {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  width: calc(100% - 22px);
}

.side-group-area {
  width: 100%;
  overflow: hidden;
}
.side-group-area-close {
  height: 0px;
}


/* --- SELECTOR -------------------*/

.side-selector-first {
  border-top: 1px solid rgb(70, 70, 70);
}

.side-selector {
  margin: 0 0 0 3px;
  max-height: 21px;
  padding: 10px 16px;
  cursor: pointer;
  color: #c3c3c3;
}
.side-selector:hover {
  color: #ffffff;
  background-color: #3e3e3e;
}

.side-selector-selected {
  color: #d1d1d1;
  background-color: #3179b9;
}
.side-selector-selected:hover {
  color: #ffffff;
  background-color: #3179b9;
}
.side-selector-selected .fa-selector {
  color: #d1d1d1;
}

.side-selector-title {
  display: inline-block;
  position: relative;
  top: 4px;
  left: 6px;
  height: 18px;
  max-width: calc(100% - 30px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fa-selector {
  margin-right: 5px;
  font-size: 1.1em;;
  color: #707070;
}
.side-selector:hover .fa-selector {
  color: #ffffff;
}


.fa-selector-group-btn {
  position: relative;
  float: right;
  font-size: 0.85em;
  color: #707070;
}
.fa-selector-group-btn:hover {
  color: #ffffff;
}
.fa-selector-group-del {
  top: 3px;
  right: 8px;
}
.fa-selector-group-add {
  top: 3px;
  right: -20px;
}

.fa-selector-group-down {
  display: none;
  position: relative;
  float: right;
  top: -20px;
  right: 24px;
  color: #aaaaaa;
}


.fa-selector-btdel {
  display: none;
  position: relative;
  float: right;
  top: 3px;
  right: -10px;
  font-size: 0.85em;
  color: #8b8b8b;
}
.side-selector:hover .fa-selector-btdel {
  display: unset;
}
.side-selector:hover .fa-selector-btdel:hover {
  color: #ffffff;
}


/* --- PROFILE -----------------------*/

.side-profile {
  width: calc( 100% - 30px) ;
  padding: 8px 18px 10px 18px;
  border-top: 1px solid #5f5f5f;
  background-color: #161616;
}

.side-profile-option {
  display: inline-block;
  width: calc( 100% - 24px) ;
  cursor: pointer;
}

.side-profile-user {
  display: inline-block;
  position: relative;
  top: 3px;
  left: 5px;
  height: 18px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #cacaca;
}
.side-profile-option:hover .side-profile-user {
  color: #ffffff;
}

.fa-profile {
  margin-right: 5px;
  font-size: 1.3em;;
  color: #cacaca;
}
.side-profile-option:hover .fa-profile {
  color: #ffffff;
}

.side-profile-logout {
  position: absolute;
  margin-left:8px;
  font-size: 1.6em;;
  color: #cacaca;
  cursor: pointer;
}
.side-profile-logout:hover {
  color: #ffffff;
}


/* --- AREA -----------------------*/

#note-area {
  flex: 1 1 0%;
  position: relative;
  height: 100%;
  outline: none;
}



/*** NOTES **************************************************************/

/* --- SPLIT ----------------------*/

#note-split {
  background-color: #e2e2e2;
  border-right: 1px solid #b9bec8;
  z-index: 200;
}

#note-split:hover {
  background-color: #dadadacf;
  border-right: 1px solid #9d9d9d;
}

.note-split-darkmode {
  background-color: #252525 !important;
  border-right: 1px solid #000000 !important;
}
.note-split-darkmode:hover {
  background-color: #202020 !important;
  border-right: 1px solid #000000 !important;
}

/* --- SIDEBAR --------------------*/

#note-sidebar {
  width: 280px;
  min-width: 200px;
  max-width: 400px;
  background-color: #e2e2e2;
  /*BTSEL*/
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}
#note-sidebar:hover#note-sidebar::-webkit-scrollbar {
  width: 8px !important;
  background-color: #e2e2e2;
}
#note-sidebar:hover#note-sidebar::-webkit-scrollbar-thumb {
  background-color: #bababa;
  border-radius: 4px;
}

.note-sidebar-darkmode {
  background-color: #252525 !important;
}

/* --- INPUTS ---------------------*/

.side-input-box {
  margin: 0px;
  border-bottom: 1px solid #cad0dc;
}
.side-input-box-darkmode {
  border-bottom: 1px solid #454545;
}

.side-input {
  width: calc( 100% - 34px) ;
  font-size: 1.2em;
  margin: 10px;
  padding: 5px 8px;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  border-bottom: 1px solid #cad0dc;
}
.side-input-darkmode {
  color: #bfbfbf !important;
  background-color: #393939;
  border: 1px solid #7b7b7b;
}


/* --- NOTE TAG -------------------*/

.side-notetag {
  margin: 0 0 0 3px;
  padding: 10px 20px;
  height: 62px;
  border-bottom: 1px solid #cad0dc;
  cursor: pointer;
}
.side-notetag:hover {
  background-color: #cbcbcb;
}
.side-notetag-selected {
  background-color: #3179b9;
}
.side-notetag-selected:hover {
  background-color: #3179b9;
}

.side-notetag-darkmode {
  border-bottom: 1px solid #454545;
}
.side-notetag-darkmode:hover {
  background-color: #404040;
}

.side-notetag-title {
  color: #222222;
  font-weight: bold;
  margin-bottom:6px;
  height: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.side-notetag-title-darkmode {
    color: #d1d1d1;
}

.side-notetag-descr {
  color: #313131;
  font-size: 0.9em;
  height: 34px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.side-notetag-descr-darkmode {
    color: #bebebe;
}

.side-notetag-selected .side-notetag-title {
  color: #ffffff;
}
.side-notetag-selected .side-notetag-descr {
  color: #e9e9e9;
}

.fa-notetag-left {
  position: relative;
  top: -59px;
  left: -17px;
  color: #3179b9;
}
.fa-notetag-left:hover {
  color: #3c8acf;
}

.side-notetag-selected .fa-notetag-left {
  color: #e9e9e9;
}
.side-notetag-selected .fa-notetag-left:hover {
  color: #ffffff;
}

.fa-notetag-right {
  position: relative;
  float: right;
  top: -56px;
  right: -15px;
  color: #9B9B98;
}
.fa-notetag-right:hover {
  color: #3e3e3e;
}

.side-notetag-darkmode .fa-notetag-right {
  color: #666666;
}
.side-notetag-darkmode .fa-notetag-right:hover {
  color: #d7d7d7;
}


.side-notetag-selected .fa-notetag-right {
  color: #dfdfdf;
}
.side-notetag-selected .fa-notetag-right:hover {
  color: #ffffff;
}


/*** EDITOR *************************************************************/

#note-dett {
  flex: 1 1 0%;
  position: relative;
  height: 100%;
  background-color: #ffffff;
  outline: none;

  /* min-width: 500px; */
}

.note-dett-darkmode {
  color: #c9c9c9;
  background-color: #323232 !important;
}
.note-dett-darkmode .note-dett-title {
  color: #e2e2e2;
  background-color: #323232 !important;
}
.note-dett-title {
  font-family:Verdana, Geneva, Tahoma, "Helvetica Neue", sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  padding: 9px 12px;
  margin-bottom: 4px;
  color: #2a2a2a;
  width: calc(100% - 24px);
  border: 0px;
}
.note-dett-title:focus {
  outline: none;
}
.note-dett-title * {
  pointer-events: none;
}

/* --- NOTE AREA ------------------*/

#note-dett-area {
  padding: 6px 12px 0px 12px;
  height: calc( 100% - 90px );
  overflow-x: hidden;
  overflow-y: auto !important;
}
#note-dett-area:focus {
  outline: none;
}
#note-dett-area * {
  pointer-events: none;
}

#note-dett-area::-webkit-scrollbar {
  width: 0 !important;
}

#note-dett-area:hover#note-dett-area::-webkit-scrollbar {
  width: 8px !important;
  background-color: #ffffff;
}
#note-dett-area:hover#note-dett-area::-webkit-scrollbar-thumb {
  background-color: #cfcfcf;
  border-radius: 4px;
}

/* --- NOTE BOTTOM ----------------*/

#note-dett-bottom {
  padding: 0px;
  height: calc( 100% - 80px );
  font-size: 1.3em;
  color: #707070;
  background-color: #e2e2e2;
  border-top: 1px solid #c9c9c9;
  overflow-x: hidden;
  overflow-y: auto !important;
  z-index: 100;
  /*BTSEL*/
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.note-dett-bottom-darkmode {
  color: #9c9c9c;
  background-color: #252525 !important;
}


#note-dett-bottom .fa {
  display: inline-block;
  width: 42px;
  margin: 0px;
  padding: 10px 0px;
  text-align: center;
  cursor: pointer;
}
#note-dett-bottom .fa:hover {
  background-color: #d0d0d0;
}
.note-dett-bottom-darkmode .fa:hover {
  background-color: #636363 !important;
  color: #cccccc;
}

#note-dett-bottom-left {
  display: inline-block;
}

#note-dett-bottom-right {
  display: inline-block;
  position:absolute;
  right:0px;
}

/*** LOGIN **************************************************************/


.login {
  width: 400px;
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin: 80px auto 10px auto;
}
.login img {
  position: relative;
  width: 228px;
  left: 5px;
  top: 1px;
}
.login h1 {
  text-align: left;
  color: #5b6574;
  font-size: 26px;
  padding: 8px 10px 2px 10px;
  background-color: #97acc0;
  border-bottom: 1px solid #26527b;
}
.login form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* padding-top: 20px; */
}
.login form label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  width: 50px;
  height: 50px;
  background-color: #2c6192;
  color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  width: 278px;
  height: 50px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;

  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login form input[type="submit"] {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: #2c6192;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;

  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login form input[type="submit"]:hover {
  background-color: #2c6192;
  transition: background-color 0.2s;
}

.login .fa {
  font-size: 20px;
}

.login div {
	width: 100%;


}
.login-title {
  padding: 12px 20px 16px 20px;

  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login-input-row {
  display: flex;
  padding: 0px 20px 0px 20px;
}
.login-message {
  padding: 2px 20px 6px 20px;
}

.login-link {
  width: 400px;
  margin: 14px auto;
	text-align: center;

  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login-link div {
	color: white;
	display: inline-block;
	margin: 0 10px;
}



@media (max-width: 430px)  {
  .login {
    margin: 0px auto 10px auto;
  }
  .login h1 {
    margin-top: 2px;
  }  
  .login form input[type="password"], .login form input[type="text"] {
    width: calc(100% - 108px);
  }

  /* BOOKS */
  #categ-sidebar {
    display:none;
    width: 100%;
  }
  #categ-split {
    display:none;
  }

  /* CATEGORIA */
  #note-sidebar {
    display: none;
    width: 100%;
  }
  #note-split {
    display: none;
  }

}