:root
{
	--tp-light-gray:#efefef;
	--tp-gray:#2f2f2f;
	--tp-light-cyan:#badff8;
	--tp-cyan:#73bff2;
	--tp-light-pink:#ffccff;
	--tp-pink:#ff80ff;
	--tp-light-red:#ff8080;
	--tp-red:#ff1a1a;
	--tp-selected-el-color:#44A8EB;
}

.TaskPlanner *
{
	box-sizing:border-box;
}

.TaskPlanner *::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.TaskPlanner *::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.TaskPlanner *::-webkit-scrollbar-thumb {
  background: #d9d9d9;
}

/* Handle on hover */
.TaskPlanner *::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

.TaskPlanner .float-left
{
	float:left;
}

.TaskPlanner .float-right
{
	float:right;
}

.TaskPlanner input, .TaskPlanner textarea
{
	border:0;
	border-bottom:1px solid var(--tp-light-gray);
	padding:8px;
	color:var(--tp-gray);
	cursor:pointer;
	transition-duration:0.3s;
}

.TaskPlanner textarea
{
	resize:vertical;
	min-height:140px;
	max-height:300px;
	border:1px solid var(--tp-light-gray);
	border-radius:5px;
	transition-property:border-color;
}

.TaskPlanner input:focus, .TaskPlanner textarea:focus
{
	border-color:var(--tp-selected-el-color);
}

.TaskPlanner input::placeholder, .TaskPlanner textarea::placeholder
{
	color:var(--tp-light-gray);
}

.TaskPlanner input[type=range]
{
	padding:0;
	transition-duration:0.3s;
}

.TaskPlanner .radio-row
{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:10px;
}

.TaskPlanner .radio-row .choice-wrapper
{
	border:1px solid var(--tp-selected-el-color);
	color:var(--tp-selected-el-color);
	background-color:#fff;
	border-radius:15px;
	padding:8px 16px;
	align-self:center;
	text-align:center;
	cursor:pointer;
	outline:none;
	font-size:14px;
	line-height:14px;
	transition-duration:0.3s;
}

.TaskPlanner .radio-row .choice-wrapper:hover, .TaskPlanner .radio-row input:checked + .choice-wrapper
{
	color:#fff;
	border: 1px solid var(--tp-selected-el-color);
	background:var(--tp-selected-el-color);
}

.TaskPlanner .btn
{
	display:inline-block;
	padding:8px 16px;
	background:var(--tp-selected-el-color);
	border:1px solid #fff;
	border-radius:15px;
	text-decoration:none !important;
	font-size:14px;
	line-height:14px;
	align-self:center;
	flex-grow:0;
	cursor:pointer;
	outline:none;
	transition-duration:0.3s;
}

.TaskPlanner .btn:hover
{
	color:var(--tp-selected-el-color);
	border: 1px solid var(--tp-selected-el-color);
	background:#fff;
}

.TaskPlanner .btn.inversed-btn
{
	background:#fff;
	color:var(--tp-selected-el-color);
	border: 1px solid var(--tp-selected-el-color);
}

.TaskPlanner .btn.inversed-btn:hover
{
	color:#fff;
	border: 1px solid var(--tp-selected-el-color);
	background:var(--tp-selected-el-color);
}

.TaskPlanner
{
	position:fixed;
	z-index:9998;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:90%;
	height:90%;
	padding:8px;
	border-radius:5px;
	display:grid;
	grid-template-columns:minmax(250px, 1fr) 2fr;
	grid-template-rows:1fr 1fr;
	grid-column-gap:8px;
	grid-row-gap:8px;
	grid-template-areas:
		"personal-tasks calendar"
		"common-tasks calendar";
	background-color:#fff;
}

.TaskPlanner.active
{
	grid-template-areas:
		"task-editor calendar"
		"task-editor calendar";
}

.TaskPlanner > div
{
	border:1px solid var(--tp-light-gray);
	border-radius:5px;
}

.TaskPlanner .visible-content-select-wrapper
{
	display:none;
	grid-area: visible-content-select;
	grid-template-columns:1fr 1fr;
	grid-gap:8px;
	padding:8px 16px;
}

.TaskPlanner .personal-tasks
{
	grid-area: personal-tasks;
}

.TaskPlanner .common-tasks
{
	grid-area: common-tasks;
}

.TaskPlanner .task-editor
{
	grid-area: task-editor;
	display: none;
}

.TaskPlanner .calendar
{
	grid-area: calendar;
}

.TaskPlanner.active .tasks
{
	display: none;
}

.TaskPlanner.active .task-editor
{
	display: block;
}

.TaskPlanner .tasks .content
{
	padding:8px;
}

.TaskPlanner .tasks .content .task
{
	margin-top:10px;
	display:grid;
	grid-template-columns:30px 1fr;
	grid-gap:8px;
	pointer-events:none;
	transition-duration:0.3s;
	border-radius:5px;
}

.TaskPlanner .common-tasks .content .task
{
	grid-template-columns:30px 1fr 40px;
}

.TaskPlanner .tasks .content .task:first-child
{
	margin-top:0;
}

.TaskPlanner .tasks .content .task .weekday
{
	color:var(--tp-gray);
	font-size:12px;
	line-height:12px;
	text-align:center;
	width:100%;
}

.TaskPlanner .tasks .content .task .date
{
	text-align:center;
}

.TaskPlanner .tasks .content .task .day
{
	color:#000;
	font-weight:bold;
	font-size:16px;
	line-height:16px;
	width:100%;
}

.TaskPlanner .tasks .content .task .info
{
	border-radius:5px;
	padding:8px;
	background-color:var(--tp-selected-el-color);
	color:#fff;
	line-height:16px;
	min-height:48px;
	cursor:pointer;
	pointer-events:auto;
}

.TaskPlanner .tasks .content .task:hover
{
	transform:scale(1.02) translateY(-4px);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
	padding:4px;
}

.TaskPlanner .tasks .content .task .logo-wrp
{
	padding:4px 0;
}

.TaskPlanner .tasks .content .task .logo
{
	display:block;
	height:40px;
	width:40px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius:50%;
	cursor:pointer;
	pointer-events:visible;
	transition-duration:0.3s;
}

.TaskPlanner .tasks .content .task .logo:hover
{
	transform:scale(1.07);
}

.TaskPlanner .task-editor .content
{
	display:none;
	padding:8px 16px;
	overflow:auto;
	height:calc(100% - 32px);
}

.TaskPlanner .tasks .content
{
	overflow:auto;
	height:calc(100% - 32px);
}

.TaskPlanner .task-editor .content.active
{
	display:block;
}

.TaskPlanner .task-editor .content .inp-wrapper, .TaskPlanner .task-editor .content .btn-wrapper
{
	margin-top:10px;
}

.TaskPlanner .task-editor .content .inp-wrapper:first-child
{
	margin-top:0;
}

.TaskPlanner .task-editor .content span
{
	font-size:14px;
	line-height:14px;
	font-weight:bold;
}

.TaskPlanner .task-editor .content input, .TaskPlanner .task-editor .content textarea, .TaskPlanner .task-editor .content .radio-row
{
	width:100%;
	margin-top:4px;
}

.TaskPlanner .task-editor .content input[type=range]
{
	width:calc(100% - 50px);
	height:32px;
}

.TaskPlanner .task-editor .content input[type=range] + span
{
	width:40px;
	vertical-align:top;
	position:relative;
	top:13px;
}

.TaskPlanner .task-editor .content .btn
{
	margin-left:4px;
}

.TaskPlanner .task-editor .content .btn.remove-task
{
	background-color:var(--tp-light-red);
	border-color:var(--tp-light-red);
}

.TaskPlanner .task-editor .content .btn.remove-task:hover
{
	background-color:#fff;
	color:var(--tp-light-red);
	border-color:var(--tp-light-red);
}

.TaskPlanner .container-header
{
	border-radius:5px 5px 0 0;
	background-color:var(--tp-selected-el-color);
	color:#fff;
	font-size:16px;
	padding:4px 8px;
	height:32px;
	text-align:center;
}

.TaskPlanner .change-month-btn, .TaskPlanner .task-editor-btn
{
	font-size:24px;
	line-height:24px;
	font-weight:bold;
	cursor:pointer;
	transition-duration:0.3s;
	padding:0px 8px;
}

.TaskPlanner .change-month-btn.next, .TaskPlanner .task-editor-btn.next
{
	border-radius:5px 50% 50% 5px;
}

.TaskPlanner .change-month-btn.prev, .TaskPlanner .task-editor-btn.prev
{
	border-radius:50% 5px 5px 50%;
}

.TaskPlanner .task-editor-btn.new
{
	border-radius:9px;
}

.TaskPlanner .change-month-btn:hover, .TaskPlanner .task-editor-btn:hover
{
	color:var(--tp-selected-el-color);
	background-color:#fff;
	transform:scale(1.05);
}

.TaskPlanner .calendar-table
{
	height:calc(100% - 32px);
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:repeat(7, 1fr);
	/* grid-row-gap: calc((100% - 32px*7) / 6); */
	grid-gap:8px;
	padding:16px;
}

.TaskPlanner .calendar-table .row
{
	display:grid;
	grid-template-columns:repeat(7, 32px);
	grid-column-gap: calc((100% - 32px*7) / 6);
	height:32px;
}

.TaskPlanner .calendar-table .row .cell
{
	height:32px;
	width:32px;
	font-size:16px;
	line-height:16px;
	padding:8px;
	border-radius:100%;
	background-color:var(--tp-light-gray);
	color:var(--tp-gray);
	text-align:center;
}

.TaskPlanner .calendar-table .row .cell.prev_month, .TaskPlanner .calendar-table .row .cell.next_month
{
	opacity:0.5;
}

.TaskPlanner .calendar-table .row .cell.today
{
	border:2px solid var(--tp-pink);
	padding:6px;
}

.TaskPlanner .calendar-table .row.main-row .cell
{
	font-weight:bold;
	background-color:var(--tp-selected-el-color);
	color:#fff;
}

.TaskPlanner .calendar-table .row.day-row .cell
{
	transition-duration:0.3s;
	cursor:pointer;
}

.TaskPlanner .calendar-table .row.day-row .cell:hover
{
	transform:scale(1.05);
	background-color:var(--tp-light-cyan);
	opacity:1;
}

.TaskPlanner .calendar-table .row.day-row .cell.active
{
	transform:scale(1.05);
	background-color:var(--tp-cyan);
	color:#fff;
	font-weight:bold;
	opacity:1;
}

@media (max-width: 600px)
{
	.TaskPlanner, .TaskPlanner[curr=tasks]
	{
		grid-template-columns:1fr;
		grid-template-rows:48px repeat(auto-fill, calc(50% - 32px));
		grid-template-areas:
			"visible-content-select"
			"personal-tasks"
			"common-tasks";
	}
	
	.TaskPlanner[curr=calendar]
	{
		grid-template-columns:1fr;
		grid-template-rows:48px calc(100% - 56px);
		grid-template-areas:
			"visible-content-select"
			"calendar";
	}
	
	.TaskPlanner.active
	{
		grid-template-columns:1fr;
		grid-template-rows:48px calc(100% - 56px);
		grid-template-areas:
			"visible-content-select"
			"task-editor";
	}
	
	.TaskPlanner .calendar, .TaskPlanner[curr=tasks] .calendar
	{
		display:none;
	}
	
	.TaskPlanner[curr=calendar] .tasks
	{
		display:none;
	}
	
	.TaskPlanner[curr=calendar] .calendar
	{
		display:block;
	}
	
	.TaskPlanner.active .calendar
	{
		display:none;
	}
	
	.TaskPlanner .visible-content-select-wrapper
	{
		display:block;
	}
}