/*                                  █████████   ██  ██  ██
                                                ██  ██  ██
                                    █████████   ██  ██  ██
 ███████████████  ███████                       ██  ██  ██       █████
 ███████████████  ███████████       █████████   ██  ██  ██      ██     ███
       ███        ███      ███                                 ███     ███
       ███        ███       ██     ██████████     ████████   ████████ ████████
       ███        ███      ███   ████           ███      ███   ███     ███
       ███        ███████████    ████           ███       ██   ███     ███
       ███        ████████         ████████     ██        ███  ███     ███
       ███        ███                    ████   ██        ██   ███     ███
       ███        ███                    ████   ███      ███   ███     ███
       ███        ███            ██████████      ██████████    ███      ██████
                                                    ████                  ████
	TPsoft 2000-2021
	CSS Document for Calendar

	posledna editacia:
                    2021-08-18 11:59  Igor


	fialova svetla:          #F197F2     rgb 241,151,242
	fialova zakladna:        #E160DE     rgb 225,96,222
	fialova tmava:			 #C312A0     rgb 195,18,160

*/

:root {
	--light-05: rgba(241,151,242, 0.05);
	--light-1: rgba(241,151,242, 0.1);
	--light-2: rgba(241,151,242, 0.2);
	--light-3: rgba(241,151,242, 0.3);
	--light-4: rgba(241,151,242, 0.4);
	--light-5: rgba(241,151,242, 0.5);
	--light-6: rgba(241,151,242, 0.6);
	--light-7: rgba(241,151,242, 0.7);
	--light-8: rgba(241,151,242, 0.8);
	--light-9: rgba(241,151,242, 0.9);
	--light-10: rgba(241,151,242, 1);

	--normal-1: rgba(225,96,222, 0.1);
	--normal-2: rgba(225,96,222, 0.2);
	--normal-3: rgba(225,96,222, 0.3);
	--normal-4: rgba(225,96,222, 0.4);
	--normal-5: rgba(225,96,222, 0.5);
	--normal-6: rgba(225,96,222, 0.6);
	--normal-7: rgba(225,96,222, 0.7);
	--normal-8: rgba(225,96,222, 0.8);
	--normal-9: rgba(225,96,222, 0.9);
	--normal-10: rgba(225,96,222, 1);

	--dark-1: rgba(195,18,160, 0.1);
	--dark-2: rgba(195,18,160, 0.2);
	--dark-3: rgba(195,18,160, 0.3);
	--dark-4: rgba(195,18,160, 0.4);
	--dark-5: rgba(195,18,160, 0.5);
	--dark-6: rgba(195,18,160, 0.6);
	--dark-7: rgba(195,18,160, 0.7);
	--dark-8: rgba(195,18,160, 0.8);
	--dark-9: rgba(195,18,160, 0.9);
	--dark-10: rgba(195,18,160, 1);
}

@font-face {
	font-family: MavenPro;
	src: url('../fonts/MavenPro-Regular.ttf');
}
html, body {
	font-family: MavenPro, Arial, sans-serif;
	padding: 0px;
	margin: 0px;
}

.hide {
	display: none !important;
}
.right {
	float: right;
}
.center {
	margin-left: auto;
	margin-right: auto;
}
.messages-error {
	border: 1px red solid;
	background-color: #fcc;
	background-image: url(../images/error.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding: 5px;
	padding-left: 30px;
}
.messages-ok {
	border: 1px green solid;
	background-color: #cfc;
	background-image: url(../images/ok.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding: 5px;
	padding-left: 30px;
}
table th,
table td {
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}
a, a:visited {
	text-decoration: none;
}
input[type="submit"],
button {
	cursor: pointer;
}

/**
 * D E B U G
 */
.br { border: 1px red solid; }
.bg { border: 1px green solid; }
.bb { border: 1px blue solid; }
.by { border: 1px yelow solid; }
.bm { border: 1px magenta solid; }

/**
 * Common
 */
.calendar-button,
.calendar-button2 {
	display: inline-block;
	border: 1px /*rgba(195,18,160, 1)*/ var(--dark-10) solid;
	background-color: /*rgba(241,151,242, 0.8);*/ var(--light-8);
	color: /*rgba(195,18,160, 0.6);*/ var(--dark-6);
	border-radius: 4px;
	padding: 5px 10px;
	text-align: center;
	font-size: 15px;
	text-transform: uppercase;
	margin: 10px 0px;
	cursor: pointer;
	/*box-shadow: 1px 1px 2px rgba(0,0,0, 0.5)*/
	transition: background 0.2s ease-in;
}
.calendar-button:hover,
.calendar-button2:hover {
	/*background-color: rgba(195,18,160, 0.3);*/
	background-color: var(--light-2);
	/*color: rgba(241,151,242, 0.8);*/
	color: /*rgba(195,18,160, 0.8);*/ var(--dark-8);
	border: 1px var(--light-7) solid;
	border-radius: 6px;
	box-shadow: 1px 1px 5px var(--light-5);
}
.calendar-button2 {
	font-size: 10px;
	margin: 3px 0px;
    padding: 2px 6px;
}
.checkmark {
	display: inline-block;
	font-family: arial;
	-ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
	-webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
	transform: scaleX(-1) rotate(-35deg);
	background-color: var(--light-2);
	color: var(--dark-10);
	width: 20px;
	height: 20px;
	text-align: center;
	border-radius: 20px;
	cursor: pointer;
}
.checkmark::after {
	content: ' ';
}
.checkmark.ok::after {
	content: 'L';
}

/**
 * Login
 */
.login-panel {
	background-color: /*rgba(195,18,160, 0.3);*/ var(--dark-3);
	width: auto;
	display: inline-block;
	padding-bottom: 30px;
	padding-left: 30px;
	right: 0;
	top: 40vh;
	position: absolute;
	width: 50vw;
	/*height: 40vh;*/
	/*text-align: center;*/
}
.login-header-up,
.registration-header-up {
	display: none;
	padding-left: 30px;
}
.login-row {
	display: flex;
}
.login-panel h1 {
	color: /*#F197F2;*/ var(--light-10);
	font-size: 40px;
}
.login-label {
	color: /*#E160DE;*/ white;
	margin-bottom: 5px;
	text-shadow: 1px 2px 3px #000;
	width: 60%;
	max-width: 200px;
}
.login-panel input {
	background-color: rgba(0,0,0, 0.5);
	color: white;
	padding: 5px;
	margin-bottom: 15px;
	border: 1px white solid;
}
.login-label a,
.login-label a:visited {
	color: /*#F197F2;*/ var(--light-10);
	text-decoration: underline;
}
.registration-panel {
	top: 30vh;
}
.registration-panel h2 {
	color: white;
}
@media (max-width: 700px) {
	.login-panel {
		left: auto;
		top: auto;
		width: auto;
		margin-left: auto;
		margin-right: auto;
		display: block;
		padding: 30px;
		position: relative;
	}
	.registration-panel {
		top: auto;
	}
	.login-header-up,
	.registration-header-up {
		display: block;
	}
	.login-header-form,
	.registration-header-form {
		display: none;
	}
}
@media (max-width: 400px) {
	.login-panel {
		padding: 20px 5px;
	}
	.login-panel input[type="text"],
	.login-panel input[type="password"],
	.login-panel input[type="email"] {
		width: 80%;
	}
	.login-header-up {
		padding-left: 5px;
	}
}

/**
 * Month Selector
 */
.calendar-monthselector {
	display: inline-block;
	vertical-align: top;
	margin-top: 30px;
	margin-right: 30px;
	margin-left: 30px;
}
.calendar-month-previous,
.calendar-month-previous2,
.calendar-month-current,
.calendar-month-next,
.calendar-month-next2 {
	display: flex;
	font-size: 15px;
	/*margin: 10px 0px;*/
	color: /*rgba(195,18,160, 0.4);*/ var(--dark-4);
	cursor: pointer;
	padding: 5px;
	border-radius: 25px;
	transition: background-color 0.5s;
}
.calendar-month-previous,
.calendar-month-next {
	font-size: 25px;
	color: /*rgba(195,18,160, 0.6);*/ var(--dark-6);
}
.calendar-month-current {
	font-size: 35px;
	color: /*rgba(195,18,160, 1);*/ var(--dark-10);
}
.calendar-month-previous:hover,
.calendar-month-previous2:hover,
.calendar-month-current:hover,
.calendar-month-next:hover,
.calendar-month-next2:hover {
	background-color: rgba(255,255,255, 0.2);
}
.calendar-month-name {
	width: 50%;
	min-width: 200px;
	text-align: right;
	padding-right: 20px;
}
.calendar-month-year {
	width: 50%;
	min-width: 90px;
}

/**
 * Calendar
 */
.calendar-header {
	display: flex;

}
.calendar-today {
	width: 250px;
	background-color: /*rgba(225,96,222, 0.3);*/ var(--normal-6);
	color: /*#C312A0;*/ white;
	padding: 10px;
	text-align: center;
	flex-shrink: 0;
}
.calendar-dayname {
	font-size: 24px;
	color: /*rgba(225,96,222, 0.5);*/ var(--normal-5);
	text-transform: uppercase;
}
.calendar-daynumber {
	font-size: 140px;
	line-height: 120px;
	border-bottom: 1px white solid;
}
.calendar-time {
	font-size: 40px;
	/*border-bottom: 1px rgba(225,96,222, 0.5) solid;*/
	color: /*rgba(225,96,222, 0.5);*/ var(--normal-5);
	margin-top: 20px;
}
.calendar-monthname {
	font-size: 24px;
	text-transform: uppercase;
}
.calendar-actions {
	background-color: /*rgba(225,96,222, 0.5);*/ var(--normal-5);
	width: calc(100% - 270px);
}
.calendar-month {
	display: inline-block;
	/*flex-direction: column;*/
	color: white;
	font-size: 22px;
}
.calendar-week {
	display: flex;
	flex-direction: row;
	margin-top: 5px;
}
.calendar-weekheader {
	color: /*rgba(225,96,222, 0.8);*/ var(--normal-8);
	border-bottom: 1px /*rgba(225,96,222, 0.8)*/ var(--normal-8) solid;
}
.calendar-daynames,
.calendar-day {
	text-align: center;
	width: 46px;
	height: 26px;
	border: 2px transparent solid;
}
.calendar-day {
	cursor: pointer;
}
.calendar-otherday {
	color: rgba(255,255,255, 0.3);
}
.calendar-day:hover {
	border: 2px /*rgba(225,96,222, 1)*/ var(--normal-10) dotted;
}
.calendar-day-selected {
	border: 2px /*rgba(225,96,222, 0.4)*/ var(--normal-4) solid !important;
	background-color: /*rgba(225,96,222, 0.2)*/ var(--normal-2) !important;
	color: /*rgba(195,18,160, 0.8);*/ var(--dark-8);
}
.calendar-weeknumber {
	background-color: rgba(255,255,255, 0.4);
	color: /*rgba(225,96,222, 1);*/ var(--normal-10);
	width: 35px;
	border-radius: 0px 25px 25px 0px;
	text-align: left;
	font-size: 15px;
	line-height: 30px;
	padding-left: 10px;
	margin-right: 5px;
	cursor: pointer;
	transition: background 0.5s ease-out, color 0.5s ease-out;
}
.calendar-weeknumber:hover {
	background-color: /*rgba(225,96,222, 0.5);*/ var(--normal-5);
	color: rgba(255,255,255, 0.8);
}

/**
 * Menu
 */
.calendar-menu {
	display: inline-block;
	vertical-align: top;
	margin-right: 30px;
	margin-left: 30px;
}
.calendar-user-name {
	color: rgba(255,255,255, 0.8);
	font-size: 35px;
	/*text-shadow: 1px 1px 3px #000;*/
}
.calendar-menu-button {
	display: block;
	width: 200px;
	border: 1px /*rgba(195,18,160, 1)*/ var(--dark-10) solid;
	background-color: /*rgba(241,151,242, 0.8);*/ var(--light-8);
	color: /*rgba(195,18,160, 0.6);*/ var(--dark-6);
	border-radius: 4px;
	padding: 5px 10px;
	text-align: center;
	font-size: 15px;
	text-transform: uppercase;
	margin: 10px 0px;
	cursor: pointer;
	/*box-shadow: 1px 1px 2px rgba(0,0,0, 0.5)*/
	transition: background 0.2s ease-in;
}
.calendar-menu-button:hover {
	/*background-color: rgba(195,18,160, 0.3);*/
	background-color: rgba(255,255,255, 0.3);
	/*color: rgba(241,151,242, 0.8);*/
	color: /*rgba(195,18,160, 0.8);*/ var(--dark-8);
	border: 1px rgba(255,255,255, 0.7) solid;
	border-radius: 6px;
	box-shadow: 1px 1px 5px rgba(255,255,255, 0.5);
}
.calendar-view {
	display: flex;
	flex-direction: row;
	width: 220px;
	border: 1px /*rgba(195,18,160, 1)*/ var(--dark-10) solid;
	background-color: /*rgba(241,151,242, 0.8);*/ var(--light-8);
	color: /*rgba(195,18,160, 0.6);*/ var(--dark-6);
	border-radius: 4px;
}
.calendar-view-item {
	width: 25%;
	text-align: center;
	padding: 5px;
	cursor: pointer;
	background-color: rgba(0,0,0, 0.1);
}
.calendar-view-item-selected {
	background-color: transparent;
}

/**
 * Calendar Body
 */
.calendar-body {
	display: flex;
}

/**
 * Calendar Year
 */
.calendar-year {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	padding: 15px;
}
.calendar-year-item {
	width: calc(25% - 64px);
	margin: 30px;
	border: 2px /*rgba(195,18,160, 1)*/ var(--dark-3) solid;
	cursor: pointer;
	transition: border 1s ease-out;
}
.calendar-year-item:hover,
.calendar-year-item-selected {
	border: 2px /*rgba(195,18,160, 0.3)*/ var(--dark-10) solid;
}
.calendar-year-name {
	background-color: /*rgba(195,18,160, 1);*/ var(--dark-3);
	color: /*rgba(195,18,160, 0.8);*/ var(--dark-5);
	font-size: 25px;
	padding: 5px 20px;
	transition: background 1s ease-out, color 0.5s ease-out;
}
.calendar-year-item:hover .calendar-year-name,
.calendar-year-item-selected .calendar-year-name {
	background-color: /*rgba(195,18,160, 0.3);*/ var(--dark-10);
	color: rgba(255,255,255, 0.8);
}
.calendar-year-count {
	text-align: center;
	color: /*rgba(195,18,160, 0.5);*/ var(--dark-5);
	padding: 20px;
	font-size: 35px;
}
.calendar-year-item:hover .calendar-year-count,
.calendar-year-item-selected .calendar-year-count {
	background-color: /*rgba(241,151,242, 0.05);*/ var(--light-05);
	color: /*rgba(195,18,160, 0.8);*/ var(--dark-8);
}

/**
 * Calendar Month
 */
.calendar-monthview {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;
	padding: 5px;
}
.calendar-month-daynames {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.calendar-month-dayname {
	width: calc((100% - 10px - 50px - 70px) / 7); /* padding monthview,  padding-left daynames, 7x(5+5) margin */
	margin: 5px;
	/*border: 2px rgba(195,18,160, 1) solid;*/
	color: var(--dark-10);
}
.calendar-month-week {
	display: flex;
	flex-direction: row;
	width: 100%;
	border-top: 1px /*rgba(195,18,160, 1)*/ var(--dark-10) solid;
	cursor: pointer;
}
.calendar-month-weeknumber {
	width: 50px;
	font-size: 10px;
	transition: background-color 2s, color 0.3s ease-out, font 0.7s ease-out;
}
.calendar-month-weeknumber:hover {
	background-color: var(--light-2);
	font-size: 20px;
	color: var(--dark-5);
	padding-top: 5px;
	padding-left: 5px;
	width: 45px;
}
.calendar-month-day {
	width: calc((100% - 10px - 50px - 70px) / 7); /* copy month-dayname */
	margin: 5px;
	margin-top: 0px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	height: 120px;
	transition: background-color 1s, color 0.3s ease-out, font 0.7s ease-out;
}
.calendar-month-day:hover,
.calendar-month-selected {
	background-color: var(--light-1);
}
.calendar-month-day-label {
	background-color: /*rgba(225,96,222, 0.5);*/ var(--normal-5);
	color: white;
	font-size: 20px;
	padding: 5px;
	white-space: nowrap;
	overflow: hidden;
	transition: background-color 1s, color 0.3s ease-out, font 0.7s ease-out;
}
.calendar-month-otherday .calendar-month-day-label {
	background-color: /*rgba(225,96,222, 0.2);*/ var(--normal-2);
}
.calendar-month-day-label small {
	font-size: 12px;
}
.calendar-month-day-note {
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px 5px;
	color: var(--dark-5);
	border-bottom: 1px var(--light-5) solid;
	transition: color 0.5s ease-out;
}
.calendar-month-day:hover .calendar-month-day-note,
.calendar-month-selected .calendar-month-day-note {
	color: var(--dark-10);
}
.calendar-month-day-plus {
	text-align: center;
	color: var(--light-8);
	font-size: 14px;
}
.calendar-month-day:hover .calendar-month-day-label,
.calendar-month-selected .calendar-month-day-label {
	background-color: var(--dark-8);
	/*color: var(--light-10);*/
}

/**
 * Calendar Week
 */
.calendar-weekview {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;
	padding: 5px;
}
.calendar-week-daynames {
	display: flex;
	flex-direction: row;
	width: 100%;
	border-bottom: 1px var(--dark-5) solid;
}
.calendar-week-timename {
	width: 50px;
}
.calendar-week-dayname {
	width: calc((100% - 10px - 50px - 70px) / 7); /* padding monthview,  padding-left daynames, 7x(5+5) margin */
	margin: 5px;
	color: var(--dark-10);
}
.calendar-week-hourline {
	display: flex;
	flex-direction: row;
	/*flex-wrap: nowrap;*/
	width: 100%;
	/*padding: 5px;*/
	transition: background 1s ease-out;
}
.calendar-week-hourline:hover {
	background-color: var(--light-2);
}
.calendar-week-time {
	width: 45px;
	padding-left: 5px;
	padding-top: 2px;
	font-size: 10px;
	color: var(--dark-8);
}
.calendar-week-daynote {
	width: calc((100% - 10px - 50px - 70px) / 7); /* padding monthview,  padding-left daynames, 7x(5+5) margin */
	padding: 5px;
	min-height: 20px;
	border-bottom: 1px var(--light-5) solid;
	cursor: pointer;
	font-size: 14px;
	color: var(--dark-6);
}
.calendar-week-daynote:hover {
	background-color: var(--light-2);
	color: var(--dark-10);
}

/**
 * Calendar Day
 */
.calendar-dayview {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}
.calendar-dayinfo {
	width: 270px;
	display: flex;
	flex-direction: column;
}
.calendar-daynotes {
	width: calc(100% - 280px);
	display: flex;
	flex-direction: row;
	margin-bottom: 10px;
}
.calendar-daydate {
	margin: 10px 0px;
	display: flex;
	flex-direction: column;
}
.calendar-daydate-date {
	text-align: center;
	font-size: 25px;
	color: var(--dark-8);
}
.calendar-daydate-names {
	text-align: center;
	color: var(--normal-5);
	font-size: 18px;
}
.calendar-daydate-dayname {
	text-align: center;
	color: var(--normal-10);
	font-size: 20px;
}
.calendar-daydate-week {
	text-align: center;
	color: var(--dark-5);
	font-size: 20px;
	margin: 10px 20px;
	padding: 5px 0px;
	cursor: pointer;
	border-radius: 20px;
	transition: background 1s ease-out, color 0.5s ease-out;
}
.calendar-daydate-week:hover {
	background-color: var(--light-5);
	color: var(--dark-9);
}
.calendar-daydate-inyear,
.calendar-daydate-endyear,
.calendar-daydate-sunrise,
.calendar-daydate-sunset {
	text-align: center;
	color: var(--normal-5);
	font-size: 18px;
}
.calendar-daydate-sunrise {
	margin-top: 10px;
}
.calendar-daydate-inyear strong,
.calendar-daydate-endyear strong,
.calendar-daydate-sunrise strong,
.calendar-daydate-sunset strong {
	color: var(--normal-7);
}
.calendar-daynotes-hours {
	display: flex;
	flex-direction: column;
	width: 50%;
	margin-top: 10px;
	padding-bottom: 20px;
	border-left: 1px var(--dark-5) solid;
}
.calendar-day-hourline {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	transition: background 1s ease-out;
}
.calendar-day-hourline:hover {
	background-color: var(--light-2);
}
.calendar-day-hourline-selected {
	background-color: var(--light-6);
	color: white;
}
.calendar-day-time {
	width: 70px;
	min-width: 70px;
	color: var(--dark-8);
	font-size: 10px;
	padding-left: 20px;
	padding-top: 5px;
}
.calendar-day-hournote {
	width: calc(100% - 70px);
	min-height: 30px;
	border-bottom: 1px var(--light-5) solid;
	cursor: pointer;
	font-size: 14px;
	color: var(--dark-6);
}
.calendar-day-note {
	line-height: 14px;
	overflow: hidden;
	white-space: nowrap;
}
.calendar-daynotes-onehour {
	display: flex;
	flex-direction: column;
	width: 50%;
	margin-top: 10px;
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px var(--dark-5) solid;
}
.calendar-onehour-name {
	color: var(--normal-10);
	font-size: 25px;
}
.calendar-onehour-notes {
	display: flex;
	flex-direction: column;
}
.calendar-onehour-onenote {
	background-color: var(--light-2);
	color: var(--dark-10);
	padding: 10px;
	margin: 10px 0px;
	display: flex;
	flex-direction: column;
}
.calendar-onehour-actions {
	display: flex;
	flex-direction: row;
	margin-bottom: 5px;
}
.calendar-onehour-actions select {
	margin-left: 25px;
}
.calendar-selectbox {
	background-color: var(--light-2);
	border-width: 0px;
	color: var(--dark-8);
	width: 150px;
}
.calendar-onehour-actions .calendar-button2 {
	margin-left: 25px;
}
.calendar-onehour-note {
	width: 100%;
}