/* class.page.css */

div#template-components,
.loaded-data:not(.loading-inner-data) .template{
  display:none !important;
}
.loading-inner-data{
  	filter: blur(3px);
}
.loaded-inner-data,
.data-updating-text{
   -webkit-animation: updating_text_blur 1s; 
}
select.form-control {
  -webkit-appearance:menulist;
 -moz-appearance:menulist;
  appearance:menulist;
}
@-webkit-keyframes updating_text_blur {
    0% { -webkit-filter: blur(3px);}
    100% { -webkit-filter: blur(0px);}
}
div.load-data.wait-data,
div.loading-data,
div.loading{
	/*display:none;*/
	opacity:0.5;
	pointer-events:none;
}
div.load-data.wait-data{
}
div.load-data.wait-data.loaded-data{
  pointer-events:auto;  
}


div.saving{
  outline:3px solid rgba( 101, 216, 24, 0.1);
}
div.saved{
  outline:3px solid rgba( 101, 216, 24, 0.5);
}
.load-data:not(.loaded-data) .variable-data,
.load-data:not(.loaded-data) .var,
.loading-data .variable-data,
.loading .variable-data,
.loading-data .var,
.loading .var{
  filter: blur(7px);
}

.parent-hover-toggle{
	display:none;
}
.toggle-hidden{
  display:none;
}

/* EDITABLE LIST ITEM */

div.editable-list-item{
  position:relative;
}

/* CLICK EDITOR */

div.click-editor{
  position:relative;
}
div.click-editor div.ql-editor{
  line-height:inherit;
  padding:0;
}
div.click-editor,
div.click-editor div.ql-editor,
div.click-editor div.ql-editor p{
  background:transparent;
  border:none;
  font-family:inherit !important;
  font-size:inherit;
  line-height:inherit;  
  margin:0;
  padding:0;
}
div.click-editor a.save{
  bottom:0px;
  display:none;
  position:absolute !important;
  right:-55px;
}
div.click-editor.has-changes:hover a.save{
display:block;
}

/* EDITOR HTML */

div.ql-toolbar.ql-snow{
  background:rgba(255,255,255,0.7);
}

div.editor{
  background:#fff;
  font-size:1em;
}
div.editor h1{
  font-size:1.5em;
  margin:10px 0;
}
div.editor p{
  margin:15px 0;
}
div.editor img{
  display:block;
  margin:20px auto;
  max-width:800px;
}
div.editor iframe{
  border:15px solid #eee;
  height:350px;
  margin:0 auto;
  width:500px
}
div.editor.editor-sm{
  max-height:200px;

}
div.editor.editor-sm div.ql-editor{
}
div.ql-editor a.save{
  background-color:transparent;
  border-color:#555;
  color:#555;
  float:right;
  margin-right:55px;
  position:relative;
  z-index:0;
}
div.click-editor a.save{
  right:10px;
}
div.has-changes a.save:not(.submit-form){
  background-color:#555;
  color:#fff;
  display:block;
}
div.has-changes a.save:hover{
  background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
  color:#fff;
  border-color:#9be15d;
}
div.ql-editor a.saving{
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  pointer-events:none;
}
div.cycle-category a.saved{
  background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
}

/* TAB TOGGLE */

div.tab-toggle-container > div{
  display:none;
}

/* DATE PICKER */

div#ui-datepicker-div{
  z-index:10000 !important;
}

/* TODO */

a.add-todo{
  border-style:inset;
  display:none;
  opacity:1;
  position:absolute;
  right:0;
  left:0;
  margin:0 auto;
  bottom:20px;
  width:150px;
}
a.add-todo.collapsed{
  border-style:none;
opacity:0.5;
}
/*
div.view-todo{
  clear:both;
margin:0 55px;
  padding:20px 0 15px 0;
}
div.view-todo::before{
  border-top:1px solid #ccc;
  content:'';
  display:block;
  margin:0 -75px;
  padding:15px 0 0 0;
  width:calc(100% + 150px);
}
*/
div.view-todo div.todo{
  clear:both;
  margin:0;
padding:2px 0 5px 0;
  position:relative;
}
div.view-todo div.todo::after{
  border-bottom:1px solid #eee;
  clear:both;
  content:'';
  display:block;
  margin:0 0 0 60px;
}
body.dark div.view-todo div.todo::after{
  border-bottom:1px solid #555;
}
div.view-todo div.todo:last-child::after,
body.dark div.view-todo div.todo:last-child::after{
border:none;
}
div.view-todo div.todo > div.form-check{
display:inline-block;
  margin-right:15px;
}
div.view-todo div.todo div.text{
display:block;
  float:right;
  padding:0px 40px 10px 0px;
  width:400px;
  width:calc(100% - 70px);
}
div.view-todo div.todo.active div.text,
div.view-todo div.todo a.active + div.text{
  opacity:0.3;
text-decoration:line-through;
}

div.view-todo div.todo div.status{

}
div > a.btn-delete,
div.view-todo div.todo > a.btn-delete{
  display:none;
  float:right;
  margin:-5px 0px 0 0px;
  position:absolute;
  right:-10px;
  top:0px;
}
div:hover > a.btn-delete,
div.view-todo div.todo:hover > a.btn-delete{
  display:inline-block;
  float:right;
}
div.add-todo{
  clear:both;
  display:block;
  margin:0px 0 15px 0;
  padding:0px 0 0 0;
}
div.add-todo div.form-group{

  display:inline-block;
  margin:0px 0 0 10px;
  width:calc(100% - 220px);
}
div.add-todo a.save{
  float:right;
  display:inline-block;
  margin:0px 55px 0 0px;
}

a.btn-check{
  background:transparent;
  border-radius:20px;
  border-color:#aaa;
  border-width:1px;
  font-size:0.7em;
  height:25px;
  line-height:25px;
  padding:0;
  text-align:center;
  width:25px;
}
a.btn-check.active{
background:#0079FE !important;
  border-color:#0079FE !important;
}
a.btn-delete.btn{
  border-radius:20px;
color:#FF3B30;
}
a.btn-delete.btn:hover{
background:#FF3B30;
  color:#fff;
}

/* STYLED CHECKBOX */

div.form-check{
}
input.switch-input{
  display:none;
}
label.switch-label{
    background:transparent;
  border:1px solid #aaaa;
  border-radius:20px;
  border-color:#aaa;
  border-width:1px;
  color:#fff;
  font-size:0.7em;
  height:25px;
  line-height:25px;
  margin:0;
  padding:0;
  text-align:center;
  vertical-align:middle;
  width:25px;
}
label.switch-label::before{
  content:'';
  font-family:"Font Awesome 5 Pro";
  font-weight:900;
}
input:checked + label.switch-label{
  background:#0079FE;
  border-color:#0079FE;
}
input:checked + label.switch-label::before{
  content:'\f00c';
}
label.switch-label:hover{
 background:#0079FE;
  border-color:#0079FE;
  cursor:pointer;
 }
div.uploader div.photo-preview{
display:none;
}
div.uploader div.file-list{
  float:right;
}

/* DATATABLES */

table td span.array-value,
table .comma-list > span{
display:block;
  width:100%;
}
table td span.array-value::after,
table .comma-list > span::after{
  content:', ';
  display:inline-block;
  padding-right:4px;
}
table td span.array-value:last-child::after,
table .comma-list > span:last-child::after{
  content:'';
  padding:0;
}
table.datatable a.delete-row{
  float:right;  
}

/* CALENDAR */

div.calendar-day.template{
  display:none !important;
}
div.calendar-container div.month-title div.month-name,
div.calendar-container div.month-title a{
  color:#fff;
    font-family: 'Source Sans Pro', sans-serif;
  font-size:2.3em;
 letter-spacing:.2em;  
  margin:60px 0 0 0;
  text-align:center;
  text-transform:uppercase;
}
div.calendar-container div.month-title{
  position:relative;
}
div.calendar-container div.month-title a{
  font-weight:200;
  position:absolute;
  opacity:0.3;
  text-decoration:none;
}
div.calendar-container div.month-title a i{
  font-size:0.85em;
}
div.calendar-container div.month-title a:hover{
  opacity:1;
}
div.calendar-container div.month-title a.previous-month{
  left:0px;
  margin:0;
  top:0px;
}
div.calendar-container div.month-title a.next-month{
  right:0px;
  margin:0;
  top:0px;
}
div.calendar-container ul.week-header{
  padding:0;
}
div.calendar-container ul.week-header li{
  color:rgba(255,255,255,0.8);
  display:inline-block;
  font-size:0.9em;
  margin:30px 2px 10px 2px;
  text-align:center;
  width:calc(14.27% - 4px);
}
div.calendar-container div.calendar-day:not(.template){
background:rgba(255,255,255,0.6);
  border-radius:3px;
  display:inline-block !important;
  height:100px;
  margin:2px;
  position:relative;
  width:calc(14.27% - 4px);
}
div.calendar-container div.calendar-day.is-today{
background:rgba(255,255,255,0.9);
}
div.calendar-container div.calendar-day.is-after-today{
background:rgba(255,255,255,0.2);
  pointer-events:none;
}

div.calendar-container div.calendar-day a.day-number{
  background:rgba(0,0,0,0);
  color:#000;
  display:inline-block;
  height:100%;
  margin:0;
  opacity:0.9;
  padding:0 10px;
  position:relative;
  transition: all 0.3s ease;
  width:100%;
  z-index:40;
}
div.calendar-container div.calendar-day a.day-number:hover{
  background:rgba(0,0,0,0.5);
  color:#fff;
  text-decoration:none;
  text-shadow: 0px 0px 5px #000;
}
div.calendar-container div.calendar-day.day-of-month-1.day-of-week-2{
  margin-left:calc(14.27% + 2px);
}
div.calendar-container div.calendar-day.day-of-month-1.day-of-week-3{
  margin-left:calc(28.54% + 2px);
}
div.calendar-container div.calendar-day.day-of-month-1.day-of-week-4{
  margin-left:calc(42.81% + 2px);
}
div.calendar-container div.calendar-day.day-of-month-1.day-of-week-5{

  margin-left:calc(57.08% + 2px);
}
div.calendar-container div.calendar-day.day-of-month-1.day-of-week-6{
  margin-left:calc(71.35% + 2px);
}
div.calendar-container div.calendar-day.day-of-month-1.day-of-week-7{
  margin-left:calc(85.62% + 2px);
}
div.calendar-container div.calendar-day div.content .ql-video{
}
div.calendar-container div.calendar-day div.content{
  padding:2px 0 0 35px;

}
div.calendar-container div.calendar-day div.content span.category{
  display:block;
  text-align:right;
}
div.calendar-container div.calendar-day div.content span.category::before{
  background:rgba(255,255,255,0.5);
  background:transparent;
  bottom:0px;
  color:rgba(0,0,0,0.7);
  color:rgba(255,255,255,0.9);
  display:inline-block;
  font-family:"Font Awesome 5 Pro";
  font-size:.8em;
  font-weight:600; 
  right:0px;

  margin:0 5px 0 0;
  padding:0px 4px;
  position:relative;
  z-index:30;
}
div.calendar-container div.calendar-day div.content span.category-4::before{
content:'\f53f';
}
div.calendar-container div.calendar-day div.content span.category-6::before{
content:'\f0ad';
}
div.calendar-container div.calendar-day div.content span.category-5::before{
content:'\f02d';
}
div.calendar-container div.calendar-day div.content span.category-9::before{
content:'\f44b';
}
div.calendar-container div.calendar-day div.content span.category-7::before{
content:'\f51a';
}


div.calendar-container div.calendar-day div.content{
  border-radius:3px;
  height:100%;
  left:0px;
  overflow:hidden;
  position:absolute;
  top:0px;
  width:100%;
}
div.calendar-container div.calendar-day div.content img{
  height:200%;
  left:0px;
  object-fit:cover;
position:absolute;
  top:-50%;  
  width:100%;
  z-index:10;
}

div.calendar-container div.calendar-day div.content iframe{
display:none;
}
div.calendar-container div.calendar-day a{
position:relative;
  z-index:30;
}

@media (max-width:576px) {

  div.editor div.ql-editor{
  margin-left:0px;
    padding:5px 0;
  }
  
  div.add-todo a.save{
    display:block;
    float:none;
    margin:20px auto 0 auto;
    width:100px;
  }
  div.add-todo div.form-group{
    margin:0px;
    width:100%;
  }
  div.view-todo{
    margin:0;
    padding:20px 0 15px 0;
  }
  div.view-todo::before{
    border-top:1px solid #ccc;
    margin:0 -20px;
    padding:15px 0 0 0;
    width:calc(100% + 40px);
  }
  div.view-todo div.todo div.text{
    display:inline;
    padding:0px 0px 0px 0px;
  }
  div.view-todo div.todo > div.form-check{
    padding:0;
  }
  div.view-todo div.todo{
    padding:10px 0;
    margin:0;
  }
  div.view-todo div.todo::after{
    padding-top:15px;
    margin-left:40px;
  }
  div.view-todo div.todo > a.btn-delete{
    background:#fff;
    display:inline-block;
    float:none;
    margin:0;
    position:absolute;
    right:-35px;
    top:0;
  }
}


/* class.page.css */