HOME

.chartjs-render-monitor {
    height: 350px !important;
}

.table-span {
    font-size: 11px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
    grid-gap: 20px;
}

table {
    border: 1px solid rgb(99, 94, 94);
}

td,
th {
    border: 1px solid rgb(99, 94, 94);
}
 

* { margin: 0px; padding: 0px; }
body {
background: #ecf1f5;
font:14px "Open Sans", sans-serif;
 
}
#view-code{
color:#89a2b5;
opacity:0.7;
font-size:14px;
text-transform:uppercase;
font-weight:700;
text-decoration:none;
position:absolute;top:480px;
left:50%;margin-left:-38px;
z-index:200;
}
#view-code:hover{color:#5aadef; opacity:1}

#content{
width:100%;
/* margin:150px auto 0; */
text-align:left;
}
.dates .badge {
margin-bottom: 0px !important;
}
.tile{
width:100%;
height:285px;
background:#fff;
border-radius:5px;
box-shadow:0px 2px 3px -1px rgba(151, 171, 187, 0.7);
float:left;
position:relative;
overflow:hidden;
transform-style: preserve-3d;

}
.circle{
background:#364b5b;
position:absolute;
right: 28px;
top: 33px;
width: 0px;
height: 0px;
border-radius:50%;
opacity:0.9;
z-index:2;
-webkit-transition: all 250ms ease-out;
-moz-transition: all 250ms ease-out;
-ms-transition: all 250ms ease-out;
 -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
}
#tile1.animate .circle{
right: -346px;
top: -371px;
width: 800px;
height: 800px;
-webkit-transition: all 250ms ease-out;
-moz-transition: all 250ms ease-out;
-ms-transition: all 250ms ease-out;
 -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
}
#tile1 div.settings-form{display:none;opacity:0;}


div.settings-form{z-index:3;}
.wrapper{transform-style: preserve-3d;position:absolute;top:0;left:0;height:100%;width:100%;}
.tile:hover{
box-shadow:0px 4px 10px -1px rgba(151, 171, 187, 0.7);
.transition(all 400ms ease);
}
#tile1{
margin-right:20px;
}
.header{
border-bottom:1px solid #ebeff2;
padding:19px 0;
text-align:center;
color:#59687f;
font-size:600;
font-size:19px;
position:relative;
}
#tile1 .settings-form .header{border-color:#65747f; color:#fff;}
.settings{
width: 22px;
height: 22px;
position: absolute;
top: 23px;
right: 19px;
fill:#d4d9dd;
}
.settings:hover{
cursor:pointer;
}
.dates{
border: 1px solid #ebeff2;
border-radius: 5px;
padding: 9px 0px;
margin: 5px 20px 0;
font-size: 16px;
color: #5aadef;
font-weight: 600;
overflow: auto;

}
.dates div{
float:left;
width:50%;
text-align:center;
position:relative;
}
.dates strong,
.stats strong{
display:block;
color:#adb8c2;
font-size:11px;
font-weight:700;
}
.dates span{
width:1px;
height:40px;
position:absolute;
right:0;
top:0;
background:#ebeff2;
}
.stats{
border-top:1px solid #ebeff2;
background:#f7f8fa;
overflow:auto;
padding:15px 0;
font-size:16px;
color:#59687f;
font-weight:600;
margin-top: 7px;
border-radius: 0 0 5px 5px;
}
.stats div{
border-right:1px solid #ebeff2;
width:50%;
float:left;
text-align:center
}
.stats div:nth-of-type(3){border:none;}


.close{
position:absolute;
top:23px;
right:18px;
width:30px;
height:30px;
cursor:pointer;
}
.cx, .cy{
background:#d2d5dc;
position:absolute;
width:0px;
top:11px;
right:13px;
height:2px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
 -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
#tile1 .cx, #tile1 .cy{background:#a0b3c2;}
.cx.s1, .cy.s1{
right:0;
width:22px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
 -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cy.s2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
 -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cy.s3{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
 -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cx.s1{
right:0;
width:22px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
 -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cx.s2{
-ms-transform: rotate(140deg);
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ease-out;
 -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cx.s3{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
 -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

#tile1 form div, #tile1 button{opacity:0;position:relative;top:-20px;}
form div{
border-bottom:1px solid #ebeff2;
padding:18px 10px 17px 22px;
}
#tile1 form div{border-color:#65747f;}
form div.short{
border-bottom:none;
border-right:1px solid #ebeff2;
float:left;
width:147px;
}
#tile1 form div.short{border-color:#65747f;}
form div.short:nth-of-type(3){border:none;}
form div.short input{width:135px;}
form div label{
color:#adb8c2;
font-size:11px;
font-weight:700;
display:block;
}
#tile1 form div label{color:#a0b3c2;}
form div input{
color:#59687f;
font-size:18px;
font-weight:400;
border:none;
outline:none;
margin-top:4px;
font-family:"Open Sans", sans-serif;
}
#tile1 form div input{color:#fff; background:none;}
button{
background-color:#59aef1;
font-family:"Open Sans", sans-serif;
color:#fff;
font-weight:600;
font-size:16px;
text-transform:uppercase;
letter-spacing:1px;
width:100%;
padding:22px 0 19px;
border:none;
border-radius: 0 0 5px 5px;
}
button:hover{
cursor:pointer;
background:#47a2ea;
}
#make-3D{
position: relative;
perspective: 400px;
width:360px;
height:290px;
float:left;
transform-style: preserve-3d;
}
#make-3D .tile{
position:absolute;
top:0;
left:0;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
 -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#back{
display:none;
transform: rotateY( 180deg );
}
div.tile.flip-10{
-webkit-transform: rotateY( -10deg );
 -moz-transform: rotateY( -10deg );
   -o-transform: rotateY( -10deg );
      transform: rotateY( -10deg );
       transition:  50ms ease-out;
}
div.tile.flip90{
-webkit-transform: rotateY( 90deg );
 -moz-transform: rotateY( 90deg );
   -o-transform: rotateY( 90deg );
      transform: rotateY( 90deg );
       transition:  100ms ease-in;
}
div.tile.flip190{
-webkit-transform: rotateY( 190deg );
 -moz-transform: rotateY( 190deg );
   -o-transform: rotateY( 190deg );
      transform: rotateY( 190deg );
       transition:  100ms ease-out;
}
div.tile.flip180{
-webkit-transform: rotateY( 180deg );
 -moz-transform: rotateY( 180deg );
   -o-transform: rotateY( 180deg );
      transform: rotateY( 180deg );
       transition:  150ms ease-out;
}
div.ends{color:#2ECC71;}






.calendar{
color: #fff;
margin: 10px auto;
background: rgba(57, 135, 238, 0.9);
padding: 60px 40px 80px 40px;
width: 95%;
max-width: 600px;
height: 325px;
border-radius: 5px;
box-shadow: 0px 2px 6px rgba(2,2,2,0.2);
position: relative;
}
.calendar__title{
text-align: center;
}
.calendar--day-view{
position: absolute;
border-radius: 3px;
top: -2.5%;
left: -2.5%;
width: 100%;
height: 100%;
background: rgba(255,255,255,1);
box-shadow: 3px 12px 5px rgba(2,2,2,0.16);
z-index: 2;
overflow: hidden;
transform: scale(0.9) translate(30px,30px);
opacity: 0;
visibility: hidden;
/*   border-radius: 5px; */
display: none;
align-items: flex-start;
flex-wrap: wrap;
}
.day-view-content{
color: #222;
width: 100%;
padding-top: 55px;
}
.day-highlight, .day-add-event{
padding: 8px 10px;
margin: 12px 15px;
border-radius: 4px;
background: #e7e8e8;
color: #222;
font-size: 14px;
font-weight: 600;
font-family: "Avenir", sans-serif;
}





.day-add-event{
background: #04b6e2;
color: #fff;
padding: 16px;
display: none;
transform: translateY(-15px);
opacity: 0;
}
.day-add-event[data-active="true"]{
display: block;
animation: popIn 250ms 1 forwards;
}
.add-event-label{
padding: 10px 0;
font-size: 18px;
font-family: 'Avenir', sans-serif;
color: #fff;
font-weight: 400;
font-size: 12px;
color: rgba(255,255,255,0.8);
}
.add-event-edit{
display: block;
margin: 4px 0;
max-width: 70%;
border-bottom: 2px solid #fff;
font-size: 18px;
font-weight: 800;
color: #fff;
}
.add-event-edit--long{
max-width: 90%;
}

input.add-event-edit{
border: none;
border-bottom: 2px solid #fff;
background: transparent;
outline: none;
font: inherit;
color: #fff;
font-size: 18px;
font-weight: 800;
}
.add-event-edit--error, input.add-event-edit--error{
border-color: #ff5151;
animation: shake 300ms 1 forwards;
}
@keyframes shake {
20%, 60%{
transform: translateX(4px);
}
40%, 80%{
transform: translateX(-4px);
}
}
input.add-event-edit::-webkit-input-placeholder {
color: #fff;
}

input.add-event-edit:-moz-placeholder { /* Firefox 18- */
color: #fff;
}

input.add-event-edit::-moz-placeholder {  /* Firefox 19+ */
color: #fff;
}

input.add-event-edit:-ms-input-placeholder {
color: #fff;
}
.event-btn{
padding: 3px 8px;
border: 3px solid #fff;
color: #fff;
cursor: pointer;
display: inline-block;
width: 65px;
margin: 5px 0;
text-align: center;
}

.event-btn--save{
border-color: #fff;
background: #74c500;
color: #fff;
border-color: transparent;
}
.event-btn--save:hover{
box-shadow: 0px 2px 4px rgba(2,2,2,0.2);
}
.event-btn--cancel{
background: #ff5151;
color: #fff;
border-color: transparent;
}
.event-btn--cancel:hover{
box-shadow: 0px 2px 4px rgba(2,2,2,0.2);
}
/* .add-event-btn:hover, .add.event-btn:focus{
background: #00258e;
box-shadow: 0px -1px 2px rgba(3,2,2,0.2);
} */
.day-highlight .day-events-link{
border-bottom: 2px solid #222;
padding: 0;
cursor: pointer;
}
#add-event{
color: #04b6e2;
border-color: #04b6e2;
}
.day-view-exit{
position: absolute;
top: 24px;
line-height: 1em;
left: 22px;
font-size: 22px;
color: #252525;
font-family: 'Avenir', sans-serif;
font-weight: 800;
cursor: pointer;
opacity: 0;
animation: popIn 200ms 1 forwards;
text-transform: uppercase;
}
.day-view-date{
position: absolute;
top: 19px;
right: 22px;
text-align: right;
font-size: 22px;
font-family: 'Avenir', sans-serif;
font-weight: 800;
color: #393939;
border-bottom: 2px solid #222;
cursor: pointer;
}
.day-inspiration-quote{
position: absolute;
/*   top: 90px; */
margin-top: -40px;
left: 10%;
width: 80%;
height: calc(100% - 110px);
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 32px;
font-weight: 800;
letter-spacing: -1px;
color: #ddd;
line-height: 1.1em;
font-family: 'Avenir', sans-serif;
z-index: -1;
}
.day-event-list-ul{
list-style: none;
margin: auto;
width: 95%;
padding: 0;
max-height: 300px;
overflow: auto;
}
.day-event-list-ul li {
padding: 10px;
margin: 10px 0;
/*   background: #04b6e2; */
/*   box-shadow: 0px 1px 1px  rgba(2,2,2,0.5); */
position: relative;
}
.event-dates small{
font-size: 0.65em;
color: #444;
}
.event-dates{
font-weight: 800;
font-family: 'Avenir', sans-serif;
color: #04b6e2;
font-size: 18px;
text-transform: lowercase;
/*   position: relative; */
}
.event-delete{
position: absolute;
right: 10px;
top: 0px;
font-size: 12px;
color: #f25656;
cursor: pointer;
}
.event-name{
font-size: 19px;
font-family: 'Avenir', sans-serif;
color: #222;
padding:10px;
background: #f7f7f7;
margin: 2px 0;
display: block;
text-transform: initial;
}
.calendar--day-view-active{
animation: popIn 200ms 1 forwards;
visibility: visible;
display: flex;
transition: visibility 0ms;

}
.calendar--view{
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
width: 100%;
}
.cview__month{
width: 100%;
text-align: center;
font-weight: 800;
font-size: 22px;
font-family: 'Avenir', sans-serif;
padding-bottom: 20px;
color: #222;
text-transform: uppercase;
display: flex;
flex-wrap: nowrap;
align-items: baseline;
justify-content: space-around;
}
.cview__month-last,.cview__month-next,.cview__month-current{
width: 33.33333%;
text-align: center;
font-size: 16px;
cursor: pointer;
color: #222;
}
.cview__month-last:hover,.cview__month-next:hover{
color: #fff;
}

.cview__month-current{
font-size: 22px;
cursor: default;
animation: popIn 200ms 1 forwards;
transform: translateY(20px);
opacity: 0;
position: relative;
}
.cview__month-reset{
animation: none;
}
.cview__month-activate{
animation: popIn 100ms 1 forwards;
}
.cview--spacer, .cview__header, .cview--date{
width: 14.28571428571429%;
max-width: 14.28571428571429%;
padding: 10px;
box-sizing: border-box;
position: relative;
text-align: center;
overflow: hidden;
text-overflow: clip;
font-size: 14px;
font-weight: 900;
}
.cview--date{
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.has-events::after{
border-radius:100%;
animation: popIn 200ms 1 forwards;
background: rgba(255,255,255,0.95);
transform: scale(0);
content: '';
display: block;
position: absolute;
width: 8px;
height: 8px;
top: 8px;
left: 12px;

}
.cview--date:hover::before{
background: rgba(255,255,255,0.2);
}
.cview--date.today{
color: #111;
}
.cview--date.today::before{
animation: popIn 200ms 1 forwards;
background: rgba(255,255,255,0.2);
transform: scale(0);
}
@keyframes popIn{

100%{
transform: scale(1);
opacity: 1;
}
}
.cview--date::before{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: '';
transform: scale(0.8);
z-index: 0;
}
.footer{
width: 100%;
bottom: 50px;
left: 0;
position: absolute;
font-size: 14px;
text-align: center;
}
.footer__link{
cursor: pointer;
padding: 2px 5px;
border-bottom: 1px solid #fff;
}