@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
:root {
	--color1: #51679c;
	--color2: #F1F1FF;
	--color3: #8A9BC2;
	--color4: #013496;
	--color5: #46BFD3;
	--colorBG: #e2e1ff;
	--colorTEXT: #000;
	--colorLink: #83148c;
	--colorCalendar: #fffa;
	--time: 300s;
}
body[data-mode="dark"] {
	--color1: #575757;
	--color2: #333333;
	--color3: #474646;
	--color4: #f0f0f0;
	--color5: #afafaf;
	--colorBG: #222;
	--colorTEXT: #fff;
	--colorLink: #fff;
	--colorCalendar: #000a;
}
body, button, input:not([type="radio"]), textarea {
	font-family: "Comfortaa", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

body {
	margin: 0;
	padding: 0;
	background: url("bg.png") no-repeat fixed center center / 70vw auto var(--colorBG);
	color: var(--colorTEXT);
	overflow-x: hidden;
	overflow-y: scroll;
	cursor: default;
}
body[ready="true"], body[editor="true"] {
	 padding-bottom: 72px;
}

h1, h2, h3 {
	padding: 5px 20px;
	width: calc(100% - 40px);
	color: white;
	text-shadow: 0 0 4px black;
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	background: linear-gradient(45deg, var(--color1) 60%, var(--color3) 140%);
	font-size: 20px;
	text-align: center;
}
h1 div, h2 div, h3 div {
	background: no-repeat scroll center center / auto 80%;
	width: 50px;
	height: 50px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	filter: drop-shadow(0 0 5px #000);
}
h1 text, h2 text, h3 text {
	min-width: 260px;
	width: 80vw;
	max-width: 660px;
	display: inline-block;
	text-align: left;
}
h2, h3 {
	margin-top: 2em;
}
#box_text h3 {
	margin-top: 0;
}
p {
	text-align: justify;
	margin: 20px auto;
	max-width: 720px;
	padding: 0 30px;
	line-height: 1.75em;
	transition: font-size 0.2s linear;
}
span {
	display: block;
	text-align: right;
	font-size: 0.8em;
	font-weight: 300;
	margin: 0 18px 0 0;
	opacity: 0.7;
}
ul, ol {
	line-height: 1.75em;
	margin: 15px auto;
	max-width: 720px;
}
ul {
	list-style-image: url("favicon-16.png");
}
li {
	text-align: justify;
	margin: 10px 0 10px 15px;
	padding: 0 40px 0 4px;
}
a {
	color: var(--colorLink);
}
a:hover {
	text-shadow: 0 0 1px var(--colorTEXT);
}
#boxes > div {
	display: none;
}
#boxes > div.active {
	display: block;
}
#boxes[data-active="lectio"] h3 {
	background: linear-gradient(to right, var(--color1) 0%, var(--color5) 400%);
}
#boxes[data-active="meditatio"] h3 {
	background: linear-gradient(to right, var(--color1) -50%, var(--color5) 350%);
}
#boxes[data-active="oratio"] h3 {
	background: linear-gradient(to right, var(--color1) -100%, var(--color5) 300%);
}
#boxes[data-active="actio"] h3 {
	background: linear-gradient(to right, var(--color1) -150%, var(--color5) 250%);
}

[data-icon="text"] {
	background-image: url("favicon.png") !important;
}
[data-icon="lectio"] {
	background-image: url("bible.png") !important;
}
[data-icon="meditatio"] {
	background-image: url("think.png") !important;
}
[data-icon="oratio"] {
	background-image: url("praying.png") !important;
}
[data-icon="actio"] {
	background-image: url("activities.png") !important;
}
[data-icon="info"] {
	background-image: url("information.png") !important;
}
[data-icon="set"] {
	background-image: url("settings.png") !important;
}
[data-icon="calendar"] {
	background-image: url("calendar.png") !important;
}
[data-icon="star"] {
	background-image: url("star.png") !important;
}
#boxes > div:not(.active) p {
	font-size: 0.1px;
}

#alert {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	max-height: 60px;
}
#nav {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: center;
	height: 70px;
	width: calc(100% - 40px);
	padding: 0 20px;
	color: white;
	text-align: center;
	transition: background 1s linear;
	background: linear-gradient(to right, var(--color1) 50%, var(--color2) 50.5%);
	background-size: 200% 100%;
	background-position: 100% 0%;
	box-shadow: 0 0 12px 0 var(--color3);
}
body[ready="true"] #nav[data-i="1"] {
	background-position: 100% 0%;
	animation: nav-gradient-1 var(--time) linear both;
}
body[ready="true"] #nav[data-i="2"] {
	background-position: 75% 0%;
	animation: nav-gradient-2 var(--time) linear both;
}
body[ready="true"] #nav[data-i="3"] {
	background-position: 50% 0%;
	animation: nav-gradient-3 var(--time) linear both;
}
body[ready="true"] #nav[data-i="4"] {
	background-position: 25% 0%;
	animation: nav-gradient-4 var(--time) linear both;
}
@keyframes nav-gradient-1 {
	0%   {background-position: 100% 0%;}
	100% {background-position: 75% 0%;}
}
@keyframes nav-gradient-2 {
	0%   {background-position: 75% 0%;}
	100% {background-position: 50% 0%;}
}
@keyframes nav-gradient-3 {
	0%   {background-position: 50% 0%;}
	100% {background-position: 25% 0%;}
}
@keyframes nav-gradient-4 {
	0%   {background-position: 25% 0%;}
	100% {background-position: 0% 0%;}
}

#nav > div {
	width: 64px;
	height: 100%;
	margin: 0 calc(12.5% - 32px);
	background: no-repeat scroll center center / 36px 36px;
	cursor: pointer;
	transition: filter 0.2s linear, scale 0.2s ease-out;
	filter: grayscale(1) drop-shadow(0 0 3px #666a);
}
#nav > div:hover {
	filter: grayscale(0.75) drop-shadow(0 0 5px #666c);
}
#nav > div.active, #nav[data-i="2"] > div:nth-of-type(4n+1), #nav[data-i="3"] > div:nth-of-type(4n+1), #nav[data-i="3"] > div:nth-of-type(4n+2), #nav[data-i="4"] > div:nth-of-type(4n+1), #nav[data-i="4"] > div:nth-of-type(4n+2), #nav[data-i="4"] > div:nth-of-type(4n+3) {
	filter: grayscale(0) drop-shadow(0 0 5px #666e);
}
#nav > div.active {
	scale: 1.3;
}
#nav > .active::after {
	content: "";
	width: 36px;
	height: 10px;
	background: radial-gradient(var(--color4) -26%, transparent 75%);
	position: absolute;
	bottom: 10px;
	left: 14px;
	border-radius: 50%;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-3-1 0:26:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
body[ready="true"] #nav[data-i="1"] > div:nth-of-type(4n+2), body[ready="true"] #nav[data-i="2"] > div:nth-of-type(4n+3), body[ready="true"] #nav[data-i="3"] > div:nth-of-type(4n+4) {
	animation: shaking 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards var(--time) 15;
}
@keyframes shaking {
	0%, 50%, 100% {transform: rotate(0deg);transform-origin: 50% 100%;filter:drop-shadow(0 0 5px var(--color4));}
	5% {transform: rotate(2deg);scale: 1.1;filter:drop-shadow(0 0 7px var(--color4));}
	10%, 20%, 30% {transform: rotate(-4deg);filter:drop-shadow(0 0 10px var(--color4));}
	15%, 25%, 35% {transform: rotate(4deg);filter:drop-shadow(0 0 13px var(--color4));}
	40% {transform: rotate(-2deg);filter:drop-shadow(0 0 10px var(--color4));}
	45% {transform: rotate(2deg);filter:drop-shadow(0 0 7px var(--color4));}
}
#calendar[data-day="0"] {
	display: none;
}
#calendar, #darkmode, #homepage {
	position: absolute;
	z-index: 1;
	top: 0px;
	border-radius: 12px;
	opacity: 0.9;
	scale: 0.8;
	transition: opacity 0.2s, scale 0.2s;
	background: no-repeat scroll center center / 80% auto transparent;
	filter: drop-shadow(0 0 5px #666c);
}
#darkmode, #homepage {
	width: 60px;
	height: 60px;
	cursor: pointer;
}
#homepage {
	right: 65px;
	background-image: url("home.png");
}
#darkmode {
	right: 0px;
	background-image: url("dark-mode.png");
}
#calendar {
	right: 65px;
	width: 50px;
	height: 20px;
	background-image: url("calendar.png");
	text-align: center;
	font-size: 20px;
	padding: 30px 5px 10px 5px;
	font-weight: 700;
	color: black;
	line-height: 20px;
	cursor: pointer;
}
#homepage:hover, #darkmode:hover, #calendar:hover {
	opacity: 1;
	scale: 1;
}
#calendar[data-day="new"] {
	animation: rotate-scale-down 0.65s linear both;
}
@keyframes rotate-scale-down {
	0% {transform: scale(1) rotateZ(0);}
	50% {transform: scale(0.5) rotateZ(180deg);}
	100% {transform: scale(1) rotateZ(360deg);}
}
#time {
	display: block;
	margin: 10px auto;
	background-color: transparent;
	width: 280px;
	cursor: grab;
}
#time:active {
	cursor: grabbing;
}
#time::-moz-range-track, #time::-webkit-slider-runnable-track {
	background-color: var(--colorTEXT);
}
#time::-webkit-slider-thumb, #time::-moz-range-thumb {
	background: radial-gradient(var(--color4) 35%, transparent 75%);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 0;
}
#time::-webkit-slider-progress, #time::-moz-range-progress {
	background-color: var(--color1);
}
#fortime {
	display: block;
	text-align: center;
}
button {
	display: block;
	padding: 20px 30px;
	margin: 25px auto;
	background: linear-gradient(-45deg, var(--color1), var(--color5));
	background-size: 400% 400%;
	animation: gradient 8s ease infinite;
	font-weight: 700;
	font-size: 18px;
	color: white;
	border: none;
	box-shadow: 0 0 6px 2px #666;
	border-radius: 5px;
	cursor: pointer;
	text-shadow: 0 0 4px #333;
}
button:hover {
	box-shadow: 0 0 20px 0 var(--color1);
	text-shadow: 0 0 6px black;
}
button[disabled] {
	background: #666 !important;
	cursor: no-drop !important;
	opacity: 0.6;
}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}
body[ready="false"] > *:not(#wepp-install-modal, #box_start, #darkmode, #calendar, #box_calendar), body[ready="true"] #box_start, body[ready="true"] #calendar {
	display: none !important;
}
#box_calendar {
	display: none;
}
#box_calendar h3 {
	margin-top: 0;
}
#calendarTable {
	text-align: center;
	font-size: 0.85em;
}
#calendarTable caption {
  font-weight: 700;
	font-size: 1.1em;
}
#calendarTable td {
	padding: 8px 5px;
	min-width: 30px;
}
#calendarTable tr > td:first-child, #calendarTable tr > th:first-child {
	color: red;
}
.currentDay, .workDay {
	text-shadow: 0 0 2px white;
	font-weight: 700;
	color: #2da7f9;
}
.workDay {
	box-shadow: 0 0 6px 3px var(--colorCalendar);
	background-color: var(--colorCalendar);
}
.workDayLeft {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}
.workDayRight {
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}
.graydays {
	opacity: 0.25;
}
#box_calendar p {
	text-align: center;
}
#box_calendar p:last-child {
	text-align: right;
}
.for_show {
	display: block;
	margin: 20px auto 30px;
	text-align: center;
}
img:not(.verify) {
	min-width: 200px;
	width: 90%;
	max-width: 700px;
	margin: 20px auto;
	display: block;
	box-shadow: 0 0 20px 0 #666;
}
input[type="file"] + img {
	width: 128px;
	height: 128px;
	min-width: unset;
}
img[src="#"] {
	display: none;
}
#advanced {
	display: none;
}
#searcher {
	margin: 10px auto;
	display: block;
	padding: 8px 20px 5px;
	border: none;
	background: linear-gradient(to top,var(--color2) -100%,transparent 100%);
	color: var(--colorTEXT);
	border-bottom: 1px solid var(--color4);
	text-align: center;
	max-width: 300px;
	width: 70vw;
	min-width: 160px;
	font-size: 14px;
	transform: background 0.3s ease-out;
}
#searcher {
	background: linear-gradient(to top,var(--color2) -50%,transparent 150%);
	font-weight: 400;
}
#options {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	align-content: flex-start;
	margin: 20px auto 10px;
	max-width: 720px;
	width: 95vw;
	max-height: 150px;
	overflow-y: auto;
}
#for_searcher_text, #for_searcher_text2 {
	display: none;
	padding: 8px 0;
	margin: 8px;
	text-align: center;
}
#options div {
	margin: 8px;
	cursor: pointer;
	background-color: rgba(255,255,255,0.5);
	padding: 8px 16px;
	border-radius: 3px;
}
#options div:hover {
	box-shadow: 0 0 20px 0 var(--color1);
	background-color: rgba(255,255,255,0.65);
}
#options div.choosen {
	box-shadow: 0 0 20px 0 var(--color1);
	text-shadow: 0 0 3px var(--color1);
	background-color: rgba(255,255,255,0.8);
}
form textarea {
	min-height: 9em;
}
form textarea, form input:not([type="radio"]) {
	display: block;
	margin: 20px auto;
	max-width: 720px;
	width: 80vw;
	background-color: rgba(255,255,255,0.5);
	color: #000;
	padding: 10px 20px;
	border: none;
	border-left: 1px solid #666;
	border-bottom: 1px solid #666;
	font-size: 15px;
}
form textarea:focus, form input:not([type="radio"]):focus {
	color: var(--colorTEXT);
	background-color: var(--colorBG);
}
#nav a {
	margin: 25px 15px;
}
table {
	max-width: 720px;
	margin: 20px auto;
}
.bigtable {
	display: block;
	max-height: calc(100dvh - 350px);
	overflow: auto;
	border: 1px inset var(--colorBG);
	background-color: #8881;
	width: fit-content;
}
th, td {
	padding: 10px;
}
#chart_div, #chart_div2 {
	width: 90vw;
	max-width: 720px;
	margin: 20px auto;
}
.verify0, .verify1, .verify2, .verify3 {
	width: 16px;
	height: 16px;
	background: no-repeat scroll center center / 85% auto transparent;
}
.verify0 {
	background-image: url("verify0.png");
}
.verify1 {
	background-image: url("verify1.png");
}
.verify2 {
	background-image: url("verify2.png");
}
.verify3 {
	background-image: url("verify3.png");
}
.verify_label {
	display: block;
	margin: 20px auto;
	max-width: 720px;
	width: 80vw;
	cursor: pointer;
}
.verify_label img {
  height: 32px;
  vertical-align: middle;
  width: 32px;
  display: inline-block;
}
.verify_label input {
	display: inline-block;
}
.stats_info img {
	display: inline-block;
	height: 1em;
	width: 1em;
	min-width: unset;
	margin: 0 4px 0 10px;
}
.day[data-verify] {
	border-radius: 3px;
}
.day[data-verify="0"] {
	box-shadow: inset 0 0 10px 0px white;
}
.day[data-verify="1"] {
	box-shadow: inset 0 0 10px 0px yellow;
}
.day[data-verify="2"] {
	box-shadow: inset 0 0 10px 0px orange;
}
.day[data-verify="3"] {
	box-shadow: inset 0 0 10px 0px green;
}

@media screen and (min-width: 960px){
	body[ready="true"] {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		align-content: flex-start;
	}
	#boxes, #box_text {
		max-width: unset;
		width: 50%;
	}
	#boxes h3 {
		margin-top: 0;
	}
}