html {
    font-size: 1rem;
    overflow: hidden;
}

body {
	margin: 0;
	font-family: 'Nunito', sans-serif;
    background: #0e2058;
    overflow: hidden;
    height: 100%;
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
    position: fixed;
}
.week {
}

.week .header {
    width: 100vw;
    height: 8vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    color: white;
}

.week .header div {
	padding: 0.8rem;
    flex:  0 0 20%;
}

.week .header div:last-child {
    text-align: right;
}

.week .header i.fa {
    font-size: 1.2rem;
}

.week .header .month {
	flex: 1 1 40%;
    text-align: center;
}
.week .header .week-number {
    font-style: italic;
    color: #fff;
    font-size: 11px;
}

.days-swiper {
    width: 300vw;
    transform: translate(-100vw);
    will-change: opacity;
    transition: transform 0.3s ease;
}

.days-swiper.show1 {
    transform: translate(0);
}

.days-swiper.show3 {
    transform: translate(-200vw);
}

.days-swiper.no-transition {
    transition: none;
}

.days {
    height: 92vh;
    width: 100vw;
    opacity: 1;
    will-change: opacity;
    display: inline-block;
    position: relative;
}
.day {
    width: 50%;
    height: 33.333%;
    padding: 0 0.4rem 0.4rem 0.4rem;
    float: left;
    box-sizing: border-box;
}

.day:nth-child(2n), .day:nth-child(7) {
    padding-left: 0;
}
.day:nth-child(5), .day:nth-child(7) {
    padding-bottom: 0.4rem;
}

.day-inner {
    width: auto;
    height: 100%;
    background: white;
    border-radius: 1vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    overflow: hidden;
}

.day.small {
	height: 16.666%;
}

.day .day-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    align-items: center;
    width: 0.5rem;
    padding: 0.5rem;
    height: calc(100% - 1rem);
    text-orientation: mixed;
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    border-left: 1px solid #ddd;
    background: #f9f9f9;
    border-radius: 0vh 1vh 1vh 0vh;    
}
.day .day-header > div {
    overflow: hidden;
    white-space: nowrap;
    flex:  0 0 auto;
}
.day .day-header :nth-child(2) {
    font-weight: bold;
}

.day .day-number {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    font-size: 4rem;
    color: #f5f5f5;
    padding: 0;
    margin: 0;
    line-height: 0.8;
    z-index: 0;
}

.day .day-number small {
    font-size:  50%;
}

.day .day-header :nth-child(1) {
    font-style: italic;
    color: #666;
    font-size: 11px;
    flex:  0 1 auto;
}

.day.focused .day-inner {
    position: absolute;
    margin: 1rem 2rem;
    top: 0;
    height: calc(100% - 2rem);
    left: 0;
    width: calc(100% - 4rem);
    box-shadow: 0 0 100px 70px #0e2058;
    flex-direction: column;
    z-index: 2;
}

.day.focused .day-inner .day-header {
    width: unset;
    text-orientation: unset;
    writing-mode: unset;
    transform: none;
    border-left: none;
    border-bottom: 2px solid #aaa;
    height: 2rem;
    flex-direction: row-reverse;
    border-radius: 1vh 1vh 0vh 0vh;        
}


.week .tasks {
    overflow-y: scroll;
    height: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
    margin-top:  0.2rem;
    margin-bottom:  -0.2rem;
    flex: 1 0 auto;
}

.week .tasks .inner {
    background: white;
    border-radius: 0.5rem;
    min-height: 2rem;
    margin-top:  0.2rem;
}

.day.today .day-header {
	background: #4169e130;
    border-left-color: royalblue;
}

.week .tasks .no-tasks {
    font-family: 'Nunito', sans-serif;
    text-align: center;
    color: #bbb;
    font-style: italic;
    font-size: 0.8rem;
    margin: 0;
    padding: 1rem 0;
    border:  none;
    resize: none;
    width: 100%;
    flex: 1;
    background: transparent;
    opacity:  0.1;
}

.task {
	display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 0.1rem;
    flex:  0 0 auto;
    background: white;
    position: relative;
    width: 100%;
}

.task.done {
	color: #aaa;
}

.task.empty {
    color: #ddd;
    border-bottom-color: #fafafa;
}
.task .reminder {
    position: absolute;
    right: 1vw;
    color: #d2691e;
    font-size: 12px;
}

.task .checkbox {
    flex: 0 0;
}
.task .checkbox i {
    font-size: 13px;
    margin: 0.1rem 0.4rem 0 0.4rem;
    color: #ccc;
}

.task .checkbox i.fa-circle {
    color: #ccc;
}

.task input {
	flex: 1;
	border: none;
    outline: none;
    font-size: 11px;
    padding: 0;
    -webkit-user-select: text; /* Safari */
    user-select: text; /* Standard syntax */
    width: 90%;
    font-family: 'Nunito', sans-serif;
}

.task input:focus, .task input:active {
    background: none!important;
}


.task.done input {
	text-decoration: line-through;
	color: #aaa;
}

.task .handle {
	flex: 0 0;
    background: red;
}

.task.hovered {
    padding-top: 25px;
}

.task-dragged {
    background: #eee;
}
.task-dragged input {
    background: #eee;
}

.task-dragging {
    display: none;
    background: white;
    box-shadow: 0 0 5px black;
    border-radius:  0.5rem;
    overflow:  hidden;
    opacity:  0.3;
    z-index:  1000;
}

i.fa.disabled {
    color:  #aaa;
}

.days.animate-week-left {
    animation-name: toggleweekleft;
    animation-duration: 0.15s;
}

@keyframes toggleweekleft {
    0%   {transform: translate(-30vw); opacity: 0.7}
    25%  {transform: translate(-10vw); opacity: 0.8}
    50%  {transform: translate(-5vw); opacity: 0.9}
    100% {transform: translate(0vw); opacity: 1}
}
.days.animate-week-right {
    animation-name: toggleweekright;
    animation-duration: 0.15s;
}

@keyframes toggleweekright {
    0%   {transform: translate(30vw); opacity: 0.7}
    25%  {transform: translate(10vw); opacity: 0.8}
    50%  {transform: translate(5vw); opacity: 0.9}
    100% {transform: translate(0vw); opacity: 1}
}

.menu {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.menu-inner {
    width: 80vw;
    height: auto;
    margin: 8vh 1vw 0 auto;
    background: #444;
    color: white;
    border-radius: 0.3rem;
    padding: 0.5rem 0;
    box-shadow: 0 0 10px black;
}

.menu-item {
    font-size: 15px;
    padding: 0.5rem 0.8rem;
}

.calendar {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.calendar-inner {
    width: 70vw;
    height: auto;
    margin: 8vh 15vw 0 15vw;
    background: #444;
    color: white;
    border-radius: 0.3rem;
    padding: 0.5rem 0;
    box-shadow: 0 0 10px black;
    font-size: 12px;
}

.calendar-month {
    display: block;
}

.calendar-month-name {
    display: block;
    text-align: center;
    padding:  0.2rem;
}

.calendar-week {
}

.calendar-week-current {
    background: #555;
}

.calendar-day {
    padding:  0.7rem;
    text-align: center;
    display: inline-block;
    width: 14.28%;
    box-sizing: border-box;
}
.calendar-day:nth-child(6), .calendar-day:nth-child(7) {
    color: #aaa;
}

.calendar-day.muted {
    opacity:  0.1;
}
.calendar-day.today {
    background:  #4169e1;
    border-radius: 0.3rem;
}

.calendar-day small {
    display: block;
    font-size:  10px;
    color: #cd5c5c;
    opacity: 0;
    line-height: 0;
}

.calendar-day.has-tasks small {
    opacity: 1;
}

.calendar-month.animate-month-left {
    animation-name: togglemonthleft;
    animation-duration: 0.15s;
}

@keyframes togglemonthleft {
    0%   {transform: translate(-10vw); opacity: 0.7}
    25%  {transform: translate(-5vw); opacity: 0.8}
    50%  {transform: translate(-1vw); opacity: 0.9}
    100% {transform: translate(0vw); opacity: 1}
}


.calendar-month.animate-month-right {
    animation-name: togglemonthright;
    animation-duration: 0.15s;
}

@keyframes togglemonthright {
    0%   {transform: translate(10vw); opacity: 0.7}
    25%  {transform: translate(5vw); opacity: 0.8}
    50%  {transform: translate(1vw); opacity: 0.9}
    100% {transform: translate(0vw); opacity: 1}
}

.calendar-month.animate-month-up {
    animation-name: togglemonthup;
    animation-duration: 0.15s;
}

@keyframes togglemonthup {
    0%   {transform: translate(0, -10vw); opacity: 0.7}
    25%  {transform: translate(0, -5vw); opacity: 0.8}
    50%  {transform: translate(0, -1vw); opacity: 0.9}
    100% {transform: translate(0, 0vw); opacity: 1}
}

.calendar-month.animate-month-down {
    animation-name: togglemonthdown;
    animation-duration: 0.15s;
}
@keyframes togglemonthdown {
    0%   {transform: translate(0, 10vw); opacity: 0.7}
    25%  {transform: translate(0, 5vw); opacity: 0.8}
    50%  {transform: translate(0, 1vw); opacity: 0.9}
    100% {transform: translate(0, 0vw); opacity: 1}
}

.holiday {
    font-size: 11px;
    text-align: center;
    color: #888;
    font-style: italic;
    border-bottom: 1px solid #eee;
}

.next-week {
    position: absolute;
    right: -100vw;
    height: 40vh;
    top: 30vh;
    padding: 1vw;
    font-size: 1.6rem;
    text-orientation: mixed;
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    z-index: 1;
    background: royalblue;
    text-align: center;
    color: white;
    border-radius: 0 1rem 1rem 0;
    box-sizing: border-box;
    transition: right 0.15s ease;
}

.next-week.shown {
    right: 0;
}