@import 'color.css';

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lora-regular - latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/lora-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lora-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lora-italic - latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/lora-v16-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lora-v16-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
	background: var(--grey-100);
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 16px;
	padding-bottom: 100px;
	color: var(--grey-900);
}

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

ion-icon {
  pointer-events: none;
}

.btn:focus,.btn:active, *, *:focus {
   outline: none !important;
   box-shadow: none;
}

/* LOGIN */
.intro {
	padding: 0 20px;
}

.intro a {
	color: var(--grey-900);
	text-decoration: none;
	border-bottom: 2px dotted var(--info-500);
	line-height: 1;
}

.intro a:hover {
	color: var(--info-500);
}

#login h1 {
	font-weight: 300;
	letter-spacing: -3px;
	font-family: 'Roboto', sans-serif;
	color: var(--grey-700);
	font-size: 3.5rem;
	text-transform: uppercase;
}

#login h1 span {
	font-weight: 400;
	letter-spacing: -1px;
	font-family: 'Lora', serif;
	letter-spacing: -2px;
	color: var(--grey-300);
	font-size: 2.3rem;
	text-transform: none;
}

#page5 h2 {
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
	color: var(--info-500);
	font-size: 1.5rem;
}
#page5 h2 span a {
	font-weight: 400;
	font-family: 'Lora', serif;
	font-style: italic;
	text-decoration: none;
	font-size: 1.2rem;
	color: var(--grey-500);
}

#page5 h2 span a:hover {
	border-bottom: 2px dotted var(--danger-500);
}
#page5 h2 span a ion-icon {
	margin-bottom: -3px;
	margin-left: 5px;
}

#login label,
#page5 label {

	line-height: 1;
	padding: 0px 0 0 0; 
	margin-top: 15px;
}

#login input,
#page5 input {
	line-height: 1;
	border: 0;
	border-bottom: 1px dotted var(--grey-500);
	border-radius: 0;
	color: #36393c;
	padding: 0px 0 0 0;
	margin-top: 12px;
}
	
	#login input:hover,
	#page5 input:hover {
		border-width: 0 0 2px 0 !important;
		margin-bottom: -1px !important;
	}		
	#login .register input:hover,
	#page5 .mailchange input:hover {
		border-color: var(--warning-500);
	}		
	#login .login input:hover,
	#page5 .pwchange input:hover {
		border-color: var(--info-500);
	}			
	#pwvergessen input:hover,
	.reset input:hover	{
		border-color: var(--info-500) !important;
	}	
	#login input:focus,
	#page5 input:focus {
		outline: none !important;
		box-shadow: none;
	}


#login .register .headline,
#page5 .mailchange .headline {
	color: var(--warning-500);
}
#login .login .headline,
#page5 .pwchange .headline {
	color: var(--info-500);
}


#login .login a {
	color: var(--info-500);
	text-decoration: none;
}
#login .login a:hover {
	border-bottom: 2px dotted var(--info-500);
		margin-bottom: -2px;
}



#login .btn,
#page5 .btn {
	font-size: 18px;
	font-weight: 300;
	border-radius: 0;
	line-height: 1;
    border-style: dotted;
	border-width: 0 0 1px 0;
	color: #212529;
	margin-top: 20px;
	text-shadow:  2px 2px 0 var(--grey-100), 2px 0px 0 var(--grey-100), -2px 1px 0 var(--grey-100), 0px 2px 0 var(--grey-100);
	z-index: 9999;
}
#login .register .btn:hover,
#page5 .mailchange .btn:hover {
	color: var(--warning-500);
}

#login .login .btn:hover,
#page5 .pwchange .btn:hover {
	color:  var(--info-500);
}

#login .register .btn,
#page5 .mailchange .btn {
	border-bottom: 2px dotted var(--warning-500);
	margin-bottom: -1px;
}

#login .login .btn,
#page5 .pwchange .btn {
	border-bottom: 2px dotted var(--info-500);
	margin-bottom: -1px;
}

#login .checkbox {
	font-size: 14px;
	margin-top: 2px;
	margin-bottom: 35px;
}

#login .checkbox label {
	margin-top: 4px;
}

@media (min-width: 768px) {
	.mailchange .row:first-child,
	.pwchange .row:first-child,
	.register .row:first-child,
	.login .row:first-child	{
		border-width: 0;
	}
}

.checkbox label {
	cursor: pointer;
	line-height: 2;
}

.box {
	position: relative;
	display: inline-block;
	width: 13px;
	height: 13px;
	top: 21px;
	border: 1px solid var(--grey-500);
	font-size: 32px;
	overflow: visible;
	margin-top: -10px;
}

	.box ion-icon {
		position: relative;
		top: -14px;
		left: -7px;
	}

#forgot {
	cursor: pointer;
}

.result,
.err,
#result_mail,
#result_pw,
#forgotresult,
#resetresult,
#loginresult {
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 2px dotted var(--danger-500);
	border-bottom: 2px dotted var(--danger-500);
}

#forgotsucess {
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 2px dotted var(--success-500);
	border-bottom: 2px dotted var(--success-500);
}

.checkbox

#pwvergessen .headline .normal,
#login .reset .headline .normal {
	color:var(--info-500);
}


#savepw.btn,
#pw_anfordern.btn {
	border-bottom: 2px dotted var(--info-500) !important;
	margin-bottom: -1px;
}
#savepw.btn:hover,
#pw_anfordern.btn:hover {
	color: var(--info-500) !important;
}


/* Nav */

.navbar {
    background-color: #FFF;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	padding: 0px;
	text-align: left;
}

.navbar.fixed-left {
	border-right: 1px solid var(--grey-300);
	box-shadow: 0 1px 5px 0 var(--grey-200);
}

.fixed-left .navbar-nav li {
    color: var(--grey-500);
	padding: 0;
}

.fixed-left .nav {
  position: relative;
  top: 20%;
  transform: translateY(-20%);
}

.fixed-left a {
	color: var(--grey-500);
	text-decoration: none;
	height: 100%;
	width: 100%;
	display: inline-block;
	padding: 20px 10px 20px 50px;
}
.navbar a ion-icon {
	font-size: 24px;
	color:  var(--grey-600);
	margin-bottom: -6px;
	margin-right: 15px;
	
}

.navbar .active a,
.navbar .active a:focus,
.navbar .active a:hover,
.navbar li a:focus,
.navbar li a:hover {
	color:  var(--grey-900);
}

#link1:hover a ion-icon, #link1.active a ion-icon {color: var(--success-500);}
#link2:hover a ion-icon, #link2.active a ion-icon {color: var(--info-500);}
#link3:hover a ion-icon, #link3.active a ion-icon {color: var(--warning-500);}
#link4:hover a ion-icon, #link4.active a ion-icon {color: var(--success-500);}
#link5:hover a ion-icon, #link5.active a ion-icon {color: var(--info-500);}

.navbar.mobile.navbar-fixed-top {
	border: 0;
	z-index: 1101;
}

.mobile {
	text-align: center;
	z-index: 9999;
	background-color: #FFF;
	box-shadow: 0 0px 5px 0 var(--grey-200);
}

.mobile .container-fluid div {
	border-top: 1px solid var(--grey-500);
	
}

.mobile .container-fluid {
	padding: 0;
}
.mobile div#link1:hover, .mobile div#link1.active {border-color: var(--success-500);}
.mobile div#link2:hover, .mobile div#link2.active {border-color: var(--info-500);}
.mobile div#link3:hover, .mobile div#link3.active {border-color: var(--warning-500);}
.mobile div#link4:hover, .mobile div#link4.active {border-color: var(--success-500);}
.mobile div#link5:hover, .mobile div#link5.active {border-color: var(--info-500);}

.mobile .nav {
	text-align: center;
}

.navbar-nav {
    margin: 0;
}

.mobile div {
	padding: 0;
}

.mobile a ion-icon {
	margin-right: 0px;
	margin-bottom: 5px;
}
.mobile a {
	font-size: 10px;
	color: var(--grey-500);
	text-decoration: none;
	height: 100%;
	width: 100%;
	display: inline-block;
	padding: 20px 0 30px 0;
}

.mobile.navbar-fixed-top {
    top: 0;
}

.list {
	padding: 30px 5px 30px 5px;
	background: #FFF;
	box-shadow: 0 0 5px 0 var(--grey-200);
	margin-top: 26px;
}


@media (min-width: 768px) {
	.list {
		padding: 30px 30px 60px 30px;
		background: #FFF;
		box-shadow: 0 0 5px 0 var(--grey-200);
		margin-top: 26px;
	}

	#todo-page .list {
		padding: 30px 30px 60px 50px;
	}
}


div.headline {
	font-size: 22px;
	font-weight: 300;
	padding: 0px 28px 0px 11px;
    border-style: solid;
	border-width: 0 0 1px 0;
	border-color: var(--grey-300);
	font-family: 'Roboto', sans-serif;
}
#todo-page div.headline {
	max-height: 30px;
	padding-left: 0px;
	padding-right: 5px;


}
#todo-page div.headline .info {
	position: relative;
	bottom: -9px;
	float: right;
	color:  var(--grey-500);
	font-size: 16px;
	text-shadow:  2px 2px 0 var(--grey-100), 2px 0px 0 var(--grey-100), -2px 0px 0 var(--grey-100), 0px 2px 0 var(--grey-100);
}


	.normal {
		position: relative;
		bottom: -6px;
		text-shadow:  2px 2px 0 var(--grey-100), 2px 0px 0 var(--grey-100), -2px 1px 0 var(--grey-100), 0px 2px 0 var(--grey-100);
		z-index: 1100;
	}	
		.headline.liste, .headline.liste_neu {
			margin-top: 12px;
			line-height: 1;
			text-shadow:  2px 2px 0 var(--grey-100), 2px 0px 0 var(--grey-100), -2px 1px 0 var(--grey-100), 0px 2px 0 var(--grey-100);
			
		}
	.horizontal ion-icon {
		margin-bottom: -3px;
	}
	.horizontal {
		text-shadow:  2px 2px 0 var(--grey-100), 2px 0px 0 var(--grey-100), -2px 0px 0 var(--grey-100), 0px 2px 0 var(--grey-100);
		z-index: 10;
		position: relative;
		bottom: -3px;
	}
	.vertical {
		padding-left: 9px;
		text-shadow:  2px 2px 0 var(--grey-100), 2px 0px 0 var(--grey-100), -2px 0px 0 var(--grey-100), 0px 2px 0 var(--grey-100);
		z-index: 10;
		position: relative;
		bottom: -3px;
	}

@media (min-width: 768px) {
	.wd .horizontal,
	.wn .horizontal {
		position: relative;
		top: -45px;
		left: -57px;
	}
	.wd .vertical,
	.wn .vertical {
		position: relative;
		left: 6px;
		top: -38px;
		-ms-writing-mode: tb-rl; 
		writing-mode: vertical-rl; 
		transform:rotate(180deg);
		transform-origin: bottom left;
		z-index: 1100 !important;
		text-shadow:  0px 2px 0 var(--grey-100), 0px -2px 0 var(--grey-100);
		padding-left: 0px;
	}
	.ud .horizontal,
	.un .horizontal {
		position: relative;
		top: -68px;
		left: -57px;
	}
	.ud .vertical,
	.un .vertical {
		position: relative;
		left: 6px;
		top: -61px;
		-ms-writing-mode: tb-rl; 
		writing-mode: vertical-rl; 
		transform:rotate(180deg);
		transform-origin: bottom left;
		z-index: 1100 !important;
		text-shadow:  0px 2px 0 var(--grey-100), 0px -2px 0 var(--grey-100);
		padding-left: 0px;
	}
}

		.wd .headline {color: var(--success-500);}
		.wn .headline {color: var(--info-500);}
		.ud .headline {color: var(--warning-500);}
		.un .headline {color: var(--danger-500);}
		.liste.headline {color: var(--info-500);}


	.popover {
		max-width: 276px;
		padding: 1px;
		font-family: 'Roboto', sans-serif;
		font-size: 14px;
		font-weight: 400;
		border: 1px solid var(--grey-300);
		border-radius: 0px;
		-webkit-box-shadow: none;
		box-shadow: none;
	}


/*
#wd_live .row { border-color: var(--success-500);}
#wn_live .row { border-color: var(--info-500);}
#ud_live .row { border-color: var(--warning-500);}
#un_live .row { border-color: var(--danger-500);}

*/
.inner .row:first-child {
	padding-top: 8px;
}
	
.check {
	width: 40px;
	padding: 12px 0 0 0;
	margin-bottom: -2px;
	text-align: center;
	z-index: 100;
}
	.sub .check {	
		width: 62px;
		text-align: right;
		padding: 5px 6px 0 0;
		margin-bottom: 0px;
		margin-top: 1px; /* Element darüber hover */
	}
			
	.check .btn {
		width: 20px;
		height: 20px;
		border: 1px solid var(--grey-400);
		border-radius: 0;
		padding: 0;
		font-size: 44px;
	}
			.sub .check .btn {
				width: 16px;
				height: 16px;
				font-size: 32px;		
			}

		.check .btn ion-icon {
			position: relative;
			top: -22px;
			left: -10px;
		}
		.check .btn:hover ion-icon {
			color: var(--grey-700);
		}

			.sub .check .btn ion-icon {
				position: relative;
				top: -14px;
				left: -7px;
			}

.task {
	border-bottom: 1px dotted var(--grey-500);
	padding: 18px 0 0 0; /* Bestimmt die row höhe*/
	margin-top: 1px; /* Für Button hover 2px */
	line-height: 1;
}

	.row.sub .task {
		padding-top: 12px;
		line-height: 1;
	}
	.sub.task_neu_sub .task {

	}
	
	.task:hover {
		border-width: 0 0 2px 0 !important;
		margin-bottom: -1px !important;
	}

	/* hover, aber :focus bleibt weiss */
	.wd .task:hover {border-color: var(--success-500);}
	.wn .task:hover {border-color: var(--info-500);}
	.ud .task:hover {border-color: var(--warning-500);}
	.un .task:hover {border-color: var(--danger-500);}


	div:focus {
		border-width: 0 0 2px 0 !important;
		margin-bottom: -1px !important;
	}
	.wd div:focus {border-color: var(--success-500) !important;}
	.wn div:focus {border-color: var(--info-500) !important;}
	.ud div:focus {border-color: var(--warning-500) !important;}
	.un div:focus {border-color: var(--danger-500) !important;}
	
.action { 
	width: 40px;
	padding: 0px 0 0 0;
	text-align: center;
}
	.sub .action {
		padding: 0px;
	}
		.sub .action .btn {
			margin-top: -2px;
			margin-bottom: -2px;
		}

	.btn {
		border: 0;
		padding: 0;
		margin-bottom: 0px;
		font-size: 23px;
		color: var(--grey-500);
	}
	.btn_sub {
		
	}
	.action ion-icon {
		color: var(--grey-500);
		margin-top: 4px;
		margin-bottom: -7px;
	}
	
	.wd .action .btn:hover ion-icon {color: var(--success-500);}
	.wn .action .btn:hover ion-icon {color: var(--info-500);}
	.ud .action .btn:hover ion-icon {color: var(--warning-500);}
	.un .action .btn:hover ion-icon {color: var(--danger-500);}
	.termine .action .btn:hover ion-icon {color: var(--danger-500);}


	.action .btn ion-icon[name=sync-outline] {
		color: var(--grey-500);
		-webkit-animation:spin .5s linear infinite;
		-moz-animation:spin .5s linear infinite;
		animation:spin .5s linear infinite;
	}
	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

	.wd-farbe, .wd-farbe:hover {color: var(--success-500) !important;}
	.wn-farbe, .wn-farbe:hover {color: var(--info-500) !important;}
	.ud-farbe, .ud-farbe:hover {color: var(--warning-500) !important;}
	.un-farbe, .un-farbe:hover {color: var(--danger-500) !important;}
	.termine-farbe, .termine-farbe:hover {color: var(--info-500) !important;}

.row.task_neu {
	padding-top: 0px;
}
.task_neu .task {

}

.task_neu .action {

}
	.sub.task_neu .action {

	}
	.italic {
		font-style: italic;
		
	}

	.wd .task_neu .task, .wd .task_neu_sub .task {border-color: var(--success-500);}
	.wn .task_neu .task, .wn .task_neu_sub .task {border-color: var(--info-500);}
	.ud .task_neu .task, .ud .task_neu_sub .task {border-color: var(--warning-500);}
	.un .task_neu .task, .un .task_neu_sub .task {border-color: var(--danger-500);}
	.termine .task_neu .task, .termine .task_neu_sub .task {border-color: var(--info-500);}




/* Termine */

.termine .datum div {
	display: inline-block;
	line-height: 1;
	border: 0px;
	color: var(--grey-900);
	padding: 0 0 0 1px;
	margin-top: 1px; /* Für Button hover 2px */
	margin-bottom: -3px;
	cursor: text;
}


.termine .datum div[placeholder]:empty:before,
.termine .zeit div[placeholder]:empty:before
{
    content: attr(placeholder);
    color: var(--grey-500);
	cursor: text;
}

.termin {
	border-bottom: 1px dotted var(--grey-500);
	padding: 17px 0 0 0; /* Bestimmt die row höhe*/
	margin-top: 1px; /* Für Button hover 2px */
	line-height: 1;
	font-size: 18px;
	
}
.task_neu .termin {
	padding: 25px 0 0 0;
}
	
	.termin:hover {
		border-width: 0 0 2px 0 !important;
		margin-bottom: -1px !important;
	}

.datum {
	padding: 5px 0 0 0;
	border-bottom: 1px dotted var(--grey-500);
	margin-top: 1px; /* Für Button hover 2px */
	line-height: 1;
	margin-bottom: 0px;
	font-style: italic;
}	

.tage {
	font-size: 12px;
}

.stunden {

}

	.termine .action {
		overflow: visible;
		padding-top: 10px;
	}
	.termine .action ion-icon {
		color: var(--grey-700);
		margin-top: 4px;
		margin-bottom: -7px;
	}
	
.termine_btn_delete {
	margin-bottom: -10px;
}

	
	.termine_btn_delete:hover ion-icon {
		color: var(--danger-500) !important;
	}
	
	.termine .termin:hover {border-color: var(--info-500);}
	
	.termine .datum div:hover, 
	.termine .datum div:focus  {
		border-bottom: 2px dotted var(--info-500);
		margin-bottom: -4px !important;
	}
	
.row.monate {

}	
.monathead {
	font-size: 16px;
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
	line-height: 1;
	color: var(--info-500);
	padding: 18px 0 0 0;
	margin-bottom: -8px;
	
	line-height: 1;
	z-index: 10;
}	
.ganztagshinweis {
	font-size: 14px;
}

.differenz {
	font-size: 14px;
	margin: 0;
	padding: 4px 0 0 0;
	color: var(--grey-400);
}

	
/* DONE */
.done .check {
	padding: 20px 0 0 0;
	margin-bottom: -2px;
	text-align: center;
	z-index: 100;
}
	.done .sub .check {	
		text-align: right;
		padding: 8px 6px 0 0;
		margin-bottom: 0px;
		margin-top: 1px; /* Element darüber hover */
	}
			
	.done .check .btn {
		width: 20px;
		height: 20px;
		border-radius: 0;
		padding: 0;
		font-size: 44px;
	}
			.sub .check .btn {
				width: 16px;
				height: 16px;
				font-size: 32px;		
			}

.done .task {
	border-bottom: 1px dotted var(--grey-500);
	padding: 18px 0 0 0; /* Bestimmt die row höhe*/
	margin-top: 1px; /* Für Button hover 2px */
	line-height: 1.4;
}

	.done .row.sub .task {
		padding-top: 12px;
		line-height: 1.4;
	}
	
.done_action {
	width: 40px;
	padding: 30px 0 0 0;
	margin-bottom: -8px;
	text-align: center;
}

.done_action ion-icon {
	font-size: 32px;
}
	.done_btn_delete {
		margin-top: -14px;
	}
		.sub .done_btn_delete {
			padding-top: 10px;
		}
	.done_btn_delete:hover ion-icon {
		color: var(--danger-500);
	}

.datum_done {
	font-style: italic;
	font-size: 14px;
	color: var(--grey-500);
}
.done_liste {
	font-size: 14px;
	font-style: italic;
}