/* **** TASK PANEL ****************************************************************************************************/
#task-canvas{
/*  padding-right:0;
  padding-left:0;*/
  /*background: #f4f6f9;*/
  background: var(--white);
  border-left:1px solid rgba(49,79,142,0.3);
  /*width:0;*/
  display:none;
  width:300px;
  margin-bottom: -3px;
}
#task-spacer-btm{
  height:81px;
}
@media only screen and (max-width: 42em){
  #task-spacer-btm{
    height:110px;
  }
}
@media only screen and (max-width: 64em){
  body.no-scroll{
    overflow: hidden;
  }
  #task-canvas.is-open {
    display: block;
    position: fixed;
    width: 95%;
    max-width:325px;
    right: 0;
    /*height: calc(100% - 58px - 23px);*/
    top:0px;
    height: 100%;
    z-index: 10;
  }
  #task-mobile-overlay{
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 9; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
  }
}

#frmAddTask{
  display:none;
}
#task-canvas-header{
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  /*background: rgba(49,79,142,0.12);*/ 
  background: rgb(92, 123, 203);
}
#task-canvas-header .btn-close{
  background: transparent;
  font-size:1.25rem;
  border:none;
  padding:0.25rem 0.5rem;
  /*color:var(--dark-gray);*/
  color:var(--white);
  border-radius: 100px;
}
#task-canvas-header .btn-close:hover{
  /*background: rgba(0,0,0,0.08);*/
  background: rgba(255,255,255,.2);
}
#task-canvas-header h1{
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
  font-size: 1.3125rem;
  line-height: normal;
  font-weight: 600;
  /*color: #555;*/
  color: var(--white);
/*  color: var(--prog-primary);*/
}
#task-add-section{
  margin-top:0.5rem;
  margin-left:-0.375rem;
  margin-right:-0.375rem;
  padding-bottom:0.375rem;
  margin-bottom:1rem;
  /*border-bottom:1px solid rgba(0,0,0,0.1);*/
  border-bottom:1px solid rgba(49,79,142,0.25);
}
#btnAddTask{
  width:100%;
  padding:0.5rem;
  border-radius:6px;
  text-align: left;
}
#btnAddTask:hover
,#btnAddTask:focus{
  background: rgba(0,0,0,0.04);
}
#btnAddTask[disabled]{
  opacity: 1;
  color:var(--black);
}
#btnAddTask[disabled]:hover
,#btnAddTask[disabled]:focus{
  text-decoration: none;
  cursor: default;
  background: transparent;
}
.tasker .button.btn-options.hover
,.tasker .button.btn-options:hover {
  background: rgba(0,0,0,0.04);
}

.tasker .button.btn-options {
  background: transparent;
  border-radius: 6px;
  padding: 0.5rem 0.375rem;
  color: var(--dark-gray);
}
.tasker #task-ref-info-wrapper{
  font-size:0.75rem;
  margin-top:0.25rem;
  margin-bottom:0.75rem;
}
#task-canvas .form-add-task {
  /*background: rgba(0,0,0,0.04);*/
  background: rgba(49,79,142,0.08);
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  border-radius: 3px;
  margin-top:0.5rem;
}
#task-canvas .form-add-task input[type=text]
,#task-canvas .form-add-task textarea{
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 0.75rem;
  margin:0 0 3px 0;
  padding: 0.25rem 0.5rem;
  min-height: 23px;
}
#task-canvas .form-add-task textarea#Task{
  min-height: 29px;
  font-size:0.875rem;
  margin-bottom:0;
}
#task-canvas .form-add-task input[type=text]::placeholder
,#task-canvas .form-add-task input.k-input-inner::placeholder
,#task-canvas .form-add-task textarea::placeholder{
  color:var(--gray-text);
}
#frmAddTask .task-input-lbl i{
  color:var(--gray-text);
}
#task-canvas .form-add-task textarea{
  resize: none;
  overflow-y: hidden;
  height:1em;
  
  line-height:1.25;
}
#task-canvas .form-add-task input[type=text] {
  height:auto;
  padding-top:0;
  padding-bottom:0;
}
#task-canvas .task-input-lbl{
  padding-left:0.5rem;
  /*padding-top:5px;*/
}
#frmAddTask .button {
  padding: 0.375rem 0.5rem;
}
#task-canvas .k-datepicker #DueDt ~ button.k-button
,#task-canvas .k-timepicker #DueTm ~ button.k-button{
  visibility: hidden !important;
}
#task-canvas #dueDtWrapper .k-datepicker
,#task-canvas #dueTmWrapper .k-timepicker
,#task-canvas #CatListWrapper .k-multiselect{
  background: transparent;
  border:none;
  border-radius: 0;
  padding:0;
  box-shadow: none;
}
#dueDtWrapper .k-input-inner{
  color:var(--black);
}
#DueDt_dateview td.k-calendar-td.k-other-month a {
  visibility: hidden;
}
/*#CatListWrapper{
  padding-left:0.375rem;
}*/
#CatListWrapper .k-chip {
  background: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  border: 1px solid rgba(0,0,0,0.15);
  color:var(--black);
}
#CatListWrapper .k-input-inner.k-readonly{
  color: var(--gray-text);
  font-size:0.75rem;
}
/*#CatListWrapper .k-list .k-list-content ul li.k-list-item.k-focus{
  border-color:red;
  box-shadow: none;
  color:red;
}*/
[aria-labelledby="TaskCatList_label"] .k-focus.k-list-optionlabel, [aria-labelledby="TaskCatList_label"] .k-list-item.k-focus, [aria-labelledby="TaskCatList_label"] .k-list-item:focus, [aria-labelledby="TaskCatList_label"] .k-list-optionlabel:focus 
,[aria-labelledby="TaskCatList_label"] .k-list-item.k-selected{
  box-shadow: none; 
  background: rgb(255,248,220);
  color:var(--black);
}
[aria-labelledby="TaskCatList_label"] .k-list-item.k-selected{
  font-weight: 500;
}
[aria-labelledby="TaskCatList_label"] .k-list-item.k-hover{
  background: rgba(255,248,220,0.5);
}
#task-list-section{
  height:100%;
}
.task-wrapper{
  font-size:0.75rem;
  /*margin-bottom:1rem;*/
}
.task-wrapper .spacer{
  height:0.75rem;
}
.task-wrapper p{
  font-size:0.75rem;
  margin-bottom:0;
  margin-top:2px;
}
.task-date{
  text-transform: uppercase;
  font-size:0.75rem;
  letter-spacing: 0.4px;
  margin-bottom:0;
  padding-left: 0.5rem;
  font-weight: 500;
  /*border-bottom: 1px solid rgba(0,0,0,0.15);*/
}
.task-date-group {
    border-bottom: 1px solid rgba(0,0,0,0.15);
    margin-bottom: 0.75rem;
}
.task-date-group:last-of-type{
  border-bottom: none;
}
.task-wrapper .task-cb-wrapper{
  padding-right:0;
  /*padding-top:2px;*/
  width:2rem;
}
.task-wrapper .task-hover-section{
  padding-top:6px;
  padding-bottom:6px;
}
#task-canvas .task-wrapper .task-hover-section.is-hover
,#task-canvas .task-wrapper .task-hover-section:hover
,#task-canvas .task-wrapper .task-hover-section:focus-within{
  background: rgba(49,79,142,0.06);
}
#tasker-panel .task-wrapper.is-hover
,#tasker-panel .task-wrapper:hover
,#tasker-panel .task-wrapper:focus-within{
  background: rgba(49,79,142,0.06);
}
.task-wrapper.task-added{
  /*background-color: rgba(49,79,142,0.15);*/
  background-color: cornsilk;
}
.task-wrapper.task-added.fade-it{
  background-color: transparent;
  transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
}

.task-wrapper .task-hover-section .task-ctrl-btns{
  visibility: hidden;
  padding-left:0;
  padding-right:0.375rem;
  font-size:0.9125rem;
}
.task-wrapper .task-hover-section:hover .task-ctrl-btns{
  visibility: visible;
}
.task-ctrl-btns .button {
  background: transparent;
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--dark-gray);
}
.task-ctrl-btns .button:hover{
  background: rgba(0,0,0,0.1);
}
.task-wrapper.is-editing {
    opacity: 0.5;
}
.task-wrapper.is-editing .task-ctrl-btns
,.task-wrapper.is-editing .task-cb-wrapper{
    visibility: hidden !important;
}
.task-wrapper.is-editing{
  background: rgba(49,79,142,0.06);
}
/*.task-wrapper.task-added .task-hover-section.is-hover
,.task-wrapper.task-added .task-hover-section:hover
,.task-wrapper.task-added .task-hover-section:focus-within*/
.task-wrapper.is-editing .task-hover-section.is-hover
,.task-wrapper.is-editing .task-hover-section:hover
,.task-wrapper.is-editing .task-hover-section:focus-within{
  background: transparent;
}
.task-wrapper .task-title{
  font-size: 0.875rem;
  line-height:1.35;
  min-height:18px;
  margin-top:0;
}
#tasker-panel .task-title{
  font-size:1rem
}
#tasker-panel .task-det{
  font-size:0.875rem
}
#add-task-link-header-section .task-title-subhead{
  font-size: 0.875rem;
  color: var(--gray-text);
  margin-left: 0.5rem;
  margin-bottom: 0;
}
.task-wrapper .task-det{
  line-height: 1.25;
  margin-top:3px;
}
.task-ctrl-pane {
  padding: 0;
  width: 175px;
}
#pane-task-list-opts{
  width:225px;
}
.task-ctrl-pane ul li a {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--black);
}
.task-ctrl-pane ul li a:hover{
  background-color: rgba(0,0,0,0.06);
}
.task-ctrl-pane ul li a:focus{
  text-decoration: none;
}
.task-ctrl-pane ul li a i {
  padding-right: 0.75rem;
}
#Task{
  max-height: 150px;
  overflow-y: auto;
}
#TaskDetails{
  max-height: 225px;
  overflow-y: auto;
}
.txt-grad1{
  background: #FEAC5E; 
  background-image: -webkit-linear-gradient(45deg, #4BC0C8 0%, #C779D0 50%, #FEAC5E 100%); 
  background-image: linear-gradient(30deg, #4BC0C8 0%, #C779D0 50%, #FEAC5E 100%); 
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  text-fill-color:transparent;

}
#task-notify-container{
  position: fixed;
  bottom: 24px;
  right: 0px;
  z-index: 900;
}
#task-notify-container .k-notification{
  border-radius:0;
  background: #444;
  color:var(--white);
  padding-top:8px;
  padding-bottom:8px;
}
#task-notify-container span.k-icon.k-i-task{
  display:none;
}
@media only screen and (max-width: 64em){
  #task-notify-container{
    width: calc(95% - 1px);
    max-width:350px;
  }
  #task-notify-container .k-widget.k-notification.k-notification-task{
    width:100% !important;
  }
}
.task-cat-list .badge{
  margin-bottom:3px;
}
.task-cat-list .badge.task-time{
  border-radius:1000px;
  background-color: #e5e5e5;
  color: var(--black);
  padding: 1px 6px;
  margin-right:0.5em;
}

/* **** Checkbox square to check **************************************************************************************/
/* Square checkbox to checkmark animation (this CSS): https://codepen.io/YilmazTut/pen/PLRRJW  */
/* CSS animated round checkmark: https://jsfiddle.net/hcxs4mao/ */

/* === Hide default checkbox =========================================================*/
.tasker .task-wrapper [type="checkbox"] {
  position: absolute;
  display: none;
}
/* === Create the new checkbox square ================================================*/
.tasker .task-wrapper [type="checkbox"]:not(:checked) + label,
.tasker .task-wrapper [type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}
.tasker input[type=checkbox] + label{
  display: inline-flex;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
}
.tasker .task-wrapper [type="checkbox"]:not(:checked) + label:before,
.tasker .task-wrapper [type="checkbox"]:checked + label:before {
  content: "";
  position: absolute;
  left: 0px;
  /*top: 0;*/
  top: -7px;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #888;
  background: transparent;
  border-radius:3px;
}
/* === Make our checkmark visable when the checkbox is checked =======================*/
.tasker .task-wrapper [type="checkbox"]:not(:checked) + label:after,
.tasker .task-wrapper [type="checkbox"]:checked + label:after {
  content: "";
  position: absolute;
  left: 0px;
  /*top: 0;*/
  top: -7px;
  width: 1.25em;
  height: 1.25em;
}
/* === Transition to turn square into a checkmark ====================================*/
.tasker .task-wrapper [type="checkbox"]:not(:checked) + label:before {
  border: 1;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.tasker .task-wrapper [type="checkbox"]:checked + label:before {
  width: 0.7em;
  height: 1.25em;
  left: 5px;
  /*top: 0px;*/
  top: -7px;
  transform: rotate(40deg);
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid rgb(92, 123, 203);
  border-bottom: 2px solid rgb(92, 123, 203);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
/* **** END: Checkbox square to check *********************************************************************************/
#tasker-panel{
  min-height: 150px;
  max-height: 350px;
}