/*** Reset CSS Load ***/
@import "reset-E5cS7EL.css";
@import "print-K7gV_s8.css";

/*
                    all-main
*/
ol,ul {list-style: none;}
a {outline: 0;outline: none;text-decoration: underline; color: #2a2a2a;}
a:hover {text-decoration: none;}
.clear {clear: both; height: 0!important; line-height: 0 !important;}
.clear-fix:after {display: block; height: 0; width: 0; line-height: 0; clear: both; content: '';}

body {color: #ffffff; font: 16px/18px Arial, Tahoma, Verdana, sans-serif; font-weight: normal; width: 100%;height: 100%;}

/*
                    h1,h2,h3...
*/
h1 {}
h2 {font-size: 30px; line-height: 30px; font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center;}
/*
                    bnt
*/
.btn {display: inline-block; height: 25px; width: 25px; border-radius: 100%; background: url("../images/icons-CuNfmOc.png") no-repeat 0 0;}
.btn.ok {background-position: 0 0;}
.btn.ok:hover {background-position: 0 -25px;}
.btn.ok:active {background-position: 0 -50px;}

.btn.edit {background-position: -32px 0;}
.btn.edit:hover {background-position: -32px -25px;}
.btn.edit:active {background-position: -32px -50px;}

.btn.delete {background-position: -64px 0;}
.btn.delete:hover {background-position: -64px -25px;}
.btn.delete:active {background-position: -64px -50px;}

.btn.add {background-position: 0 -75px;}
.btn.add:hover {background-position: -32px -75px;}
.btn.add:active {background-position: -64px -75px;}

a.button {text-decoration: none;}

.wrapper {position: relative; overflow: hidden;}
.menu-wrapper.open {left: 0;}
.menu-wrapper {position: absolute; height: 100%; width: 300px; z-index: 20; background: #112328; text-align: center; font-family: 'Open Sans', sans-serif; left: -300px; top: 0;
    -webkit-transition: left 0.4s ease;
    -moz-transition: left 0.4s ease;
    -ms-transition: left 0.4s ease;
    -o-transition: left 0.4s ease;
    transition: left 0.4s ease;}


.avatar-wrap {position: relative; width: 150px; min-height: 18px; margin: 70px auto 30px;}
.menu-wrapper .acc-name {color: #fff; font-weight: normal; max-width: calc(100% - 64px); margin: 0 auto 30px; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere;}
.avatar-wrap .acc-menu-btn {position: absolute; width: 18px; height: 18px; top: 0; right: 0; border: 0; background: url("img/menu-acc-icon-1m85VVS.png") no-repeat 0 0;}
.avatar-wrap .acc-menu-btn:hover {background-position: 0 -18px;}
.avatar-wrap .avatar {border-radius: 100%; border: 6px solid #0f1f24; display: inline-block; overflow: hidden;}
.avatar-wrap .avatar[hidden] {display: none;}
.acc-menu-cls-btn {
    background: url("img/close-popup-XJiak5P.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    height: 14px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 12px;
}
/* Only ever shown on a phone, where the settings panel covers the drawer and the button
   that opened it. Drawn rather than sprited: img/close-popup.png is a cross, and this is a
   step back to the level underneath, not a dismissal of both.

   It takes a row of the panel rather than floating over the top-left corner of it. Absolute,
   it was drawn on top of "Integrations" - the panel's first heading starts at the top of the
   panel, so there is no corner free to float in - and the arrow read as part of the word. */
.acc-menu-back {display: none; position: relative; width: 44px; height: 44px;
    margin-left: -18px; padding: 0; border: 0; background: none; cursor: pointer;}
.acc-menu-back:before {content: ''; position: absolute; left: 18px; top: 15px; width: 11px; height: 11px;
    border-left: 2px solid #c6ebd8; border-bottom: 2px solid #c6ebd8;
    -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.acc-menu-back:active:before {border-color: #fff;}

.acc-menu .connection-title span {vertical-align: middle; padding-left: 10px;}
connection-title

.menu-list li {list-style: none;}
.menu-list li a {line-height: 62px; display: block; color: #6e797c; border-right: transparent 4px solid; border-left: transparent 4px solid; text-decoration: none; font-size: 16px;}
.menu-list li a:hover {color: #1cbd6c; border-right: #18a55e 4px solid;}

.menu-wrapper.open + .acc-menu {left: -150px;}
.menu-wrapper.open + .acc-menu.open {left: 300px;}

.acc-menu.open {left: 300px;}
.acc-menu {position: absolute; left: -450px; width: 450px; top: 0; height: 100%; background: #27925c; padding: 10px 40px; z-index: 19;  font-family: 'Open Sans', sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: left 0.4s ease;
    -moz-transition: left 0.4s ease;
    -ms-transition: left 0.4s ease;
    -o-transition: left 0.4s ease;
    transition: left 0.4s ease;}

.acc-menu h3 {color: #fff; font-size: 24px; line-height: 30px; margin: 50px 0 20px 0; font-weight: 300;}

.acc-menu .form-row input, .select2-search input, .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #c6ebd8;
    background: #248154;
    border: 0;
    margin-bottom: 2px;
    border-radius: 5px;
    padding: 0 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.select2-search input  {
    line-height: 45px;
    margin-top: 4px;
}
.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit {
    line-height: 45px;
    margin-top: 4px;
    height: auto;
}
.acc-menu .form-row input::-moz-placeholder { color: #c6ebd8; }
.acc-menu .form-row input::-webkit-input-placeholder { color: #c6ebd8; }
.acc-menu p {font-size: 14px; color: #bbe4cf;}
.acc-menu .btn-save, .ui-dialog .ui-dialog-buttonset .ui-button-text-only {margin-top: 60px; height: 56px; border-radius: 5px; border: 2px solid #8cd2af; border-bottom: 4px solid #8cd2af; background: 0; width: 100%; display: block; color: #c6ebd8;}
.acc-menu .btn-save:hover, .ui-dialog .ui-dialog-buttonset .ui-button-text-only:hover, .acc-menu .btn-save.disabled {background: #369c68;}
.acc-menu span.error {color: #964141;}
.acc-menu .timezone, .acc-menu .notifications-at {margin-top: 30px;}
.acc-menu .setting-toggle {margin-top: 30px;}
.acc-menu .setting-toggle input {float: left; margin: 3px 10px 0 0;}
.acc-menu .setting-toggle label {display: block; overflow: hidden; font-size: 14px; line-height: 20px; color: #bbe4cf; font-weight: 300; cursor: pointer;}

/*
                    demo bar

   Its own band above the header rather than an overlay on it: the demo blanks the account
   menu, so this strip is both the only way back out of the demo and the only place the
   visitor is asked for an account. It is a dark strip in both themes on purpose - it has to
   read as the site talking, not as part of the board below it.
*/
.demo-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    background: #0e2a22;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
}
.demo-bar-back {color: rgba(255, 255, 255, 0.5); text-decoration: none;}
.demo-bar-back:hover {color: #fff;}
.demo-bar-back:before {content: "\2190"; margin-right: 7px;}
.demo-bar-label {
    padding: 3px 10px;
    border-radius: 11px;
    background: #1cbd6c;
    color: #06261a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.demo-bar-text {margin-right: auto;}
.demo-bar-cta {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 16px;
    background: #1cbd6c;
    color: #06261a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.demo-bar-cta:hover {background: #21d47a; color: #06261a;}

/*
                    header
*/
header {font-family: 'Open Sans', sans-serif; font-weight: 300; height: 67px; position: relative; z-index: 10; background: url("../images/top-bg-days_v2-0DGlz3C.png") repeat 0 0; background-size: 100%;}
header > div {position: relative;}
/* 12 + the 5 .wrap-lang carries = 17, which centres its 33px window in the 67px band. */
header .log-out {float: right; padding-top: 12px; margin-right: 78px; z-index: 2;}
header .log-out .img-wrap {width: 43px; height: 43px; border-radius: 100%; border: 3px solid #112f2b; overflow: hidden; float: left; margin-right: 13px;}
header .log-out > p {float: left; line-height: 43px; margin-right: 25px; opacity: 0.5;}
header .log-out > .btn-out {display: inline-block; width: 27px; height: 17px; background: url("../images/log-out-ma-bLi7.png") no-repeat 0 0; margin: 13px 0; opacity: 0.3;}
header .log-out > .btn-out:hover {opacity: 1;}

header .logo {width: 360px; margin: 0 auto; text-align: center;height: 67px; line-height: 67px;}
/* 16px, not 18: the button is 35px in a 67px band, and the theme toggle, the language and
   the workspace pill are all centred in it. */
header .menu {float: left; padding: 16px 0 0 77px;}
header .menu-btn {padding-left: 35px; border: 0; height: 35px; color: #7d8a8e; position: relative; background: none 0;}
header .menu-btn:hover {color: #1cbd6c}
/* Three bars drawn from currentColor rather than img/menu.png, which was a 21x16 1x bitmap
   and so was visibly soft on every retina screen. The sprite's second frame was a green
   copy for hover; the button already changes colour on hover, and currentColor follows it. */
header .menu-btn:before {
    content: ''; width: 21px; height: 16px; display: inline-block; vertical-align: middle;
    margin: 0 14px 0 -35px;
    background-image: -webkit-linear-gradient(currentColor, currentColor), -webkit-linear-gradient(currentColor, currentColor), -webkit-linear-gradient(currentColor, currentColor);
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 21px 2px;
    background-position: 0 1px, 0 7px, 0 13px;
    background-repeat: no-repeat;
}
header:before {
    left: 0; top: 0;
    background: none repeat scroll 0 0 #000;
    content: "";
    height: 100%;
    opacity: 0.1;
    position: absolute;
    width: 100%;
}
/*
                    workspace switcher

   Two boards is the case where a dropdown is the wrong control: it costs two clicks and
   hides the other name behind one of them. A two-segment pill shows both names at all
   times, switches in one click and doubles as the "where am I" indicator.

   It floats left, straight after the menu button - the first place the eye lands and the
   one part of the header with room, since .logo is a fixed 360px centred block and
   .log-out floats right.

   Two signals say which board is active, because the header often is not in view: the
   filled segment and the page <title>. Both segments carry SimpleWeek's own green - which
   half is filled already says where you are, and a second hue in the header competed with
   the band without adding a signal the fill did not already give.
*/
header .workspace-switcher {
    float: left;
    display: inline-block;
    margin: 17px 0 0 24px;
    padding: 2px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
    line-height: 0;
    z-index: 2;
    position: relative;
}
header .workspace-segment {
    display: inline-block;
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}
header .workspace-segment .workspace-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    margin-right: 7px;
    vertical-align: middle;
    opacity: 0.45;
}
header .workspace-segment .workspace-dot {background: #1cbd6c;}
header .workspace-segment.active .workspace-dot {opacity: 1;}
header .workspace-segment.active {background: rgba(28, 189, 108, 0.22);}
header .workspace-segment .workspace-name {
    color: #bdd2d0;
    text-decoration: none;
    vertical-align: middle;
}
header .workspace-segment.active .workspace-name {color: #fff; cursor: text;}
header .workspace-segment a.workspace-name:hover {color: #fff;}
header .workspace-segment .workspace-shortcut {
    display: inline-block;
    margin-left: 7px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 14px;
    color: #8fa5a2;
    background: rgba(0, 0, 0, 0.25);
    vertical-align: middle;
}
header .workspace-segment .edit-workspace-name {
    margin-left: 8px;
    color: #8fa5a2;
    cursor: pointer;
    font-size: 11px;
    vertical-align: middle;
}
header .workspace-segment .edit-workspace-name:hover {color: #fff;}
/* Deliberately NOT .edit-area, which the permanent-column editor uses: that class is
   `position: absolute; top: 43px`, which drops the input clean out of the header and
   renders it as a loose box underneath. This one swaps in place, inside the pill. */
header .workspace-segment .workspace-name-input {
    display: none;
    width: 110px;
    border: 0;
    border-radius: 3px;
    padding: 0 5px;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    vertical-align: middle;
}
header .workspace-segment.editing .workspace-name,
header .workspace-segment.editing .edit-workspace-name {display: none;}
header .workspace-segment.editing .workspace-name-input {display: inline-block;}

/* The calendar indicator wears the theme toggle's ring: the two sit side by side and a
   bare glyph next to a disc read as two unrelated things. It is an indicator and not a
   control, so the ring never lights up on hover - only the cursor says it explains itself.

   position:relative for the same reason .theme-toggle has it: header:before is an
   absolutely positioned wash over the whole band and would otherwise paint over it. */
header .google-icon {
    position: relative;
    float: right;
    width: 31px;
    height: 31px;
    margin: 18px 8px 0 0;
    border-radius: 100%;
    line-height: 0;
    cursor: help;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
header .google-icon-glyph {
    display: block;
    width: 15px;
    height: 15px;
    margin: 8px auto 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
header .google-icon.disconnected {
    color: rgba(255, 255, 255, 0.55);
}
header .google-icon.connected {
    color: #1cbd6c;
}
header .google-icon.hidden {
    display: none;
}

.wrap-lang {position: relative; height: 33px; overflow: hidden; width: 52px; margin-top: 5px;}
@media (hover: hover) {
    .wrap-lang:hover {overflow: visible;}
}
/* Tapping the current language opens the list; tapping a language navigates. Without this
   the list has nothing that can ever open it on a phone. */
@media (hover: none) {
    .wrap-lang:focus-within, .wrap-lang.open {overflow: visible;}
}
.lang-list {position: absolute; top: 0; left: 0; width: 100%; padding-top: 33px;}
.lang-list li, .lang-list a {color: #bdd2d0; line-height: 33px; text-decoration: none; margin: 0}
.lang-list li:hover {background: #27925c;}
.lang-list li:hover * {color: #fff;
}
.lang-list:after {width: 8px; height: 5px; background: url("img/arrow-lang-5qWWRQ6.png") no-repeat 0 0; content: ''; position: absolute; right: 6px; top: 15px;}
/* The same 12px the closed label leaves for the chevron, so the letters keep one axis
   whether the list is open or shut rather than jumping sideways as it opens. */
.lang-list li {background: #14292f; text-align: center; padding-right: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.lang-list li:first-child {border-radius: 5px 5px 0 0;}
.lang-list li:last-child {border-radius: 0 0 5px 5px}
/* The two letters are the whole control. There used to be a 12px flag from img/lang.png
   in front of each of them, which is why the closed window was 67px wide and reserved 28px
   on the left. Without it the label centres in what is left once the chevron has its own
   room, so the two read as one control instead of sitting at opposite ends of the window. */
.lang-list .locale-current:after {position: absolute; top: 0; left: 0; content: attr(data-lang); padding-right: 12px; height: 33px; line-height: 33px; width: 100%; text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}

.lang-list li * {display: block;}

/*
                    content
*/
.content-calendar {font-family: 'Open Sans', sans-serif; font-weight: 300; overflow: hidden;}
.content-calendar section {padding: 18px 0;}
.content-calendar section.current {background: #1a6e4f;}
.ui-sortable-helper {font-family: 'Open Sans', sans-serif; font-weight: 300;}
.top-wrap {background: url("../images/top-bg-days_v2-0DGlz3C.png") no-repeat 0 0; background-size: 100% 100%; padding: 1px; position: relative;}
.top-wrap h2, .bottom-wrap h2 {margin-top: 48px;}
.top-wrap h2 + p, .bottom-wrap h2 + p {text-align: center; opacity: 0.5; margin: 3px 0 40px;}
.bottom-wrap h2 {position: absolute; top: 48px; width: 100%; text-align: center; margin: 0; text-overflow: ellipsis; white-space: nowrap; height: 100%; overflow: hidden;}
.bottom-wrap h2 + input[type="text"] {width: 100%; border: none; background: none; text-align: center; color: #fff; font-size: 30px; line-height: 30px; font-family: 'Open Sans', sans-serif; font-weight: 300;}

.bottom-wrap {background: url("../images/bottom-bg-days_v2-dsELsPl.png") no-repeat 0 0; background-size: 100% 100%; position: relative; padding: 50px 1px 1px 1px;}
.bottom-wrap section {padding-top: 126px;}

.calendar-scroll-wrap {margin: 0 60px;}
.calendar-scroll-wrap > section {float: left; width: 20%; border-left: 1px solid #305c56; position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.calendar-scroll-wrap > section:first-child, .calendar-scroll-wrap > section:nth-child(6) {border-left: 0 none;}
.calendar-scroll-wrap .list-todo {margin: 0 18px;}
.calendar-scroll-wrap .list-todo li p, .ui-sortable-helper p {
    opacity: 0.5; font-weight: 300; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; min-height: 21px;
}
.calendar-scroll-wrap .list-todo li p.through, .ui-sortable-helper p.through {
    opacity: 0.2; text-decoration: line-through
}
.todo-wrapper.through .btn.edit {
    display: none;
}
.calendar-scroll-wrap .list-todo li p.repeat_week, .ui-sortable-helper p.repeat_week {
    color: #28b5d8;
}
/* ------------------------------------------------------------------ hover reveals

   Everything a task row hides until you hover is gated on `(hover: hover)` from here on.
   A touch screen never produces hover, so on a phone these rules split two ways and both
   halves were broken: the ones that *reveal* (the edit and delete buttons) never fired, so
   there was no way to edit or delete a task at all, and the ones that *change* the row
   fired once on tap and then stuck, because iOS and Android leave :hover applied to the
   last thing touched until you touch something else.

   So: reveals move to `(hover: hover)`, and `(hover: none)` gets a persistent counterpart
   next to each one. `hover`, not `any-hover` - a laptop with a touchscreen still has a
   mouse as its primary pointer and should keep the desktop behaviour. */
@media (hover: hover) {
    .calendar-scroll-wrap .list-todo li:hover p, .ui-sortable-helper:hover p {
        position: relative; white-space: normal; line-height: 20px; padding-right: 100px; opacity: 1;
    }
    .calendar-scroll-wrap .list-todo li:hover .text-wrap.long, .ui-sortable-helper:hover .text-wrap.long {
        border-radius: 3px;background: #14292f; position: absolute; width: 100%; padding: 5px 18px; left: -18px; top: 0; z-index: 2;
    }
}
.calendar-scroll-wrap .list-todo li, .ui-sortable-helper {
    border-top: 1px solid #2b5a52; height: 20px; line-height: 20px; position: relative; padding: 5px 0; list-style: outside none none;
}
.calendar-scroll-wrap section.current .list-todo li, .ui-sortable-helper {
    border-color: #2c755c;
}
.calendar-scroll-wrap .list-todo li:first-child {
    border-top: 0;
}
.calendar-scroll-wrap .list-todo li.draggable, .calendar-scroll-wrap .list-todo li.draggable p.todo-text, .ui-sortable-helper.draggable, .ui-sortable-helper.draggable p {
    cursor: move;
}


.list-todo {min-height: 309px;}
.sortable-ghost {border: 1px dashed #49CA89 !important;z-index: 99999;}
#permanent-wrapper .list-todo, #calendar .list-todo {z-index: 2; position: relative;}
#permanent-wrapper .list-todo > ul li, #calendar .list-todo > ul li, .ui-sortable-helper {border-top: 1px solid transparent;}
.rules {position: absolute; background: url("img/line-dGYjt-S.png") repeat scroll 0 0 transparent; top: 189px; box-sizing: border-box; right: 18px; left: 18px; bottom: 35px; z-index: 1;}
#permanent-wrapper .rules {background: url("img/line_green-CX4J7QT.png") repeat scroll 0 0 transparent;}
.bottom-wrap .rules {top: 159px;}
.navigation-arrow > ul > li > a {position: absolute; width: 41px; height: 176px;}
.navigation-arrow a.next:after,.navigation-arrow a.prev:after {background: url("../images/arrow-LpmiYuD.png") no-repeat 0 0;}
.navigation-arrow a.next:before, .navigation-arrow a.prev:before {background: url("../images/arrow_-mxu2rbD.png") no-repeat 0 0;}
/* The lit state of every navigation control is hover-gated for the same reason: tapping
   "next" on a phone left the arrow standing green over the new day, because the tap's
   :hover was never cleared. Nothing here is a reveal, so there is no touch counterpart -
   :active still gives the press its feedback. */
@media (hover: hover) {
    .navigation-arrow a.next:hover:before, .navigation-arrow a.prev:hover:before {opacity: 1!important; z-index: 3;}
}
.navigation-arrow a.prev {top: 50%; margin-top: -89px; left: 0;}
.navigation-arrow a.prev:after {content: ''; position: absolute; width: 100%; height: 100%; opacity: 0.1; background-position: 0 0;}
.navigation-arrow a.prev:before {content: ''; position: absolute; width: 14px; height: 27px; background-position: 0 0; opacity: 0.7; left: 11px; top: 50%; margin-top: -13px;}
.navigation-arrow a.next {top: 50%; margin-top: -89px; right: 0;}
.navigation-arrow a.next:after {content: ''; position: absolute; width: 100%; height: 100%; background-position: -41px 0; opacity: 0.1;}
.navigation-arrow a.next:before {content: ''; position: absolute; width: 14px; height: 27px; background-position: -14px 0; opacity: 0.7; right: 11px; top: 50%; margin-top: -13px;}
@media (hover: hover) {
    .navigation-arrow a.prev:hover:after {background-position: 0 -176px; opacity: 1;}
    .navigation-arrow a.next:hover:after {background-position: -41px -176px; opacity: 1;}
}
.navigation-arrow a.begin, .navigation-arrow a.end {width: 14px; height: 18px; background: url("../images/arrow_-mxu2rbD.png") no-repeat 0 0; opacity: 0.2}
.navigation-arrow a.begin {background-position: 0 -28px; left: 11px; top: 50%; margin-top: 84px;}
.navigation-arrow a.end {background-position: -14px -28px; right: 11px; top: 50%; margin-top: 84px;}
@media (hover: hover) {
    .navigation-arrow a.begin:hover, .navigation-arrow a.end:hover {opacity: 1;}
}
.navigation-arrow a.home-link {width: 18px; height: 18px; background: url("../images/arrow_-mxu2rbD.png") no-repeat 0 -48px; opacity: 0.2; left: 11px; top: 50%; margin-top: 128px;}
@media (hover: hover) {
    .navigation-arrow a.home-link:hover {opacity: 1;}
}

.navigation-arrow .picker {position: absolute; width: 16px; height: 18px; background: url("../images/arrow_-mxu2rbD.png") no-repeat 0 -67px; right: 11px; top: 50%; margin-top: 128px; opacity: 0.2; cursor: pointer;}
@media (hover: hover) {
    .navigation-arrow .picker:hover {background-position: 0 -87px; opacity: 1;}
}
.navigation-arrow .picker input {width: 100%; opacity: 0; cursor: pointer;}

.bullets {position: absolute; bottom: -45px; z-index: 3; width: 100%;}
.bullets > ul {text-align: center;}
.bullets li {display: inline-block; margin: 0 7px;}
.bullets li > a {opacity: 0.5; display: block; width: 9px; height: 9px; border: 1px solid #fff; border-radius: 100%; position: relative; overflow: hidden;}
@media (hover: hover) {
    .bullets li > a:hover:after {content: ''; position: absolute; width: 100%; height: 100%; background: #fff; opacity: 0.2; top: 0; left: 0;}
}
.bullets li.active > a, .bullets li.selected > a {opacity: 1; background: #fff;}
.bullets li.disable > a {opacity: 0.2;}

.edit-area {position: absolute; height: 39px; line-height: 30px; top: 43px; display: none;}

.calendar-scroll-wrap .list-todo .dialog {background: #14292f; position: absolute; z-index: 3; top: 0; width: 100%;}
.calendar-scroll-wrap .list-todo .dialog:after {content: ''; position: absolute; left: -10px; top: 0; width: 10px; background: #14292f; height: 100%; border-radius: 5px 0 0 5px;}
.calendar-scroll-wrap .list-todo .dialog:before {content: ''; position: absolute; right: -10px; top: 0; width: 10px; background: #14292f; height: 100%; border-radius: 0 5px 5px 0;}
.calendar-scroll-wrap .list-todo .dialog .btn-wrap-task {float: right;}
.calendar-scroll-wrap .list-todo .dialog:hover li p {padding-right: 0; opacity: 0.5;}
.calendar-scroll-wrap .list-todo .dialog:hover li p.with-input:hover {opacity: 1;}
.calendar-scroll-wrap .list-todo .dialog li .time-block {float: right; position: relative; width: 50px;}
.calendar-scroll-wrap .list-todo .dialog li .time-block input {position: absolute; width: 20px; background: 0; display: none; color: #fff; border: 0;}
.calendar-scroll-wrap .list-todo .dialog li .time-block .hour {left: -3px; top: -1px;}
.calendar-scroll-wrap .list-todo .dialog li .time-block .min {left: 28px; top: -1px;}
.calendar-scroll-wrap .list-todo .dialog li .remember-string {padding-left: 30px; position: relative;}
.calendar-scroll-wrap .list-todo .dialog li .remember-string:before {content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px;  background: url("../images/arrow_-mxu2rbD.png") no-repeat 0 -112px;}
.calendar-scroll-wrap .list-todo .dialog li .repeat-string {padding-left: 30px; position: relative;}
.calendar-scroll-wrap .list-todo .dialog li .repeat-string:before {content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px;  background: url("../images/arrow_-mxu2rbD.png") no-repeat 0 -135px;}
.calendar-scroll-wrap .list-todo .dialog li > select {float: right;}
.calendar-scroll-wrap .list-todo .dialog li.description {height: auto;}

.btn-wrap {position: absolute; width: 100px; right: 0; top: 3px; display: none; text-align: right; z-index: 3;}
/* buildCreateDialog() lays one of these over the new-todo input to hold the "+" button, and at
   100px wide the empty part of it was an invisible strip that swallowed clicks aimed at the right
   end of the input — you could not put the caret there. Only the button needs to be clickable on
   that row. Todo rows keep the whole wrap clickable: clicking it completes the task. */
.calendar-scroll-wrap .list-todo li.for-creating .btn-wrap {pointer-events: none;}
.calendar-scroll-wrap .list-todo li.for-creating .btn-wrap .btn {pointer-events: auto;}
@media (hover: hover) {
    .calendar-scroll-wrap .list-todo li:hover .btn-wrap {display: block;}
}
/* On touch the buttons are simply always there. They are the only way to reach edit and
   delete without a hover, and the room they take is bought back by .text-wrap's padding
   in the touch block further down, so nothing slides underneath them. */
@media (hover: none) {
    .calendar-scroll-wrap .list-todo li .btn-wrap {display: block;}
}
.description-dott {position: absolute; left: -13px; opacity: 0.5; top: 4px;}
.through .description-dott {opacity: 0.2;}
.google-event-mark {position: absolute; left: -18px; top: 5px; width: 2px; height: 20px; z-index: 3; border-radius: 2px; background: #8ab4f8; box-shadow: 0 0 7px rgba(138, 180, 248, 0.55); opacity: 0.75;
    -webkit-transition: opacity 0.15s ease; transition: opacity 0.15s ease;}
.calendar-scroll-wrap .list-todo li:hover .google-event-mark, .ui-sortable-helper:hover .google-event-mark {opacity: 1;}
.through .google-event-mark, .todo-wrapper.through .google-event-mark {opacity: 0.25; box-shadow: none;}

/*
    select
*/
.select {float: right; font-family: 'Open Sans', sans-serif; font-size: 14px;}
.select2-container .select2-choice {background: 0 none; border: 0 none; box-shadow: none; color: #fff;}
.select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices {background: 0 none; border: 0 none; box-shadow: none;}
.select2-container .select2-choice .select2-arrow { border: 0 none; background: 0 none; box-shadow: none;}
.select2-container .select2-choice .select2-arrow b {top: 12px; left: 3px; position: absolute; height: 0; width: 0; border-top: 5px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent;}
.select2-drop.select2-drop-above.select2-drop-active {border: 0 none; background: #14292f; color: #fff; font-family: 'Open Sans', sans-serif;}
.select2-results .select2-highlighted {opacity: 1; background: 0 none;}
.select2-results li {opacity: 0.5;}
.select2-results li:first-child .select2-result-label {border-top: 0;}
.select2-results .select2-result-label {border-top: 1px solid #20343a; margin: 0 5px; font-size: 14px;}
.select2-container-active .select2-choice, .select2-container-active .select2-choices {box-shadow: none;}
.select2-drop {background: #14292f}
.select2-drop-active {border: 0 none; background: #14292f; color: #fff; font-family: 'Open Sans', sans-serif;}

.menu-opened .select2-drop {margin-top: 4px;}
.form-select.select2-container {width: 100%; float: none;}
.form-select.select2-container .select2-choice:after {width: 8px; height: 5px; background: url("img/arrow-lang-5qWWRQ6.png") no-repeat 0 0; content: ''; position: absolute; right: 20px; top: 27px;}
.form-select.select2-container .select2-choice {padding-left: 25px; height: 60px; line-height: 60px; background: #248154; border: 0!important; border-radius: 5px; color: #c6ebd8; box-shadow: none; font-size: 16px;}
.form-select.select2-container .select2-choice .select2-arrow {display: none;}
.menu-opened .select2-drop-active {border: 0; background: #17493c; border-radius: 5px;}
.menu-opened .select2-results li {opacity: 1; border: 0;}
.menu-opened .select2-results {max-height: 240px;}
.menu-opened .select2-results .select2-result-label {height: 60px; line-height: 60px; color: #c6ebd8; padding: 0 0 0 25px; border: 0;}
.menu-opened .select2-results .select2-highlighted {background: none; color: #1cbd6c}
.menu-opened .select2-results .select2-highlighted .select2-result-label {color: #1cbd6c}
.menu-opened .select2-drop.select2-drop-above.select2-drop-active {border: 0; box-shadow: none; margin-top: -4px; border-radius: 5px;}

.ui-widget-header .ui-icon {background-image: none;}

/*
 my styles
*/
section .editing .edit-input, section .new-todo-input {background: none; color: #fff; border: none;font-weight: 300;width: 100%; box-sizing: border-box; padding-right: 28px;}
.todos-list > li:not(.todo-view) {cursor: text;}

/* A task ticked off slides down to the bottom of its column and the rows it sat on top of
   slide up to close the gap. Only on while the move is playing — the duration here and
   Config.sinkAnimationDuration, which takes the class off again, are the same number.
   See views/todos/todosCollectionView.js#sinkTask. */
.todos-list > li.todo-view.sink-move {
    -webkit-transition: -webkit-transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
    transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .todos-list > li.todo-view.sink-move {
        -webkit-transition: none;
        transition: none;
    }
}
#permanent-wrapper {overflow: hidden;}
section.hidden {display: none;}
.acc-menu .hidden {display: none;}
.flat-table {
    margin-bottom: 20px;
    border-collapse:collapse;
    border: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 100%;
    text-align: left;
}
.flat-table td {
    color: #f7f7f7;
    padding: 0.7em 1em 0.7em 1.15em;
    text-shadow: 0 0 1px rgba(255,255,255,0.1);
}
.flat-table tr {
    -webkit-transition: background 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
}
.flat-table-3 {
    background: #52be7f;
}
.flat-table-3 tr:hover {
    background: rgba(0,0,0,0.1);
}
.flat-table td.bold {font-weight: bold;}
.ui-dialog .loading {
    position: fixed;
    z-index: 999;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
/* Undo Panel */
#undo.unicorn-opt-out .action-desc:before {
    content: "You spotted a wild unicorn! ";
    font-weight: 600;
    color: black
}
.dismissable-overlay {
    box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
    font-size: 14px;
    min-height: 17px;
    max-width: 650px;
    border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    width: 218px;
    position: fixed;
    bottom: 17px;
    left: 0px;
    text-align: left;
    background: #27925c;
    border-left-width: 0px;
    color: #FFFFFF;
    font-weight: 400;
    padding: 10px 10px 10px 14px;
    overflow: hidden;
    z-index: 9999999;
    transition: left 0.4s ease 0s
}

.dismissable-overlay a {
    font-weight: 400;
    color: #1F8DD6
}

.dismissable-overlay .close-box {
    cursor: pointer;
    visibility: inherit;
    background: rgba(0, 0, 0, 0) url("img/close-popup-XJiak5P.png") no-repeat scroll center center;
    width: 12px;
    height: 12px;
    float: right;
    display: inline-block;
    margin-left: 15px;
    margin-top: 0
}

.dismissable-overlay .action-desc {
    line-height: 17px
}

.dismissable-overlay .undo-msg {
    height: 24px;
    margin-top: 10px;
    margin-left: 17px;
    display: block
}

.dismissable-overlay .action-desc {
    display: block;
    line-height: 120%
}

.dismissable-overlay.overlay-in {}

.dismissable-overlay.overlay-out {
    left: -295px;

}
.btn-undo {
    cursor: pointer;
    border-bottom: 1px dashed;
}
/* end of Undo Panel */
select.ui-datepicker-year, div.ui-datepicker-title {
    visibility: hidden;
}
.ui-datepicker-title .ui-datepicker-year {
    top: -2px;
}
/* Transparent Overlay */
.ui-dialog .loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}
/*span.locale-lang a, a.feedback {color: #FFFFFF}*/
input.invalid {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2) inset, 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 2px rgba(218, 29, 94, 0.8);
}
/*.locale-lang {margin-right: 5px;}*/
.for-creating .btn.ok, .edit-task .btn.ok {margin-right: 2px;}
.todos-list .sortable-ghost p {opacity: 1 !important; color: #ffffff !important;}

.introjs-overlay {  height: 0 !important; width: 0 !important; } /* remove overlay from intro.js. Could not be done from JS because of bug */
.introjs-tooltiptext {color: white;}
.sw-introjs-highlight {height: 0 !important; width: 0 !important; top: 0 !important; left: 0 !important;}
.introjs-tooltipReferenceLayer {width: 0 !important;}
.introjs-tooltip {background-color: #27925c !important;}
.introjs-bullets ul li a.active {background: #fff none repeat scroll 0 0 !important;}
.introjs-button { background-color: #27925c;  background-image: linear-gradient(#27925c, #27925c);  border: 1px solid #fff;  border-radius: 0.2em;  color: #fff;  cursor: pointer;  display: inline-block;  font: 11px sans-serif;  margin: 10px 0 0;  outline: 0 none; overflow: visible;  padding: 0.3em 0.8em;  position: relative;  text-decoration: none;  text-shadow: none;  white-space: nowrap;  }
.introjs-skipbutton { color: #fff;  margin-right: 5px;  }
.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#27925c),to(#27925c));background-image:-moz-linear-gradient(#27925c,#27925c);background-image:-o-linear-gradient(#27925c,#27925c);background-image:linear-gradient(#27925c,#27925c)}.introjs-button::-moz-focus-inner{padding:0;border:0}
.introjs-button:hover{border-color:#fff;text-decoration:none;box-shadow: 0 0 1px #fff;}
.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#fff;border-color:#fff;box-shadow:none;cursor:default;background-color:#27925c;background-image:none;text-decoration:none}
.introjs-arrow.right-bottom{border-left-color:#27925c}
.introjs-arrow.right{border-left-color:#27925c}
.introjs-arrow.bottom{border-top-color:#27925c}

.bottom-wrap .column-buttons {position: absolute;  top: 0;  right: 3px;  z-index: 1;  padding: 12px 7px;  font-size: 0.75em;  line-height: 1em;}
.bottom-wrap .column-button {display: none;}
@media (hover: hover) {
    .bottom-wrap .column-bar:hover .column-button{display:inline}
}
@media (hover: none) {
    .bottom-wrap .column-bar .column-button{display:inline}
}
.bottom-wrap .column-buttons .fa-pencil {cursor: pointer;}
.bottom-wrap .column-bar {position: absolute;  top: 0;  left: 0;  right: 0;  height: 48px;}
.todo-text a {color: #ffffff}
.recurring .todo-text a {color: #28b5d8}
/*
    footer
*/
footer {height: 67px; background: #112328; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 14px; line-height: 18px;}
footer .footer-menu {overflow: hidden; margin-left: 77px; padding-top: 22px;}
footer .footer-menu li {float: left; margin-right: 20px;}
footer .footer-menu li a {display: block; opacity: 0.2; color: #fff; text-decoration: none;}
footer .footer-menu li a:hover {opacity: 0.5;}
footer .footer-menu li.version {color: #515e61;}

.soc-list {float: right; margin: 20px 77px 0 0;}
.soc-list li {display: inline-block; line-height: 18px; vertical-align: middle; color: #515e61}
.soc-list li a {display: block; width: 18px; height: 18px; background: url("img/soc-iсon-N-0QnnR.png") no-repeat; margin: 0 3px;}

.soc-list li a.fb {background-position: 0 0}
.soc-list li a.fb:hover {background-position: 0 -20px}
.soc-list li a.tw {background-position: 0 -147px}
.soc-list li a.tw:hover {background-position: 0 -167px}

.ui-widget-content:before {display: none;}
.ui-widget-content {background: #27925c; border: 0; box-shadow: none; border-radius: 5px; font-family: 'Open Sans', sans-serif;}
.ui-widget-header {background: 0 none; color: #fff; border: 0;}
.ui-dialog .ui-dialog-title {font-weight: normal; text-align: center; margin-top: 50px; line-height: 35px; font-size: 24px;}
.ui-widget-content .ui-widget-header .ui-dialog-titlebar-close {background: url("img/close-popup-XJiak5P.png") no-repeat center; border: 0; top: 25px; right: 20px;}
.ui-dialog .ui-dialog-content {color: #bbe4cf; text-align: center; font-size: 14px; line-height: 26px;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {text-align: center; float: none; padding: 35px 0 50px;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button-text-only {width: 370px; margin: 0 auto; font-weight: normal; font-size: 16px;}

.ui-datepicker {
    z-index: 102!important;
    padding: 0;
}

.ui-datepicker .ui-state-default, .ui-datepicker.ui-widget-content .ui-state-default, .ui-datepicker .ui-widget-header .ui-state-default {
    font-weight: normal;
    color: #587c86;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border: 0 none;
    background: 0 none;
}
.ui-datepicker .ui-state-highlight, .ui-datepicker.ui-widget-content .ui-state-highlight, .ui-datepicker .ui-widget-header .ui-state-highlight {
    background: #1cbd6c;
    color: #fff;
    padding: 0!important;
    border-radius: 100%;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border: 0 none;
}
.ui-datepicker .ui-state-default:hover {
    color: #fff;
}
.ui-datepicker.ui-widget-content {
    background: #14292f;
    color: #1e1b1d;
}
.ui-datepicker .ui-state-active, .ui-datepicker.ui-widget-content .ui-state-active, .ui-datepicker .ui-widget-header .ui-state-active {
    background: #1CBD6C;
    border-radius: 100%;
    color: #FFFFFF;
}
.ui-datepicker .ui-widget-header {
    background: #1cbd6c;
    color: #fff;
    font-weight: 300;
}
.ui-datepicker.ui-widget-content {border-radius: 8px; position: relative;}
.ui-datepicker.ui-widget-content:before {position: absolute; content: ''; width: 20px; height: 42px; background: url("../images/arrow_-mxu2rbD.png") no-repeat 0 -158px; display: block; right: -20px; bottom: 68px; top: auto;}
.ui-datepicker.ui-datepicker .ui-datepicker-header {border-radius: 8px 8px 0 0;}
.ui-datepicker .ui-state-hover.ui-datepicker-next .ui-icon,.ui-datepicker .ui-state-focus.ui-datepicker-next .ui-icon {opacity: 1}
.ui-datepicker .ui-state-hover.ui-datepicker-prev .ui-icon,.ui-datepicker .ui-state-focus.ui-datepicker-prev .ui-icon {opacity: 1}
.ui-datepicker .ui-datepicker-next {
    right: 17px;
    top: 1px;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    background: 0;
}
.ui-datepicker .ui-datepicker-next .ui-icon {
    background: url("../images/arrow_-mxu2rbD.png") no-repeat -18px -91px;
    cursor: pointer;
    width: 16px;
    height: 20px;
    opacity: 0.5;
}
.ui-datepicker .ui-datepicker-prev {
    cursor: pointer;
    left: 17px;
    top: 1px;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
    background: url("../images/arrow_-mxu2rbD.png") no-repeat -18px -68px;
    cursor: pointer;
    width: 16px;
    height: 20px;
    opacity: 0.5;
}
.ui-datepicker .ui-state-hover ,.ui-datepicker .ui-state-focus {
    border: 0;
    background: none 0;
}

.ui-dialog .ui-dialog-title {
    width: 100%;
}

.ui-datepicker th {
    color: #1cbd6c;
    padding: .7em .3em;
    text-align: center;
    font-weight: 300;
    border: 0;
}

.ui-widget-overlay {
    background: #666 url("images/ui-bg_flat_10_000000_40x100-jzwCQ9t.png") repeat scroll 50% 50%;
}

.tooltipster-default {
    border-radius: 5px;
    border: none;
    background: #27925c;
    color: #fff;
}

.tooltipster-content a {
    color: #fff;
}

/*
============================================================== responsive board tiers

   How many day columns the board shows is a function of the viewport width. The four
   boundaries below are not free to edit here: they are declared once, in
   Todo\CoreBundle\Layout\ViewportTiers, from where Twig hands them to the Backbone
   router as Config.viewportTiers (see helpers/breakpoints.js). ViewportTiersCssConsistency
   Test fails if this file and that class stop agreeing.

   That test exists because they had already stopped agreeing. This file switched to the
   one-column layout at `max-width: 767px` and router.js switched at `$(window).width() <
   767`, so 767px itself got the mobile CSS with the desktop carousel - and 768px, an iPad
   mini held upright, fell through both and drew eight columns 142px wide, in which a task
   read "Water the pla...".

       <= 599   1 column    phone portrait
      600-899   2 columns   phone landscape, small tablet upright
     900-1199   3 columns   tablet landscape
    1200-1439   4 columns   small laptop
      >= 1440   5 columns   desktop - DISPLAYED_DAY_COUNT, exactly as before

   The rule the bands keep is that a column stays near 240px, the width at which a typical
   task title stops truncating; ViewportTiers::MIN_COLUMN_WIDTH is that number and the unit
   test holds the tiers to it.

   The `width` declarations here only decide what the board looks like in the moment before
   the router runs - carouFredSel sizes the columns itself from `items.visible` once it
   initialises. They are worth having anyway: without them a phone paints five columns and
   then snaps to one.
*/
@media only screen and (max-width: 599px) {
    .calendar-scroll-wrap > section {width: 100%;}
}
@media only screen and (min-width: 600px) and (max-width: 899px) {
    .calendar-scroll-wrap > section {width: 50%;}
}
@media only screen and (min-width: 900px) and (max-width: 1199px) {
    .calendar-scroll-wrap > section {width: 33.3333%;}
}
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
    .calendar-scroll-wrap > section {width: 25%;}
}

/* The first column, before JavaScript runs.

   Twig paints the five days server side and the board opens on today, so the range it
   paints starts on *yesterday* - today is the second column, which is right at full width
   and wrong at every tier below it, where the first column is the only one you can see.
   Until the router runs you were therefore looking at yesterday's tasks, and then the page
   changed under you.

   The server cannot fix this on its own: which day comes first is a function of the
   viewport, and the viewport is not something a request knows. Sniffing the user agent for
   it would be a guess that a rotated tablet gets wrong. So the day is dropped in the only
   place that does know - a media query - and the pre-JS paint agrees with what the router
   is about to build.

   `:not(.todos-collection)` is what confines this to the server's markup: every section the
   router renders carries that class (TodosCollectionView#className), and by the time they
   exist there is nothing left to correct. */
@media only screen and (max-width: 1439px) {
    #calendar > section:not(.todos-collection):first-child {display: none;}
    #calendar > section:not(.todos-collection):nth-child(2) {border-left: 0;}
}

@media only screen and (max-width: 599px) {
    #calendar > section:not(.todos-collection):nth-child(n+3) {display: none;}
}

/*
-------------------------------------------------------------- phone portrait (<= 599)
*/
@media only screen and (max-width: 599px) {
    .calendar-scroll-wrap {margin: 0;}
    /* one column at a time, so the divider between columns is only ever seen mid-slide */
    .calendar-scroll-wrap > section {border-left: 0;}

    /* Of the five navigation controls, two jump a whole screen of days and one opens a
       datepicker positioned for a 1024px board. prev/next are the two that make sense on
       a phone, and they belong beside the day rather than on top of it.

       Getting them there means placing them off the heading, not off the wrap. The box is
       41x176 and centred, which on a desktop puts it in the empty gutter beside the board;
       a phone has no gutter - the column is the whole screen - so wherever the box goes it
       goes over the tasks. `top: 20%` was an attempt to lift it clear of them, and the
       shorter heading in this block then undid it: a fifth of a 506px wrap is 101px, and
       with the heading down to 85px the chevron landed on the first task and the plate
       covered three of them.

       26px down and 56px tall instead, which finishes within 3px of the first row on the
       day board and exactly on it on the permanent one. One rule does both because both
       headings sit in the same band - the day board spends its first 25px on padding and
       the permanent one hangs its title 34px down an absolutely positioned block, and the
       two land within a few pixels of each other.

       What does not come with it is the plate behind the chevron. It is an hourglass 176px
       tall, and there is no honest way to put it in a 56px box: cropped it is a curve cut
       off mid-turn, and scaled it is a smear. It carries no information either - a tenth of
       an opacity of green, sitting under a chevron that is perfectly legible on its own -
       so on a phone the chevron is the whole control. The lit frame beneath it in the
       sprite is hover-gated off at this tier anyway; :active is what answers a tap. */
    .previous-screen, .next-screen, .home-link, .picker {display: none;}
    .navigation-arrow a.prev, .navigation-arrow a.next {top: 12px; height: 44px; margin-top: 0;}
    .navigation-arrow a.prev:after, .navigation-arrow a.next:after {display: none;}

    .navigation-arrow > ul > li > a {width: 44px;}
    .navigation-arrow a.prev {left: auto; right: 52px;}
    .navigation-arrow a.next {right: 8px;}

    /* UserReport pins its launcher to the window edge at an offset set in its own site
       settings, which puts it straight over those two chevrons and eats the taps that change
       the day. Above this tier there is a gutter for it and it is left alone; here the
       drawer's Feedback item is the way in (js/helpers/feedback.js).

       Matched on the title rather than tagged from JavaScript, because userreport.js sets
       that attribute before it writes the tab's markup and before it flips the wrapper from
       visibility:hidden - so the rule is already in force at the first paint, and the tab
       never blinks. Anything that has to find the element afterwards is a frame too late.

       It hides the launcher and not the forum, which is a second iframe titled "UserReport
       feedback forum": the exact match is what keeps the dialog openable. display, not
       visibility, because the wrapper around it is auto-sized with pointer-events:all and
       would go on swallowing taps at its old size. */
    iframe[title="Toggle UserReport feedback forum"] {display: none !important;}

    .content-calendar section.current {background: none;}
    .bottom-wrap .calendar-scroll-wrap section:first-child {display: block;}

    /* The sentence is the first thing to go, and the way back comes down to its arrow - the
       header logo that would otherwise lead out of the demo is hidden at this width. What
       stays is the badge saying where you are and the button saying what to do about it. */
    .demo-bar {gap: 10px; padding: 8px 12px; flex-wrap: wrap;}
    .demo-bar-text {display: none;}
    .demo-bar-back {font-size: 0;}
    .demo-bar-back:before {font-size: 15px; margin-right: 0;}
    .demo-bar-label {margin-right: auto;}

    header {height: 56px;}
    header .username, header .logo {display: none;}

    header .menu {display: none;}

    /* 7 + the 5 .wrap-lang carries centres the 33px window in the 56px band */
    header .log-out {display: block; float: right; margin-right: 6px; padding-top: 7px;}
    header .google-icon {width: 44px; height: 44px; margin: 6px 0 0 0;}
    header .google-icon-glyph {margin-top: 14px;}

    /* The switcher, with room for one name.

       Reducing it to its two dots was worse than useless: a filled dot beside an empty one
       inside a rounded green pill is the shape of an on/off switch, so it read as a toggle
       for something, and neither half said which board it was. There is no version of two
       names that fits beside the menu button, the theme toggle and the language on a 320px
       header.

       So it says where you are and offers the way out: the active board keeps its name, and
       the other becomes the chevron that goes to it. There is never a third - see
       Workspace::POSITIONS - so a chevron is unambiguous, and the link behind it is the
       same one the name carried.

       Renaming stays a desktop affordance, which it already was: the pencil only ever
       appeared on hover. */
    header .workspace-switcher {float: left; margin: 12px 0 0 12px;}
    header .workspace-segment {padding: 0 8px;}
    header .workspace-segment .workspace-shortcut,
    header .workspace-segment .edit-workspace-name,
    header .workspace-segment .workspace-name-input {display: none;}
    header .workspace-segment.active .workspace-name {
        display: inline-block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    header .workspace-segment:not(.active) {padding: 0 4px;}
    header .workspace-segment:not(.active) .workspace-dot {display: none;}
    /* font-size:0 rather than display:none - the name is still the link, and still the
       accessible name of the control; it is only its glyphs that give up their room */
    header .workspace-segment:not(.active) .workspace-name {
        display: inline-block; position: relative; width: 20px; height: 28px; font-size: 0;
    }
    header .workspace-segment:not(.active) .workspace-name:after {
        content: ''; position: absolute; left: 5px; top: 10px; width: 7px; height: 7px;
        border-top: 2px solid currentColor; border-right: 2px solid currentColor;
        -webkit-transform: rotate(45deg); transform: rotate(45deg);
    }

    /*
       the account drawer and the settings panel behind it

       Both levels existed and only the first one could be seen. The drawer is 300px and
       opens fine; the settings panel is 450px and its open position is `left: 300px` -
       measured from the same origin - so on a 390px screen it opened 300px off the side and
       showed a 90px strip of itself. Stats had the same shape of problem in a jQuery UI
       dialog nailed to 800x663.

       Both take the whole screen here instead, the panel above the drawer rather than
       beside it. That is the one thing that needs adding: with the panel covering the
       drawer, the control that opened it is underneath, so `.acc-menu-back` is the way out
       and it exists for this width only.

       The two sprite controls in the drawer are 18x18 and 12x14. The sprites stay that
       size - they are single-state images with a hover frame beneath them, and scaling
       moves the frame - and the target grows around them.
    */
    .menu-wrapper {width: 100%; left: -100%;}
    .menu-wrapper.open {left: 0;}
    .acc-menu, .menu-wrapper.open + .acc-menu {
        width: 100%; left: -100%; padding: 10px 20px; z-index: 21;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .acc-menu.open, .menu-wrapper.open + .acc-menu.open {left: 0;}
    .acc-menu h3 {margin: 18px 0 16px;}
    .acc-menu .timezone, .acc-menu .notifications-at {margin-top: 18px;}
    .acc-menu .btn-save {margin-top: 28px;}
    .acc-menu-back {display: block;}
    /* the button is the heading's top margin now, so the heading does not need one too */
    .acc-menu-back + .service-integrations > h3 {margin-top: 0;}

    .avatar-wrap {margin: 44px auto 26px;}
    .avatar-wrap .acc-menu-btn:before,
    .acc-menu-cls-btn:before {content: ''; position: absolute; left: -14px; right: -14px; top: -14px; bottom: -14px;}

    /*
       stats

       Same story one level further in: a jQuery UI dialog opened at a fixed 800x663 with
       three 600px canvases and a six-column table in it. menuView sizes it to the window
       now; what is left is the chrome around it, and letting the table scroll on its own
       rather than making the dialog wider than the screen.
    */
    .ui-dialog {max-width: 100%;}
    .ui-dialog .ui-dialog-title {margin-top: 22px; font-size: 20px; line-height: 26px;}
    .ui-dialog .ui-dialog-content {overflow-x: auto;}
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {padding: 20px 0 26px;}
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button-text-only {width: 100%;}
    .ui-widget-content .ui-widget-header .ui-dialog-titlebar-close {top: 18px; right: 16px;}
    .ui-widget-content .ui-widget-header .ui-dialog-titlebar-close:before {
        content: ''; position: absolute; left: -15px; right: -15px; top: -15px; bottom: -15px;
    }
    .flat-table td {padding: 0.5em 0.5em; font-size: 12px; white-space: nowrap;}

    /*
       vertical room

       The day heading took about 160px before the first task row: a 48px top margin, 30px
       of title, a date line and a 40px gap under it. On an 844px-tall phone that is a
       fifth of the screen spent saying which day you are looking at, on a board that shows
       exactly one day. Tightened it comes to about 86px, which is two more task rows.
    */
    .content-calendar section {padding: 10px 0;}
    h2 {font-size: 26px; line-height: 30px;}

    .top-wrap h2, .top-wrap h2 + p {display: inline-block; vertical-align: baseline; text-align: left;}
    .top-wrap h2 {margin-top: 14px; padding-left: 20px;}
    .top-wrap h2 + p {font-size: 13px; margin: 2px 0 14px 10px;}
    /* no margin-top: this heading is absolutely positioned and the block below places it */
    .bottom-wrap h2 {text-align: left; padding: 0 56px 0 20px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .bottom-wrap h2 + p {font-size: 13px; margin: 2px 0 14px;}
    .bottom-wrap h2 + input[type="text"] {text-align: left; padding-left: 20px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .bottom-wrap {padding-top: 0;}
    .bottom-wrap section {padding-top: 62px;}
    .bottom-wrap h2 {top: 14px;}
    /* A day heading is the page's title; a column heading is one of ten and reads as a
       heading in a list. */
    .bottom-wrap h2, .bottom-wrap h2 + input[type="text"] {font-size: 20px; line-height: 26px;}
    /* The rename pencil and the two arrows both want the top right corner of the column, and
       at this width there is only one of it. The pencil moves in to the left of them - it is
       the smaller target and the rarer one, and the arrows are what a thumb reaches for. */
    .bottom-wrap .column-buttons {right: 104px; padding: 20px 7px;}
    .edit-area {top: 12px;}

    .calendar-scroll-wrap .list-todo li {height: 33px; line-height: 33px; padding: 5px 0;}
    .rules {display: none;}
    #calendar .list-todo, #permanent-wrapper .list-todo {
        min-height: 440px;
        background: repeating-linear-gradient(180deg,
            rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0.13) 1px,
            transparent 1px, transparent 44px);
    }
    .calendar-scroll-wrap .list-todo {margin: 0 20px;}

    section .editing .edit-input, section .new-todo-input, .dialog-new-todo-input,
    .calendar-scroll-wrap .list-todo .dialog textarea {font-size: 16px;}

    .bullets li {margin: 0 7px;}
    .bullets li > a {overflow: visible;}
    .bullets li > a:before {content: ''; position: absolute; left: -7px; right: -7px; top: -18px; bottom: -18px;}

    footer .footer-menu {margin-left: 14px;}
    footer .footer-menu li a {font-size: 12px;}
    .soc-list {margin: 20px 14px 0 0;}
}

.phone-shell, .phone-sheet-scrim {display: none;}

@media only screen and (max-width: 599px) {
    /*
       the strip under the thumb
    */
    .phone-shell {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
        background: #14292f; border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .top-wrap, .bottom-wrap {
        min-height: calc(100vh - 56px); padding-bottom: 199px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    }

    footer {display: none;}

    body {background: #14292f;}

    .phone-strip {padding: 10px 12px 8px;}

    .phone-week {
        display: -webkit-box; display: -ms-flexbox; display: flex;
        overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none; scrollbar-width: none;
    }
    /* the scrollbar is a grey bar across the chips on any platform that draws one */
    .phone-week::-webkit-scrollbar {display: none;}
    .phone-week .phone-day {
        -webkit-box-flex: 0; -ms-flex: 0 0 68px; flex: 0 0 68px;
        height: 52px; margin: 0 2px; border-radius: 12px; text-align: center; cursor: pointer;
        /* the chips are chrome, not content: they take the header's face, not the body's */
        font-family: 'Open Sans', sans-serif; font-weight: 300;
    }
    .phone-week .phone-day span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .phone-week .phone-day-date {font-size: 11px; line-height: 14px; padding-top: 10px; opacity: 0.5;}
    .phone-week .phone-day-name {font-size: 13px; line-height: 18px; opacity: 0.75;}
    .phone-week .phone-day.today .phone-day-name {font-weight: 600;}
    .phone-week .phone-day.active {background: #1a6e4f;}
    .phone-week .phone-day.active .phone-day-date {opacity: 0.7;}
    .phone-week .phone-day.active .phone-day-name {opacity: 1;}

    .phone-bullets {display: none; height: 52px; line-height: 52px; text-align: center;}
    .phone-pager .phone-page {display: inline-block; margin: 0 7px; vertical-align: middle;}
    .phone-pager .phone-page > a {
        display: block; width: 9px; height: 9px; border: 1px solid #fff; border-radius: 100%;
        opacity: 0.5; position: relative;
    }
    .phone-pager .phone-page > a:before {content: ''; position: absolute; left: -7px; right: -7px; top: -18px; bottom: -18px;}
    .phone-pager .phone-page.active > a,
    .phone-pager .phone-page.selected > a {opacity: 1; background: #fff;}

    body.phone-board-someday .phone-week {display: none;}
    body.phone-board-someday .phone-bullets {display: block;}

    .phone-tabs {
        display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
        height: 56px; padding: 0 8px; border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .phone-tab-board[data-board="days"] {justify-self: start;}
    .phone-tab-board[data-board="someday"] {justify-self: end;}
    .phone-tab {
        height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: none;
        font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 14px;
        color: rgba(255, 255, 255, 0.55); cursor: pointer;
    }
    .phone-tab.active {background: rgba(255, 255, 255, 0.12); color: #fff;}
    .phone-tab:focus {outline: 0;}
    .phone-tab:focus-visible {outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 2px;}

    .phone-tab-menu {
        position: relative; width: 56px; padding: 0; font-size: 0;
        background: -webkit-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
        background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
        background-size: 18px 2px; background-position: 50% 27px; background-repeat: no-repeat;
    }
    .phone-tab-menu:before, .phone-tab-menu:after {
        content: ''; position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px;
        background: rgba(255, 255, 255, 0.6); border-radius: 1px;
    }
    .phone-tab-menu:before {top: 15px;}
    .phone-tab-menu:after {top: 21px;}

    .phone-add {
        position: absolute; right: 18px; bottom: 100%; margin-bottom: 16px;
        width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
        background: #1cbd6c; cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 14px 34px -20px rgba(0, 0, 0, 0.6);
    }
    .phone-add:before, .phone-add:after {
        content: ''; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px;
    }
    .phone-add:before {width: 22px; height: 2px; margin: -1px 0 0 -11px;}
    .phone-add:after {width: 2px; height: 22px; margin: -11px 0 0 -1px;}
    .phone-add:active {opacity: 0.85;}
    /* a day in the past, or one already holding TODOS_PER_DAY tasks, has no row to add to */
    .phone-add-off {display: none;}
    body.phone-row-open .phone-add {display: none;}

    .calendar-scroll-wrap .list-todo .btn.add {display: none;}

    .bottom-wrap {display: none;}
    body.phone-board-someday .top-wrap {display: none;}
    body.phone-board-someday .bottom-wrap {display: block;}

    .bullets {display: none;}

    .calendar-scroll-wrap .list-todo .dialog {
        position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 30;
        width: 100%; padding: 8px 20px 76px; border-radius: 18px 18px 0 0;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
        box-shadow: 0 -18px 40px -22px rgba(0, 0, 0, 0.7);
    }
    .calendar-scroll-wrap .list-todo .dialog:after {display: none;}
    .calendar-scroll-wrap .list-todo .dialog:before {
        left: 50%; right: auto; top: 8px; width: 36px; height: 4px; margin-left: -18px;
        background: rgba(255, 255, 255, 0.22); border-radius: 2px;
    }

    .calendar-scroll-wrap .list-todo .dialog > ul {
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-orient: vertical; -webkit-box-direction: normal;
        -ms-flex-direction: column; flex-direction: column;
        max-height: 74vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 12px;
    }
    .calendar-scroll-wrap .list-todo .dialog > ul > li:not([class]):first-child {-ms-flex-order: 1; order: 1;}
    .calendar-scroll-wrap .list-todo .dialog > ul > li.due-date {-ms-flex-order: 2; order: 2;}
    .calendar-scroll-wrap .list-todo .dialog > ul > li:not([class]):not(:first-child) {-ms-flex-order: 3; order: 3;}
    .calendar-scroll-wrap .list-todo .dialog > ul > li.checklist {-ms-flex-order: 4; order: 4;}
    .calendar-scroll-wrap .list-todo .dialog > ul > li.description {-ms-flex-order: 5; order: 5;}
    .calendar-scroll-wrap .list-todo .dialog li {position: static; height: auto; line-height: 22px; padding: 8px 0;}
    .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task {
        position: absolute; left: 20px; right: 20px; bottom: 16px; float: none; height: 48px;
    }
    .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task .btn {
        position: absolute; top: 0; height: 48px; margin: 0; border-radius: 12px;
        background-image: none;
    }
    .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task .btn-glyph {
        display: block; width: 22px; height: 22px; margin: 13px auto; pointer-events: none;
        fill: none; stroke: currentColor; stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round;
    }
    .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task .btn.save {
        left: 64px; right: 0; width: auto; background-color: #1cbd6c; color: #fff;
    }
    .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task .btn.delete {
        left: 0; width: 52px; color: #ff8078; background-color: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 0 0 1px rgba(255, 88, 82, 0.5);
    }


    .calendar-scroll-wrap .list-todo .dialog > ul > li {
        padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.09); line-height: 24px;
    }
    .calendar-scroll-wrap .list-todo .dialog > ul > li:not([class]):first-child {
        padding-top: 2px; border-top: 0;
    }
    .calendar-scroll-wrap .list-todo .dialog .dialog-new-todo-input {
        font-size: 19px; line-height: 28px;
    }
    .calendar-scroll-wrap .list-todo .dialog li .label,
    .calendar-scroll-wrap .list-todo .dialog li .repeat-string {
        opacity: 1; color: rgba(255, 255, 255, 0.62); font-size: 15px; line-height: 24px;
    }
    .calendar-scroll-wrap .list-todo .dialog:hover li p,
    .calendar-scroll-wrap .list-todo .dialog:hover li p.with-input {opacity: 1;}
    .calendar-scroll-wrap .list-todo .dialog li .label .due-date-icon {
        width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
    }
    .calendar-scroll-wrap .list-todo .dialog li .label .due-date-icon:before {left: 5px; top: 2px; height: 5px;}
    .calendar-scroll-wrap .list-todo .dialog li .label .due-date-icon:after {left: 5px; top: 6px; width: 4px;}
    .calendar-scroll-wrap .list-todo .dialog li .repeat-string {padding-left: 30px;}
    .calendar-scroll-wrap .list-todo .dialog li .repeat-string:before {top: 2px;}


    .calendar-scroll-wrap .list-todo .dialog li.due-date div.due-date-field {margin-top: 8px;}
    .calendar-scroll-wrap .list-todo .dialog .dialog-due-date-input {
        padding: 9px 6px 9px 12px; border-radius: 12px; font-size: 16px;
    }
    .calendar-scroll-wrap .list-todo .dialog .dialog-due-date-input::-webkit-calendar-picker-indicator {
        padding: 9px 6px; margin: -9px -6px -9px 0;
    }
    .calendar-scroll-wrap .list-todo .dialog .due-date-clear {
        width: 10%; height: 44px; font-size: 22px; line-height: 44px; opacity: 0.5;
    }

    .calendar-scroll-wrap .list-todo .dialog .dialog-checklist {max-height: none; margin: 6px 0 0;}
    .calendar-scroll-wrap .list-todo .dialog ul.dialog-checklist .dialog-checklist-row {
        min-height: 44px; line-height: 44px; padding: 0 44px 0 38px;
    }
    .calendar-scroll-wrap .list-todo .dialog .dialog-checklist-box {
        top: 10px; width: 24px; height: 24px; border-radius: 7px;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
    }
    .calendar-scroll-wrap .list-todo .dialog .dialog-checklist-row.done .dialog-checklist-box:after {
        left: 9px; top: 5px; width: 6px; height: 11px; border-width: 0 2px 2px 0;
    }
    .calendar-scroll-wrap .list-todo .dialog .dialog-checklist-input {
        font-size: 16px; line-height: 44px;
    }
    .calendar-scroll-wrap .list-todo .dialog .dialog-checklist-remove {
        width: 44px; height: 44px; text-align: center; font-size: 20px; line-height: 44px; opacity: 0.4;
    }
    .calendar-scroll-wrap .list-todo .dialog .checklist-add {
        display: block; margin: 0; padding-left: 6px;
        height: 44px; font-size: 16px; line-height: 44px; opacity: 1;
    }

    .calendar-scroll-wrap .list-todo .dialog li.description textarea {
        height: 66px !important; font-size: 16px; line-height: 24px;
    }

    body.phone-sheet-open #calendar .list-todo,
    body.phone-sheet-open #permanent-wrapper .list-todo {z-index: auto;}

    .phone-sheet-scrim {
        display: block; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 29;
        background: rgba(0, 0, 0, 0.45);
    }
    body.phone-sheet-open .phone-shell {display: none;}
}

@media only screen and (min-width: 600px) and (max-width: 899px) {
    /* just enough gutter for the 41px arrows, instead of 60px a side */
    .calendar-scroll-wrap {margin: 0 44px;}
    .previous-screen, .next-screen {display: none;}
    body {font-size: 14px;}
    h2 {font-size: 24px;}
    .bottom-wrap h2 + input[type="text"] {font-size: 24px;}
    .top-wrap h2, .bottom-wrap h2 {margin-top: 28px;}
    .top-wrap h2 + p, .bottom-wrap h2 + p {margin: 3px 0 22px;}
    .bottom-wrap section {padding-top: 96px;}
    .bottom-wrap h2 {top: 28px;}
    header .menu {padding: 16px 0 0 20px;}
    header .google-icon {width: 44px; height: 44px; margin: 11px 4px 0 0;}
    header .google-icon-glyph {margin-top: 14px;}
    /* the body drops to 14px here; these must not follow it below 16 or iOS zooms in */
    section .editing .edit-input, section .new-todo-input, .dialog-new-todo-input,
    .calendar-scroll-wrap .list-todo .dialog textarea {font-size: 16px;}
}

@media (hover: none) {
    .calendar-scroll-wrap .list-todo li .todo-swipe {position: relative; overflow: hidden;}

    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap {
        display: block; width: 96px; right: -96px; top: 0; bottom: 0; height: auto; padding: 0;
        text-align: left; font-size: 0;
    }
    .calendar-scroll-wrap .list-todo li .text-wrap,
    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap {
        -webkit-transition: -webkit-transform 0.22s ease; transition: transform 0.22s ease;
    }
    .calendar-scroll-wrap .list-todo li.swiped .text-wrap,
    .calendar-scroll-wrap .list-todo li.swiped .todo-swipe .btn-wrap {
        -webkit-transform: translateX(-96px); transform: translateX(-96px);
    }
    .calendar-scroll-wrap .list-todo li.swiping .text-wrap,
    .calendar-scroll-wrap .list-todo li.swiping .todo-swipe .btn-wrap {
        -webkit-transition: none; transition: none;
    }

    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn {
        float: left; width: 48px; height: 100%; margin: 0; padding: 0;
        border-radius: 0; background: none; position: relative;
    }
    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn.edit {background: #b8801a;}
    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn.delete {background: #b23f35;}
    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn:active {opacity: 0.75;}
    /* A recurring task has no edit button, so delete is the only plate and takes the strip. */
    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn:only-child {width: 96px;}

    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn.edit:before {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 4px; height: 13px; margin: -9px 0 0 -2px;
        background: #fff; border-radius: 1px 1px 0 0;
        -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
        -webkit-transform: rotate(45deg); transform: rotate(45deg);
    }
    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn.edit:after {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 0; height: 0; margin: 4px 0 0 -2px;
        border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 5px solid #fff;
        -webkit-transform-origin: 50% 0; transform-origin: 50% 0;
        -webkit-transform: rotate(45deg); transform: rotate(45deg);
    }
    /* the can, then the lid across it */
    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn.delete:before {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 12px; height: 12px; margin: -3px 0 0 -6px;
        border: 2px solid #fff; border-top: 0; border-radius: 0 0 2px 2px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    }
    .calendar-scroll-wrap .list-todo li .todo-swipe .btn-wrap .btn.delete:after {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 16px; height: 2px; margin: -6px 0 0 -8px;
        background: #fff; border-radius: 1px;
    }
}

.btn-wrap-task .btn-glyph {display: none;}

.due-date-icon {position: relative; display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; border: 1px solid currentColor; border-radius: 50%;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.due-date-icon:before, .due-date-icon:after {content: ''; position: absolute; background: currentColor;}
.due-date-icon:before {left: 3px; top: 1px; width: 1px; height: 3px;}
.due-date-icon:after {left: 3px; top: 3px; width: 3px; height: 1px;}

.due-date-mark, .checklist-mark, .rollover-mark {float: right; margin: 0 0 0 8px; height: 20px; padding: 0 6px; border-radius: 10px;
    font-size: 12px; line-height: 20px; white-space: nowrap; box-sizing: border-box;}
.due-date-mark {display: inline-flex; align-items: center; pointer-events: none;
    max-width: 126px; overflow: hidden; letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.due-date-mark .due-date-icon {width: 13px; height: 13px; margin-right: 5px;}
.due-date-mark .due-date-icon:before {left: 5px; top: 2px; height: 4px;}
.due-date-mark .due-date-icon:after {left: 5px; top: 5px; width: 4px;}
.due-date-mark--soon {background: rgba(255, 189, 92, 0.16); color: #ffc978; box-shadow: inset 0 0 0 1px rgba(255, 189, 92, 0.38);}
.due-date-mark--overdue {background: rgba(255, 88, 82, 0.2); color: #ff9d90; box-shadow: inset 0 0 0 1px rgba(255, 112, 100, 0.5), 0 0 10px rgba(255, 88, 82, 0.28);
    -webkit-animation: dueOverduePulse 2.6s ease-in-out infinite; animation: dueOverduePulse 2.6s ease-in-out infinite;}
.due-date-mark--done, .through .due-date-mark, .todo-wrapper.through .due-date-mark {background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.22); box-shadow: none;
    -webkit-animation: none; animation: none;}

@-webkit-keyframes dueOverduePulse {
    0%, 100% {box-shadow: inset 0 0 0 1px rgba(255, 112, 100, 0.5), 0 0 6px rgba(255, 88, 82, 0.18);}
    50% {box-shadow: inset 0 0 0 1px rgba(255, 132, 120, 0.75), 0 0 14px rgba(255, 88, 82, 0.45);}
}
@keyframes dueOverduePulse {
    0%, 100% {box-shadow: inset 0 0 0 1px rgba(255, 112, 100, 0.5), 0 0 6px rgba(255, 88, 82, 0.18);}
    50% {box-shadow: inset 0 0 0 1px rgba(255, 132, 120, 0.75), 0 0 14px rgba(255, 88, 82, 0.45);}
}

.calendar-scroll-wrap .list-todo li:hover .due-date-mark, .ui-sortable-helper:hover .due-date-mark {display: none;}

.calendar-scroll-wrap .list-todo li.due-overdue p.todo-text {color: #ffb3a7; opacity: 0.75;}
.calendar-scroll-wrap .list-todo li.due-overdue:hover p.todo-text {opacity: 1;}
.calendar-scroll-wrap .list-todo li.due-overdue p.todo-text.through {color: inherit;}

.calendar-scroll-wrap .list-todo .dialog li.due-date {height: auto;}
.calendar-scroll-wrap .list-todo .dialog li.due-date .due-date-field {margin-top: 4px; overflow: hidden;}
.dialog-due-date-input {float: left; padding: 3px 5px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 3px; background: rgba(255, 255, 255, 0.06);
    color: #fff; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 300; color-scheme: dark;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.dialog-due-date-input:focus {border-color: rgba(73, 202, 137, 0.7); outline: none;}
.dialog-due-date-day {width: 55%;}
.dialog-due-date-time {width: 30%; margin-left: 3%;}
.dialog-due-date-input:invalid {box-shadow: none;}
.dialog-due-date-input:-moz-ui-invalid {box-shadow: none;}
.due-date-clear {float: right; width: 10%; text-align: right; color: #fff; opacity: 0.35; font-size: 16px; line-height: 24px; text-decoration: none;}
.due-date-clear:hover {opacity: 0.9;}

.tooltip-due {padding-bottom: 4px;}
.tooltip-due .due-date-icon {width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px;}
.tooltip-due .due-date-icon:before {left: 4px; top: 1px; height: 4px;}
.tooltip-due .due-date-icon:after {left: 4px; top: 4px; width: 4px;}
.tooltip-due-caption {font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.6;}
.tooltip-due-value {display: block; margin-top: 3px; font-size: 14px; line-height: 18px;}
.tooltip-due-relative {display: block; font-size: 11px; line-height: 15px; opacity: 0.55;}
.tooltip-due--soon {color: #ffc978;}
.tooltip-due--overdue {color: #fff;}
.tooltip-due--overdue .tooltip-due-caption {display: inline-block; padding: 1px 7px; border-radius: 9px;
    background: #e0453c; color: #fff; opacity: 1; font-weight: 600;}
.tooltip-due + .tooltip-description {margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.15);}

.menu-list li a.remove-account-link {color: #8b5a5a;}
.menu-list li a.remove-account-link:hover {color: #d95c5c; border-right: #b34141 4px solid;}

.remove-account-overlay {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(9, 21, 25, 0.75); z-index: 1000;}
.remove-account-overlay.open {display: block;}
.remove-account-dialog {position: absolute; left: 50%; top: 50%; width: 460px; max-width: 90%; margin: 0; padding: 30px 40px 35px; background: #27925c; border-radius: 5px; font-family: 'Open Sans', sans-serif; color: #c6ebd8;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}
.remove-account-dialog h3 {color: #fff; font-size: 24px; line-height: 30px; margin: 0 0 20px 0; font-weight: 300;}
.remove-account-dialog p {font-size: 14px; line-height: 20px; color: #bbe4cf; margin-bottom: 15px;}
.remove-account-dialog p strong {color: #fff; font-weight: 600; white-space: nowrap;}
.remove-account-dialog .remove-account-confirmation {width: 100%; height: 46px; padding: 0 15px; background: 0; border: 2px solid #8cd2af; border-radius: 5px; color: #fff; font-size: 16px; font-family: 'Open Sans', sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.remove-account-dialog .remove-account-confirmation::-moz-placeholder {color: #c6ebd8;}
.remove-account-dialog .remove-account-confirmation::-webkit-input-placeholder {color: #c6ebd8;}
.remove-account-dialog .remove-account-error {display: block; min-height: 20px; margin-top: 8px; font-size: 13px; color: #ffd2d2;}
.remove-account-buttons {margin-top: 15px; overflow: hidden;}
.remove-account-buttons button {height: 46px; width: 48%; border-radius: 5px; background: 0; font-size: 15px; font-family: 'Open Sans', sans-serif; cursor: pointer;}
.remove-account-buttons .remove-account-cancel {float: left; border: 2px solid #8cd2af; border-bottom: 4px solid #8cd2af; color: #c6ebd8;}
.remove-account-buttons .remove-account-cancel:hover {background: #369c68;}
.remove-account-buttons .remove-account-submit {float: right; background: #d0453a; border: 2px solid #d0453a; border-bottom: 4px solid #a5322a; color: #fff;}
.remove-account-buttons .remove-account-submit:hover {background: #b8382e; border-color: #b8382e; border-bottom-color: #8f2a22;}
/* dimmed rather than faded: opacity over the green panel turns the red to mud */
.remove-account-buttons .remove-account-submit[disabled], .remove-account-buttons .remove-account-submit.disabled {background: #7d4a44; border-color: #7d4a44; border-bottom-color: #693c37; color: #d8bcb9; cursor: default;}

.checklist-mark {position: relative; pointer-events: none;
    overflow: hidden; letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
    background: rgba(73, 202, 137, 0.14); color: #7fdcae; box-shadow: inset 0 0 0 1px rgba(73, 202, 137, 0.32);
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.rollover-mark {display: inline-flex; align-items: center; gap: 4px;
    font-variant-numeric: tabular-nums;
    color: #f5c983; background: rgba(245, 201, 131, 0.14); box-shadow: inset 0 0 0 1px rgba(245, 201, 131, 0.35);}
.rollover-mark svg {display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;}
.tooltip-rollover {font-size: 13px; line-height: 18px;}
.tooltip-due + .tooltip-rollover, .tooltip-description + .tooltip-rollover, .tooltip-checklist + .tooltip-rollover {margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.15);}
.through .rollover-mark, .todo-wrapper.through .rollover-mark {color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); box-shadow: none;}
.calendar-scroll-wrap .list-todo li:hover .rollover-mark, .ui-sortable-helper:hover .rollover-mark {display: none;}
.checklist-mark-fill {position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(73, 202, 137, 0.34);}
.checklist-mark-text {position: relative;}
.checklist-mark--full {background: rgba(73, 202, 137, 0.28); color: #d7f6e6; box-shadow: inset 0 0 0 1px rgba(73, 202, 137, 0.5);}
.checklist-mark--full .checklist-mark-fill {background: rgba(73, 202, 137, 0.26);}
/* A completed task says nothing about its boxes and its boxes say nothing about it, so a
   struck-through row simply dims the badge instead of changing what it counts. */
.through .checklist-mark, .todo-wrapper.through .checklist-mark {background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.22); box-shadow: none;}
.through .checklist-mark .checklist-mark-fill,
.todo-wrapper.through .checklist-mark .checklist-mark-fill {background: rgba(255, 255, 255, 0.07);}
/* Same reason as the deadline badge: on hover the row becomes a panel and the buttons take
   that corner, so the mark steps out of the way entirely. */
.calendar-scroll-wrap .list-todo li:hover .checklist-mark, .ui-sortable-helper:hover .checklist-mark {display: none;}

/* the list inside the hover tooltip, where a box is one click and nothing else moves */
.tooltip-checklist-row {padding: 3px 0; cursor: pointer; font-size: 13px; line-height: 17px;}
.tooltip-due + .tooltip-checklist, .tooltip-description + .tooltip-checklist {margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.15);}
.tooltip-checklist-box {display: inline-block; position: relative; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);}
.tooltip-checklist-row:hover .tooltip-checklist-box {box-shadow: inset 0 0 0 1px #fff;}
.tooltip-checklist-row.done .tooltip-checklist-box {background: #fff; box-shadow: none;}
.tooltip-checklist-row.done .tooltip-checklist-box:after {content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px;
    border: solid #27925c; border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.tooltip-checklist-row.done .tooltip-checklist-text {opacity: 0.55; text-decoration: line-through;}

/* the editor inside the create/edit dialog */
.calendar-scroll-wrap .list-todo .dialog li.checklist {height: auto;}
/* Capped height with its own scroll: twenty items may not push the dialog past the bottom
   of the column, which is what decides whether it opens upwards. */
.dialog-checklist {margin: 4px 0 0; padding: 0; max-height: 92px; overflow-y: auto;}
.calendar-scroll-wrap .list-todo .dialog .dialog-checklist-row {position: relative; height: auto; line-height: 18px; padding: 2px 14px 2px 20px; border: 0; list-style: none;}
.dialog-checklist-box {position: absolute; left: 0; top: 5px; width: 12px; height: 12px; cursor: pointer;
    border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);}
.dialog-checklist-box:hover {box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);}
.dialog-checklist-row.done .dialog-checklist-box {background: #49CA89; box-shadow: none;}
.dialog-checklist-row.done .dialog-checklist-box:after {content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px;
    border: solid #14292f; border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.dialog-checklist-input {width: 100%; padding: 0; background: none; border: 0; outline: none;
    color: #fff; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 300; line-height: 18px;}
.dialog-checklist-row.done .dialog-checklist-input {opacity: 0.45; text-decoration: line-through;}
.dialog-checklist-remove {position: absolute; right: 0; top: 0; color: #fff; opacity: 0.3; font-size: 14px; line-height: 18px; text-decoration: none;}
.dialog-checklist-remove:hover {opacity: 0.9;}
.checklist-add {display: inline-block; margin-top: 4px; color: #7fdcae; font-size: 11px; text-decoration: none; opacity: 0.85;}
.checklist-add:hover {opacity: 1;}