@charset "utf-8";

* {
  margin: 0;
  padding:0;
  list-style-type:none; 
  outline: none;}
  
*,*::before, *::after {box-sizing: border-box;}

html { background: #93a8ba; }

body { background: rgb(255,171,0);
  background: 
    linear-gradient(350deg, 
    rgba(255, 84, 0, 0.6) 0%, 
    rgba(255, 171, 0, 0.37) 22%, 
    rgba(0, 159, 255, 0.09) 74%); 
  font: 13px Arial, Helvetica, sans-serif; }
a { text-decoration:none; color:#333;}
input {  font-size:13px; font-family: Arial, Helvetica, sans-serif;}

.hide {display:none;}

/*--------------------------
Structure
--------------------------*/
header.top {
  background: #222; 
  height:38px;
  color:#eee; }
header.top nav {
  margin:5px 8px;
  float:right;}
header.top nav a { 
  border-radius: 4px;
  font-size: 14px;
  float:left;
  margin-left:3px;}
header.top nav a.account{
  font-family: 'Oswald', sans-serif;
  padding:2px 10px 4px ; 
  color:#ccc;}
header.top nav a.account.active { height:35px; padding-top:4px; background-color:#4a4a4a;}
header.top nav a.settings {
  background:url(img/settings.svg) no-repeat 3px 5px;
  width:38px;
  height:28px;}
header.top nav a.settings.active { height:35px; background-color:#4a4a4a;}
header.top nav a:hover {background-color:#4a4a4a;}

.create_account {
  font-family: 'Oswald', sans-serif;
  font-size: 15px !important;
  padding:2px 25px 3px;
  margin-left:6px !important; 
  background:#9cbe00;
  text-shadow:-1px -1px 1px #829e00;
  box-shadow: inset 1px 1px 1px 0 #cae122; 
  color:#fff;}
.create_account:hover{ 
  background:#95b500 !important;
  padding:2px 29px 3px; }


.logo {
  float: left;  
  padding: 1.5px 9px 8px 42px;
  background: url(img/logo.svg) no-repeat 12px 2px;
  background-size: auto 21px;
  margin: 5px 1px;
  width: 140px;
  height: 55px; }



  .notice.loading {color: orange !important;}


header.top section { 
  border-radius: 6px;
  position:absolute;
  background:#4a4a4a;
  z-index:1500;
  font-family: 'Oswald', sans-serif;
  font-size:14px;
  font-weight: normal;}
header.top section li{ overflow:auto;}

.app_picker { left:5px; width:185px; padding:5px 0; top:28px;}
.app_picker ul li { padding:0 5px;}
.app_picker ul li a{ padding:5px 10px; display:block; color:#bbb; }
.app_picker ul li a span { color:#999; padding-left:5px; font-weight:300;}
.app_picker ul li a:hover { background:#666; color:#eee;}

section.account  { right:5px; width:175px; top:34px; padding:10px;}
.account ul li{ background:#595959; }
.account ul li.signout{ margin-top:5px;}
.account ul li.print{ width:38%; margin-bottom:5px; float:left; }
.account ul li.print a{ padding:28px 0 0; text-align:center; height:55px; background:url(img/cal.png) 20px -34px no-repeat; }
.account ul li.import_export{ width:62%; margin-bottom:5px;}
.account ul li.import_export a{ padding:28px 0 0; text-align:center;  height:55px; background:url(img/cal.png) 33px -81px no-repeat; }
.account ul li a{  padding:5px 10px; display:block; color:#bbb;}
.account ul li a:hover { background-color:#393939; color:#eee;}

section.settings { right:5px; width:335px; top:34px;}
.settings ul { padding:10px;}
.settings ul li{ background:#555; padding:12px; margin-bottom:2px; }
.settings ul li a{ display:block; color:#bbb;}
.settings ul li a:hover { background:#666; color:#eee;}
.settings select {
  border:0 solid #666;
  background:#3c3c3c; 
  border-radius: 5px;
  font-family: arial, sans-serif;
  padding: 7px 6px;
  font-size: 12px;}

.option div { float: left; margin-right:15px; padding-top:1px;}

.option h3 { font-size:14px; margin:0; padding:0; font-weight:normal;}
.option h3.single { float:left; padding:5px 10px 0 0;}

.option a,
.option a:visited{
  background:#444; 
  border-radius: 5px;
  color:#aaa;
  line-height:26px;
  float:left;
  font:13px Arial, Helvetica, sans-serif;
  padding:5px 10px 7px;}
.option a.selected{
  box-shadow: inset 1px 1px 3px 0 #333; 
  cursor:default;
  padding:6px 10px;}
.option a.selected:hover { background:#444; color:#aaa;}
.option a.deselected{
  background: #666;
  color:#eee;
  box-shadow: 1px 1px 2px 0 #444;  }
.option a.deselected:hover { background:#777;}
.option a.left{
  -border-radius-topright: 0 !important;
  border-top-right-radius:0 !important ;
  -border-radius-bottomright:0 !important;
  border-bottom-right-radius:0 !important; }
.option a.right{
  -border-radius-topleft:0 !important;
  border-top-left-radius:0 !important;
  -border-radius-bottomleft:0 !important;
  border-bottom-left-radius:0 !important; }

 


.container {
  box-shadow: 0 4px 4px 1px rgba(89, 108, 128, 0.5);
  box-shadow: 0 5px 4px 1px rgba(0, 0, 0, 0.15);}

#lifeplan {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  top: 38px;
  background:url(img/bg_la.jpg)#efefef;
  right: 355px;
  left: 0;}
  
#actionplan {
    bottom: 0;
    overflow: hidden;
    position: absolute;
    top: 38px;
    width: 300px;  }
#calendar {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  top: 38px;
  background: url(img/bg_la.jpg); 
  left: 355px;
  right: 0;}

.calendar_side #actionplan {left: 44px;}
.lifeplan_side #actionplan {right: 44px;}

.sidelink {
    bottom: 0;
    overflow: auto;
    position: absolute;
    top: 38px;
    width:34px !important;}
.sidelink a { display:block; width:100%; height:100%;}
.sidelink.right {background:url(img/arrows.png) no-repeat -24px center ; right: 0;}
.sidelink.left {background:url(img/arrows.png) no-repeat 13px center ; left: 0;}

.sidelink:hover {
  box-shadow: 0 4px 4px 1px #616a73;
  cursor:pointer;}
.sidelink.right:hover { background:url(img/arrows.png) no-repeat -20px center rgba(239, 239, 239,0.2);}
.sidelink.left:hover { background:url(img/arrows.png) no-repeat 9px center rgba(239, 239, 239,0.2);}




/*---- Basic ----*/

#notice a {
  color:#27c4ff;
  text-decoration:underline;
  padding-left: 10px;
}
#notice {
  margin:5px auto;
  padding:6px;
  position:absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 400px;
  font-weight:bold;
  text-align:center;}
#notice.undo {
  background: #f9edbe;
  color:#fff;}
#notice.loading { color:#F00; }


/*---- Calendar Header ----*/
.container header.main { 
  height:44px; 
  overflow:hidden; 
  padding:6px 7px; 
  background: #efefef; 
  border-bottom: 1px solid #fff;}
.container header.main a { border-radius: 4px; }
.container header.main nav a:hover,
.add_event:hover { background-color:#cfcfcf; color:#444; }

.container header.main nav.controls { float:right; }


.calendar_picker_expaned .calendar_date,
.calendar_picker_expaned .calendar_date:hover { color: #fff !important; }

.container header.main nav.controls a { float:left; }

.calendar_date {
  font-family: 'Oswald', sans-serif;
  font-size:14px;
  height:32px;
  padding:5px 28px 10px 13px;
  margin-right:5px;
  background:url(img/arrow_expand.svg) no-repeat right -75px;}
.calendar_date .monthday { color:#000; }
.calendar_date .year { padding-left: 1px; }

.calendar_picker_expaned .calendar_date i{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;}

.yearview .calendar_date .year { color:#000;}
.calendar_picker_expaned.yearview .calendar_date .year { color:#fff;}

.calendar_scroll { height:32px; width:32px; background:url(img/arrows_scroll.png) no-repeat; position:relative;}
.calendar_scroll:active { top:1px; left:1px;}
.calendar_scroll.left { background-position: 9px 4px;}
.calendar_scroll.right { background-position: -28px 4px;}

.add_event {
  float:left;
  font-size:33px;
  font-weight:bold;
  line-height:23px;
  width:32px;
  height:32px;
  padding:5px 6px;
  margin-right:7px; }
.add_event.active {
  background:#333;
  color:#999;
  height:50px;
  width:45px;
  padding:10px 13px;}

.add_event_field {  
  border-radius: 6px; 
  border-top-left-radius: 0;
  background:#333;
  color:#999;
  width:400px;
  padding:11px;
  position:absolute;
  z-index:9;
  top:43px;}
.add_event_field h5 { 
  color:#ccc; 
  padding: 0 0 6px 2px; 
  font-size:13px; 
  text-transform:uppercase; 
  font-weight:bold;}
.add_event_field p { 
  padding: 1px 0 5px ;  
  font-size:13px; }
.add_event_field input {
  color: #333333; 
  border-radius: 5px;
  padding:8px;
  margin-bottom:5px;
  width:100%;
  box-shadow: 1px 1px 2px 0 #222 inset;
  background-color: #444;
  border: 0;   }


.container header.main .single_tab {
    height:32px;
    background:#ddd;
    color: #777;
    font-weight: bold;
    font-size: 12px;
    padding: 9px 13px 5px;
    position:relative;
    padding:9.5px 13px;
    margin-right:5px;}
.container header.main .single_tab:active { left:1px; top:1px;}

.container nav.tabs { float:left;}
.container nav.tabs a {
  float:left;
  height:32px; 
  background:#ddd; 
  color:#777; 
  font-size:12px; 
  font-weight:bold;}
.container nav.tabs a.left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding:8px 13px;}
.container nav.tabs a.middle {
  border-radius: 0;
  padding:8px 10px;}
.container nav.tabs a.right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding:8px 13px;}
.container nav.tabs a.selected { 
  background-color:#c0c0c0;
  padding-top:9px;
  color:#333;}
.container nav.tabs a.selected:hover { background-color:#c0c0c0;}


/*--------------------------
Calendar
--------------------------*/

.schedule_container {
  position:absolute;
  top:56px;
  bottom:0;
  left:0;
  right:0;}
.dayview .schedule_container { width: 60%;}

.dayview .schedule{left:12px; right:5px;}
.weekview .schedule,
.monthview .schedule{ left:12px; right:10px;}

.note_wrapper.full_length { top: 0;}

.note {
  position:relative;
  line-height: 19px;
  color:#333;
  box-shadow: 
    1px 1px 3px 0 #aaa, 
    inset -5px -5px 90px 0 #eee;}

#calendar .note {
  padding: 20px;
  position: relative;
  overflow:auto;
  background: url(img/cream_dust.png);
  cursor: text;
  line-height: 17px;}

.note ul{ margin: 10px 0 10px 30px; }
.note ol{ margin: 10px 0 10px 32px; }

.archive {
  position: relative;  
  overflow:auto;
  bottom: 40px;
  top: 3px;
  border:3px solid #ccc;
  padding:8px 15px;
  color:#888;
  font-size:12px;
  border-radius: 5px;}

.archive h4 { text-transform:uppercase; color:#111; padding:2px 0; float:left; }
.archive section { overflow:auto; padding:5px 0;}

.archive p { float:left; background: url(img/check.svg) no-repeat -5px -139px; margin-right:3px; }

.archive section.priority p { 
  background-position: -1px -282px;  
  padding: 2px 7px 2px 17px; 
  margin-left: 4px;
  background: url(img/focus.svg) no-repeat 0 2px;
  background-size: 13px; }
.archive section.completed p { 
  background-position:-2px -25px; 
  padding:2px 7px 2px 15px; 
  margin-left: 5px; }

.schedule {
    position: absolute;
    bottom: 40px;
    top: 0;
    border-right: 2px solid #e6e6e6;
    border-bottom: 1px solid #eee;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none;   /* Chrome/Safari/Opera */
   -khtml-user-select: none;    /* Konqueror */
   -moz-user-select: none;      /* Firefox */
   -ms-user-select: none;       /* Internet Explorer/Edge */
   user-select: none;           /* Non-prefixed version, currently
                     not supported by any browser */ }


.text_editor{ 
  padding: 30px 3px 2px 7px; }
.text_editor a{
    float:left;
    width: 24px;
    height:24px;
    margin-right:1px;
    background:url(img/text_editor.png) no-repeat;
    border:1px solid #000;
    position:relative; }
.text_editor a:hover {
  background-color:#ccc;
  border-radius: 3px;}
.text_editor a:active { left:1px; top:1px;}

.text_editor a.bold{ background-position: 9px 5px;}
.text_editor a.italic{ background-position: -14px 5px;}
.text_editor a.underline{ background-position: -35px 5px;}
.text_editor a.cross{ background-position: -64px 5px;}
.text_editor a.number_list{ background-position: -93px 5px;}
.text_editor a.bullet_list{ background-position: -120px 5px;}

.text_editor a.timestamp{ background-position: -148px 4px; float:right;}

.timestamp::before {  
  top:  50%;
  left: 0;
  transform: translate(calc(-100% - 5px), -50%) rotate(45deg);
  background-color: #333;
  content: ' ';
  display: none;
  position: absolute;
  width: 15px;
  height: 15px;
  z-index: 999;
}
  .timestamp::after {
  content: 'Insert Timestamp';
  font-size: 11px;
  top: 0;
  left: 0;
  transform: translateX(calc(-100% - 10px));
  background: #333;
  border-radius: 6px;
  color: #999;
  display: none;
  padding: 8px 12px;
  position: absolute;
  text-align: center;
  z-index: 999;
}

.timestamp:hover::before,
.timestamp:hover::after {
  display: block;
}

/*---- Calendar Tables ----*/

.calendar_picker_expaned .calendar_date,
.calendar_picker_expaned .calendar_date:hover{
  background:url(img/arrow_expand.svg) no-repeat right -24px #4c4c4c;
  color:#fff;
  height:47px;
  padding-top:8px; }
.calendar.calendar_picker_expaned header.main .calendar_date:hover { background-color:#4c4c4c !important;}

.calendar_picker_expaned .calendar_date .monthday {color:#fff ;}
.calendar_picker_expaned .calendar_date .year { color:#ccc;}

.dayview.calendar_picker_expaned .schedule_container,
.dayview.calendar_picker_expaned .note_container { top:261px;}

.weekview.calendar_picker_expaned .schedule_container { top:240px;}

.monthview.calendar_picker_expaned .schedule_container { top:140px;}

.yearview.calendar_picker_expaned .schedule_container{ top:44px;}
.yearview.calendar_picker_expaned .schedule_year { top:57px;}

.calendar_picker {
  background:#4c4c4c;
  overflow:hidden;
  position:relative;
  top: -1px;}

.picker_scroll { position:absolute; width:42px; height:100%; cursor:pointer; }
.picker_scroll.back{ left:0; background:url(img/arrows_scroll1.png) no-repeat 14px center rgba(0,0,0,0.7);}
.picker_scroll.forward { right:0; background:url(img/arrows_scroll1.png) no-repeat -22px center rgba(0,0,0,0.7)}

.picker_scroll.back:hover { border-color:#333;}
.picker_scroll.forward:hover { border-color:#333;}

.dayview .calendar_picker { height:208px;}
.weekview .calendar_picker { height:185px;}
.monthview .calendar_picker { height:86px;}
.yearview .calendar_picker { height:52px;}


.calendar_picker table {
  border-radius: 5px;
  background:#393939;
  border:2px solid #393939;
  color:#ddd;
  font-size:11px;
  font-family: 'Oswald', sans-serif;
  padding:8px;
  font-size:11px;
  float:left;
  margin:10px 0 10px 10px;}
.calendar_picker table.current { border-color: #27C4FF ; background:#252525;}
.calendar_picker table.past { color:#666; border-color: #252525; background:#252525;}
.calendar_picker table td { text-align:center; padding:2px 0; width:22px;}
.calendar_picker .month { text-align:center; text-transform:uppercase; color:#aaa;}
.calendar_picker .month td {  padding:4px;}
.calendar_picker .month td:hover {
  box-shadow: 0 0 3px 0 #191919;
  background:#444;
  cursor:pointer;
  color:#fff;}

.calendar_picker .weekdays td {
    font-size:10px;
    text-align:center;
    color:#777;
    padding-bottom:5px;
    font-weight:normal; }

.dayview .calendar_picker table .day {
  cursor:pointer;
  border-radius: 3px;}
.dayview .calendar_picker table .day:hover {
  background:#777;
  color:#fff;}
.weekview .calendar_picker table tr.current { background:#279fcd;}
.weekview .calendar_picker table tr:hover {
  cursor:pointer;
  background:#444 ;
  box-shadow: 0 0 3px 0 #191919;}
.weekview .calendar_picker table tr:hover td {color:#fff !important;  }
tr.current,
tr.current:hover,
td.day.current:hover,
td.day.current { background-color:#279fcd !important; color:#fff !important ;}


td.day.selected,
.datepicker-week tr.selected,
.picker-month.selected { background: #505050; color:#bbb;}

.datepicker-day table tr.month a, .datepicker-week table tr.month a{
  padding: 4px 0 1px;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
}

.picker_year {
  border-radius: 5px;
  background:#393939;
  border:2px solid #393939;
  font-size:12px;
  font-weight:bold;
  padding:8px;
  font-size:11px;
  float:left;
  margin:10px 5px 0;
  color:#eee;
  width:300px;}
.picker_year p {
  left:20px;
  font-size:24px;
  font-family: 'Oswald', sans-serif;
  line-height: 25px;
  font-weight:normal;
  float:left;
  padding: 10px 10px 0;
  width:70px;
  color:#666;
  cursor:pointer; }
.picker_year ul li {
  position:relative;
  border-radius: 3px;
  float:left;
  width:34px;
  text-align:center;
  padding:5px 0;
  cursor:pointer;
  color:#fff;}
.picker_year ul li:hover { background:#666;}
.picker_year ul li:active { left:1px; top:1px;}
.picker_year.past { background:#252525; border-color:#252525; color: #888;}


.year-picker .picker_year.current { border-color: #279fcd !important; background:#279fcd !important; color: #fff !important;}
.year-picker .picker_year.selected { background: #777 ; border-color: #777 ; color:#fff ;}


.month-picker .picker_year.current { border-color: #27C4FF; background:#252525 !important;}
.month-picker .picker_year.current p {color:#27C4FF;}

.picker-month.current {background:#279fcd !important; color: #fff !important;}

.yearview .picker_year {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding:7px 18px;
  font-size:14px;
  margin:7px 5px 0 0;
  width: auto;}
.yearview .picker_year.past { font-weight:normal; color:#999}
.yearview .picker_year.current {color:#27C4FF; border-color: #252525 ;}

/*---- Calendar Tables ----*/
 

.schedule table {
  right:0;
  width:100%;
  border:0;
  position: absolute;}
.schedule table td { width:14%; position:relative; background: #f7f7f7;}

.schedule_body table td { border-left:1px solid #d8d8d8; border-right:1px solid #d8d8d8; }

.schedule_header {
  position:relative;
  background:#f7f7f7;
  outline: 1px solid #ccc;
  overflow-y:scroll;
  scrollbar-color:#f7f7f7 transparent;
  height:48px;}

.table_container {
  position:relative;
  margin-left:42px;}
 
.schedule_header {  background: #f7f7f7;}
.schedule_header table{
  background: #ddd;
  position: relative;
  top: -1px;}
.schedule_header td {
  width:14%; 
  height:40px; }
.schedule_header td .weekday { 
  font-size:11px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  text-align:center;
  height:27px;
  padding-top:5px; 
  overflow: hidden; } 
.schedule_header td .weekday a { color: #888; }
 .schedule_header td .weekday a:hover { text-decoration:underline; }
.schedule_header td .weekday span {  
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  font-size: 10px;
  color: #333;
  font-weight: normal;
  line-height: 12px;}


.current .weekday a { font-weight: bold; color: #00aced !important;   } 
.current span { font-weight: normal; color: #00aced !important; opacity: 0.8 !important ;}



.schedule_header td.current .weekday { border-top: 3px solid #00aced; }

.dayview .schedule { top:54px; }
.dayview .schedule_header { overflow-y: hidden; }

.dayview .allday {
  height:24px;
  padding-top:2px;
  padding-left: 2px;
  top:0;
  position:relative;
  border-bottom: 1px solid #ccc; } 

.dayview .schedule_body { top:24px;}

.dayview #mask,
.dayview #mask1 { top: 24px;}

.dayview_date {  position:relative; top:3px;}
.date_monthday {
  position:absolute;
  top:13px;
  left:18px;
  font-family: 'Oswald', sans-serif;
  line-height:42px;
  font-size:47px;
  letter-spacing: -0.5px;
  width: 45px;
  text-align: right; }
.date_month_year {
  left:73px;
  top:17px;
  font-size:13px;
  position:absolute;
  color:#888; }
.date_weekday {
  left:72px;
  top:35px;
  text-transform:uppercase;
  font-weight:bold;
  font-size:19px;
  position:absolute;
  color:#888; }


/*----------LABELS----------*/
.allday {
  height:21px;
  padding: 0 0 0 1px;
  position: relative;
  top: -1px;  }

.allday a {
  float: left;
  text-indent: 14px;
  color:#999;
  padding:2px 4px;
  font-size:11px;
  height:20px; 
  border-radius: 3px; }

.allday_add { overflow: hidden; display: block; }
.allday_add a { width: auto; }
.monthview_allday .allday_add a { display: none;}

.add_label { 
  background: url(img/arrow_expand.svg) no-repeat 5px -134px transparent; 
  width: 19px;  
  border-radius: 4px;
  margin-right: 1px;
  transition: 0.1s; }
.add_label:hover { background-color: #cfcfcf !important;  }

.schedule_month .add_label { 
  background: url(img/arrow_expand.svg) no-repeat 5px -134px; }


.add_alldayevent { 
  background: url("img/check.svg") no-repeat 2px -257px; 
  line-height:16px;
  padding-right: 8px;
  transition: 0.1s}
.add_alldayevent:hover { 
  background: url(img/check.svg) no-repeat 2px -257px #cfcfcf;
  color:#666; }

.monthview_allday .allday_add { float: left;  margin-top: 1px }
.monthview_allday .allday_add .add_label { width: 20px; height: 19px; border-radius: 3px; }


.count_events {
  position: absolute; 
  text-indent: 1px !important;
  padding: 3px;}
.allday:hover .count_events { display: none;}


 

.label_detials {
  position:absolute;
  background: #333 ; 
  border-radius: 6px;
  z-index:7;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1); 
  border-top: 5px solid #333; }
.label_detials:after {
  position: absolute;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #333;
  border-style: solid;
  border-width: 11px;
  content: "";
  height: 0;
  top: -23px;
  width: 0;
  display: block;
  z-index:8;
  left: 18px; }


.label_assign { left:48%; width:200px; }
.label_assign h3 {
  text-transform:uppercase;
  font-weight:bold;
  color:#999;
  font-size: 12px;
  padding:12px 12px 0; }

.label_manage { 
  color:#ccc;
  max-width:200px;
  min-width:190px;
  left:26%; }
.label_manage p {
  padding:7px 0 10px;
  margin:0 10px 10px;
  border-bottom:2px solid #444;
  margin-bottom:0; }
.label_manage a { color:#bbb; }
.label_manage a:hover { text-decoration:underline; }

 
.label_pick input { margin: 0 0 10px; }
.label_pick { margin: 0 10px ; }

.label_manage input,
.label_assign input {
  background:#202020;
  color:#ddd;
  border:0;
  padding:8px 0;
  text-indent:9px;
  width:100%; 
  border-radius: 4px;
  box-shadow: 1px 1px 2px 1px #1e1e1e inset;  }
.label_assign input:active { background:#222; color: #fff;}

.labels { 
  padding: 13px 0 10px; 
  overflow:auto;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 5px;}
.label_dropdown .labels { padding: 13px 12px 8px; }

.labels li { 
  border-radius: 4px; 
  background:#555; 
  border: 2px solid #555;
  cursor:pointer;
  width: 30.5px;
  height: 30.5px;
  padding: 4px 3px; }

.labels li:hover { background:#7a7a7a; border-color: #7a7a7a;  }
.labels li.selected {
  background:#333;
  border-color: #7a7a7a;  }

.label {
  position:relative;
  cursor:pointer;
  width: 21px;
  height:20px;
  float:left;
  background:url(img/labels.svg) no-repeat;
  border-radius: 3px;
  margin-right: 1px ;  }
.label:hover { background-color: #cfcfcf !important;}
.label.active, 
.allday_add.adding-label .add_label { background-color: #333 !important;}

.current .label { background-color: transparent; } 

.label.airplane { background-position: 1px -255px; }
.label.red_circle { background-position: 1px -72px; }
.label.compass { background-position: 0 2px; }
.label.cake { background-position: 1px -469px; }
.label.triangle { background-position: 1px -289px; }
.label.heart { background-position: 1px -362px; }
.label.person { background-position: 1px -434px; }
.label.star { background-position: 1px -398px; }
.label.goal { background-position: 0 -145px; }
.label.flower { background-position: 0 -181px; }

.label.camera { background-position: 0 -110px; }
.label.paw { background-position: 0 -508px; }
.label.purple_circle { background-position: 1px -36px; }
.label.suitcase { background-position: 0 -219px; }
.label.car { background-position: 0 -326px; }

.day.marked,
.day.has-label { color:#fff !important; }
 
.scheduled .day.has-label  {
  text-decoration: 2px underline #00aced; 
  text-underline-offset: 3px;
  color: #00aced !important;}

.scheduled .day.has-label:hover{
  color: #fff !important;
  text-decoration: 2px underline #fff; 
}

.label_calendar-airplane .marked,
.label_calendar-airplane .has-label { background:#61b4fa !important;  }

.label_calendar-red_circle .marked,
.label_calendar-red_circle .has-label { background:#ca1414 !important; }

.label_calendar-compass .marked,
.label_calendar-compass .has-label  { background:#aa7d13 !important;}

.label_calendar-cake .marked,
.label_calendar-cake .has-label  { background:#b185de !important; }

.label_calendar-triangle .marked,
.label_calendar-triangle .has-label  { background:#82c9b7 !important; }

.label_calendar-heart .marked,
.label_calendar-heart .has-label { background:#d88547 !important; }

.label_calendar-person .marked,
.label_calendar-person .has-label { background:#82bd2f !important; }

.label_calendar-star .marked,
.label_calendar-star .has-label { background:#40c0db !important; }

.label_calendar-goal .marked,
.label_calendar-goal .has-label { background:#d4a81e !important; }

.label_calendar-flower .marked,
.label_calendar-flower .has-label { background:#d27cc9 !important; }

.label_settings { 
  padding:0 13px 13px; 
  overflow:auto; 
  max-width:300px; }
.label_manage .label_settings { 
  padding:4px 13px 13px;}
.label_settings a { 
  font-size: 12px;
  float:left; 
  color:#ccc; 
  padding: 9px 8px 5px 0; 
  text-decoration:underline;}
.label_settings .button {
  padding: 7px 11px;
  text-decoration:none;
  color:#fff;
  float:right;
  margin-left:6px;
  margin-top: 3px;
  text-decoration:underline;
  position:relative;
  font-weight: bold;
  background: #616161;}
.label_settings .repeat { background:url(img/check.svg) no-repeat 5px -635px #616161; width:27px; height:28px;}
.label_settings .delete { background:url(img/check.svg) no-repeat 6px -665px #616161; width:27px; height:28px;}
.label_settings .button:active { left:1px; top:1px;}

.label_repeat a { color:#ccc; }
.label_repeat {
  margin:8px 10px;
  padding:0 0 10px 26px;
  border-bottom:2px solid #444;
  background:url(img/check.svg) no-repeat 5px -635px;}

.button {
  background:#777; 
  border-radius: 4px;
  text-decoration:none !important;}

.button.save { float:right; background:#ccc;}


.label_detials select {
  border:1px solid #1e1e1e;
  color:#ccc;
  font-size:12px; 
  background:#222;
  border-radius: 3px;
  width:90px; 
  padding:3px;
  margin: 3px 0 0 4px;}
.label_settings select { 
  width: 100px;
  margin: 7px 0 0 2px;}
.label_detials option { padding:1px; }

.label_text_yearly {
  color:#ccc;
  font-size: 12px;
  padding:10px;
  position:absolute;
  top:20px;
  background:#4D4D4D;
  z-index:9;
  width:130px;  
  border-radius: 4px; }
.label_text_yearly:after {
    position: absolute;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #4D4D4D;
    border-style: solid;
    border-width: 7px;
    content: "";
    height: 0;
    left: 60px;
    top: -14px;
    width: 0;
    display: block;
    z-index:8; }

.schedule_body{
  position: absolute;
  overflow-y: scroll;
  top:45px;
  bottom:0;
  left:0;
  right:0;
  background: url(img/bg.gif); }
.schedule_body table {  height:960px; }
.schedule_body table td { background:url(img/cal_bg.gif); position:relative !important; }

.schedule_body .table_container {
  box-shadow: inset 0 0 111px 1px #666;
}

.schedule_body::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0px; 
  top: 239px;
  border-bottom: 3px double #d7d7d7; 
  left: 0; }
.schedule_body::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 0; 
  top: 719px;
  border-bottom: 3px double #d7d7d7;
  left: 0;
  z-index: 1; }

.hour::before{
  content: ''; 
  position: absolute;
  height: 0; 
  left: 0;
  top: 479px;
  position: absolute;
  z-index: 1;
  width: 100%;
  border-bottom: 3px double #d7d7d7; }

.hour::after{
  content: 'noon';
  position: absolute;
  text-align: center;
  right: calc(50% - 37px);
  background: #fff;
  font-size: 7px;
  padding: 1px 3px;
  text-transform: uppercase;
  color: #aaa;
  top: 475px;
  font-weight: bold;
  letter-spacing: 0.5px;
  border: 1px solid #d7d7d7;
  background: #fff;
  z-index: 1;
}
#mask {
  position: absolute;
  top: 45px;
  left: 0px;
  right: 16px;
  bottom: 0px; 
  box-shadow:  inset 0  99px 99px -99px  rgba(0,0,0,0.1),
               inset 0 -99px 99px -99px  rgba(0,0,0,0.2);}
#mask1 {
  position: absolute;
  top: 45px;
  left: 0px;
  right: 16px;
  bottom: 0px;
  box-shadow: inset 0 0 11px 1px  rgba(0,0,0,0.3); }


.monthview .schedule_body,
.monthview #mask,
.monthview #mask1{ top:24px; overflow: hidden;}

.monthview .schedule_body table {
  position: absolute;
  height:100%; }

.monthview .schedule_body table tr{ height:20%;}

.hour {
  float:left;
  width:42px;
  height:958px;
  text-align:right;
  margin-top:2px;}
.hour p {
  color:#444; 
  font-size: 11px;
  font-family: 'Oswald', sans-serif;
  height:40px;
  padding:2px 0;
  border-left:1px solid #eee;
  border-bottom:1px solid #d6d6d6;
  border-right:1px solid #d6d6d6; }
.hour span { padding:0 3px; opacity: 0.5;}


.hour p.hour0{ background: #666; color: #fff; border-color: #666;}
.hour p.hour1{ background: #777; color: #fff; border-color: #777;}
.hour p.hour2{ background: #888; color: #fff; border-color: #888;}
.hour p.hour3{ background: #999; color: #fff; border-color: #999;}
.hour p.hour4{ background: #aaa; color: #fff; border-color: #aaa;}
.hour p.hour5{ background: #bbb; color: #fff; border-color: #bbb;} 
.hour p.hour6{ background: #ddd; } 
.hour p.hour7{ background: #eee; }  

.hour p.hour23{ background: #666; color: #fff; border-color: #666;}
.hour p.hour22{ background: #777; color: #fff; border-color: #777;}
.hour p.hour21{ background: #888; color: #fff; border-color: #888;}
.hour p.hour20{ background: #999; color: #fff; border-color: #999;}
.hour p.hour19{ background: #aaa; color: #fff; border-color: #aaa;}
.hour p.hour18{ background: #bbb; color: #fff; border-color: #bbb;} 
.hour p.hour17{ background: #ddd; } 
.hour p.hour16{ background: #eee; } 

.hour p.current,
.hour p.current span { 
  color:#28c4ff; 
  background: #333; 
  border-color: #333;}

.stats { height:30px; width:285px; position:absolute; right:10px; bottom: 6px; padding:5px 2px;}

.stats p { float:right; padding:3px 5px 0 0; color:#666; font-size:11px;}
.stats a { float:right; width:38px; background:#777; margin:0 0 0 5px; text-align:center; padding: 3px 0; font-size:11px; font-weight:bold;}
.stats a.personal { background:#bece79; color:#4b582e;}
.stats a.social { background:#e29260; color:#481b00;}
.stats a.professional { background:#65b6ce; color:#002838;}

.stats { width:305px; }

.hint {color:#999; font-style: italic; }

.schedule .past { background: url(img/bg_past.jpg) #eee !important; }


.schedule_month { position: absolute; bottom:40px; top:0; left:10px; right:10px;}
.schedule_month table{
  width:100%;
  height:100%;
  background:#d1d1d1;
  box-shadow: 1px 1px 3px 0 #ccc; 
  border-radius: 6px;}
.schedule_month table td {
  vertical-align: top;
  width:14%;
  background:url(img/bg.gif) #fff;}
   
.schedule_month table td a { font-size:12px; float:left;} 

.schedule_month table td.past { background:url(img/bg_past.gif) #f6f6f6 ; outline: none;}
.schedule_month table td a.not_current_month { color:#aaa;}
.schedule_month table td.today {
  background: #fff; 
  outline:2px solid;
  border-radius: 3px;}
.schedule_month table td.today a.day_of_month {color: #1ba2dc;}
.monthview_allday a.day_of_month:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;}

.today_hours {
   position: relative;
   height:391px;
   background: url(img/bg_past.jpg) #eee;
   top:0;}
.today_hours::after {
  border: 2px solid #777;
  margin-left: -1px;
  background: #777;
  height: 2px;
  width: calc(100% + 2px);
  position: absolute;
  content: "";
  bottom: 0;}
.schedule_month .weekdays {
    font-size:11px; 
    text-transform:uppercase; 
    text-align:center;}
.schedule_month .weekdays td {
    height:26px;
    padding-top:7px;
    background:#fff;
    color:#999;
    overflow:hidden;
    font-weight: bold;}

.weekdays td:nth-child(8){ border-top-right-radius: 6px;}

.schedule_month .week {
  width: 2% !important;
  background:#efefef !important;
  color:#999;
  font-family: 'Oswald', sans-serif;
  text-align:center;
  cursor:pointer; 
  padding-bottom: 1px; } 
.schedule_month .past.week { background:#e6e6e6 !important;}
.schedule_month .week.past.empty { background:#fff !important; border-top-left-radius: 6px;}
.schedule_month .week:hover { 
  background:#dfdfdf !important; 
  color:#333;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;}

.schedule_month td { overflow:hidden;}
.schedule_month .monthview_allday{ float:left; font-size:12px; font-weight: normal;}

.monthview_allday a.day_of_month {
  float:left;
  padding: 0 3px;
  font-family: 'Oswald', sans-serif;}


.schedule_year {
  position: absolute;
  bottom:30px;
  top:-4px;
  left:6px;
  right:6px;}

.schedule_year .row { width:100%; overflow:hidden; height:33%;}
.schedule_year .day {border:1px solid transparent; font-family: 'Oswald', sans-serif; }
.schedule_year .day.today {border-color: #666;}
.schedule_year .day.scheduled { text-decoration: underline 3px #ddd; }
.schedule_year .day:hover { background:#999 !important; color:#fff; cursor:pointer;}


.schedule_year td {
  position:relative; 
  border-radius: 2px;
  font-size:12px ;
  text-align:center;
  color:#888;}
  
.past .schedule_year .day {color: #aaa;}

.schedule_year table {
  box-shadow: 1px 1px 3px 1px #ccc; 
  padding:0 3px 0 0;
  width:100%;
  height:100%;
  background:#fff;
  border-spacing:1px; 
  border-radius: 6px;}

.schedule_year .yearly_month {
  float:left;
  width:25%;
  height:100%;
  padding:5px;}

.schedule_year .yearly_month .month a { color: #222; font-weight: bold;}
.schedule_year .yearly_month .past .month a{ color:#888; font-weight: normal;}
.schedule_year .yearly_month .month {
  text-transform:uppercase; 
  font-size:13px;} 
.schedule_year .yearly_month .month a:hover { text-decoration:underline;}

.schedule_year .yearly_month .past { background:url("img/bg_past.gif") repeat;}

.schedule_year .yearly_month .current { border: 3px solid #1ba2dc;}
.schedule_year .yearly_month .current .month a {color: #1ba2dc; font-weight: bold;}

.today { color:#1ba2dc !important;}

.schedule_year .yearly_month .week_number {
  color:#bbb  ;
  font-family: 'Oswald', sans-serif;
  width:16px;
  border-radius: 0 !important; 
  border-right:1px solid #efefef;
  cursor:pointer;
  background:#f6f6f6;}

.schedule_year .yearly_month .current .week_number {
  border-right:1px solid #eaf1f3;
  background:#f1f7f9;}
.schedule_year .yearly_month .past .week_number {
  border-right:1px solid #e9e9e9;
  background:#eee;}

.schedule_year .yearly_month .past .week_number:hover,
.schedule_year .yearly_month .week_number:hover { background-color:#ddd; color:#333;}

.schedule_year .yearly_month .week_number.filler:hover {background:#f6f6f6; cursor:default;}
.schedule_year .yearly_month .past .week_number.filler:hover {background:#eee; cursor:default;}
.schedule_year .yearly_month .current .week_number.filler:hover {background:#f1f7f9; cursor:default;}

.label_picker {
  position: absolute;
  cursor:pointer;
  left: 258px; 
  border-radius: 4px;
  height: 32px;
  margin:0 0 0 14px;
  padding:6px 28px 0 7px;
  font-size: 12px;
  font-weight: bold;
  color:#ddd !important;
  background:url("img/arrow_expand.svg") no-repeat right 12px #333 !important  ;}

.label_picker p { float:left; padding: 3px 0 0 6px;}

.label_dropdown {
  background: #333 ;
  position:absolute; 
  border-radius: 6px;
  width:200px;
  z-index:1000;
  left:272px;
  top:30px;
  padding: 0 0 5px; }

.label_dropdown a {
  margin: 10px;
  text-align:center;
  display:block;
  padding:8px 10px;
  height: auto !important;
  float:none !important;
  background:#666 !important;
  color:#ddd !important;}
.label_dropdown a:hover { background:#777 !important;}
.label_dropdown a.selected {
  background:#313131 !important;
  box-shadow: inset 0 1px 2px #222 !important; }

.label_pick .label:hover,
.label_pick .label:active,
.label_container .label:hover,
.label_container .label:active{ background-color: transparent !important;}

/* calendar events */

.event{
  height:90px;
  font-size:12.3px;
  line-height:11px;
  cursor:move;
  min-height:21px;
  position:relative;
  border-left:4px solid;
  padding:4px;
  float:left;
  width:100%;
  border-radius: 6px; 
  overflow: hidden; }

.event a { color:inherit; float:left;}
.event span { 
  padding-right: 1px;   
  font-weight: bold;
  font-family: 'Oswald', sans-serif;
  font-size: 90%; }
.schedule_month .event span {
  border-right: 1.5px solid; 
  font-weight: bold;
  padding-right: 4px; } 

.schedule_container .event span { padding-bottom: 1px; }
.monthly-events-wrapper {white-space: nowrap;}

.event.create span {
  float: right;
  font-size: 9px;
  padding: 0; }

.event.create,
.schedule_month .event.create { 
  background: rgba(255, 255, 153, 0.50);  
  border-top: 1px solid #dfdf8d !important;
  border-left: 1px solid #dfdf8d !important;
  border-bottom: 1px solid  #f1f1df !important;
  border-right: 1px solid #f1f1df !important;
  color:#111;
  overflow:auto;
  cursor:text; }

.allday-event.event:not(.event-task) { padding: 3px 3px 3px 5px; }
.schedule_month .allday-event.event:not(.event-task) {
  margin-bottom: 1px;
}

.event.personal,
.allday-event.event.personal:not(.event-task) { 
  background: hsla(75, 47%, 48%, 0.40);
  border-color: hsla(75, 100%, 31%, 0.6);
  color: hsl(84, 100%, 23%); }
.event.social,
.allday-event.event.social:not(.event-task) { 
  background: hsla(26, 68%, 50%, 0.40);
  border-color: hsla(26, 100%, 32%, 0.6);
  color: hsl(26, 100%, 32%);}
.event.professional,
.allday-event.event.professional:not(.event-task) { 
  background: hsla(194, 59%, 59%, 0.40);
  border-color: hsla(194, 100%, 32%, 0.6);
  color:hsl(194, 100%, 32%);}
.event.neutral, 
.allday-event.event.neutral:not(.event-task) { 
  background: hsla(0, 0%, 77%, 0.40);
  border-color: hsla(0, 0%, 52%, 0.6);
  color: hsl(0, 0%, 32%); }

.schedule_month .event {
  font-weight: normal; 
  border: 0;
  font-size: 12px;
  border: transparent; }   
 

.schedule_header .event:not(.create) { border: transparent !important; }
.allday-event:not(.event-task) { width: 97% !important; }
.schedule_month .event.regular,
.schedule_header .event.event-task { background: transparent; }   

.schedule_month .event.allday-event:not(.event-task) a {width: 100%;}

.schedule_header .event.personal,
.schedule_month .event.personal { color: hsl(88, 100%, 33%); }
 
.schedule_header .event.social,
.schedule_month .event.social { color: hsl(26, 100%, 40%); }

.schedule_header .event.professional,
.schedule_month .event.professional { color: hsl(194, 100%, 40%); }

.schedule_header .event.neutral,
.schedule_month .event.neutral { color: hsl(0, 0%, 32%); }

.event_view {
  position: absolute;
  width:310px;
  top:80px;
  left:20px; 
  border-radius: 6px;
  background: #fff;
  border: 2px solid #666;
  font-size:12px; }

.event_view.arrow_bottom:after,
.event_view.arrow_bottom:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
.event_view.arrow_bottom:after {
    border-color: rgba(238, 238, 238, 0);
    border-top-color: #fff;
    border-width: 15px;
    margin-left: -15px; }
.event_view.arrow_bottom:before {
    border-color: rgba(102, 102, 102, 0);
    border-top-color: #666;
    border-width: 18px;
    margin-left: -18px; }

.event_view.arrow_top:after,
.event_view.arrow_top:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
.event_view.arrow_top:after {
    border-color: rgba(102, 102, 102, 0);
    border-bottom-color: #eee;
    border-width: 15px;
    margin-left: -15px;}
.event_view.arrow_top:before {
    border-color: rgba(102, 102, 102, 0);
    border-bottom-color: #666;
    border-width: 18px;
    margin-left: -18px;  }

.event_view header { 
  border-top-left-radius: 6px; 
  border-top-right-radius: 6px;
  background:#eee;
  padding: 3px 4px;
  overflow:auto;}
.event_view header p { 
  line-height:16px;
  float:left; 
  padding:5px;}

.event-type { 
  float: right; 
  padding: 3px 0 3px 4px;
  margin-right: 4px; 
  background: #ddd; 
  border-radius: 5px; 
  overflow: auto; }
.event-type a {
  padding: 3px 5px; 
  margin-right: 4px;
  float: left;
  border-radius: 4px;  
  font-size: 11.5px;
  color: #8a8a8a; }
.event-type a:hover { color: #111; }
.event-type a.selected {background-color: #fff;  color: #111; cursor: default; }
 
.close {
  float:right !important;
  background-image:url(img/check.svg);
  background-repeat:  no-repeat;
  background-position:  2px -372px; 
  border-radius: 3px;
  margin-top: 3px;
  height:20px;
  width:20px;}

  .close:hover { background-color: #ccc; }

.event_view .time { font-size:11px; color:#777; padding-right:5px;}
.event_view .date strong { columns: #111;}
.event_view .date { font-size:11px; columns: #666;}


ul.category_assign { float:left; padding: 10px 8px 8px;}
ul.category_assign li:after { border:1px solid #fff; content:""; display:block; width:21px; height:21px;}
ul.category_assign li{ float: left; border:2px solid #fff; margin-right:3px; cursor:pointer;}

ul.category_assign li.personal { background:#BECE79;}
ul.category_assign li.personal:hover { border-color:#BECE79;}
ul.category_assign li.social { background:#E29260;}
ul.category_assign li.social:hover { border-color:#E29260;}
ul.category_assign li.professional { background:#65B6CE;}
ul.category_assign li.professional:hover { border-color:#65B6CE;}
ul.category_assign li.neutral { background:#ccc;}
ul.category_assign li.neutral:hover { border-color:#ccc;}

ul.category_assign li.selected,
ul.category_assign li.selected:hover{ border-color: #555;}


.event_name { padding: 10px 9px 5px;}
.event_name a{ font: bold 15px  Arial, Helvetica, sans-serif; text-decoration:none;}
.event_name a:hover { text-decoration:underline;}

.event_view input.inline-edit {
  padding:8px 0;  
}
.event_view input.inline-edit:focus {
  border: 1px solid #ddd;
  padding:7px 8px;  
  border-radius: 5px; 
  background: #f2f3f5;
  box-shadow: 1px 1px 2px 0 #e4e7e9 inset; 
  font-weight: normal;
  text-decoration: none;} 
.inline-edit::placeholder { color: #999;}

.event_view .new-event-title { margin: 5px 4px 3px;}

.event_view .icon{
  float:left;
  position:absolute;
  width: 27px;
  height:22px;}
.event_repeat .icon{ background:url(img/check.svg) no-repeat 10px -82px;}
.event_note .icon{ background:url(img/check.svg) no-repeat 10px -575px;}
.event_duration .icon { background:url(img/check.svg) no-repeat 10px -170px;}

.event_note { padding:3px 0 8px; overflow:hidden; font-size:12px;}
.event_repeat,
.event_duration { overflow:auto; padding-bottom:3px;}

.event_view .set_event{ 
   padding:3px 3px 3px 31px;
   float:left;}

.event_view .set_event.set { color:#888; text-decoration:none; }
.event_view .set_event.set:hover { color:#00aced;}

.set-repeat {color: #888;}
.set-repeat:hover { color:#00aced;}

.duration_options { padding: 3px 0 3px 29px;}
.duration_options input { 
  padding:3px 5px; 
  width:85px; 
  border-radius: 4px;
  border:1px solid #ccc; }
.duration_summary { color:#777; padding-left:3px;}


.event_repeat p { width:270px; color:#999; display:block; padding:3px 0 3px 29px;}
.repeat_options { float:left; color:#666;}
.repeat_options section{
  margin:0 0 0 10px;
  float:left;
  background: #f1f1f1; }
ul.repeat_details_selector  { padding-right:0;}
.repeat_details_selector {
  border-radius: 6px;
  padding: 3px;
  border:2px solid #cdcdcd;
  overflow:auto;
  margin:7px 7px 0; }
.repeat_details_selector a {
  border-radius: 3px;
  float:left;
  padding: 6px 0;
  text-align:center;
  width: 33px;
  margin-right:3px;
  text-transform:uppercase;
  font-size:10px;
  font-weight:bold; }
.repeat_details_selector a.selected:hover,
.repeat_details_selector a.selected { background:#777 !important; color:#fff;}

.epeat_details_selector .column { padding: 6px;}

.repeat_options.details { width: 287px; padding:0 0 5px ;}
.repeat_options.summary { width: 280px; padding:7px 9px; background:#e6e6e6; color:#333; }

.repeat_options.tabs { float:left; font-weight:bold;  }
.repeat_options.tabs a{
  font-size: 11px;
  background:#dcdcdc;
  float:left;
  padding: 8px 9px;   }
.repeat_options a:hover { background-color:#ccc;}

.event_repeat .selected,
.event_repeat .selected:hover{ background-color:#f1f1f1 !important; color:#000; }
.remove_repeat { color:#fff !important; background: #777 !important;}


.event_view select,
.event_view option {
  font-size: 12px;
  font-family:Arial, Helvetica, sans-serif;}
.event_view select{ padding:3px 5px;}

.event_view h4 { 
  text-transform:uppercase; 
  margin:9px 0 3px; 
  font-size:12px; 
  color:#111 ;}

.radio_button { float:left; margin-right:3px;}
.radio_button.ends { margin:7px 3px 7px 0;}

.never { padding:3px 0 5px;}
.repeat_options_date { 
  font-size: 12px;
  width:80px; 
  padding: 3px 2px; 
  margin-bottom:3px;}
.repeat_instances { width: 35px; padding: 3px 2px; margin-bottom:4px; }

.event_view .button {
  padding:7px 5px;
  float:right;
  margin: 8px 9px 0 0;
  color:#444;
  font-size:12px;
  border-radius: 4px; }

.event_view .button.delete { background:url(img/check.svg) no-repeat 4px -603px #fff; padding-left:22px;}
.event_view .button.delete:hover { text-decoration:underline !important; }
.event_view .button.save { background: #333; color: #fff; font-weight:bold; padding:6px 11px;}
.event_view .button.save.inactive { background:#e9e9e9; color:#bbb; cursor: default;}

/*--------------------------
Action Plan
--------------------------*/
 
.plan section{
  background:#fff;
  background: url(img/cream_dust.png);
  margin: 0 9px 7px;
  border: 1px solid rgba(14, 32, 44, 0.55); 
  border-radius: 6px;
  position:relative;}

.plan section header:hover { cursor:move;}

.action-items-container { border-top:1px solid #e2eef2; margin:7px 9px 11px;}

.action-items-container li.action-item {
  border-bottom:1px solid #e2eef2;
  overflow: hidden;
  cursor:move;}
.action-item-wrapper { white-space: nowrap; }

.action-items-container li .action-item-wrapper:hover,
.action-items-container li .action-item-wrapper.active { background:#eff5f7; }

.mini_lifeplan .action-items-container{border-top:0; border-bottom:1px solid #e2eef2;}
.mini_lifeplan .action-items-container li.action-item {border-bottom:0; border-top:1px solid #e2eef2;}

.nested-action-items li.child{
  border-top:1px solid #e2eef2;
  overflow: hidden;}
.nested-action-items li.child:hover,
.nested-action-items li.child.active { background:#eff5f7; }

.nested-action-item-wrapper { 
  padding-left: 36px;  
  white-space: nowrap; }

.action_title { 
  margin:5px 3px 4px;
  min-width:20px;
  font-size:12px ;
  word-wrap: break-word;
  display: inline-block;}
a.action_title:hover { text-decoration:underline dashed;}

.parent .action-item-wrapper .action_title{ margin-left: 2px; }

/* li.parent > .action-title { font-weight:bold;} */

.action_state { 
  background:url(img/check.svg) no-repeat 3px 3px;
  width:22px;
  height:22px;
  margin-left: 5px;
  float: left;}

.parent_toggle {
  float:left;
  background:url(img/arr-big-2.svg) no-repeat;
  width:15px;
  height:22px;
  opacity: 0.7; }
.parent_toggle.collapsed { background-position: 0 -14px;}
.parent_toggle.expanded { background-position: 0 3px;}


.someday > .action-item-wrapper > .parent_toggle.collapsed,
.someday > .nested-action-item-wrapper > .parent_toggle.collapsed,
.next > .action-item-wrapper > .parent_toggle.collapsed,
.next > .nested-action-item-wrapper > .parent_toggle.collapsed { background:url(img/arr-big-2.svg) no-repeat 0 -48px; }
.someday > .action-item-wrapper > .parent_toggle.expanded,
.someday > .nested-action-item-wrapper > .parent_toggle.expanded,
.next > .action-item-wrapper > .parent_toggle.expanded,
.next > .nested-action-item-wrapper > .parent_toggle.expanded { background-position: 0 -31px;}

.recurring > .action-item-wrapper > .action_state,
.recurring > .nested-action-item-wrapper > .action_state { background-position: 3px -80px; }

.personal .recurring > .action-item-wrapper > .action_state,
.personal .recurring > .nested-action-item-wrapper > .action_state { background-position: 2px -784px;  }
.social .recurring > .action-item-wrapper > .action_state,
.social .recurring > .nested-action-item-wrapper > .action_state { background-position: 2px -810px;  }
.professional .recurring  > .action-item-wrapper >.action_state,
.professional .recurring  > .nested-action-item-wrapper >.action_state { background-position: 2px -836px;  }

.action-plan-items-container .recurring > .action-item-wrapper > .action_state { background-position: 2px -759px;  }

.completed > .action-item-wrapper > .action_state,
.completed > .nested-action-item-wrapper > .action_state { background-position: 3px -24px;}
.completed > .action-item-wrapper > .action_state:hover,
.completed > .nested-action-item-wrapper > .action_state:hover { background-position: 3px -52px;}
.completed > .action-item-wrapper > .action_title,
.completed > .nested-action-item-wrapper > .action_title { text-decoration:line-through; color:#aaa;}

.next > .action-item-wrapper > .action_title,
.next > .nested-action-item-wrapper > .action_title { color:#acacac; }
.next > .action-item-wrapper > .action_state,
.next > .nested-action-item-wrapper > .action_state { background-position: 2px -199px;}

.someday { border-color: #e0e0e0; }

.someday > .action-item-wrapper,
.someday .nested-action-item,
.nested-action-item.someday { background: #f3f3f3; border-color:#e0e0e0; }
.nested-action-item.someday.active,
.nested-action-item.someday:hover,
.someday .nested-action-item-wrapper.active,
.someday .nested-action-item-wrapper:hover,
.someday > .action-item-wrapper.active,
.someday > .action-item-wrapper:hover,
.someday .nested-action-item.active,
.someday .nested-action-item:hover { background:#e6e6e6 !important; border-color:#e0e0e0; }

.someday > .action-item-wrapper > .action_title,
.someday > .nested-action-item-wrapper > .action_title { color:#999;}

.someday > .action-item-wrapper > .action_state,
.someday > .nested-action-item-wrapper > .action_state { background-position: 3px -138px; }
.someday > .action-item-wrapper > .action_state:hover,
.someday > .nested-action-item-wrapper > .action_state:hover { background-position: 3px -310px; }

.focus > .action-item-wrapper > .action_state,
.focus > .nested-action-item-wrapper > .action_state { background-position: 2px -228px; }
.focus > .action-item-wrapper > .action_title,
.focus > .nested-action-item-wrapper > .action_title { font-weight: bold; color: #111;}

.someday > .action-item-wrapper > .action_menu_area,
.someday > .nested-action-item-wrapper > .action_menu_area { border-top:1px solid #dfdfdf;}
.someday > .action-item-wrapper > .action_menu_area > input,
.someday > .nested-action-item-wrapper > .action_menu_area > input { border: 1px solid #d6d6d6;}

.now > .action-item-wrapper > .action_title,
.now > .nested-action-item-wrapper > .action_title {color:#111;}

.now > .action-item-wrapper > .action_state,
.now > .nested-action-item-wrapper > .action_state { background-position: 3px 3px;}


#lifeplan .plan section { 
  border-color:#cdcdcd; 
  box-shadow: 0 0 3px 0px #ccc;}

section.collapsed:not(.create_area) { 
  background-color: rgba(255, 255, 255, 0.4);
  background-image: none;
  border: 0;  
  box-shadow: 0 0 1px 0 rgba(0,0,0,0.64);
  padding-bottom:9px;}
section.collapsed h3,
section.collapsed .description,
section.collapsed .action_title {color:rgba(0, 0, 0, 0.35); padding: 15px 0 3px;}
section.collapsed ul {display:none;}

#actionplan section.collapsed h3 { 
  padding: 10px 0 9px; 
  margin-left: 9px; 
  background-position: -3px -20px; }
#actionplan section.collapsed:not(.create_area) { padding-bottom: 0; }
#actionplan section.collapsed h3 .parent_toggle { margin-right: 4px;}

.action_menu {
    position: absolute;
    right: 9px;
    z-index: 999;
    padding-left: 5px; }
.action_menu > a{ 
  width:24px; 
  height:24px; 
  float:left; 
  background:url(img/check.svg) no-repeat #eff5f7; }
 

.action_menu > a.action_menu_options { background-position: 2px -481px; }
.action_menu > a.action_menu_subtask { background-position: 4px -397px; }
.action_menu > a.action_menu_note { background-position: 4px -573px;}
.action_menu > a.action_menu_delete { background-position: 4px -729px;}

a.action_menu_note.entered { background-position: 4px -453px; background-color: inherit; color: #666;}
a.action_menu_note.active{ background-color:#dfe9ed; background-position: 4px -573px; }



.action_menu_area .note {
  padding:9px;
  margin: 5px auto;
  width:96%;
  background:#fbfcfc;
  font:13px Arial, Helvetica, sans-serif;
  cursor:text;
  box-shadow: 
    1px 1px 2px 0 #d0d1d3, 
    inset -3px -3px 30px 0 #f5f5f5; }

 
.action_menu > a:hover,
.action_menu > a.active{ background-color:#dfe9ed; }

.action_menu_area { 
  padding: 5px; 
  cursor:default;
  background-color: #eff5f7; }
.action_menu_area.add_action { padding-left:22px !important; position:relative;}
.action_menu_area.add_action a { margin:6px;}

.someday .action_menu > a{ background-color: #e6e6e6;}
.someday .action_menu > a:hover,
.someday .action_menu > a.active {background-color: #d5d5d5;}
.someday .action_menu_area { background-color:#e6e6e6;}



.action_menu_options_edit { display:block; padding:6px 5px; margin-top:22px;}

.action_menu_area.action_options{
  position:absolute;
  right: 5px;
  margin-top: 0; 
  width:95px; 
  background:#dfe9ed;
  font-size:12px; 
  border-radius: 5px; 
  z-index: 9999;}
.action_menu_area.action_options a{  
  background-image:url(img/check.svg);
  background-repeat: no-repeat;}

 
.action_options .status p { 
  padding:4px 3px 7px 5px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11px;
  color:#444;  }
.action_options .status a {
  margin-bottom:2px;
  width:100%;
  display: block;
  color:#63686d;
  padding:6px 5px 6px 24px;
  background-color: #f6f7f9;
  border-radius: 0; }
.action_options .status a:active { left:1px; top:1px;}
.action_options .status a:hover  { background-color:#fff;}

.change_to_recurring { background-position: 4px -757px;}
.change_to_pause { background-position: 4px -108px;}
.change_to_someday { background-position: 4px -137px;}
.change_to_active { background-position: 6px 5px;}
.change_to_focus { background-position: 4px -227px;} 

.action_options a.delete {
  display: block;
  font-weight:bold; 
  padding:8px 7px 8px 24px; 
  background-position: 5px -602px;
  background-color: #e8eff2; 
  width: 100%;
  color: #898a8b; }
.action_options a.delete:hover { text-decoration:underline; color:#333; }

.action_menu_area input {
  padding:5px 24px 5px 5px;
  width:100%;
  color: #333333;
  border-radius: 4px;
  width:100%;
  box-shadow: 1px 1px 2px 0 #eee inset;
  border: 1px solid #dadee1; }



.action_title_edit { float:left; }
.action_title_edit input {
  border:1px solid #ced7da;
  padding:3px;
  margin:1px;
  box-shadow: inset 1px 1px 1px 0 #e9eced;  
  border-radius: 3px;
  width:100%; }


.all_areas {
  width: 385px;
  background:#333;
  position:absolute;
  left:10px;
  top:37px;
  padding: 7px 0 0 7px; 
  border-radius: 7px; 
  z-index:1000;}
.all_areas ul{
  margin-bottom:7px;
  float:left;
  width:120px;
  margin-right:5px; }
.all_areas a{
  color:#adadad;
  color: #fff;
  font-size:11px;
  font-weight: bold;
  text-transform: uppercase;
  display:block;
  padding:8px 9px;
  margin-bottom:1px; 
  border-radius: 0 !important;
  overflow:hidden;}

.all_areas ul:nth-child(1) a {background: #699147;}
.all_areas ul:nth-child(2) a {background: #c46a27;}
.all_areas ul:nth-child(3) a {background: #3794b8;}

.all_areas ul a:hover { background:#121212; }




#actionplan header {
  height:44px;
  overflow: hidden;
  padding:8px;
  background:#587690;
}
#actionplan #lifemap header {
  height:unset;
  overflow: unset;
  padding:unset;
  background:unset;
}
  #actionplan header::before{ 
    content: " ";
    height: 44px;
    position: absolute;
    top: 0;
    right: 0;
    width: 10px; 
  }
  #actionplan header::after{ 
    content: " ";
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px; 
  }
.current-action-plan-title { 
    font-family: 'Oswald', sans-serif;
    font-size:18px; 
    font-weight:400;
    color: #111; 
    padding:1px 0  !important; 
    margin-left: 8px; }   
#actionplan h2 {
  font-family: 'Oswald', sans-serif; 
  font-weight:normal;
  text-transform:uppercase; 
  letter-spacing: 0.5px; 
  font-size: 18px;
  text-align: center;
  margin: 0 1px 8px;
  padding: 4px 0;
  border-bottom: 4px solid;
  mix-blend-mode: multiply;
  opacity: 0.9;}
 
#actionplan .column { padding: 0 9px 9px; }

.content.mini_lifeplan .action_title:hover {
  cursor: move;
  text-decoration: none; }

#actionplan nav.tabs a{
  box-shadow: none; 
  border-radius: 4px; 
  height: 39px;
  margin:4px 2px;
  background:#6f8ca2;
  color:rgba(255,255,255,0.6);}
#actionplan nav.tabs .selected{
  background:#95acbd;
  margin-top:0;
  color:#25272a;}

#actionplan .content {
  position:absolute;
  overflow:auto;
  top:44px;
  left:0;
  right:0;
  bottom:0; 
  padding-top: 12px;
  background:rgba(255,255,255,0.25);
  background: 
    linear-gradient(320deg,  
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0.3) 55%, 
    rgba(255,255,255,0.2) 80%, 
    rgb(149, 172, 189) 100%);
  border-right: 2px solid rgba(255,255,255,0.2);
  border-left: 2px solid rgba(255,255,255,0.2);
  scrollbar-width: thin;
  scrollbar-color: #6f8ca2 transparent;}
    
#actionplan::before{
  box-shadow: inset -5px 0 5px 0 rgba(255, 255, 255, 0.1);
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
}
#actionplan::after{
  box-shadow: inset 5px 0 5px 0 rgba(255, 255, 255, 0.1);
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
}

#actionplan.life-map header { background: none;}
#actionplan.life-map {
  background:rgba(255,255,255,0.25);
  background: 
    linear-gradient(320deg,  
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0.3) 55%, 
    rgba(255,255,255,0.2) 80%, 
    rgb(149, 172, 189, 0.2) 100%);
  border-right: 2px solid rgba(255,255,255,0.2);
  border-left: 2px solid rgba(255,255,255,0.2);}
#actionplan.life-map .content   {
  background: none;
  border: none;
  top: 32px;
}
#actionplan.calendar::before{   
  top: 44px; 
}
#actionplan.calendar::after{ 
  top: 44px; 
}

.add {
  position:absolute;
  right: 0;
  color:#999;
  font-size:27px;
  font-weight:bold;
  line-height:18px;
  width:28px;
  height:27px;
  padding:5px 6px; 
  border-radius: 4px;}
.add:hover,
.add.active { background-color:#ccc; }

section .add:hover { background-color:#d3d7da; }
section .add.active {  
  background-color:#ddecf1; 
  border-bottom-right-radius: 0;
  border-bottom-left-radius:  0;
  height:28px; }

.add-action-item-link { margin: 6px 6px 0 1px;}

.mini_lifeplan .add { right: 10px; margin-top: 3px; }

.action-plan-items-container .add { margin:6px 6px 0;}
 


/*--------------------------
Life Plan
--------------------------*/
.column section{
  background:#fff;
  margin:  0 0 10px; 
  border-top-right-radius:  5px;
  border-top-left-radius:  5px; }

section header { padding: 0 0 1px; }

#lifeplan h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase; }

#lifeplan .tabs { margin-left:5px;}

#lifeplan #lifemap,
#lifearea,
#priority {
  position:absolute;
  top:44px;
  bottom:10px;
  left:0;
  right:0;
  overflow-y:auto;
  overflow-x: hidden;
  background:#e3e3e3;
  padding:5px; 
  border: 1px solid #f7f7f7; 
  background:url(img/bg_la.jpg);}

.column { 
  width:33%; 
  height: 100%; 
  float:left; 
  position:relative; 
  padding:7px}
 

.column.width34 { width:34% }

.column.show_two { width:50% !important;}

/* .column h2 { padding:20px;} */
h3 { 
  margin-left: 16px;
  font-size:13px;  
  text-transform:uppercase;
  cursor: move;
  padding: 15px 0 5px;}

#actionplan h3 {  padding-top: 13px; }  

.description { font-size:12px; padding: 0 5px 5px 16px; }
.description a:hover { text-decoration:underline;}


#priority {
  right: auto;
  left: 10px;
  top: 54px;
  width:40%;
  background: url(img/cream_dust.png);  
  border: 2px solid #ccc;  }

#priority .plan section {
  margin-bottom:0;
  box-shadow:none;
  background: url(img/cream_dust.png);
  border-color: transparent; }

#priority li { min-height:22px; }
#priority li.child { padding-left: 40px; }
#priority .action-item-wrapper { padding: 2px 5px; }

#priority .column { 
  width:100%; 
  height: auto;
  padding: 0 9px 9px; }

#priority .column h3 {
  display: table;
  text-align: center;
  white-space: nowrap;}

#priority .column h3::before,
#priority .column h3::after{
  content: '';
  display: table-cell;
  position: relative;
  top: 5px;
  width: 45%;
  border-top: 4px solid;}
#priority .column h3::before { right: 6px; }
#priority .column h3::after { left: 6px; }

#priority .column.personal h3::before,
#priority .column.personal h3::after{ border-color: #5ca000;}

#priority .column.social h3::before,
#priority .column.social h3::after{ border-color: #d15924;}

#priority .column.professional h3::before,
#priority .column.professional h3::after{ border-color: #008eb9 ;}

.personal,
.personal h2 {color: hsl(82, 100%, 32%);} 
.social,
.social h2 {color: hsl(26, 100%, 38%);}
.professional,
.professional h2 {color: hsl(194, 100%, 38%);} 

.personal h3,
.personal h3 a { color:hsl(84, 100%, 32%); }
.social h3,
.social h3 a { color:hsl(26, 100%, 40%); }
.professional h3,
.professional h3 a { color:hsl(194, 100%, 40%); }

.personal h3,
.social h3,
.professional h3{
  width: 100%;
  font-size: 12px; }

.personal .description a {color: hsla(82, 100%, 29%,0.7);}
.social .description a {color: hsla(26, 100%, 38%, 0.7);}
.professional .description a {color: hsla(194, 100%, 36%, 0.7);}

#priority .action-items-container {border-top: 0;}

h3 a{  
  font-size: 13px;
  transition: 0.1s;
  text-transform: uppercase; }
h3 a:hover{
  padding: 0 8px ;
  background-color: #f1f1f1 !important;
  cursor: text; }

h3 .parent_toggle {
  margin-right: 8px; 
  margin-top: -6px;
  opacity: 0.5;
  background-size: 23px 91px;
  cursor: pointer; }   

section h3 .parent_toggle {display: none;} 

section.collapsed h3 .parent_toggle,
section:hover h3 .parent_toggle {display: block;} 

h3 .parent_toggle.collapsed { background-position: -3px -21px; opacity: 0.25 !important; opacity: 0.25s ease-in-out; }
h3 .parent_toggle.expanded { background-position: -3px 2px;  }
 
 

#priority .action_title { color: #333; }
#priority .action-item-wrapper .action_title, 
#priority .nested-action-item-wrapper .action_title{ max-width: 100%; }

#priority_plan {
  position:relative;
  width:60%;
  left:40%;
  margin:20px 0 0 5px; }

#priority_plan h2 {
  background:url(img/focus.svg) no-repeat center 6px; 
  background-size: 55px;
  margin:0 auto;
  text-align:center;
  font-size:22px;
  padding:73px 0 5px; 
  letter-spacing: 0;
  text-transform: uppercase; }

#priority_plan h2 b {
  display: block;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  }

#priority_plan ul {
  position:relative;
  margin:0 20px 10px 10px;
  padding:13px 10px 15px;   }

#priority_plan li {
  position: relative; 
  border-radius: 8px;
  margin: 0 0 8px;
  overflow: auto;
  cursor: move; }

#priority_plan li a { color:#000; }

#priority_plan li.next_priority {
  background:#f7f7f7;
  box-shadow: 0 0 4px 0 #bbb; }

#priority_plan li.active .priority_date,
#priority_plan .priority_date:hover {
  background-color:#fff;
  border-right:2px solid #eee; }

.priority_date {
  font-size:11px;
  width:110px;
  float:left;
  padding:10px 0 0 11px;
  height:40px;
  background:#f0f0f0; 
  border-top-left-radius:  8px;
  border-bottom-left-radius:  8px;
  font-weight:bold;
  border-right:2px solid #f0f0f0; }

.date_picker {
  position:absolute;
  top:121px;
  background:#fff;
  z-index:9;
  padding:10px 5px;
  border-top: 11px solid #333;   
  border-radius: 8px;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1); }
.date_picker:after {
  position: absolute;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #333;
  border-style: solid;
  border-width: 9px;
  content: "";
  height: 0;
  left: 16px;
  top: -26px;
  width: 0;
  display: block;
  z-index:8;  }

.date_picker h3 { text-transform:uppercase; font-weight:normal;}

.date_picker p { margin:10px; padding-top:10px; border-top:2px solid #999;}
.date_picker .remove_timeframe { padding:5px 0; text-decoration:underline; float:left;}
.date_picker .button { padding:7px 11px; float:right; font-weight:bold;}
.date_picker .button.save { background:#333; color:#fff;}
.date_picker .button.cancel { background:#ccc; margin:0 9px; color:#555;}
.date_picker .selected { background:#333; color:#fff;}
.date_picker .selected:hover { color:#111;}

.scroll {
  background:#888;
  padding:5px 8px 7px;
  color:#fff;
  font: 17px bold Arial, Helvetica, sans-serif;
  line-height:14px;}
.scroll:hover { background:#333 ;}
.back { float: left;}
.forth { float: right;}

.date_picker table {
  float:left;
  margin:0 10px;
  font-family: 'Oswald', sans-serif;
  font-size:12px;
  font-weight:300;
  letter-spacing:1px;
  border-spacing: 1px;}

.date_picker table td {
  width:26px;
  padding: 2px 0 3px;
  font-size: 11px;
  text-align:center; }
  
.date_picker table td.day {
  padding: 2px 0; }

.date_picker section { overflow:auto;}

.date_picker .day { 
  border-radius: 4px;}
.date_picker .day:hover {
  background:#ccc;
  cursor:pointer;}
.date_picker .month span { display:block; padding:3px; }
.date_picker .month {
  background:#999;
  color:#fff;
  border-bottom:2px solid #fff;
  font-size:13px;
  font-weight:400; }

.unselectable { color: #bbb; cursor:default; }


.priority_date .month,
.priority_date .day { font-family:  'Oswald', sans-serif; font-size:11px; font-weight:300; line-height:0; }
.priority_date .year { color:#bbb; font-weight:bold; letter-spacing:-1px; font-size:11px; letter-spacing:1px; }

.priority_date div{ width: 35px; float:left;  text-align:center; text-transform:uppercase; line-height:13px;}
.priority_date .dash{width: 18px; float:left; text-align:center; padding-top:5px;}
.priority_date.none_selected { background:url(img/cal.png) no-repeat 12px 9px #f6f6f6; width:48px;}

.priority_item {
  float:left;
  padding:11px; }
.priority_item a:hover { 
  background: #fff; 
  outline: 1px solid #ccc;
  padding: 0 2px;
  text-decoration: none;
  border-radius: 3px;
  position: relative;}

#priority_plan li input { 
  border-radius:  3px;
  border: 0;
  box-shadow: 1px 1px 2px 0 #ccc inset;
  background:#eee;
  padding:5px 8px;
  position: relative;
  margin-left:10px;
  margin-right: 40px;
  top:7px; }

#priority_plan li.current_priority {
  background: #fff;
  font-weight:bold;
  border:3px solid #333;
  box-shadow: 0 0 4px 0 #bbb; }

#priority_plan li.current_priority input {
  top:9px;
  padding:7px 10px;
  font-size:14px;
  font-weight:bold;}

#priority_plan li.current_priority .priority_date {
  height:48px;
  padding:14px 0 0 11px;
  background: url(img/cal.png) no-repeat 12px 13px #f9f9f9;}
#priority_plan .priority_date:hover {
  background-color:#fff;
  border-right:2px solid #eee; }

#priority_plan li.current_priority .priority_item { padding:17px; }
#priority_plan li:hover,
#priority_plan li.next_priority:hover,
#priority_plan li.active {
  left:-1px;
  top:-1px;
  background:#fff; }
#priority_plan li.empty {
  font-size:15px;
  background:#d4d4d4;
  border: 2px dashed #bababa;
  padding:16px;
  text-align:center;
  cursor:default;
  left:0;
  top:0;
  color:#999;
  margin:10px 2px ;
  top:2px;
  position: relative;}
#priority_plan li.empty.empty_active {
  border: 2px solid #000;
}

#priority_plan p {
  font-size: 21px;
  line-height: 28px;
  }
#priority_plan h1 b {
  display: block;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin-top: 3px;}

.remove {
  float:right;
  background:url(img/check.svg) no-repeat 5px -367px;
  line-height:18px;
  width:26px;
  height:28px;
  margin:6px; 
  border-radius: 4px;
  color:#777; }
.remove:hover { background-color: #e0e0e0; }

#priority_plan li.current_priority .remove { margin: 10px; }

.top_priority {
  margin: 0 9px 7px;
  overflow:auto;
  border:3px solid #333;
  background:#f2f2f2;
  padding:7px ; 
  border-radius:  5px;
  font-weight:bold;
  font-size:12px;
  color:#000 !important;
  background:#fff; }
.top_priority .icon {
  float:left;
  width: 20px;
  height:14px;
  background: url(img/focus.svg) no-repeat #fff;
background-size: 14px;}
.top_priority_date { font-weight:normal; font-size:11px; color:#888;}
.top_priority_date.overdue { color:red;}



.plan h2 {
  font-size: 18px; 
  margin: 0 2px 11px;
  padding: 4px 0 2px 2px;
  border-bottom: 4px solid;
  text-align: center;}


.create_area {
  padding:15px 15px 10px;
  overflow:auto; }
.create_area input { 
  border-radius: 4px;
  background: #ebebeb;
  padding:6px 0 6px 9px;
  font-size:15px;
  border: 0;
  width:100%;
  margin-bottom:8px;
  box-shadow: 1px 1px 2px 0 #dedede inset;
  color: #333; }
.create_area .button { 
  border-radius:  4px;
  border: 0;
  padding:8px 15px;
  color:#fff;
  float:right; }
.create_area {
  background-color: #fff;}

/*--------------------------
Area Page
--------------------------*/

#lifearea { margin-top:80px;}

h1 {
  font-family: 'Oswald', sans-serif;
  font-size:28px;
  margin:0 0 0 15px;
  padding:25px 8px 20px;
  line-height:0;}

.area {
  background:#f5f5f5; 
  padding-top: 1px; 
  height: 80px; 
  position:relative;
border-bottom: 1px solid #fff; }
.area a { color:inherit;}
.area a:hover { text-decoration:underline;}
.area .description { margin:5px 8px; font-size:14px; }




#lifearea .note { margin-bottom:12px; padding-bottom:7px; background:#fff;}
#lifearea .note h2 {
  text-transform:none;
  padding: 0;
  font-size:15px;
  letter-spacing:0;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight:bold;}
#lifearea .note h2 a:hover { 
  background: #fff; 
  outline: 1px solid #ccc;
  padding: 0 2px;
  text-decoration: none;
  border-radius: 3px;
  position: relative;}
#lifearea .note .note_content { padding:2px 10px 10px !important; margin: 2px 10px 0 !important;  }

.note_content a { text-decoration:underline; color:#09c;}

.note_menu {
  position:relative;
  float:right;
  width:28px;
  height:27px;
  padding:5px 6px;
  margin:8px 7px;
  color:#bbb;
  background:url(img/check.svg) no-repeat 6px -336px; 
  border-radius: 4px;}
.note_menu:hover,
.note_menu.active { background-color:#d3d7da; color:#444;}
.note_menu.active { 
  border-bottom-right-radius: 0;
  border-bottom-left-radius:  0;}

.note_menu_dropdown {
  position:absolute;
  right: 7px;
  top:35px;
  width:125px;
  background-color:#d3d7da; 
  border-radius: 4px; 
  border-top-right-radius: 0;
  padding:5px 0;
  z-index:999;}

.note_menu_dropdown p {  padding:8px 0; font-weight:bold; font-size:11px; text-transform:uppercase;}
.note_menu_dropdown a{
  display:block;
  margin:0 5px 1px;
  padding:8px;
  background:#e0e3e5;
  color:#898a8b;
  font-weight:bold;
  font-size: 12px;}
.note_menu_dropdown a:hover { background:#ecedef;}

.set_color { background:#eee; margin:0 5px 1px; overflow:auto; padding:0 0 3px 8px;}
.swatch{ width: 30px; height:30px; border:2px solid #fff; padding:0; margin:2px 5px 5px 0 !important; float:left;}
.swatch.green { background-color:#ecfadf;}
.swatch.purple { background-color:#e8defb;}
.swatch.red { background-color:#fce9ce;}
.swatch.yellow { background-color:#fefee1;}
.swatch.blue { background-color:#e2f4ff;}
.swatch.white { background-color:#fff;}
.swatch.selected { border-color:#999;}

.note.green {
  background-color:#ecfadf !important;
  box-shadow: 1px 1px 3px 0 #aaa, inset -5px -5px 90px 0 #eefbe2; }
.note.purple {
  background-color:#e8defb !important;
  box-shadow: 1px 1px 3px 0 #aaa, inset -5px -5px 90px 0 #d8cbf0; }
.note.red {
  background-color:#ffdeb5 !important;
  box-shadow: 1px 1px 3px 0 #aaa, inset -5px -5px 90px 0 #ffdfa2; }
.note.yellow {
  background-color:#fefee1 !important;
  box-shadow: 1px 1px 3px 0 #aaa, inset -5px -5px 90px 0 #f2f2d6; }
.note.blue {
  background-color:#e2f4ff !important;
  box-shadow: 1px 1px 3px 0 #aaa, inset -5px -5px 90px 0 #d4eaf7; }

.note header { padding:17px 20px 8px; cursor:move;}
.note header input {
  font-size:15px;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight:bold;
  color:#444;
  letter-spacing:0;
  padding:5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 0 #ddd inset;
  padding: 5px 24px 5px 5px;
  width:100%; }

.note textarea { background:none; border:1px solid transparent; }


#lifeplan .tabs .middle {
  background:url(img/arrow_expand.svg) no-repeat right -127px #ddd;
  padding:9px 25px 8px 13px;}
#lifeplan .tabs .middle:hover {
  background-color: #cfcfcf;}
#lifeplan .tabs .middle.selected {
  background-color:#c0c0c0;
  padding-top:9px;}
#lifeplan .tabs .middle.active {
  background:url(img/arrow_expand.svg) no-repeat right 12px #333;
  color:#fff;
  box-shadow:none;}



.add_field {
  background: #ddecf1;
  padding: 11px 9px;
  position: relative;
  margin-top: -1px; }
.add_field a { margin-right:12px; margin-top:12px; }
.add_field input {
  color: #333333;
  border-radius: 5px;
  width: 100%; 
  padding: 7px 24px 7px 8px;
  box-shadow: 1px 1px 2px 0 #eee inset;
  background-color: #fff;
  border: 1px solid #cad9de; }

/* NOTICES */

.archive_checked { 
  border-radius:  5px;
  background:#222;
  float:right;
  padding:8px 9px;
  color:#eee;
  font-weight:bold;
  font-size:11px;
  position:relative; }
.archive_checked:active { left:1px; top:1px;}
#lifeplan .archive_checked { 
  padding: 9px; 
  margin-left:5px;}

.filter { 
  border-radius:  5px;
  float:right;
  font-size:12px; }
.filter:hover,
.filter.expanded { background:#333; color: #fff; }

.filter p { 
  float:left; 
  padding:10px 8px 9px 10px; 
  font-size:11px; 
  text-transform:uppercase; 
  font-weight:bold; 
  color:#777; 
  cursor:pointer;}
.filter p:hover{ color: #ddd;}
.filter a { 
  float:left; 
  padding:9px 16px 8px 19px; 
  background-image:url(img/check.svg); 
  background-repeat: no-repeat ;
  color:#aaa; }

.filter.expanded p { color: #ddd; }

.toggle_on { background-position: 1px -508px; color:#333; }
.toggle_off { background-position: 1px -539px; color:#999; }


.area_edit { position:relative;}
.area_edit a,
.add_action a,
.add_field a,
.add_event_field a {
  position:absolute;
  right: 0;
  top:0;
  width:20px;
  height:29px;
  background:url(img/enter.gif) no-repeat 0 11px; }
.add_event_field a { top: 35px; right:15px; }
.area_edit input {
  border: 0; 
  border-radius: 5px;
  background: #f2f3f5;
  box-shadow: 1px 1px 2px 0 #e4e7e9 inset;
  font-family: Arial, Helvetica, sans-serif;
  padding:7px 24px 7px 8px; }

.area_edit.area_name { margin: 10px 10px 5px; }
.area_edit.area_details { margin: 0 10px 0; }

.area_edit.area_name input  {
  text-transform:uppercase;
  font-size:13px;
  font-weight:bold;
  width:100%; }
.area_edit.area_details input { width:100%; font-size:12px; }

.personal .area_edit input {color:#5ca000;}
.social .area_edit input {color:#d15924;}
.professional .area_edit input {color:#008eb9;}

.area .area_edit {padding-left:13px; width:400px;}

.area .area_edit.area_name a { height:40px; background-position: 0 17px; }


.area input  {  box-shadow: 1px 1px 2px 0 #ddd inset; background:#eaeaea;}
.area .area_name input {
  font-size:26px;
  font-family: 'Oswald', sans-serif;
  text-transform:none;
  padding:0 24px 1px 6px;}



.area_menu {
  position:absolute;
  right: 36px;
  float:right;
  width:28px;
  height:27px;
  padding:5px 6px;
  margin-top:6px;
  color:#bbb;
  background:url(img/check.svg) no-repeat 6px -336px; 
  border-radius: 4px;}

.area_menu:hover,
.area_menu.active {
  background-color:#d3d7da; 
  color:#666;}

.area_menu.active { 
  border-bottom-right-radius: 0;
  border-bottom-left-radius:  0;
  height:28px; }

.area_menu_dropdown {
  position:absolute;
  right: 7px;
  top:34px;
  background-color:#d3d7da; 
  border-radius: 4px;
  padding:5px 0;}
.area_menu_dropdown a{
  display:block;
  margin:0 5px 1px;
  padding:8px 8px 8px 25px;
  background: url(img/check.svg) no-repeat #eee;
  color:#888;
  font-weight:bold;
  font-size: 12px;}
.area_menu_dropdown a:hover { background-color:#fff;}
.area_menu_dropdown a.delete {background-position: 6px -602px ;}
.area_menu_dropdown a.edit{ background-position: 6px -420px;}
.area_menu_dropdown a.pause{background-position: 5px -105px ;}
 

a.area_activate {
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0; }

.view,
.view p{ float:right; color:#999; text-transform:uppercase; font-size:11px; font-weight:bold; padding:2px;}
.view p { padding:7px;}
.view a{
  float:right;
  width:34px;
  height:28px;
  background-image:url(img/view.png);
  background-repeat:no-repeat;
  background-blend-mode: multiply ;
  margin-left:2px; 
  border-radius: 4px; }
.view a:hover { background-color:#efefef; }
.view a.selected { background-color: #ddd; }
.columns2 { background-position: 7px 6px; }
.columns3 { background-position: 7px -68px; }


/*---- Month View ----*/
.schedule_month .day_content { position:relative; }
.schedule_month .events_wrapper { 
  position: absolute; 
  margin-top:21px; 
  right:0;  
  left:0;
  overflow: hidden; }
.schedule_month .event { cursor:pointer; }
.schedule_month .event.regular {
  height:18px ;
  min-height:18px ;  }

.schedule_month .event a {
  flex: 1; 
  font-size:12.3px; 
  display: inline-block;
  float: none; }

.schedule_month .event.fullday { 
  white-space: nowrap; 
  line-height: 12px;
  min-height: 16px;
  height: 16px;
  position:relative;
  border:0;
  background:none;
  width: fit-content;
  clear: both; }
 

.schedule_month .event.fullday.personal {color:#5ca000;}
.schedule_month .event.fullday.social {color:#d15924;}
.schedule_month .event.fullday.professional {color:#008eb9;}

.schedule_month .event.create { 
  line-height:12px; 
  min-height:19px; 
  height:19px; 
  padding:2px 3px; }

.schedule_month .event.create.hint { color:#777;}

.monthday_active { background:#73899a; background:rgba(115,137,154,0.2);}

.more_events:hover { text-decoration:underline; cursor:pointer;}
.more_events:before { content: "+ ";}
.more_events { font-size: 10px; margin:4px 5px; float:left;  }

.view_all_events {
  width:225px;
  position:absolute;
  background:#fff;
  width:200px;
  z-index:11;
  border:3px solid #666;
  overflow:auto;
  padding:3px 3px 6px;}
.view_all_events header .date { font-weight:bold; float:left; padding:3px;}

.view_all_events header { padding-bottom:3px; overflow:auto;}

.monthview_allday .label {
  margin: 1px 1px 0 0;
  height:19px;}
  
.monthview_allday .label_text {
  margin:1px;
  padding:3px 2px 0;
  font-weight:normal;
  font-size:11px;}

/*---- ALLDAY MOCKUP ----*/

.allday_mockup a.collapse_allday_events{
  position:absolute;
  left:14px;
  top:15px;
  width: 15px;
  height:15px;
  background:url(img/arr-big-2.gif) no-repeat ;}
.allday_mockup a.collapse_allday_events.collapsed { 
  top: 15px;
  left: 14px;
  background:url(img/arr-big-2.gif) no-repeat 0 -16px;}

.allday_mockup .schedule_header { height:87px; border-bottom: 1px solid #ccc;}
.allday_mockup .schedule_body,
.allday_mockup #mask,
.allday_mockup #mask1 { top:87px;}


.schedule_header .alldayevent {
  position:relative;
  height:21px; 
  vertical-align: top; }

.alldayevents {
  background: #eee;
  overflow: auto;
}  

.schedule_header .event{ 
  display: flex; 
  float: none;
  flex-wrap: nowrap;
  height:18px; 
  min-height:18px;
  min-width: 30px;
  width: fit-content; 
  margin:1px 0 1px 2px; 
  padding: 5px 4px;
  border:0;
  border: 1px solid transparent;
  clear: both;
  transition: 0.1s; } 
.schedule_header .event:hover { opacity: 1; }
 

.schedule_header .event.personal { color:#5ca000; }
.schedule_header .event.social {  color:#d15924; }
.schedule_header .event.professional { color:#008eb9; }
.schedule_header .event.neutral { color: #666; }

.create.schedule_header .event {  
  overflow:auto;
  cursor:text; }
.schedule_header .event.holiday {
  background: none;
  color:#aaa;}
.holiday { cursor:default !important; font-weight:bold; border: 0 !important;}

ul.life-area-items-container { height: 100%;}


::-webkit-input-placeholder { font-style: italic; opacity: 0.5; font-weight: normal;}
:-moz-placeholder { font-style: italic; opacity: 0.5; font-weight: normal;}
::-moz-placeholder { font-style: italic; opacity: 0.5; font-weight: normal;}
:-ms-input-placeholder { font-style: italic; opacity: 0.5; font-weight: normal;}

.empty_actionitems .add-action-item-link {
  display:block;
  padding:10px 10px 0;
  font-size:12px;
  color: #666;  
  text-align: center;}
  
a.action_title:hover,
.area a:hover,
.description a:hover,
h3 a:hover {
  background: #fff; 
  outline: 1px solid #ccc;
  padding: 0 3px;
  text-decoration: none;
  border-radius: 3px;
  position: relative;}
.empty_actionitems .add-action-item-link:hover { color: #84bdd7; }

h3 a:hover { padding: 0 7px; }


.add_note,
.add_note:hover{
  font-size:11px;
  font-weight:bold;
  color:#ddd !important; 
  border-radius: 4px !important; 
  background:url(img/check.svg) no-repeat 6px -453px #444;
  position:relative;
  margin:40px 10px 0;
  float:right;
  padding: 6px 9px 6px 26px !important;
  text-decoration: none !important;}

.add_note:hover {
  background:url(img/check.svg) no-repeat 6px -453px #666 !important; 
  outline: none !important;}

.add_note:active { 
  left:1px;
  top:1px; }
 

body.calendar .action-plan-item.ui-sortable-helper:hover {
  display: block;
  text-indent: 5px;
  width: 200px !important;
  min-height: 30px !important;
  font-weight: bold;
  border-radius: 3px; 
  border: 1px solid #c4c4c4;
  color:#555;
  background: #eff5f7;}
.action-plan-item.ui-sortable-helper .action_title:hover  { text-decoration: none; margin: 10px;}

body.calendar .action-plan-item.ui-sortable-helper .action_menu_note,
body.calendar .action-plan-item.ui-sortable-helper .action_state,
body.calendar .action-plan-item.ui-sortable-helper .action_menu_delete {display: none;}


.show-hidden-events { font-size: 11px;}

.modal-content tr { padding: 3px;}
.modal-content button { padding: 5px 10px;}  

.modal-content {  
    border-radius: 6px;
    background: #f0f0f0;
    box-shadow: 1px 1px 5px 0 #111;
    left: 50%;
    top: 20%;   
    margin-left: -300px;
    overflow: auto;
    position: fixed; 
    width: 600px;
    z-index: 999999;}
.modal-content h3 { 
  margin: 20px 20px 15px;  
  font-family: "Oswald",sans-serif; 
  font-weight: normal;
  font-size: 22px;}
.modal-content ul {  margin: 20px 0;}
.modal-content li {
    border: 3px solid #ddd;
    border-radius: 8px;
    margin: 10px 20px;
    padding: 15px;}
.modal-content li a:hover { text-decoration: underline;}
.modal-content a.email { color: #000; font-weight: normal; padding-left: 3px;}
.modal-content nav {
    background: #e7e7e7 url("img/grey_light.jpg") repeat scroll 0 0;
    font-family: "Oswald",sans-serif;
    box-shadow: 0px -1px 3px 1px #d5d5d5 inset;
    overflow: auto;
    padding: 10px 10px 0;}
.modal-content nav a {
    border-radius: 6px 6px 0 0;
    color: #666;
    float: left;
    font-size: 16px;
    margin-right: 8px;
    margin-top: 8px;
    padding: 6px 20px 4px;}
.modal-content nav a:hover { background: #c7c7c7 none repeat scroll 0 0;}
.modal-content nav a.active {
    background: #f0f0f0 ;
    box-shadow: 0 1px 4px 0 #bbb;
    color: #111;
    margin-top: 3px;
    padding: 10px 20px 5px;
    font-weight: normal;;}
.modal-content .textfield, .modal-content select { 
    background: #e4e4e4 none repeat scroll 0 0;
    border-color: #ccc #ddd #ddd #ccc;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #666;
    margin: 3px;
    padding: 4px 9px;}

.modal-content table { padding: 30px; color: #666;}   
.modal-content p { padding: 10px 20px 20px;}
.modal-content ul a,
.modal-content p a { font-weight: bold; color: #279fcd; text-decoration: underline; }

.import_error,
.import_notice { padding:  0 20px;}

.modal-content .textfield:focus, .modal-content textarea:focus { background: #dbdbdb none repeat scroll 0 0; color: #000;}
.modal-content textarea { 
    background: #e4e4e4 none repeat scroll 0 0;
    border-color: #ccc #ddd #ddd #ccc;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #666;
    font: 15px;
    height: 60px;
    margin: 10px 0 20px;
    padding: 5px;
    width: 500px;
}
.modal-content label {  display: block; padding: 6px 0 0 5px;}
.modal-content option {  padding: 1px 5px 1px 3px;}
.modal-content select {  padding: 4px;}
.modal-content .bullet {  padding: 0 6px;}
.modal-content section {  margin: 10px 20px 30px;}
.modal-content a.right {  float: right;}
.modal-content .button { 
    background: #666 ; 
    border-radius: 4px; 
    border-width: 0;
    color: #eee;
    cursor: pointer;
    padding: 6px 12px;
    position: relative;
}
.modal-content .button:hover { 
    background: #333;    
    text-decoration: none;
}
.modal-content .button:active {
    background: #b8b8b8 none repeat scroll 0 0;
    border-color: #aaa #fff #fff #aaa; 
    border-style: solid;
    border-width: 1px;
    left: 1px;
    top: 1px;
}
.modal-content table .button { float: left; margin: 8px 0 0 3px;}
.modal-content table img {    float: right;    margin: 2px 17px 0 0;}
.owner {    overflow: auto;}
.owner div {
    background: url(img/logo_grey.png) no-repeat scroll 0 0;
    float: right;
    padding: 11px 20px 10px 75px;
}
.renewing {
    background: url(img/bg_entry_list_hover.jpg) repeat scroll 0 0;
    border-color: #e9e9e9 !important;
}
.modal-content .date { color: #000;}
.auto-renew {   float: right;}
.auto-renew div {   float: left;  margin-left: 3px;}
.cancellation {  background: #fff none repeat scroll 0 0;  border-color: #000 !important;}
.cancellation a {    text-decoration: underline;}
.cancellation .button {    text-decoration: none;}
.modal-content .back {  margin: 0 20px;}
a.warning {    color: #000;    float: right;    padding: 6px;}
a.warning:hover {   color: #d30000;   text-transform: uppercase;}
a.warning.button {
    background: #d30000 none repeat scroll 0 0 !important;
    color: #fff !important;
    float: none !important;
    margin: 0 auto;
    text-align: center;
    width: 300px !important;}
.warning {    color: #d30000;}
.credit_card .warning { background: url(img/050.png) no-repeat scroll 0 2px;  margin-top: 5px;  padding: 0 0 0 20px;}
.warning a {    color: #d30000; text-decoration: underline;}

.x {
    background: #666 ;
    border-radius: 3px;
    color: #ddd;
    float: right;
    font: bold 12px Verdana,Geneva,sans-serif;
    margin: 15px;
    padding: 1px 6px 4px;}
.x:hover { background: #333; } 

#Account p { padding: 6px 0;}
#Account table p {    padding: 0;}
.thankyou { font-size: 20px; padding: 30px; text-align: center;}
.account_info .textfield { width: 160px;}
.account_info label { padding: 0 4px 0 0 !important; text-align: right;}
#export { display: none !important;}
#export p { padding: 10px 0;}
.public_link {
    background: rgba(0, 0, 0, 0) url("/assets/default/bg_publiclink.gif") repeat scroll 0 0;
    left: 0;
    padding: 4px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0; }
#Account .toggle { float: left;}
#Account li { overflow: auto;}
.cancel_account { color: #000 !important;}

.renewing .toggle,
.renewing .toggle:hover {
    background: rgba(0, 0, 0, 0) url("img/toggle.png") repeat scroll 0 0;
    color: #555;
    float: right;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 11px;
    padding: 4px 0 5px;
    text-align: left;
    text-shadow: 1px 1px 0 #d6d6d6;
    width: 46px;
    text-decoration:none; }
.renewing .toggle.left.auto_renew_on {
    background-position: 0 -42px;
    color: #323f08;
    text-indent: 22px;
    text-shadow: 1px 1px 0 #afc855; }
.renewing .toggle.right.auto_renew_off {
    background-position: 0 -63px;
    color: #840300;
    text-indent: 7px;
    text-shadow: 1px 1px 0 #ff6962; }

.life-area-sortable-placeholder {
    background: rgba(204, 204, 204, 0.9);
    opacity: 0.6;
    border-radius: 9px;
    border: 3px dashed rgba(170, 170, 170, 0.7); }
.ui-sortable-placeholder {
    background: rgba(204, 204, 204, 0.9);
    opacity: 0.3;
    border-radius: 9px;
    border: 2px dashed rgba(170, 170, 170, 0.7);   }  


.event_note [contenteditable=true]:empty:before {
    content: attr(placeholder);
    color: #aaa; }
.new-event-note { cursor: text; color:#888; }
.new-event-note:hover {
  background: #fff;
  color: #00aced;
  text-decoration: none;
  border-radius: 3px;
  position: relative; }

template[LoadingSplash] img {width: 100px;}
.loading-message {display: none;}

.ui-resizable-n{top: -3px; height: 10px;}
.ui-resizable-s{bottom: -3px; height: 10px;}

.ui-resizable-handle.ui-resizable-s:hover,
.ui-resizable-handle.ui-resizable-n:hover {
  background: inherit; }



.add-life-area-link { z-index: 99; }

.add-task-list { 
  width: 30px; 
  margin: 5px auto 10px;
  display: none; }
#actionplan:hover .add-task-list { display: block; } 
.add-task-list .add { 
  right: auto;  
  display: block; 
  position: relative; } 
  
.content > .add:hover { background-color: rgba(255,255,255,0.3); }

.add-life-area-link,
.add-task-list .add { color: rgba(0,0,0,0.3); z-index: 999; }

.add-life-area-link:hover,
.add-task-list .add:hover { background-color: rgba(255,255,255,0.3); }

.mini_lifeplan .top_priority > .add { right: 10px; top:15px; color: rgba(0,0,0,0.5); }

.event-task .checkbox{ 
  width: 13px; 
  height: 13px;  
  cursor: pointer;  
  border-radius: 3px;
  border: 1px solid #bbb;
  background: #fefefe;
  display: inline-block; }  

.event-task .checkbox:hover { 
  background: url(img/check.gif) no-repeat -3px -17px #fefefe;
  background-size: 148%; }

.event-task.done .checkbox { 
  display: inline-block;
  border-color: transparent; 
  background: url(img/check.gif) no-repeat -3px -18px transparent; }
.event-task.done .checkbox:hover { border-color: transparent;} 
.event-task.done a { text-decoration: line-through; } 

.schedule_header .event-task .checkbox {
  flex-shrink: 0; 
  margin: -1px 3px 0 0; }

.at-signup {
  color: #2c94da;
}

#at-forgotPwd {
  margin: 5px 0;
  display: block;
  text-align: right;
}
.at-input input:not([type="button"]):not([type="submit"]) {
  width: 100%;
}
.auth-button {
  background: 	#ff9966 none repeat scroll 0 0 !important;
  color: #fff !important;
  float: none !important;
  margin: 0 auto;
  text-align: center;
  max-width: 400px !important;
  width: 100%;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px; 
  border-width: 0;
}

input[id^="at-field-"] {
  background: #e4e4e4 none repeat scroll 0 0;
  border-color: #ccc #ddd #ddd #ccc;
  border-image: none;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  color: #666;
  margin: 3px;
  padding: 4px 9px;
  max-width: 400px;
}
.column.auth-form {
  width: 100%;
  max-width: 400px;
  float: none;
  margin: auto;
}
.auth-form .segment {
  padding: 20px;
  background: #f0f0f0;
  border-radius: 4px;
  margin: 20px auto;
  max-width: 400px;
  width: 100%;
}
.at-title h2 {
  padding-bottom: 0px;
} 

#actionplan .column {
  width: 100%;
  height: unset; }

#actionplan #lifemap .column ul.life-areas-container { min-height: 0 !important; }

.mini-lifeplan section { margin-bottom: 7px; }


.print-hide {
  position: absolute;
  right: 12px;
  color: #888;
  font-weight: normal; } 


/* ------EVENT STATUS ------ */

.eventStatus { 
  display: flex; 
  gap: 8px;
  padding: 8px;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  background: #f4f4f4;
  margin: 8px 0 0; }
.eventStatus li {
  cursor: pointer;
  padding: 3px 7px;
  border: 1px solid transparent;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px; 
  color: #666;
  border-radius: 4px;}  
.eventStatus li:hover,
.eventStatus li.selected { outline: 1.5px solid #555; outline-offset: 1px; }

.eventStatus .esRegular { 
  border-left: 4px solid #999;
  background-color: #ddd;}
.eventStatus .esTentative { 
  box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.11); 
  border-color: #666;
  border-style: dashed; }
.eventStatus .esPassive {   
  background-image: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 2px, transparent 2px, transparent 5px);  
  border-left: 4px solid #c8c8c8; }
.eventStatus .esMoment { 
  background: #666;  
  color: #fff;}


.es_tentative { border: 1.4px dashed; }
.es_tentative.event.personal { 
  box-shadow: inset 0 0 27px 9px rgba(102, 165, 26, 0.11); 
  background: hsla(78, 47%, 48%, 0.07); } 
.es_tentative.event.social { 
  box-shadow: inset 0 0 27px 9px rgba(167, 82, 21, 0.11); 
  background: hsla(26, 68%, 50%, 0.06);
  color: hsl(26, 100%, 35%);  } 
.es_tentative.event.professional { 
  box-shadow: inset 0 0 27px 9px rgba(34, 111, 107, 0.09); 
  background: hsla(194, 59%, 59%, 0.07);
  border-color: hsl(194, 100%, 32%);   }  
.es_tentative.event.neutral { 
  box-shadow: inset 0 0 27px 9px rgba(0, 0, 0, 0.06); 
  background: hsla(0, 0%, 77%, 0.06);
  border-color: hsla(0, 0%, 40%, 1) ; } 

.schedule_month .es_tentative.event {box-shadow: none;}


.es_passive { 
  border-radius: 0;
  background-color:  transparent !important;  } 
.es_passive.event.personal { 
  background-image: repeating-linear-gradient( 45deg, rgba(102, 165, 26, 0.13) 0px, rgba(102, 165, 26, 0.13) 2px, transparent 2px, transparent 5px); 
  border-color: hsla(78, 47%, 48%, 0.40); 
  color: hsl(82, 100%, 26%); } 
.es_passive.event.social {  
  background-image: repeating-linear-gradient( 45deg, rgba(167, 82, 21, 0.11) 0px, rgba(167, 82, 21, 0.11) 2px, transparent 2px, transparent 5px); 
  border-color: hsla(26, 68%, 50%, 0.40); 
  color: hsl(26, 100%, 35%);  }
.es_passive.event.professional {  
  background-image: repeating-linear-gradient( 45deg, rgba(34, 111, 107, 0.12) 0px, rgba(34, 111, 107, 0.12) 2px, transparent 2px, transparent 5px); 
  border-color: hsla(194, 59%, 59%, 0.40);
  color:hsl(194, 100%, 32%);  }
.es_passive.event.neutral {  
  background-image: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 2px, transparent 2px, transparent 5px); 
  border-color: hsla(0, 0%, 57%, 0.40); 
  color: hsl(0, 0%, 32%);   } 
  

.es_moment {
  background: transparent !important;
  border: 0;  
  border-top: 4px solid; 
  border-radius: 0;
  text-align: center;
  overflow: visible;} 
.es_moment .edit-event-title { 
  width: 100%;
  display: flex;
  flex-direction: column-reverse; 
  position: absolute; 
  bottom: 0; }
.es_moment .edit-event-title span { 
  color: #fff;
  padding:3px 9px 5px;
  margin:3px auto 10px;   
  border-radius:10px;}
.es_moment.event.personal { border-color: hsl(78, 66%, 40%);} 
.es_moment.event.personal .edit-event-title span {background: hsl(78, 66%, 40%);}

.es_moment.event.social { border-color: hsl(26, 64%, 46%); } 
.es_moment.event.social .edit-event-title span {background: hsl(26, 64%, 46%);}

.es_moment.event.professional {border-color: hsl(194, 67%, 49%); } 
.es_moment.event.professional .edit-event-title span {background:hsl(194, 67%, 49%);}

.es_moment.event.neutral {border-color: hsl(0, 0%, 48%);  } 
.es_moment.event.neutral .edit-event-title span {background: hsl(0, 0%, 48%);}

.schedule_month .es_moment {text-align: left;}
.schedule_month .es_moment .edit-event-title span { padding: 0 7px 1px; border-radius: 8px; margin-right: 0px !important; line-height: 17px;}

.event:hover:not(.event-task),
.event:hover:not(.create) { opacity: 0.65;} 

/* .event.personal:hover {border-color: hsla(75, 100%, 27%, 0.8); hsla(75, 100%, 29%, 1)}
.event.social:hover {border-color: hsla(26, 100%, 28%, 0.8);}
.event.professional:hover {border-color: hsla(194, 100%, 27%, 0.8);}
.event.neutral:hover {border-color: hsla(0, 0%, 36%, 0.8);}
  
.es_moment.event.personal:hover {border-color: hsla(78, 47%, 48%, 1);}
.es_moment.event.social:hover {border-color: hsla(26, 68%, 50%, 1);}
.es_moment.event.professional:hover {border-color: hsla(194, 59%, 59%, 1);}
.es_moment.event.neutral:hover {border-color: hsla(0, 0%, 57%, 1) ;} */