@import url("https://fonts.googleapis.com/css?family=Patrick+Hand+SC&subset=latin-ext");
@import url("https://fonts.googleapis.com/css?family=Patrick+Hand&subset=latin-ext");
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1; }

body {
  font-family: 'Patrick Hand', cursive;
  color: #282723; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Patrick Hand SC', cursive; }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  ul.dashed li:before {
    content: "\2013\a0";
    text-indent: -24px; }

.wrapper {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 0 0 0;
  /* responsive, see below */ }

.notebook {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f2eecb;
  background-image: url("../img/grid-dots.png");
  background-repeat: repeat;
  background-size: 24px;
  background-position: top 12px left 12px;
  min-height: 816px;
  border-style: hidden;
  padding: 12px;
  -webkit-box-shadow: 0 5px 10px 2px #ddd;
  box-shadow: 0 5px 10px 2px #ddd;
  border-radius: 6px;
  position: relative; }
  .notebook .content {
    padding-right: 216px; }
    .notebook .content.no-sidebar {
      padding-right: 0; }
    .notebook .content .header {
      text-align: center;
      height: 96px;
      width: 100%;
      margin-bottom: 24px; }
      .notebook .content .header.short {
        height: 72px; }
      .notebook .content .header.login {
        margin-top: 96px;
        margin-bottom: 24px;
        height: 120px; }
        .notebook .content .header.login .title h1 {
          font-size: 48px; }
      .notebook .content .header .arrow {
        display: inline-block;
        font-size: 48px;
        padding: 0 10px;
        height: 100%; }
        .notebook .content .header .arrow a, .notebook .content .header .arrow a:active, .notebook .content .header .arrow a:hover, .notebook .content .header .arrow a:visited {
          color: #282723;
          text-decoration: none; }
      .notebook .content .header .title {
        display: inline-block; }
        .notebook .content .header .title h1 {
          margin: 0;
          line-height: 48px; }
        .notebook .content .header .title h3 {
          margin: 0;
          line-height: 24px; }
          .notebook .content .header .title h3 .present {
            text-decoration: underline; }
    .notebook .content .task-list {
      margin: 0;
      border-collapse: collapse;
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
      font-size: 16px;
      line-height: 24px; }
      .notebook .content .task-list td {
        vertical-align: top;
        padding: 0px 4px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
      .notebook .content .task-list .task {
        width: 100%; }
        .notebook .content .task-list .task .block {
          height: 24px;
          width: 24px;
          text-align: center; }
          .notebook .content .task-list .task .block.option {
            cursor: pointer; }
        .notebook .content .task-list .task .tag {
          height: 24px;
          width: 120px;
          /* responsive, see below */
          text-align: left; }
        .notebook .content .task-list .task .concept {
          height: 24px;
          text-align: left;
          cursor: pointer; }
          .notebook .content .task-list .task .concept.strike {
            text-decoration: line-through; }
        .notebook .content .task-list .task .focus {
          height: 24px;
          width: 72px;
          /* responsive, see below */
          text-align: center;
          color: #777; }
          .notebook .content .task-list .task .focus.today {
            color: #282723; }
          .notebook .content .task-list .task .focus.overdue {
            color: #dd4b39; }
        .notebook .content .task-list .task button.plain {
          background: transparent;
          border: none;
          padding: 0;
          margin: 0;
          font-family: 'Patrick Hand', cursive;
          font-size: 16px;
          width: 100%;
          height: 100%;
          cursor: pointer; }
      .notebook .content .task-list tr.text-light {
        color: #777 !important; }
    .notebook .content .notebook-input {
      background-color: transparent;
      border: none;
      font-family: 'Patrick Hand', cursive;
      font-size: 16px;
      color: #4b4a46; }
      .notebook .content .notebook-input:focus {
        outline: none; }
    .notebook .content .login-box {
      width: 480px;
      margin: 0 auto; }
      .notebook .content .login-box .login-control {
        width: 100%;
        height: 48px;
        margin-bottom: 24px;
        font-family: 'Patrick Hand', cursive;
        font-size: 24px;
        line-height: 32px;
        padding: 0 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #4b4a46;
        border-radius: 10px;
        background-color: white; }
      .notebook .content .login-box .links {
        text-align: center; }
        .notebook .content .login-box .links a {
          line-height: 24px; }
    .notebook .content .exit-focus-mode {
      position: absolute;
      font-weight: bold; }
  .notebook .sidebar {
    margin: 0;
    padding: 0;
    width: 192px;
    position: absolute;
    top: 0;
    right: 12px;
    height: 100%;
    overflow: auto; }
    .notebook .sidebar .sidebar-content {
      padding-top: 36px;
      padding-left: 4px; }
      .notebook .sidebar .sidebar-content .profile .account-options a {
        line-height: 24px;
        display: inline-block; }
      .notebook .sidebar .sidebar-content .focus-mode-form .focus-date-input {
        font-family: 'Patrick Hand', cursive;
        font-size: 13px;
        border: 1px solid #282723;
        background: transparent;
        border-radius: 6px;
        padding: 0 0 0 3px;
        height: 24px;
        margin: 0; }
      .notebook .sidebar .sidebar-content .focus-mode-form .focus-date-button {
        border: 1px solid #282723;
        background: transparent;
        border-radius: 6px;
        padding: 0 3px;
        height: 24px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        font-size: 13px; }
      .notebook .sidebar .sidebar-content .share-list form {
        display: inline-block;
        float: right; }
      .notebook .sidebar .sidebar-content .share-list li {
        line-height: 24px; }
        .notebook .sidebar .sidebar-content .share-list li button, .notebook .sidebar .sidebar-content .share-list li button:hover, .notebook .sidebar .sidebar-content .share-list li button:visited, .notebook .sidebar .sidebar-content .share-list li button:active {
          color: #282723;
          font-family: 'Patrick Hand', cursive;
          font-size: 16px;
          text-decoration: none;
          border: 1px solid #282723;
          background-color: transparent;
          border-radius: 6px;
          margin: 0;
          padding: 0;
          cursor: pointer;
          width: 24px;
          height: 24px; }
        .notebook .sidebar .sidebar-content .share-list li button:hover {
          background-color: rgba(0, 0, 0, 0.075); }
      .notebook .sidebar .sidebar-content h2 {
        margin: 0;
        padding: 0;
        line-height: 24px; }
      .notebook .sidebar .sidebar-content a {
        line-height: 24px;
        display: block; }
      .notebook .sidebar .sidebar-content .spacer {
        display: block;
        height: 24px;
        width: 100%; }

/* SIDEBAR RESPONSIVE MOBILE */
@media only screen and (max-width: 1080px) {
  .notebook .content {
    padding-right: 0; }
  .notebook .sidebar {
    margin-right: -216px; }
  .open-sidebar .content {
    -webkit-filter: blur(2px) grayscale(75%);
    filter: blur(2px) grayscale(75%); }
  .open-sidebar .sidebar {
    margin-right: 0;
    right: 0;
    padding-left: 20px;
    background-color: #f2eecb;
    -webkit-box-shadow: 0 3px 10px 1px #777;
    box-shadow: 0 3px 10px 1px #777; } }

footer {
  width: 100%;
  margin: 30px 0 10px 0;
  text-align: center;
  font-family: 'Patrick Hand SC', cursive;
  color: #4b4a46; }
  footer a {
    color: #4b4a46;
    text-decoration: none;
    border-bottom: 1px dotted #4b4a46; }
  footer .copy {
    font-size: 14px; }
  footer .links {
    font-size: 12px; }
    footer .links a {
      margin: 0 5px; }

.modal-overlay {
  background: transparent;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  /* Embiggen */
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  /* prefix me */
  /* hidden */
  opacity: 0;
  pointer-events: none; }
  .modal-overlay .modal-wrapper {
    max-width: 576px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 0 0 0;
    /* responsive, see below */ }
    .modal-overlay .modal-wrapper .modal-content {
      position: relative;
      padding: 5px 10px;
      background-color: #f2eecb;
      border-radius: 6px;
      -webkit-box-shadow: 0 5px 10px 2px #ddd;
      box-shadow: 0 5px 10px 2px #ddd;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .modal-overlay .modal-wrapper .modal-content .top-buttons {
        position: absolute;
        right: 10px;
        top: 5px;
        float: right; }
        .modal-overlay .modal-wrapper .modal-content .top-buttons a, .modal-overlay .modal-wrapper .modal-content .top-buttons a:hover, .modal-overlay .modal-wrapper .modal-content .top-buttons a:visited, .modal-overlay .modal-wrapper .modal-content .top-buttons a:active {
          color: #282723;
          text-decoration: none; }
      .modal-overlay .modal-wrapper .modal-content .title {
        margin-bottom: 24px; }
        .modal-overlay .modal-wrapper .modal-content .title h1, .modal-overlay .modal-wrapper .modal-content .title h2, .modal-overlay .modal-wrapper .modal-content .title h3, .modal-overlay .modal-wrapper .modal-content .title h4 {
          margin: 0; }
      .modal-overlay .modal-wrapper .modal-content .focus-date h3 {
        margin: 0;
        display: inline; }
      .modal-overlay .modal-wrapper .modal-content .focus-date p {
        display: inline; }
      .modal-overlay .modal-wrapper .modal-content .focus-date form {
        display: inline; }
      .modal-overlay .modal-wrapper .modal-content .share h3 {
        margin-bottom: 0; }
      .modal-overlay .modal-wrapper .modal-content .share form {
        display: inline-block; }
        .modal-overlay .modal-wrapper .modal-content .share form .btn-as-text-small, .modal-overlay .modal-wrapper .modal-content .share form .btn-as-text-small:hover, .modal-overlay .modal-wrapper .modal-content .share form .btn-as-text-small:visited, .modal-overlay .modal-wrapper .modal-content .share form .btn-as-text-small:active {
          color: #282723;
          display: inline-block;
          font-family: 'Patrick Hand', cursive;
          font-size: 13px;
          text-decoration: none;
          border: 0;
          border-radius: 0;
          border-bottom: 1px dashed #282723;
          background-color: transparent;
          cursor: pointer;
          padding: 0;
          margin-left: 10px; }
        .modal-overlay .modal-wrapper .modal-content .share form .btn-as-text-small:hover {
          background-color: rgba(0, 0, 0, 0.075); }
      .modal-overlay .modal-wrapper .modal-content .action-buttons {
        width: 100%;
        text-align: center;
        padding: 24px 0; }
        .modal-overlay .modal-wrapper .modal-content .action-buttons form {
          display: inline-block; }

.open-modal .wrapper {
  /* Blur and de-color */
  -webkit-filter: blur(2px) grayscale(75%);
  filter: blur(2px) grayscale(75%);
  /* Recede */
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95); }

.open-modal .modal-overlay {
  /* Regular size and visible */
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  /* prefix me */
  opacity: 1;
  /* Clickable */
  pointer-events: auto; }

.wrapper, .modal-overlay {
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  /* prefix me */ }

/* ALERTS */
.alert {
  position: fixed;
  float: right;
  top: 5px;
  left: 5px;
  width: 384px;
  min-height: 48px;
  -webkit-box-shadow: 0 3px 10px 1px #777;
  box-shadow: 0 3px 10px 1px #777;
  border-radius: 6px;
  z-index: 100; }
  .alert.success {
    background-color: #00a65a;
    color: white; }
  .alert.danger {
    background-color: #dd4b39;
    color: white; }
  .alert .alert-content {
    padding: 4px 25px 4px 15px; }
  .alert .alert-close, .alert .alert-close:active, .alert .alert-close:hover, .alert .alert-close:visited {
    position: absolute;
    right: 15px;
    top: 20px;
    color: white;
    text-decoration: none; }

/* FORM */
.form .input-big {
  background-color: transparent;
  border: none;
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: #282723;
  border-bottom: 1px dashed #4b4a46;
  width: 100%;
  /*
    &:focus {
      outline: none;
    }
    */ }

.form .input-small {
  background-color: transparent;
  border: none;
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: #4b4a46;
  border-bottom: 1px dashed #4b4a46;
  /*
    &:focus {
      outline: none;
    }
    */ }

.form .spacer {
  display: block;
  height: 24px; }

.form .form-header {
  width: 100%;
  padding-bottom: 24px; }
  .form .form-header .form-notebook {
    display: inline-block;
    /* CAUTION: IE hackery ahead */
    /* target Internet Explorer 9 to undo the custom arrow */ }
    .form .form-header .form-notebook select {
      min-width: 150px;
      padding: 0 24px 0 8px;
      font-family: 'Patrick Hand', cursive;
      font-size: 16px;
      height: 24px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("../img/down-arrow.png");
      background-size: 12px;
      background-repeat: no-repeat;
      background-position: top 6px right 6px;
      background-color: transparent;
      border: none;
      border-radius: 0;
      border-bottom: 1px dashed #4b4a46;
      /*border: 1px solid #ccc;*/ }
    .form .form-header .form-notebook select::-ms-expand {
      display: none;
      /* remove default arrow on ie10 and ie11 */ }
    @media screen and (min-width: 0\0) {
      .form .form-header .form-notebook select {
        background: none\9;
        padding: 5px\9; } }
  .form .form-header .form-week {
    color: #4b4a46;
    float: right; }

/* HELPERS */
.text-center {
  text-align: center; }

.btn-outline, .btn-outline:hover, .btn-outline:visited, .btn-outline:active {
  color: #282723;
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid #282723;
  background-color: transparent;
  padding: 4px 8px;
  border-radius: 6px;
  margin: 0 10px;
  cursor: pointer; }

.btn-outline:hover {
  background-color: rgba(0, 0, 0, 0.075); }

.btn-new-task, .btn-new-task:hover, .btn-new-task:visited, .btn-new-task:active {
  color: #777;
  text-decoration: none; }

.btn-text-light, .btn-text-light:hover, .btn-text-light:visited, .btn-text-light:active {
  color: #777;
  text-decoration: none; }

.btn-text, .btn-text:hover, .btn-text:visited, .btn-text:active {
  color: #282723;
  text-decoration: none; }

.btn-text.dashed {
  border-bottom: 1px dashed #282723; }

/* RESPONSIVE */
.mobile-only, .mobile-only-inline {
  display: none; }

@media only screen and (max-width: 420px) {
  .wrapper {
    padding: 0; }
  .notebook .header.login {
    margin-top: 48px; }
  .notebook .task-list .task .tag {
    width: 96px; }
  .notebook .task-list .task .option {
    display: none; }
  .notebook .login-box {
    width: 100%; }
  .mobile-only {
    display: block; }
  .mobile-only-inline {
    display: inline-block; }
  .hide-mobile {
    display: none; } }