/* HTML5 */
html { height:100%; width:100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
body, button, input, select, textarea { font-family: inherit!important;}
html, body, h1, h2, h3, h4, h5, h6, p, em, strong, abbr, acronym, blockquote, q, cite, ins, del, dfn, a, div, span, pre, hr, address, br, b, i, sub, sup, big, small, tt, table, tr, caption, thead, tbody, tfoot,
col, colgroup, form, input, label, textarea, button, fieldset, legend, select, option, optiongroup, ul, ol, li, dl, dt, dd, code, var, kdb, samp, img, object, param, map, area, bdo, iframe, article, aside, canvas,
details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
padding:0; margin:0; outline:0; font-size:100%;
}
a:focus { -moz-outline-style:none; }
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* text mobile */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;}
svg:not(:root) { overflow: hidden; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0;}
/*** print styles ***/
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/*! jQuery UI - v1.11.4 - 2015-07-27
* http://jqueryui.com
* Includes: core.css, draggable.css, resizable.css, selectable.css, sortable.css, button.css, datepicker.css, dialog.css, menu.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-dialog{overflow:hidden;position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:none}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{position:relative;margin:0;padding:3px 1em 3px .4em;cursor:pointer;min-height:0;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-widget{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;background:#eee url("../bundles/todocore/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #e78f08;background:#f6a828 url("../bundles/todocore/css/images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;color:#fff;font-weight:bold}.ui-widget-header a{color:#fff}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #ccc;background:#f6f6f6 url("../bundles/todocore/css/images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#1c94c4}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#1c94c4;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #fbcb09;background:#fdf5ce url("../bundles/todocore/css/images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#c77405}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#c77405;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #fbd850;background:#fff url("../bundles/todocore/css/images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#eb8f00}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#eb8f00;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fed22f;background:#ffe45c url("../bundles/todocore/css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#b81900 url("../bundles/todocore/css/images/ui-bg_diagonals-thick_18_b81900_40x40.png") 50% 50% repeat;color:#fff}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#fff}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#fff}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("../bundles/todocore/css/images/ui-icons_222222_256x240.png")}.ui-widget-header .ui-icon{background-image:url("../bundles/todocore/css/images/ui-icons_ffffff_256x240.png")}.ui-state-default .ui-icon{background-image:url("../bundles/todocore/css/images/ui-icons_ef8c08_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("../bundles/todocore/css/images/ui-icons_ef8c08_256x240.png")}.ui-state-active .ui-icon{background-image:url("../bundles/todocore/css/images/ui-icons_ef8c08_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("../bundles/todocore/css/images/ui-icons_228ef1_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("../bundles/todocore/css/images/ui-icons_ffd27a_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#666 url("../bundles/todocore/css/images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;opacity:.5;filter:Alpha(Opacity=50)}.ui-widget-shadow{margin:-5px 0 0 -5px;padding:5px;background:#000 url("../bundles/todocore/css/images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;opacity:.2;filter:Alpha(Opacity=20);border-radius:5px}
/*
Version: 3.5.1 Timestamp: Tue Jul 22 18:58:56 EDT 2014
*/
.select2-container {
margin: 0;
position: relative;
display: inline-block;
/* inline-block for ie7 */
zoom: 1;
*display: inline;
vertical-align: middle;
}
.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
/*
Force border-box so that % widths fit the parent
container without overlap because of margin/padding.
More Info : http://www.quirksmode.org/css/box.html
*/
-webkit-box-sizing: border-box; /* webkit */
-moz-box-sizing: border-box; /* firefox */
box-sizing: border-box; /* css3 */
}
.select2-container .select2-choice {
display: block;
height: 26px;
padding: 0 0 0 8px;
overflow: hidden;
position: relative;
border: 1px solid #aaa;
white-space: nowrap;
line-height: 26px;
color: #444;
text-decoration: none;
border-radius: 4px;
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
background-image: linear-gradient(to top, #eee 0%, #fff 50%);
}
html[dir="rtl"] .select2-container .select2-choice {
padding: 0 8px 0 0;
}
.select2-container.select2-drop-above .select2-choice {
border-bottom-color: #aaa;
border-radius: 0 0 4px 4px;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
background-image: linear-gradient(to bottom, #eee 0%, #fff 90%);
}
.select2-container.select2-allowclear .select2-choice .select2-chosen {
margin-right: 42px;
}
.select2-container .select2-choice > .select2-chosen {
margin-right: 26px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: none;
width: auto;
}
html[dir="rtl"] .select2-container .select2-choice > .select2-chosen {
margin-left: 26px;
margin-right: 0;
}
.select2-container .select2-choice abbr {
display: none;
width: 12px;
height: 12px;
position: absolute;
right: 24px;
top: 8px;
font-size: 1px;
text-decoration: none;
border: 0;
background: url('../bundles/todocore/css/select2/select2.png') right top no-repeat;
cursor: pointer;
outline: 0;
}
.select2-container.select2-allowclear .select2-choice abbr {
display: inline-block;
}
.select2-container .select2-choice abbr:hover {
background-position: right -11px;
cursor: pointer;
}
.select2-drop-mask {
border: 0;
margin: 0;
padding: 0;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 9998;
/* styles required for IE to work */
background-color: #fff;
filter: alpha(opacity=0);
}
.select2-drop {
width: 100%;
margin-top: -1px;
position: absolute;
z-index: 9999;
top: 100%;
background: #fff;
color: #000;
border: 1px solid #aaa;
border-top: 0;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}
.select2-drop.select2-drop-above {
margin-top: 1px;
border-top: 1px solid #aaa;
border-bottom: 0;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
}
.select2-drop-active {
border: 1px solid #5897fb;
border-top: none;
}
.select2-drop.select2-drop-above.select2-drop-active {
border-top: 1px solid #5897fb;
}
.select2-drop-auto-width {
border-top: 1px solid #aaa;
width: auto;
}
.select2-drop-auto-width .select2-search {
padding-top: 4px;
}
.select2-container .select2-choice .select2-arrow {
display: inline-block;
width: 18px;
height: 100%;
position: absolute;
right: 0;
top: 0;
border-left: 1px solid #aaa;
border-radius: 0 4px 4px 0;
background-clip: padding-box;
background: #ccc;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
background-image: linear-gradient(to top, #ccc 0%, #eee 60%);
}
html[dir="rtl"] .select2-container .select2-choice .select2-arrow {
left: 0;
right: auto;
border-left: none;
border-right: 1px solid #aaa;
border-radius: 4px 0 0 4px;
}
.select2-container .select2-choice .select2-arrow b {
display: block;
width: 100%;
height: 100%;
background: url('../bundles/todocore/css/select2/select2.png') no-repeat 0 1px;
}
html[dir="rtl"] .select2-container .select2-choice .select2-arrow b {
background-position: 2px 1px;
}
.select2-search {
display: inline-block;
width: 100%;
min-height: 26px;
margin: 0;
padding-left: 4px;
padding-right: 4px;
position: relative;
z-index: 10000;
white-space: nowrap;
}
.select2-search input {
width: 100%;
height: auto !important;
min-height: 26px;
padding: 4px 20px 4px 5px;
margin: 0;
outline: 0;
font-family: sans-serif;
font-size: 1em;
border: 1px solid #aaa;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: #fff url('../bundles/todocore/css/select2/select2.png') no-repeat 100% -22px;
background: url('../bundles/todocore/css/select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: url('../bundles/todocore/css/select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('../bundles/todocore/css/select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('../bundles/todocore/css/select2/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}
html[dir="rtl"] .select2-search input {
padding: 4px 5px 4px 20px;
background: #fff url('../bundles/todocore/css/select2/select2.png') no-repeat -37px -22px;
background: url('../bundles/todocore/css/select2/select2.png') no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: url('../bundles/todocore/css/select2/select2.png') no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('../bundles/todocore/css/select2/select2.png') no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('../bundles/todocore/css/select2/select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}
.select2-drop.select2-drop-above .select2-search input {
margin-top: 4px;
}
.select2-search input.select2-active {
background: #fff url('../bundles/todocore/css/select2/select2-spinner.gif') no-repeat 100%;
background: url('../bundles/todocore/css/select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: url('../bundles/todocore/css/select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('../bundles/todocore/css/select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('../bundles/todocore/css/select2/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
border: 1px solid #5897fb;
outline: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}
.select2-dropdown-open .select2-choice {
border-bottom-color: transparent;
-webkit-box-shadow: 0 1px 0 #fff inset;
box-shadow: 0 1px 0 #fff inset;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to top, #fff 0%, #eee 50%);
}
.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
border: 1px solid #5897fb;
border-top-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
}
.select2-dropdown-open .select2-choice .select2-arrow {
background: transparent;
border-left: none;
filter: none;
}
html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow {
border-right: none;
}
.select2-dropdown-open .select2-choice .select2-arrow b {
background-position: -18px 1px;
}
html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow b {
background-position: -16px 1px;
}
.select2-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* results */
.select2-results {
max-height: 200px;
padding: 0 0 0 4px;
margin: 4px 4px 4px 0;
position: relative;
overflow-x: hidden;
overflow-y: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html[dir="rtl"] .select2-results {
padding: 0 4px 0 0;
margin: 4px 0 4px 4px;
}
.select2-results ul.select2-result-sub {
margin: 0;
padding-left: 0;
}
.select2-results li {
list-style: none;
display: list-item;
background-image: none;
}
.select2-results li.select2-result-with-children > .select2-result-label {
font-weight: bold;
}
.select2-results .select2-result-label {
padding: 3px 7px 4px;
margin: 0;
cursor: pointer;
min-height: 1em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select2-results-dept-1 .select2-result-label { padding-left: 20px }
.select2-results-dept-2 .select2-result-label { padding-left: 40px }
.select2-results-dept-3 .select2-result-label { padding-left: 60px }
.select2-results-dept-4 .select2-result-label { padding-left: 80px }
.select2-results-dept-5 .select2-result-label { padding-left: 100px }
.select2-results-dept-6 .select2-result-label { padding-left: 110px }
.select2-results-dept-7 .select2-result-label { padding-left: 120px }
.select2-results .select2-highlighted {
background: #3875d7;
color: #fff;
}
.select2-results li em {
background: #feffde;
font-style: normal;
}
.select2-results .select2-highlighted em {
background: transparent;
}
.select2-results .select2-highlighted ul {
background: #fff;
color: #000;
}
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error,
.select2-results .select2-selection-limit {
background: #f4f4f4;
display: list-item;
padding-left: 5px;
}
/*
disabled look for disabled choices in the results dropdown
*/
.select2-results .select2-disabled.select2-highlighted {
color: #666;
background: #f4f4f4;
display: list-item;
cursor: default;
}
.select2-results .select2-disabled {
background: #f4f4f4;
display: list-item;
cursor: default;
}
.select2-results .select2-selected {
display: none;
}
.select2-more-results.select2-active {
background: #f4f4f4 url('../bundles/todocore/css/select2/select2-spinner.gif') no-repeat 100%;
}
.select2-results .select2-ajax-error {
background: rgba(255, 50, 50, .2);
}
.select2-more-results {
background: #f4f4f4;
display: list-item;
}
/* disabled styles */
.select2-container.select2-container-disabled .select2-choice {
background-color: #f4f4f4;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}
.select2-container.select2-container-disabled .select2-choice .select2-arrow {
background-color: #f4f4f4;
background-image: none;
border-left: 0;
}
.select2-container.select2-container-disabled .select2-choice abbr {
display: none;
}
/* multiselect */
.select2-container-multi .select2-choices {
height: auto !important;
height: 1%;
margin: 0;
padding: 0 5px 0 0;
position: relative;
border: 1px solid #aaa;
cursor: text;
overflow: hidden;
background-color: #fff;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
background-image: linear-gradient(to bottom, #eee 1%, #fff 15%);
}
html[dir="rtl"] .select2-container-multi .select2-choices {
padding: 0 0 0 5px;
}
.select2-locked {
padding: 3px 5px 3px 5px !important;
}
.select2-container-multi .select2-choices {
min-height: 26px;
}
.select2-container-multi.select2-container-active .select2-choices {
border: 1px solid #5897fb;
outline: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}
.select2-container-multi .select2-choices li {
float: left;
list-style: none;
}
html[dir="rtl"] .select2-container-multi .select2-choices li
{
float: right;
}
.select2-container-multi .select2-choices .select2-search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}
.select2-container-multi .select2-choices .select2-search-field input {
padding: 5px;
margin: 1px 0;
font-family: sans-serif;
font-size: 100%;
color: #666;
outline: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: transparent !important;
}
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
background: #fff url('../bundles/todocore/css/select2/select2-spinner.gif') no-repeat 100% !important;
}
.select2-default {
color: #999 !important;
}
.select2-container-multi .select2-choices .select2-search-choice {
padding: 3px 5px 3px 18px;
margin: 3px 0 3px 5px;
position: relative;
line-height: 13px;
color: #333;
cursor: default;
border: 1px solid #aaaaaa;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #e4e4e4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice
{
margin: 3px 5px 3px 0;
padding: 3px 18px 3px 5px;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
background: #d4d4d4;
}
.select2-search-choice-close {
display: block;
width: 12px;
height: 13px;
position: absolute;
right: 3px;
top: 4px;
font-size: 1px;
outline: none;
background: url('../bundles/todocore/css/select2/select2.png') right top no-repeat;
}
html[dir="rtl"] .select2-search-choice-close {
right: auto;
left: 3px;
}
.select2-container-multi .select2-search-choice-close {
left: 3px;
}
html[dir="rtl"] .select2-container-multi .select2-search-choice-close {
left: auto;
right: 2px;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
background-position: right -11px;
}
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
background-position: right -11px;
}
/* disabled styles */
.select2-container-multi.select2-container-disabled .select2-choices {
background-color: #f4f4f4;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
padding: 3px 5px 3px 5px;
border: 1px solid #ddd;
background-image: none;
background-color: #f4f4f4;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none;
background: none;
}
/* end multiselect */
.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
text-decoration: underline;
}
.select2-offscreen, .select2-offscreen:focus {
clip: rect(0 0 0 0) !important;
width: 1px !important;
height: 1px !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important;
outline: 0 !important;
left: 0px !important;
top: 0px !important;
}
.select2-display-none {
display: none;
}
.select2-measure-scrollbar {
position: absolute;
top: -10000px;
left: -10000px;
width: 100px;
height: 100px;
overflow: scroll;
}
/* Retina-ize icons */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
.select2-search input,
.select2-search-choice-close,
.select2-container .select2-choice abbr,
.select2-container .select2-choice .select2-arrow b {
background-image: url('../bundles/todocore/css/select2/select2x2.png') !important;
background-repeat: no-repeat !important;
background-size: 60px 40px !important;
}
.select2-search input {
background-position: 100% -21px !important;
}
}
.introjs-overlay{position:absolute;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}
/*.introjs-fixParent{z-index:auto!important;opacity:1.0!important;position:absolute!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}*/
tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999!important}.introjs-disableInteraction{z-index:99999999!important;position:absolute}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{position:relative}.introjs-helperLayer{position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-tooltipReferenceLayer{position:absolute;z-index:10000000;background-color:transparent;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperLayer *,.introjs-helperLayer *:before,.introjs-helperLayer *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.introjs-helperNumberLayer{position:absolute;top:-16px;left:-16px;z-index:9999999999!important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:bold;color:white;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid white;border-radius:50%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid white;content:'';position:absolute}.introjs-arrow.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.right-bottom{bottom:10px;right:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.bottom{bottom:-10px;border-top-color:white;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:#27925c;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left-bottom{left:-10px;bottom:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-tooltip{position:absolute;padding:10px;background-color:white;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right;white-space:nowrap}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjs-progress{overflow:hidden;height:10px;margin:10px 0 5px 0;border-radius:4px;background-color:#ecf0f1}.introjs-progressbar{float:left;width:0;height:100%;font-size:10px;line-height:10px;text-align:center;background-color:#08c}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%}
/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: #fff;
}
/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
overflow: hidden;
}
/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
/* border-color: ... !important; */
}
/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
cursor: help;
margin-left: 4px;
}
/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
padding: 0;
font-size: 0;
line-height: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9999999;
pointer-events: none;
width: auto;
overflow: visible;
}
.tooltipster-base .tooltipster-content {
overflow: hidden;
}
/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
display: block;
text-align: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {
display: block;
width: 0;
height: 0;
position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 8px solid;
bottom: -7px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
border-left: 9px solid transparent !important;
border-right: 9px solid transparent !important;
border-top: 9px solid;
bottom: -7px;
}
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 8px solid;
top: -7px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
border-left: 9px solid transparent !important;
border-right: 9px solid transparent !important;
border-bottom: 9px solid;
top: -7px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
left: 0;
right: 0;
margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
left: 5px;
}
.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
border-left: 8px solid;
top: 50%;
margin-top: -7px;
right: -7px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {
border-top: 9px solid transparent !important;
border-bottom: 9px solid transparent !important;
border-left: 9px solid;
margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
border-right: 8px solid;
top: 50%;
margin-top: -7px;
left: -7px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {
border-top: 9px solid transparent !important;
border-bottom: 9px solid transparent !important;
border-right: 9px solid;
margin-top: -8px;
}
/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
.tooltipster-fade-show {
opacity: 1;
}
.tooltipster-grow {
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-swing {
opacity: 0;
-webkit-transform: rotateZ(4deg);
-moz-transform: rotateZ(4deg);
-o-transform: rotateZ(4deg);
-ms-transform: rotateZ(4deg);
transform: rotateZ(4deg);
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
}
.tooltipster-swing-show {
opacity: 1;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}
.tooltipster-fall {
top: 0;
-webkit-transition-property: top;
-moz-transition-property: top;
-o-transition-property: top;
-ms-transition-property: top;
transition-property: top;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-fall-show {
}
.tooltipster-fall.tooltipster-dying {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
top: 0px !important;
opacity: 0;
}
.tooltipster-slide {
left: -40px;
-webkit-transition-property: left;
-moz-transition-property: left;
-o-transition-property: left;
-ms-transition-property: left;
transition-property: left;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-slide-show {
}
.tooltipster-slide.tooltipster-dying {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
left: 0px !important;
opacity: 0;
}
/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
opacity: 0.5;
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
/*** Reset CSS Load ***/
@import "../bundles/todocore/css/reset.css";
@import "../bundles/todocore/css/print.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("../bundles/todocore/images/icons.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; margin: 70px auto 30px;}
.menu-wrapper .acc-name {font-weight: normal; margin-bottom: 30px; font-size: 18px;}
.avatar-wrap .acc-menu-btn {position: absolute; width: 18px; height: 18px; top: 0; right: 0; border: 0; background: url("../bundles/todocore/css/img/menu-acc-icon.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;}
.acc-menu-cls-btn {
background: url("../bundles/todocore/css/img/close-popup.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;}
/*
header
*/
header {font-family: 'Open Sans', sans-serif; font-weight: 300; height: 67px; position: relative;background: url("../bundles/todocore/images/top-bg-days_v2.png") repeat 0 0; background-size: 100%;}
header > div {position: relative;}
header .log-out {float: right; padding-top: 8px; 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("../bundles/todocore/images/log-out.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;}
header .menu {float: left; padding: 18px 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}
header .menu-btn:before {background: url("../bundles/todocore/css/img/menu.png") no-repeat 0 0 transparent; content: ''; width: 21px; height: 16px; display: inline-block; vertical-align: middle; margin: 0 14px 0 -35px;}
header .menu-btn:hover:before {background-position: 0 -16px;}
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 . 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;}
header .google-icon {
float: right;
margin-top: 19px;
margin-right: 10px;
cursor: help;
}
header .google-icon.disconnected {
color: #7d8a8e;
}
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("../bundles/todocore/css/img/arrow-lang.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("../bundles/todocore/images/top-bg-days_v2.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("../bundles/todocore/images/bottom-bg-days_v2.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("../bundles/todocore/css/img/line.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("../bundles/todocore/css/img/line_green.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("../bundles/todocore/images/arrow.png") no-repeat 0 0;}
.navigation-arrow a.next:before, .navigation-arrow a.prev:before {background: url("../bundles/todocore/images/arrow_.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("../bundles/todocore/images/arrow_.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("../bundles/todocore/images/arrow_.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("../bundles/todocore/images/arrow_.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("../bundles/todocore/images/arrow_.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("../bundles/todocore/images/arrow_.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("../bundles/todocore/css/img/arrow-lang.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;}
#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("../bundles/todocore/css/img/close-popup.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);
}
.avatar-wrap .fa-upload, .avatar-wrap .fa-spinner.fa-spin {bottom: 0; right: 0; cursor: pointer; position: absolute; color: #5F6B6F}
/*.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("../bundles/todocore/css/img/soc-iсon.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.vk {background-position: 0 -76px}
.soc-list li a.vk:hover {background-position: 0 -96px}
.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("../bundles/todocore/css/img/close-popup.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("../bundles/todocore/images/arrow_.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("../bundles/todocore/images/arrow_.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("../bundles/todocore/images/arrow_.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("../bundles/todocore/css/images/ui-bg_flat_10_000000_40x100.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;}
.content-calendar section.current {background: none;}
.bottom-wrap .calendar-scroll-wrap section:first-child {display: block;}
header {height: 56px;}
header .username, header .logo {display: none;}
header .menu {display: none;}
header .log-out {display: block; float: right; margin-right: 6px; padding-top: 8px;}
/* 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;}
/* 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 {float: right; margin: 2px 0 0 8px; pointer-events: none;
max-width: 96px; height: 16px; padding: 0 6px; overflow: hidden; white-space: nowrap;
border-radius: 9px; font-size: 10px; line-height: 16px; 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--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 {float: right; position: relative; margin: 2px 0 0 8px; pointer-events: none;
height: 16px; padding: 0 6px; overflow: hidden; white-space: nowrap;
border-radius: 9px; font-size: 10px; line-height: 16px; 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;}
.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;}
/*
Mint Wash — the light theme (direction C of the theme study)
The sheet keeps the colour and *today* becomes the clean white page, which is the
inverse of how the dark build works: there the week is dark and today is the lighter
green. Every rule that repaints something is scoped under `.theme-mint` on <html>, so
style.css is never edited and the dark build stays exactly what it was — the whole
change is one `git revert` wide.
The class is stamped in the <head> before first paint (layout.html.twig); adding it on
DOMContentLoaded would show a frame of the dark theme first.
Three things style.css does that do not survive a light ground, and what replaces them:
· hierarchy is opacity white text at .5, completed at .2. On mint that fades toward
the page, and a done task at 20% is invisible rather than
quiet. Every level becomes an explicit ink token below;
opacity is left to hover and to the nav chrome only.
· the sheet is a PNG top-bg-days_v2.png / bottom-bg-days_v2.png stretched
100% 100%, with nothing in them to recolour. Both become
gradients, and so does the ruled grid: img/line.png is a 1x31
tile with its line on the first row, which is exactly the
31px row pitch, so a repeating-linear-gradient reproduces it
pixel for pixel.
· alarm is a glow the overdue badge pulses an outer red halo — legible on a dark
column, a smudge on white. The pulse moves into the ring and
the fill, and the text darkens to #A93027 so a passed deadline
still reads as an alarm at 10px.
No new image assets. The sprites that stay on the green header band (menu.png,
log-out.png, arrow-lang.png) are still white-on-green and need nothing; the
ones that end up on the mint sheet — the navigation arrows in arrow.png / arrow_.png —
are inverted rather than redrawn. images/icons.png is already coloured discs with white
glyphs, so it reads on either ground untouched.
The account drawer, the jQuery UI dialogs, the intro.js tour and the undo panel are all
green overlays that sit *above* the sheet rather than on it; they are deliberately left
alone, exactly as they are in the dark build.
*/
/*
theme toggle (both themes)
*/
/* Not scoped: the button lives in the header in the dark build too, where it sits on
#112328 rather than on the green band. Translucent white works on both.
position:relative is load-bearing, not cosmetic. header:before is an absolutely
positioned 10%-black wash over the full height of the band, and a positioned element
paints above static in-flow content however early it sits in the DOM — so it swallows
every click aimed at a float underneath it. That is why .wrap-lang and .menu-btn are
both position:relative in style.css. Making the button positioned puts it in the same
layer, where being later in the DOM wins.
Under .theme-mint that wash is re-used as a 1px hairline and stops covering anything,
so the bug this avoids only ever showed on the way *back* from dark to light. */
.theme-toggle {
position: relative;
float: right;
width: 31px;
height: 31px;
margin: 18px 16px 0 0;
padding: 0;
border: 0;
border-radius: 100%;
line-height: 0;
cursor: pointer;
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.09);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
-webkit-transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.theme-toggle:hover {
color: #fff;
background: rgba(255, 255, 255, 0.17);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.theme-toggle:focus {outline: 0;}
.theme-toggle:focus-visible {outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 2px;}
/* 31px is under any usable touch minimum, and the ring is the whole target - there is no
larger box around it to grow instead. Below the tablet tier it simply becomes 44.
This lives here rather than in style.css's phone block with the rest of the header work,
because the button is declared here and this file loads second: the same rule over there
has the same specificity and loses. */
@media only screen and (max-width: 599px) {
/* centred in a 56px band, which is what the phone header comes down to */
.theme-toggle {width: 44px; height: 44px; margin: 6px 4px 0 0;}
}
@media only screen and (min-width: 600px) and (max-width: 899px) {
.theme-toggle {width: 44px; height: 44px; margin: 11px 10px 0 0;}
}
.theme-toggle-icon {
display: none;
width: 15px;
height: 15px;
margin: 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Keyed on the *mode* rather than on .theme-mint: in auto the resolved theme is either one,
and the glyph has to say "following the system" instead of naming a colour. The half-lit
disc is auto, the sun is pinned light, the moon is pinned dark. layout.html.twig ships
data-sw-theme="auto" on <html> so one icon still shows if the script never runs. */
[data-sw-theme="auto"] .theme-toggle-auto,
[data-sw-theme="light"] .theme-toggle-sun,
[data-sw-theme="dark"] .theme-toggle-moon {display: block;}
/*
tokens
*/
.theme-mint {
--sw-band-top: #0f5c3a;
--sw-band-bottom: #17724a;
--sw-sheet-top: #eaf4ec;
--sw-sheet-bottom: #e4f0e7;
--sw-perm: #dfede3;
--sw-current: #ffffff;
--sw-ink: #123024;
--sw-mute: #4f6a5b;
--sw-faint: #93ac9d;
--sw-rule: #d3e4d8;
--sw-div: #cbdfd1;
--sw-badge-bg: #deebe1;
--sw-badge-ink: #5c7566;
--sw-badge-ring: #cde0d3;
--sw-soon-bg: #f8ebd3;
--sw-soon-ink: #8a5906;
--sw-soon-ring: #e2c48a;
--sw-over-bg: #f8e1dd;
--sw-over-ink: #a93027;
--sw-over-ring: #e7ada4;
--sw-gmark: #3563c6;
--sw-rec: #0c6e88;
--sw-lift: 0 1px 2px rgba(18, 48, 36, 0.05), 0 14px 34px -20px rgba(18, 48, 36, 0.4);
}
/*
ground
*/
.theme-mint body {color: var(--sw-ink); background: var(--sw-sheet-bottom);}
/*
header + footer
*/
.theme-mint header {
background: -webkit-linear-gradient(top, var(--sw-band-top), var(--sw-band-bottom));
background: linear-gradient(180deg, var(--sw-band-top), var(--sw-band-bottom));
}
/* header:before is a full-bleed 10% black wash over the PNG. The gradient is already the
exact colour it should be, so the pseudo-element is re-used as the hairline that keeps
the band from bleeding into the sheet below it. */
.theme-mint header:before {top: auto; bottom: 0; height: 1px; opacity: 1; background: rgba(9, 42, 27, 0.4);}
/* logo0000.png is white "Simple" + #1cbd6c "Week". That green was picked against a
near-black band and goes muddy on a green one; lifting and desaturating the whole sprite
lands "Week" near #49d28d while white — already clipped — stays white. */
.theme-mint header .logo img {-webkit-filter: brightness(1.18) saturate(0.72); filter: brightness(1.18) saturate(0.72);}
.theme-mint footer {
background: -webkit-linear-gradient(top, var(--sw-band-bottom), var(--sw-band-top));
background: linear-gradient(180deg, var(--sw-band-bottom), var(--sw-band-top));
}
.theme-mint footer .footer-menu li a {opacity: 0.55;}
.theme-mint footer .footer-menu li a:hover {opacity: 0.9;}
.theme-mint footer .footer-menu li.version {color: rgba(255, 255, 255, 0.5);}
.theme-mint .soc-list li {color: rgba(255, 255, 255, 0.5);}
/* The switcher sits on the light band, where the dark build's black wash reads as a
smudge and its muted text is too low-contrast. Same shape, warmer well, brighter text.
*/
.theme-mint header .workspace-switcher {background: rgba(9, 42, 27, 0.22);}
.theme-mint header .workspace-segment .workspace-name {color: rgba(255, 255, 255, 0.78);}
.theme-mint header .workspace-segment.active .workspace-name {color: #fff;}
.theme-mint header .workspace-segment.active {background: rgba(255, 255, 255, 0.22);}
.theme-mint header .workspace-segment .workspace-shortcut {
color: rgba(255, 255, 255, 0.6);
background: rgba(9, 42, 27, 0.28);
}
.theme-mint header .workspace-segment .edit-workspace-name {color: rgba(255, 255, 255, 0.6);}
.theme-mint header .workspace-segment .edit-workspace-name:hover {color: #fff;}
/* The language dropdown hangs off the header, so it wants the band's warm green rather
than the cold near-black it uses over the dark build. */
.theme-mint .lang-list li {background: var(--sw-ink);}
.theme-mint .lang-list li:hover {background: var(--sw-band-bottom);}
/*
the sheet
*/
.theme-mint .top-wrap {
background: -webkit-linear-gradient(top, var(--sw-sheet-top), var(--sw-sheet-bottom));
background: linear-gradient(180deg, var(--sw-sheet-top), var(--sw-sheet-bottom));
}
.theme-mint .bottom-wrap {background: var(--sw-perm); border-top: 1px solid var(--sw-div);}
/* Today is the clean page. The lift is the one thing here the token table does not
describe: flat white against #eaf4ec is only a 4% step, and the shadow is what makes it
read as a sheet of paper on top of the wash rather than a slightly paler column. */
.theme-mint .content-calendar section.current {background: var(--sw-current); box-shadow: var(--sw-lift);}
.theme-mint .calendar-scroll-wrap > section {border-left-color: var(--sw-div);}
.theme-mint .top-wrap h2, .theme-mint .bottom-wrap h2 {color: var(--sw-ink);}
.theme-mint .top-wrap h2 + p, .theme-mint .bottom-wrap h2 + p {opacity: 1; color: var(--sw-mute);}
.theme-mint .bottom-wrap h2 + input[type="text"] {color: var(--sw-ink);}
.theme-mint .bottom-wrap .column-buttons {color: var(--sw-faint);}
.theme-mint .bottom-wrap .column-buttons .fa-pencil:hover {color: var(--sw-mute);}
/* img/line.png is one transparent 1x31 column with white at 20% on its first row. Same
pitch, same phase — the line sits at the top of each 31px band. */
.theme-mint .rules {
background: repeating-linear-gradient(180deg, var(--sw-rule) 0, var(--sw-rule) 1px, transparent 1px, transparent 31px);
}
.theme-mint #permanent-wrapper .rules {
background: repeating-linear-gradient(180deg, var(--sw-div) 0, var(--sw-div) 1px, transparent 1px, transparent 31px);
}
/* One rule colour cannot serve both grounds: #d3e4d8 is a soft line on the #eaf4ec wash and
a hard one on today's white page, where it reads cooler and louder than its neighbours.
The lighter tone puts the same perceived weight on white. */
.theme-mint .content-calendar section.current .rules {
background: repeating-linear-gradient(180deg, #e3efe7 0, #e3efe7 1px, transparent 1px, transparent 31px);
}
/*
task rows
*/
.theme-mint .calendar-scroll-wrap .list-todo li, .theme-mint .ui-sortable-helper {border-top-color: var(--sw-rule);}
.theme-mint .calendar-scroll-wrap section.current .list-todo li {border-top-color: var(--sw-badge-ring);}
.theme-mint .calendar-scroll-wrap .list-todo li p, .theme-mint .ui-sortable-helper p {opacity: 1; color: var(--sw-mute);}
/* Gated for the same reason as its counterpart in style.css: :hover sticks to the last
thing a finger touched, so on a phone the tapped row alone would sit at full ink. */
@media (hover: hover) {
.theme-mint .calendar-scroll-wrap .list-todo li:hover p, .theme-mint .ui-sortable-helper:hover p {opacity: 1; color: var(--sw-ink);}
}
.theme-mint .calendar-scroll-wrap .list-todo li p.through, .theme-mint .ui-sortable-helper p.through {opacity: 1; color: var(--sw-faint);}
@media (hover: hover) {
.theme-mint .calendar-scroll-wrap .list-todo li:hover p.through, .theme-mint .ui-sortable-helper:hover p.through {color: var(--sw-faint);}
}
.theme-mint .calendar-scroll-wrap .list-todo li p.repeat_week, .theme-mint .ui-sortable-helper p.repeat_week {color: var(--sw-rec);}
/* Task links are white in the dark build. Inheriting keeps them on whatever level the row
is at, so a link in a completed task fades with the rest of it instead of staying loud. */
.theme-mint .todo-text a, .theme-mint .recurring .todo-text a {color: inherit;}
.theme-mint .description-dott {opacity: 1; color: var(--sw-faint);}
.theme-mint .through .description-dott {opacity: 1; color: #bacfc1;}
/* The blue is dark enough on mint that the halo it needed against the dark column is only
noise; the bar carries it on its own. */
.theme-mint .google-event-mark {background: var(--sw-gmark); box-shadow: none; opacity: 0.8;}
.theme-mint .through .google-event-mark, .theme-mint .todo-wrapper.through .google-event-mark {opacity: 0.3;}
/* Long titles expand into a card on hover. #14292f is a hole in the page here; white with a
ring and a shadow keeps the row legible on the mint sheet *and* on the white column,
where a plain white card would have no edge at all. */
@media (hover: hover) {
.theme-mint .calendar-scroll-wrap .list-todo li:hover .text-wrap.long,
.theme-mint .ui-sortable-helper:hover .text-wrap.long {
background: #fff;
box-shadow: inset 0 0 0 1px var(--sw-rule), var(--sw-lift);
}
}
/* The input you type a new task straight into on a row, and its inline-edit twin. Both are
`color: #fff` over `background: none`, so on the sheet they are white on mint and on
today's column they are white on white — you cannot see what you are typing at all.
Not the same element as the dialog's input, which carries its colour inline. */
.theme-mint .new-todo-input, .theme-mint .edit-input {color: var(--sw-ink);}
.theme-mint .new-todo-input::-webkit-input-placeholder, .theme-mint .edit-input::-webkit-input-placeholder {color: var(--sw-faint);}
.theme-mint .new-todo-input::-moz-placeholder, .theme-mint .edit-input::-moz-placeholder {color: var(--sw-faint);}
.theme-mint .sortable-ghost {border-color: var(--sw-band-bottom) !important;}
.theme-mint .todos-list .sortable-ghost p {color: var(--sw-ink) !important;}
/*
due dates
*/
.theme-mint .due-date-mark {
background: var(--sw-badge-bg);
color: var(--sw-badge-ink);
box-shadow: inset 0 0 0 1px var(--sw-badge-ring);
}
.theme-mint .due-date-mark--soon {
background: var(--sw-soon-bg);
color: var(--sw-soon-ink);
box-shadow: inset 0 0 0 1px var(--sw-soon-ring);
}
.theme-mint .due-date-mark--overdue {
background: var(--sw-over-bg);
color: var(--sw-over-ink);
box-shadow: inset 0 0 0 1px var(--sw-over-ring);
-webkit-animation: dueOverduePulseLight 2.6s ease-in-out infinite;
animation: dueOverduePulseLight 2.6s ease-in-out infinite;
}
.theme-mint .due-date-mark--done,
.theme-mint .through .due-date-mark,
.theme-mint .todo-wrapper.through .due-date-mark {
background: #e9f2eb;
color: #a7bdaf;
box-shadow: none;
-webkit-animation: none;
animation: none;
}
/* Same beat as dueOverduePulse, no outer glow: the ring tightens and the fill deepens. */
@-webkit-keyframes dueOverduePulseLight {
0%, 100% {background: #f8e1dd; box-shadow: inset 0 0 0 1px #e7ada4;}
50% {background: #f5d3cd; box-shadow: inset 0 0 0 1px #d68c81;}
}
@keyframes dueOverduePulseLight {
0%, 100% {background: #f8e1dd; box-shadow: inset 0 0 0 1px #e7ada4;}
50% {background: #f5d3cd; box-shadow: inset 0 0 0 1px #d68c81;}
}
/* The dark build dims an overdue title to .75 so the red does not shout. On mint the red is
dark enough to sit at full strength, and dimming it would only muddy the hue. */
.theme-mint .calendar-scroll-wrap .list-todo li.due-overdue p.todo-text {opacity: 1; color: var(--sw-over-ink);}
.theme-mint .calendar-scroll-wrap .list-todo li.due-overdue:hover p.todo-text {color: var(--sw-over-ink);}
.theme-mint .calendar-scroll-wrap .list-todo li.due-overdue p.todo-text.through {color: var(--sw-faint);}
/*
navigation arrows
*/
/* arrow.png is a white plate in its top half and a green one in its bottom, which is what
the :hover background-position swaps to. So the resting plate is inverted to read as a
soft gutter shadow on the sheet, and the hover state drops the filter to let the brand
green through untouched — inverting *that* would land on magenta. */
.theme-mint .navigation-arrow a.prev:after, .theme-mint .navigation-arrow a.next:after {
-webkit-filter: invert(1); filter: invert(1); opacity: 0.07;
}
@media (hover: hover) {
.theme-mint .navigation-arrow a.prev:hover:after, .theme-mint .navigation-arrow a.next:hover:after {
-webkit-filter: none; filter: none; opacity: 1;
}
}
/* The chevron is white: dark on the mint sheet at rest, and back to white once the green
plate is under it. */
.theme-mint .navigation-arrow a.prev:before, .theme-mint .navigation-arrow a.next:before {
-webkit-filter: invert(1); filter: invert(1); opacity: 0.45;
}
@media (hover: hover) {
.theme-mint .navigation-arrow a.prev:hover:before, .theme-mint .navigation-arrow a.next:hover:before {
-webkit-filter: none; filter: none;
}
}
.theme-mint .navigation-arrow a.begin,
.theme-mint .navigation-arrow a.end,
.theme-mint .navigation-arrow a.home-link,
.theme-mint .navigation-arrow .picker {
-webkit-filter: invert(1); filter: invert(1); opacity: 0.4;
}
@media (hover: hover) {
.theme-mint .navigation-arrow a.begin:hover,
.theme-mint .navigation-arrow a.end:hover,
.theme-mint .navigation-arrow a.home-link:hover,
.theme-mint .navigation-arrow .picker:hover {opacity: 0.85;}
}
.theme-mint .bullets li > a {border-color: var(--sw-ink); opacity: 0.35;}
@media (hover: hover) {
.theme-mint .bullets li > a:hover:after {background: var(--sw-ink);}
}
.theme-mint .bullets li.active > a, .theme-mint .bullets li.selected > a {opacity: 1; background: var(--sw-ink);}
.theme-mint .bullets li.disable > a {opacity: 0.15;}
/*
create / edit dialog
*/
/* The dialog is a card on the page rather than a hole in it. Its two 10px end-caps are
separate pseudo-elements, so all three carry the same fill and the same shadow — their
top edges line up, which makes the shadow underneath continuous. */
.theme-mint .calendar-scroll-wrap .list-todo .dialog,
.theme-mint .calendar-scroll-wrap .list-todo .dialog:after,
.theme-mint .calendar-scroll-wrap .list-todo .dialog:before {
background: #fff;
box-shadow: 0 10px 28px -14px rgba(18, 48, 36, 0.45);
}
.theme-mint .calendar-scroll-wrap .list-todo .dialog li p {opacity: 1; color: var(--sw-mute);}
.theme-mint .calendar-scroll-wrap .list-todo .dialog:hover li p {opacity: 1;}
.theme-mint .calendar-scroll-wrap .list-todo .dialog:hover li p.with-input:hover {opacity: 1;}
.theme-mint .calendar-scroll-wrap .list-todo .dialog li .time-block input {color: var(--sw-ink);}
/* The task input and the description textarea carry `color: #fff` as an inline style from
the templates, which no ordinary rule can reach. */
.theme-mint .dialog .dialog-new-todo-input, .theme-mint .dialog textarea {color: var(--sw-ink) !important;}
.theme-mint .dialog textarea::-webkit-input-placeholder {color: var(--sw-faint);}
.theme-mint .dialog textarea::-moz-placeholder {color: var(--sw-faint);}
/* The bell and repeat glyphs come out of the same white arrow_.png sprite as the nav. */
.theme-mint .calendar-scroll-wrap .list-todo .dialog li .remember-string:before,
.theme-mint .calendar-scroll-wrap .list-todo .dialog li .repeat-string:before {
-webkit-filter: invert(1); filter: invert(1); opacity: 0.55;
}
.theme-mint .dialog-due-date-input {
border-color: var(--sw-badge-ring);
background: #f5faf6;
color: var(--sw-ink);
color-scheme: light;
}
.theme-mint .dialog-due-date-input:focus {border-color: #4fae82;}
.theme-mint .due-date-clear {color: var(--sw-mute); opacity: 0.5;}
.theme-mint .due-date-clear:hover {opacity: 1;}
/* The frequency dropdown. select2 appends its list to <body>, so it cannot be scoped by
ancestor — but the account drawer's copy of it only exists while body.menu-opened is
set, and that one stays green. */
.theme-mint .dialog .select2-container .select2-choice {color: var(--sw-mute);}
.theme-mint .dialog .select2-container .select2-choice .select2-arrow b {border-top-color: var(--sw-faint);}
.theme-mint body:not(.menu-opened) .select2-drop,
.theme-mint body:not(.menu-opened) .select2-drop-active,
.theme-mint body:not(.menu-opened) .select2-drop.select2-drop-above.select2-drop-active {
color: var(--sw-mute);
background: #fff;
box-shadow: inset 0 0 0 1px var(--sw-rule), 0 10px 28px -14px rgba(18, 48, 36, 0.45);
}
.theme-mint body:not(.menu-opened) .select2-results li {opacity: 1;}
.theme-mint body:not(.menu-opened) .select2-results .select2-result-label {border-top-color: #e6f0e9;}
.theme-mint body:not(.menu-opened) .select2-results .select2-highlighted .select2-result-label {color: var(--sw-band-bottom);}
/* Checklists. The badge borrows the deadline badge's neutral pill so two marks on one row
read as a pair, and takes a softer green than the accent used for "soon" and "overdue" —
a checklist is progress, not a warning. The fill is a shade of the pill rather than a
colour of its own: it has to stay quiet enough to read the count over. */
.theme-mint .checklist-mark {
background: #dcefe3;
color: #2f7a55;
box-shadow: inset 0 0 0 1px #c2ddcc;
}
.theme-mint .checklist-mark--full {
background: #cbe9d7;
color: #1f6242;
box-shadow: inset 0 0 0 1px #a9d5ba;
}
.theme-mint .through .checklist-mark,
.theme-mint .todo-wrapper.through .checklist-mark {
background: #e9f2eb;
color: #a7bdaf;
box-shadow: none;
}
.theme-mint .checklist-mark-fill {background: #bfe3ce;}
.theme-mint .checklist-mark--full .checklist-mark-fill {background: #b3ddc4;}
.theme-mint .through .checklist-mark .checklist-mark-fill,
.theme-mint .todo-wrapper.through .checklist-mark .checklist-mark-fill {background: #dfeae2;}
/* The dialog is a light panel in this theme, so the editor's boxes and text follow the
sheet's ink rather than the white the dark theme writes on the green column. */
.theme-mint .dialog .dialog-checklist-input {color: var(--sw-ink);}
.theme-mint .dialog .dialog-checklist-box {box-shadow: inset 0 0 0 1px var(--sw-badge-ring); background: #f5faf6;}
.theme-mint .dialog .dialog-checklist-box:hover {box-shadow: inset 0 0 0 1px #8fbfa2;}
.theme-mint .dialog .dialog-checklist-row.done .dialog-checklist-box {background: #4fae82; box-shadow: none;}
.theme-mint .dialog .dialog-checklist-row.done .dialog-checklist-box:after {border-color: #fff;}
.theme-mint .dialog .dialog-checklist-remove {color: var(--sw-mute); opacity: 0.5;}
.theme-mint .dialog .dialog-checklist-remove:hover {opacity: 1;}
.theme-mint .dialog .checklist-add {color: #2f7a55;}
/*
phone portrait
Rows are 41px there, so style.css hides .rules - a 31px tile - and paints the ruled grid
on the list itself at the row's pitch. That is a `background`, which means it replaces
the mint one wholesale rather than tinting it, so each grid the desktop draws needs
saying again here at the phone's pitch.
`#calendar` and `#permanent-wrapper` are in the selectors because style.css paints
through those ids, and an id is what it takes to answer one.
The day board is the white page here, rather than one column of it.
On a desktop the white page is how *today* is picked out of five columns standing side
by side. A phone shows one day, so there is nothing to pick it out from - and the card
cost something real: `.top-wrap` keeps its last 199px clear so the fixed strip and the
floating add button have somewhere to be, and a card sized to its own content stops at
the tenth ruled line and hands that clearance back to the wash. What you saw was a white
sheet ending a fifth of the way up the screen and a band of mint under it, edged by the
card's own lift - a card on a page on a floor, three grounds in a screen that has one
thing on it.
So the page runs to the strip: the white moves onto `.top-wrap`, which is already
`100vh - 56px` tall with the clearance inside it, and the card and its shadow come off.
Two grounds left - the page, and the green floor the strip is - with the hairline on
`.phone-shell` between them.
What said "today" is not lost with the card. The chip for the day you are on is the same
white page in miniature, today's chip is the bold one, and the heading is the date
itself; on a board of one day those are the things being read anyway.
The rules go with the ground. #d3e4d8 is a soft line on the mint wash and a hard one on
white, so the lighter tone that was today's alone is now every day's - the same swap the
desktop makes per column, made once for the board.
*/
@media only screen and (max-width: 599px) {
.theme-mint .top-wrap {background: var(--sw-current);}
.theme-mint .content-calendar section.current {background: none; box-shadow: none;}
.theme-mint #calendar .list-todo {
background: repeating-linear-gradient(180deg,
#e3efe7 0, #e3efe7 1px, transparent 1px, transparent 44px);
}
.theme-mint #permanent-wrapper .list-todo {
background: repeating-linear-gradient(180deg,
var(--sw-div) 0, var(--sw-div) 1px, transparent 1px, transparent 44px);
}
}
/*
the phone shell (<= 599)
The mint half of the strip under the thumb, the chips in it and the task sheet. The shape
of all three is in style.css; what is here is only what a light ground changes, which is
colour - with one exception: the sheet's grip and its shadow, which the mint dialog rules
above would otherwise win with a white-on-white grip and a shadow drawn for a card that
floats rather than a sheet that is anchored to the bottom edge.
The dark build paints this chrome on #14292f, the same near-black the language dropdown
and the task dialog use. On mint it is the permanent board's own green - the strip is the
floor of the page, not a panel over it.
*/
@media only screen and (max-width: 599px) {
.theme-mint .phone-shell {background: var(--sw-perm); border-top-color: var(--sw-div);}
.theme-mint .phone-tabs {border-top-color: var(--sw-div);}
.theme-mint .phone-week .phone-day-date {opacity: 1; color: var(--sw-faint);}
.theme-mint .phone-week .phone-day-name {opacity: 1; color: var(--sw-mute);}
/* Today is the white page on this theme, and the chip for the day you are on is the
same page in miniature - the lift is what tells it from the wash behind it, exactly as
it does for the column itself. */
.theme-mint .phone-week .phone-day.active {background: var(--sw-current); box-shadow: var(--sw-lift);}
.theme-mint .phone-week .phone-day.active .phone-day-date {color: var(--sw-mute);}
.theme-mint .phone-week .phone-day.active .phone-day-name {color: var(--sw-ink);}
.theme-mint .phone-pager .phone-page > a {border-color: var(--sw-faint); opacity: 1;}
.theme-mint .phone-pager .phone-page.active > a,
.theme-mint .phone-pager .phone-page.selected > a {background: var(--sw-ink); border-color: var(--sw-ink);}
.theme-mint .phone-tab {color: var(--sw-mute);}
.theme-mint .phone-tab.active {background: var(--sw-rule); color: var(--sw-ink);}
.theme-mint .phone-tab:focus-visible {outline-color: var(--sw-band-bottom);}
.theme-mint .phone-tab-menu {
background: -webkit-linear-gradient(var(--sw-mute), var(--sw-mute));
background: linear-gradient(var(--sw-mute), var(--sw-mute));
background-size: 18px 2px; background-position: 50% 27px; background-repeat: no-repeat;
}
.theme-mint .phone-tab-menu:before, .theme-mint .phone-tab-menu:after {background: var(--sw-mute);}
.theme-mint .phone-add {background: var(--sw-band-bottom); box-shadow: var(--sw-lift);}
/* the sheet */
.theme-mint .calendar-scroll-wrap .list-todo .dialog {
box-shadow: 0 1px 2px rgba(18, 48, 36, 0.05), 0 -18px 40px -22px rgba(18, 48, 36, 0.5);
}
.theme-mint .calendar-scroll-wrap .list-todo .dialog:before {background: var(--sw-rule);}
.theme-mint .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task .btn.save {background-color: var(--sw-band-bottom);}
.theme-mint .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task .btn.delete {
color: var(--sw-over-ink); background-color: transparent;
box-shadow: inset 0 0 0 1px var(--sw-over-ring);
}
/* The sheet's rows are bands with a hairline between them and a 24px tick-box at the
head of each checklist row (see the sheet block in style.css). Both are written there
in white-on-dark, and both have to be said again here: a rule at 9% white and a ring at
28% are not there at all on a white sheet. The geometry is not repeated - only the
colour, which is what this file is for. */
.theme-mint .calendar-scroll-wrap .list-todo .dialog > ul > li {border-top-color: var(--sw-rule);}
.theme-mint .calendar-scroll-wrap .list-todo .dialog li .label,
.theme-mint .calendar-scroll-wrap .list-todo .dialog li .repeat-string {color: var(--sw-mute);}
.theme-mint .calendar-scroll-wrap .list-todo .dialog .dialog-checklist-box {
box-shadow: inset 0 0 0 2px var(--sw-badge-ring);
}
.theme-mint .calendar-scroll-wrap .list-todo .dialog .dialog-checklist-row.done .dialog-checklist-box {
box-shadow: none;
}
.theme-mint .phone-sheet-scrim {background: rgba(18, 48, 36, 0.38);}
}
.bugme a, .bugme a:hover {
-o-transition: color 0.25s ease-in;
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.25s ease-in;
}
.bugme {
width: 100%;
position: absolute;
float: left;
clear: both;
padding: 15px 20px;
background: #27925c;
color: #fff;
font-size: 17px;
line-height: 1.4;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-weight: 400;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bugme.bugme-fixed {
position: fixed;
top: 0;
left: 0;
}
/* For IE7 users where border box doesn't work */
.ie7 .bugme {
width: 96%;
padding: 15px 2%;
}
.bugme a {
color: #fff;
font-weight: 600;
}
.bugme a:hover {
opacity: 0.8;
}
/* the close button */
.bugme-close {
position: absolute;
top: 15px;
right: 20px;
text-decoration: none;
font-weight: 600;
color: #fff;
min-width: 44px;
min-height: 44px;
text-align: right;
}
.bugme-close.bugme-close-left {
right: auto;
left: 0;
}
@media screen and (max-width: 48em) { /* 768px */
.bugme {
padding: 20px;
}
}
@media screen and (max-width: 37.5em) { /* 600px */
.bugme {
padding: 20px 30px;
}
}
.bugmebar-animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1.25s;-moz-animation-duration:1.25s;-ms-animation-duration:1.25s;-o-animation-duration:1.25s;animation-duration:1.25s;}
@-webkit-keyframes bugmebar-bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
} 60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bugmebar-bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bugmebar-bounceInDown {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
60% {
opacity: 1;
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bugmebar-bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bugmebar-bounceInDown {
-webkit-animation-name: bugmebar-bounceInDown;
-moz-animation-name: bugmebar-bounceInDown;
-o-animation-name: bugmebar-bounceInDown;
animation-name: bugmebar-bounceInDown;
}
@-webkit-keyframes bugmebar-bounceOutUp {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes bugmebar-bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-o-keyframes bugmebar-bounceOutUp {
0% {
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(20px);
}
100% {
opacity: 0;
-o-transform: translateY(-2000px);
}
}
@keyframes bugmebar-bounceOutUp {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.bugmebar-bounceOutUp {
-webkit-animation-name: bugmebar-bounceOutUp;
-moz-animation-name: bugmebar-bounceOutUp;
-o-animation-name: bugmebar-bounceOutUp;
animation-name: bugmebar-bounceOutUp;
}
.bugme-bottom {background: #248154}