/*------------frame------------*/
/*scrollbar*/
/* width */
::-webkit-scrollbar {
	width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
	background: rgba(255,255,255,0);
}

::-webkit-scrollbar-track:hover{
	background: rgba(100,100,100,0.2);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.7);
	box-sizing: border-box;
	transition: background 220ms ease;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgba(255,255,255,1);
}

body{
	transition: opacity 300ms ease;
	overflow-x: hidden;
	padding: 0px; margin: 0px;
	font-family: sans-serif;
}

body[loading="true"]{
	opacity: 0.3;
	pointer-events: none;
}

.card_wrapper{
	box-sizing: border-box;
	max-width: 100%;
	padding: 10px;
	font-family: sans-serif;
	max-width: 1000px;
	margin: 0px auto;
}

.card_wrapper .card{
	position: relative;
	padding: 16px;
	
	margin: 10px auto;
	outline: none;
	transition: all 220ms ease;
	background: white;
	border-radius: 3pt;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

.card[datetime],
.card[title]{
	padding-top: 40px;
}

.card[datetime]:after,

.card[title]:before{
	position: absolute;
	font-size: 10pt;
	color: inherit;
	line-height: 40px;
	padding: 0px 16px;
	vertical-align: middle;
}

.card[title]:before{
	left: 0px; top: 0px;
	content: attr(title);
	
	font-weight: 600;
	text-align: left;
	display: block;
	max-width: calc(100% - 90px);
}

.card[datetime]:after{
	right: 0px; top: 0px;
	content: attr(datetime);
	
	text-align: right;
	font-weight: 400;
	font-size: 8pt;
}

[root_action]{
	cursor: pointer;
}

.column_container{
	display: block;
}

.column_container > div{
	display: block;
}


@media screen and (min-width: 900px) {
		
	.column_container{
		display: table;
		table-layout: fixed;
		width: 100%;
	}

	.column_container > div{
		display: table-cell;
		width: 100%;
	}

	
	.card_wrapper .card[datetime],
	.card_wrapper .card[title]{
		padding-top: 60px;
	}
		
	.card[datetime]:after,
	.card[title]:before{
		line-height: 60px;
	}
	
	.card[title]:before{
		font-size: 15pt;
	}
	
	.card[datetime]:after{
		font-size: 10pt;
	}


}
/*------------inputs------------*/

.input_container{
	margin: 16px;
}

.input_wrapper{
	width: 100%;
	box-sizing: border-box;
	line-height: initial;
	position: relative;
	background: rgba(255,255,255,0.5);
	margin: 5px 0px 28px 0px;
	padding-top: 16px;
	border-radius: 2pt 2pt 0pt 0pt;
	cursor: text;
}


span.input_wrapper,
.input_wrapper.inline{
	max-width: 240px;
	margin: 0px 12px 0px 0px;
	display: inline-block;
}

.input_wrapper > input, 
.input_wrapper > textarea, 
.input_wrapper > select{
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	position: relative;
	background: none;
	padding: 8px;
	color: black;
	border: none;
	outline: none;
	transition: all 200ms;	
	width: 100%;
	font-size: 13px;
	resize: none;
	border-radius: 0px;
	font-weight: 500;
}

.input_wrapper > select{
	width: calc(100% - 8px);
}	

.input_wrapper > select > option{
	padding: 8px;
}

option[active="false"]{
	display: none;
}

/*putting a span creates a sub input box useful for radios and ticks*/
.input_wrapper > span{
	display: block;
	line-height: 16px;
	font-size: 14px;
	border: none;
	padding: 6px;
	text-align: left;
}

.input_wrapper > span.label{
	font-size: 11px;
	color: #265cff;	
	
}

.input_wrapper > span.help{
	font-size: 11px;
	color: #AAA;
	
}

.input_wrapper > span > label{
	display: block;
	line-height: 24pt;
	vertical-align: middle;
}

.input_wrapper > span [type="radio"], 
.input_wrapper > span [type="checkbox"]{
	display: inline-block;
	width: auto;
	margin: 4px 8px 4px 4px;
	transform: scale(1.3);
	outline: none;
	height: 20px;
	cursor: pointer;
	vertical-align: middle;
}

	.input_toggle_section{
		position: relative;
		top: -10px;
		height: 0px;
		overflow: hidden;
		padding: 0px;
		margin: 0px;
		transition: all 230ms;
		opacity: 0;
	}

	.input_toggle_section.active{
		height: auto;
		top: 0px;
		overflow: visible;
		margin: 12px 0px;
		opacity: 1;
	}
	.input_toggle_section.active:empty{margin: 0px;}

.input_wrapper > span > .file_upload ~ label{
	display: inline-block;
	line-height: 20px;
	height: 20px;
	margin: 0px 8px;
	vertical-align: middle;
	color: #555;
}

.input_wrapper:not([type="box"]) > label{
	pointer-events: none;
	top: 18px;
	left: 8px;
	display: block;
	position: absolute;
	line-height: 100%;
	font-size: 14px;
	color: #888;
	transition: all 200ms;
	z-index: 1;
}

.input_wrapper[required] > label:after{
	content: attr(label) " *";
}

/*has to be doubled up because focus-within prevents entire rule to be read on ie*/
.input_wrapper.active > label, 
.input_wrapper.forced_active > label, 
.input_wrapper.focus > label, 
.input_wrapper[error] > label, 
.input_wrapper > span ~ label,
.input_wrapper > input[type="date"] ~ label{
	top: 6px ! important;
	font-size: 11px ! important;
}
.input_wrapper:focus-within > label, 
.input_options_menu ~ label{
	top: 6px ! important;
	font-size: 11px ! important;
	color: #265cff ! important;
	}

.input_wrapper[icon]::before, 
.input_wrapper[option]::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: 8px; top: 8px; bottom: 8px;
	width: 33px;
	color: #555;
	line-height: 33px;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.input_wrapper[option]::before{
	font-family: "Font Awesome 5 Free"; 
	content: "\f078";
}

.input_wrapper.load[option]::before{
	font-family: "Font Awesome 5 Free"; 
	content: "\f073";
}

.input_wrapper:after{
	content: " ";
	box-sizing: border-box;
	font-size: 10px;
	position: absolute;
	top: calc(100% - 2px); /*54px*/
	left: 0px;
	width: 0px;
	overflow: visible;
	height: 2px;
	white-space: nowrap;
	transition: all 220ms ease;
	padding-left: 8px;
	line-height: 25px;
	background: transparent;
}

.input_wrapper[help]:after{
	color: #666;
	content: attr(help);
}

.input_wrapper[error]:after{
	color: red;
	background: red ! important;
	content: attr(error);
	width: 100%;
}

/*
.input_wrapper.active:after, 
.input_wrapper.focus:after, 
.input_wrapper.forced_active:after{
	width: 100%;
	background: #AAA;
}
*/

.
.input_wrapper:focus-within:after{
	width: 100%;
	background: #265cff;
}

/*buttons*/
.button{
	display: inline-block;
	width: auto;
	outline: none;
	border: none;
	transition: all 220ms ease-out 40ms;
	background: linear-gradient(120deg,#456d85 , #2c5456);
	line-height: 40px;
	padding: 0px 12px;
	letter-spacing: 1px;
	/*text-transform: uppercase;*/
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.3),0px 1px 8px rgba(0,0,0,0.12);
	color: #FFFFFF;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	font-size: 12pt;
}

.button.wide{
	width: 100%;
}

.button > *{
	color: inherit;
}

.button.red{background: linear-gradient(120deg,#864444 , #562c2c);}
.button.green{background: linear-gradient(120deg,#438745 , #2c562d);}

.button:hover{
	box-shadow: 0px 3px 3px rgba(0,0,0,0.3),0px 3px 22px rgba(0,0,0,0.12);
}

.button:active{
	transition: all 100ms;
	box-shadow: none;
	opacity: 0.8;
}

@-webkit-keyframes autofill {
	to {
		background: transparent;
	}
}

.input_wrapper > :-webkit-autofill,
.input_wrapper > :-webkit-autofill:hover, 
.input_wrapper > :-webkit-autofill:focus{
	/*no style for autofill please*/
	-webkit-animation-name: autofill;
	-webkit-animation-fill-mode: both;
}


.input_wrapper > input ~ button{
	position: absolute;
	bottom: 2px; right: 2px;
	line-height: 24px;
	padding: 0px 4px;
	font-size: 14px;
	z-index: 1;
}

@media screen and (min-width: 900px) {
	.input_row{
		display: table;
		table-layout: fixed;
		width: 100%;
		
	}

	.input_row > .input_wrapper{
		display: table-cell;
		width: auto;
		box-sizing: content-box;
		border-left: 6pt solid white;
		border-right: 6pt solid white;
	}
	.input_row > .input_wrapper:first-child{border-left: none;}
	.input_row > .input_wrapper:last-child{border-right: none;}
}
/*------------dashboard------------*/
body{
	font-family: sans-serif;
}

.dashboard_event{
	max-width: 900px;
	padding: 20px;
	border-radius: 3pt;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
	background: white;
	margin: 10px auto;
}

.dashboard_event > *{
	color: black;
}

.dashboard_event > label{
	color: inherit;
	display: block;
	font-weight: bold;
	font-size: 10pt;
}

.dashboard_event > label + p{
	margin-top: 2px;
}

.dashboard_event > aside{
	padding: 10px;
	border: 2px solid rgba(100,100,100,0.5);
	background: transparent;
	border-radius: 3pt;
	transition: all 220ms ease;
	max-height: calc(100vh - 240px);
	overflow-y: auto;
	overflow-x: hidden;
}

.dashboard_event > aside > pre{
	display: block;
	vertical-align: top;
	margin: 0px;
	white-space: pre-wrap;
	font-family: sans-serif;
}

.dashboard_event > aside > pre > *:first-child{margin-top: 0px;}
.dashboard_event > aside > pre > *:last-child{margin-bottom: 0px;}

.dashboard_event[user_seen="false"] > aside{
	border-color: #3c6291;
	background: rgba(10,30,100,0.4);
}


blockquote{
	margin: 10px;
}
/*------------notes------------*/
@keyframes dotty {
	0%   { content: ''; }
	25%  { content: '\2022'; }
	50%  { content: '\2022\0020\2022'; }
	75%  { content: '\2022\0020\2022\0020\2022'; }
	100% { content: ''; }
}

[unselectable="on"]{
	-moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

body{margin: 0px;}

body[ctrl="true"] .log_entry a,
body[ctrl="true"] .log_entry li{cursor: pointer; color: #0084ff;}
body[ctrl="true"] .log_entry a,
body[ctrl="true"] .log_entry li:hover{color: #0084ff;}

body[ctrl="true"] .log_entry img{opacity: 0.8; outline: 2px solid #0084ff; cursor: pointer;}
body[ctrl="true"] .log_entry img:hover{background: #DDD;}
body[focus] .log_entry{display: none;}
body[focus="false"] .log_entry{display: block;}

section{
	overflow: hidden
}

#notes_container{
	padding-top: 50px;
	overflow-y: scroll;
}

.notes_wrapper .day_divide{
	display: table;
	width: 100%;
	table-layout: fixed;
	position: relative;
	text-align: center;
	margin: 38px auto;
	font-size: 20pt;
	font-weight: 600;
	color: white;
	text-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

.notes_wrapper .day_divide > span{
	display: inline-block;
	position: relative;
	padding: 0px 20px;
}

.notes_wrapper .log_entry{
	outline: none;
	transition: all 220ms ease;
}

.notes_wrapper .log_entry > *{
	margin: 10px 0px;
}

.notes_wrapper .log_entry > h3{
	margin-top: 30px;
}

.notes_wrapper .log_entry[saved][datetime]:after{ font-weight: bold; }
.notes_wrapper .log_entry[saved="false"][datetime]:after{ animation: dotty 2s infinite; }

.notes_wrapper .log_entry > div:last-child{
	margin-bottom: 0px;
}

.log_entry h1,
.log_entry h2,
.log_entry h3,
.log_entry h4{
	color: inherit;
	font-weight: 600;
}
.log_entry li
.log_entry div,
.log_entry p{
	font-size: 11pt;
}

.log_entry div,
.log_entry p{
	color: black;
	line-height: 15pt;
	min-height: 15pt;
	padding: 3px 0px;
	border-top: 1px solid rgba(150,150,150,0.1);
	border-bottom: 1px solid rgba(150,150,150,0.1);
}

.log_entry div > div{
	margin: 10px 0px;
}

body[ctrl="true"] .log_entry h3,
body[ctrl="true"] .log_entry div,
body[ctrl="true"] .log_entry p{
	border-color: #BBB;
}

li[ticked="true"]{
	text-decoration: line-through;
	opacity: 0.7;
}

img[scale="0"]{width: 20%;}
img[scale="1"]{width: 40%;}
img[scale="2"]{width: 60%;}
img[scale="3"]{width: 80%;}
img[scale="4"]{width: 100%;}

.widget{
	
}

.widget[size]{
	display: block;
	position: relative;
}

.widget[align]{margin: 0px;}
.widget[align="center_span"]{display: block; margin: 0px auto;}
.widget[align="left_span"]{display: block; margin-right: auto;}
.widget[align="right_span"]{display: block; margin-left: auto;}
.widget[align="left_float"]{display: inline;}
.widget[align="right_float"]{display: inline;}

@media screen and (min-width: 900px) {
	.notes_wrapper{
		padding: 20px;
		padding-top: 0px;
	}
}
/*------------toolbar------------*/
.main_toolbar{
	width: 100%;
	position: fixed;
    top: 0px; left: 0px; right: 0px;
    z-index: 10;
	background: #283c6f;
	padding-top: env(safe-area-inset-top);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	text-align: center;
}

.main_toolbar.left{text-align: left;}
.main_toolbar.right{text-align: right;}

.main_toolbar + aside{
	box-sizing: border-box;
	margin-top: 50px ! important;
	min-height: calc(100vh - 50px) ! important;
	max-height: calc(100vh - 50px) ! important;
	padding-bottom: 70px;
	min-width: 100%;
	overflow-y: auto;
}


.main_toolbar > div{
	display: block;
	box-sizing: border-box;
    height: 50px;
    max-height: 50px;
	line-height: 30px;
	padding: 10px;
	background: white;
	font-size: 0px;
}

.main_toolbar > div > a,
.main_toolbar > div > button,
.main_toolbar > div > div{
	box-sizing: border-box;
	display: inline-block;
	line-height: 30px;
	min-width: 30px;
	text-align: center;
	vertical-align: top;
	padding: 0px 6px; margin: 0px;
	margin-right: 3px;
	border: none;
	outline: none;
	cursor: pointer;
	border-radius: 3pt;
	font-size: 11pt;
}

.main_toolbar > div > * > i{
	font-size: 11pt;
}

.main_toolbar > div > a:hover,
.main_toolbar > div > button:hover,
.main_toolbar > div > div:hover{
	background: #DDD;
}

.main_toolbar > div > .red{background: linear-gradient(120deg,#864444 , #562c2c); color: white;}
.main_toolbar > div > .green{background: linear-gradient(120deg,#438745 , #2c562d); color: white;}

.main_toolbar > div > span{
	display: inline-block;
	padding: 0px;
	margin: 0px 4px;
	width: 1px;
	height: 30px;
	background: #CCC;
}

.toolbar{
	display: block;
	text-align: center;
	line-height: 40px;
}

.toolbar > *{
	position: relative;
	display: inline-block;
	height: 40px;
	min-width: 40px;
	line-height: 40px;
	text-align: center;
	padding: 0px 10px;
	cursor: pointer;
	font-size: 10pt;
	font-weight: 600;
	color: #0059aa;
}

.toolbar > * > i{
	display: block;
	min-width: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 14pt;
}

.toolbar > *:hover{
	background: rgba(100,100,100,0.1);
}