:root{
    --header-bg:white;
    --header-text-color:black;
    --main-text-color:black;
    --green-text-color:#15BC15;
    --red-text-color:#FF0000;
    --blue-text-color:#0000FF;
    --yellow-text-color:#EDEF1D;
    --violet-text-color:#F27FF2;
    --main-back-color:white;
    --green-back-color:#B3FAB3;
    --red-back-color:#FFC8C8;
    --blue-back-color:#BEBEFF;
    --yellow-back-color:#FBFCBC;
    --violet-back-color:#FFDBFF;
	--background-todolist-item: rgba(0, 0, 0, 0.05);
}

body {
	height: 100%;
	padding: 0px;
	overflow: hidden;
	margin: 0px;
	background: rgb(255, 255, 255);
}

#error-internal {
	position: relative;
	top: calc(50% - 50px);
	z-index: 1000;
	text-align: center;
	padding: 50px;
	background: rgb(255, 0, 0);
	color: white;
	font-size: 26px;
}

#error-container {
	position: fixed;
	display: none;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.486);
}



body,
html {
	line-height: initial;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.mdl-checkbox__box-outline {
    border: 2px solid var(--main-text-color);
}

.selectedButton {
	background-color: rgba(199, 196, 196, 0.452);
}

#header-carnet .mdl-button{
	padding: 0 6px;
}
.more .first{
	display:none;
}
.second, .third{
	display:none;
}
.more .second, .more .third{
	display: inline;
}
.more-button.second{
	display: none;
}
@media screen and (min-width: 900px) {
	.second{
		display:inline;
	}
	.more-button.second{
		display: inline;
	}
	.more .second{
		display: none;
	}
	.more-button.first{
		display: none;
	}

	
	
}

#loading {
	display: none;
	position: fixed;
	background: rgb(63, 81, 181,0.3);
	width: 100%;
	height: 100%;
	z-index: 10;
	box-shadow: 0px 7px 10px 0px grey;
}

#fullscreen-viewer {
	position: fixed;
	height: 100%;
	display: none;
	width: 100%;
	background: black;
	text-align: center;
	z-index: 10;
}

#fullscreen-viewer #fullimage {
	max-height: 100%;
	max-width: 100%;
	animation: fadein 1s;
	position: absolute;
	transition: margin-top 0.2s;
	transition: margin-left 0.2s;
}

#fullscreen-viewer #toolbar {
	position: absolute;
	color: white;
	right: 0px;
	background: rgba(29, 29, 29, 0.678);
	padding: 10px;
	width: 100%;
	text-align: right;
}


#fullscreen-viewer button {
	-webkit-app-region: no-drag;
	margin-left: 10px;
	color: white;
}

#filebar .button {
	color: white;
	text-decoration: none;
}

#scroll-bottom{
	float:right;
	margin-top:10px;
}

#media-list {
	display: inline;
}

.media {
	display: inline-block;
	max-height: 200px;
	margin: 10px;
	cursor: pointer;
}

.media-file {
	text-align: center;
	color: var(--header-text-color);
	width: 100px;
	word-wrap: break-word;
}

.media img {
	max-height: 200px;
}

#filebar {
	padding: 3px;
	font-weight: bold;
}

#editorbar {}

#editor {
	font-size: 20px;
	margin: 0px;
}

@media screen and (min-width: 769px) {
	#editor {
		padding-left: 70px;
		padding-right: 70px;
	}
}

[is="spi-toolbar"] {
	width: 100%;
	background: #3F51B5;
	padding: 3px;
	margin: 0px;
	box-shadow: 0px 7px 10px 0px grey;
}

.blue500 {
	background: #3F51B5;
}

.toolbar {
	color:black;
	overflow-x: auto;
	white-space: nowrap;
	height:100%;
}

.toolbar .mdl-textfield {
	padding:15px 0;
	top: -8px;
}

.quicknote-img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
}

#toolBar2 {
	text-align: center;
	padding: 3px;
	margin: 0px;
	box-shadow: 0px 7px 10px 0px grey;
}
.in-toolbar-button{
	text-transform: unset;
}

#center {
	height: 100%;
	margin: 0 auto;
	background: white;
	color: var(--main-text-color);
}

#text:focus {
	outline: 0px solid transparent;
}

#text {
	outline: 0px solid transparent;
}

.intLink {
	cursor: pointer;
}

img.intLink {
	border: 0;
}

#toolBar1 select {
	font-size: 10px;
}

#textdf {
	width: 540px;
	height: 200px;
	border: 1px #000000 solid;
	padding: 12px;
	overflow: scroll;
}

#textsd #sourceText {
	padding: 0;
	margin: 0;
	min-width: 498px;
	min-height: 200px;
}

.ui-content,
.ui-content #full-height-div {
	/* divs will inherit page's height */
	height: inherit;
}

#editMode label {
	cursor: pointer;
}

.mdl-layout__header {
	-webkit-app-region: drag;
}

.mdl-layout__header .mdl-layout__drawer-button,
.mdl-layout__header button,
.mdl-layout__header .mdl-textfield {
	-webkit-app-region: no-drag;
}

button {
	-webkit-app-region: no-drag;
}



body {
	-webkit-animation: 1s ease 0s normal forwards 1 fadein;
	animation: 1s ease 0s normal forwards 1 fadein;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.mdl-dialog {
	top: 5px;
}

/* stars */

div.stars {
	width: 200px;
	display: inline-block;
	margin-bottom: 20px;
}

input.star {
	display: none;
}

label.star {
	float: right;
	padding: 3px;
	font-size: 30px;
	color: #444;
	transition: all .2s;
}

label.checked {
	content: '★';
	color: #f4b942;
	transition: all .25s;
}

label.star:hover {
	transform: rotate(-15deg) scale(1.3);
}

label.star:before {
	content: '★';
}

#media-loading {
	position: fixed;
}

/* hide chrome scrollbar */
div#container-button::-webkit-scrollbar {
	display: none;
}
#name-container{
	margin-top:5px;
	margin-right:69px;
}
#name-container label{
	padding-left: 40px;
	width: calc(100% - 40px);
}

#name-input{
	padding: 10px;
    padding-left: 40px;
	padding-right: 20px;
	width: calc(100% - 60px);
}

/*color*/

#note-color{
	margin-right:10px;
	margin-top:20px;
	margin-bottom:15px;
	margin-left:30px;

}
#note-color * {
	box-sizing: border-box;
}

#note-color input[type="radio"] {
	display: none;
}
#note-color input[type="radio"]:checked + label span{
	  border: 1px solid black;
}


#note-color label {
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 10px;
	margin-bottom: 5px;
	cursor: pointer;
  }

  #note-color label span {
	display: block;
	border-radius: 25px;
	width: 100%;
	height: 100%;
	transition: transform .2s ease-in-out;
  }

  #note-color .none{
	background: var(--note-none);
  }

  #note-color .red{
	background: var(--note-red);
  }
  #note-color .orange{
	background: var(--note-orange);
  }
  #note-color .yellow{
	background: var(--note-yellow);
  }

  #note-color .green{
	background: var(--note-green);
  }
  #note-color .teal{
	background: var(--note-teal);
  }
  #note-color .blue{
	background: var(--note-blue);
  }
  #note-color .violet{
	background: var(--note-violet);
  }
  #note-color .purple{
	background: var(--note-purple);
  }
  #note-color .pink{
	background: var(--note-pink);
  }
  #note-color :hover span{
	  transform: scale(1.25); 
  }

  .edit-zone{
	  width: calc(100% - 40px);
	  padding: 20px;
  }

  .edit-zone:focus {
     outline: 0px solid transparent;
  }



/* Nextcloud */

#text {
	color: unset;
	cursor: text;
	font-family: unset;
	height: unset;
	width: 100%;
	margin: unset;
	padding: unset;
	font-size: inherit;
	background-color: unset;
	border: unset;
	outline: none;
	border-radius: unset;
}
#back-to-text-button{
	display: none;
}
#media-toolbar{
	position: relative;
}
.fullscreen-media-toolbar	#media-header{
		position: fixed;
		height:60px;
		width: 100%;
		background: rgba(0, 0, 0, 0.479);
	}
	.fullscreen-media-toolbar	#media-header .mdl-button{
		color: white;
	}
	.fullscreen-media-toolbar {
		position: fixed !important;
		height: 100%;
		overflow-y: auto;
		top: 0;
		background: rgb(41, 40, 40);
		z-index: 3;
		width: 100%;
		left:0;

	}
	.is-small-screen .mdl-layout--fixed-drawer > .mdl-layout__drawer {
    -webkit-transform: translateX(-250);
    transform: translateX(-250);
}

.fullscreen-media-toolbar .media-file:not(.media-image){
	display:none;
}
	.mdl-layout__drawer-button{
		background: unset !important;
	}
	.fullscreen-media-toolbar #back-to-text-button{
		display: inline;
		margin-top: 13px;
		margin-left: 60px;
	}
	.fullscreen-media-toolbar #media-list {
		margin-top: 70px;
		
	}
	.fullscreen-media-toolbar .media {
		display: block;	
		text-align: center;
		max-height: unset;
		
	}
	.fullscreen-media-toolbar .media img{
		max-width: 100%;
		max-height: 100%;
	}

	.fullscreen-media-toolbar #add-media-button {
		color: white;
		position: fixed;
		z-index: 1;
		top: 10px;
		right: 20px;
	}
	.fullscreen-media-toolbar #add-media-button ~ .mdl-menu__container{
		position:fixed;
		right:20px !important;
		margin-top:10px;
		left:unset !important;
	}
	.fullscreen-media-toolbar #media-loading{
		position: fixed;
	}
	
	


#media-empty-view{
	text-align: center;
	line-height: 35px;
	font-size: 16px;
	margin-left: 15px;
}



#media-list {

	display: block;
	overflow-x: auto;
	white-space: nowrap;
	float: left;
	width: calc(100% - 65px);

}

.fullscreen-media-toolbar #media-list {
	overflow-x: unset;
	white-space: unset;
	float: unset;
	width: unset;

}

.c-datepicker{
	z-index:4;
	min-height: 474px !important;
}
.c-datepicker__toggle{
	top:5px !important;
}
.c-datepicker__header-date__month, .c-datepicker__header-date__day{
	display: none !important;
}

.c-datepicker__header-date {
	height: 30px !important;
}

#reminders{
	max-height: calc(100% - 50px);
	overflow-y:auto;
}
.delete-reminder{
	float:right;
	padding: 0px;
	margin-right: 10px;
}

.option-button:not(.ok){
	width:100%;
	text-align: left;
}

.color-p{
    font-size: unset;
    letter-spacing: unset;
    margin: unset;
}
.color-item{
	cursor: pointer;
	width:38px;
	height:30px;
	border: 0px;
	display:inline-block;
	padding-right:10px;
}

.color-item:hover, .color-item:active {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5);
}


#color-items-container{
	margin:auto;
	margin-top:10px;
	position:absolute;/*android hack, buttons didn't work*/
	width:250px;/*android hack*/
}
#color-picker-div{
	padding:10px 35px 10px 35px;
	margin-top: -35px;
	margin-left: -37px;
	margin-right: -37px;

}

#color-picker-dialog  .mdl-dialog__actions{
	margin-top: 50px; /*android hack*/
}


#generic-dialog .content{
	padding:15px;
}

#keywors-in-text-container{
	padding-top: 10px;
}
.keyword-in-text{
	padding-left: 10px;
	padding-right: 10px;
	border: 1px rgba(119, 119, 119, 0.6) solid;
	cursor: pointer;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 14px;
	border-radius: 5px;
	margin-right: 10px;
}

.in-dialog-keyword{
	width:100%;
}

#keywords thead{
	display: none;
}

#keywords-list{
	word-break: break-all;
	line-height: 30px;
	padding-left: 5px;
}
#new-keyword-dialog{
	height: 100%;
	max-height:600px;
}

#new-keyword-dialog .mdl-dialog__content{
	height: calc(100% - 120px);
}
#keywords-table-container{
	height: calc(100% - 50px);
	overflow-y: auto;
}
#toolbar-container{
	background:var(--header-bg);
	box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
	display: flex;
}

#header-content{

	display: block;
}

.mdl-layout__header-row{
	padding: 0 0px 0 0px;

}

.mdl-layout {
	overflow-y: hidden;
}


.mdl-button {
	min-width: unset;
}

#buttons-and-frame-container{
	background: var(--body-bg);
	max-width:500px;
	max-height:500px;
	width: 100%;
	height: 100%;
	margin:auto;
}
#whole-frame-container{
	background:rgba(71, 71, 71, 0.507);
	position: fixed;
	z-index: 1000;
	height: 100%;
	width: 100%;
	display: none;
}
#frame-container{
height: calc(100% - 50px);
width: 100%;
}
.frame{
	
	height: 100%;
}

#frame-buttons-container{
	padding:10px;
}
#frame-loading-view{
	background: var(--body-bg);
	position: absolute;
	height: 100%;
	width: 100%;
	margin: auto;
	max-width: 500px;
	max-height: 500px;
}