button:focus, input:focus, textarea:focus {outline:0 !important;}
/* phones */
@media all and (max-width : 360px) {
    html,body {font-size: 10px}
    .htab {font-size:1em;padding:0.7em 0 0.7em 0}
}
@media all and (min-width : 361px) and (max-width : 500px) {
    html,body {font-size: 10px}
    .htab {font-size:1.1em;padding:0.5em 0 0.7em 0}
}

/* phones */
@media all and (min-width : 501px) and (max-width : 640px) {
    html,body {font-size: 10px}
    .htab {font-size:1.4em;padding:0.3em 0 0.7em 0}
}


/* phones */
@media all and (min-width : 641px) and (max-width : 767px) {
    html,body {font-size: 12px}
    .htab {font-size:1.5em;padding:0.3em 0 0.7em 0}
}

/* iPads, portrait */
@media all and (min-width : 768px) and (max-width : 999px) {
    html,body {font-size: 14px}
    .htab {font-size:1.5em;padding:0.3em 0 0.7em 0}
}

/* smaller screens */
@media only screen and (min-width : 1000px) and (max-width : 1349px) {
    html,body {font-size: 18px}
    .htab {font-size:1.5em;padding:0.3em 0 0.7em 0}
}

/* medium screens */
@media all and (min-width : 1350px) and (max-width : 1799px) {
    html,body {font-size: 18px}
    .htab {font-size:1.5em;padding:0.3em 0 0.7em 0}
}

/* big screens */
@media all and (min-width : 1800px) {
    html,body {font-size: 20px}
    .htab {font-size:1.5em;padding:0.3em 0 0.7em 0}
}

@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

@media (any-hover: hover) {
	
}

html,body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    font-family: "system";
}
body{
    background-color:#1a1548;
    /*background-color:#5a1548; -> offline color */
    transition: background-color 1s;
}
#crfl {
    font-size:0.5em;
    color: white;
    position:fixed;
    top:0;
    right: 0;
    text-align: center;
    z-index: 1;
}
#header {
    width:100%;
    padding-top:1em;
    background-color: inherit;
    position: relative;
}
#language {
    font-size: 1em;
}
.nav_btn {
    background-color: #4479BA;
    color: white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.nav_btn:hover{
    background: #356094;
    border: solid 1px #2A4E77;
}
.nav_btn:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;

}

.nav_btn.selected {
    background-color: white;
    color: black;
    cursor:auto;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
}

.htab {
    /*background-color: #8484be;*/
    /*padding:0.3em 0 0.7em 0;*/
    margin-right: 1px;
    display:inline-block;
    text-align: center;
    cursor: pointer;
    float:left;
    font-family: arial, sans-serif;
}


#language {
    /*width:0px;*/
    float: right;
}

#hamburger_menu_btn {
    float: right;
    width: 1.4em;
    height: 1.4em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 0.3em;
}

#hamburger_menu_btn span {
    display: block;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}

#hamburger_menu_btn:hover span {
    background-color: #ccc;
}

#hamburger_menu {
    display: none;
    position: absolute;
    right: 0;
    top: 2.5em;
    margin: 0;
    padding: 0;
    list-style: none;
    background: white;
    min-width: 10em;
    z-index: 1000;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
}

#hamburger_menu.show {
    display: block;
}

#hamburger_menu li {
    padding: 0.5em 1em;
    cursor: pointer;
    font-family: arial, sans-serif;
    font-size: 1em;
}

#hamburger_menu li:hover {
    background-color: #E0E0E0;
}

#hyear {
    width: 3em;
}

@media all and (max-width : 767px) {
    #hmonth {
	    width: 4em;
	}
	#hweek {
	    width: 5em;
	}
	#hday {
	    width: 9em;
	}
}
@media all and (min-width : 768px) {
    #hmonth {
	    width: 6em;
	}
	#hweek {
	    width: 5em;
	}
	#hday {
	    width: 13em;
	}
}





#content_box {
    background-color: white;
    border-left: solid 1px #2A4E77;
    position: absolute;
    /*width: 100%; */
    /*min-height: 100%;*/
    top: 3.4em;
    bottom: 0;
    left: 0;
    right: 8em;
}
#right_sidebar {
    position: absolute;
    top: 3.4em;
    bottom: 0;
    right:0;
    width: 8em;
    padding: 0 3px;
    background-color: inherit;
}

.content {
        display: none;
        line-height: 1.5em;
        height: inherit;
}
.content.selected {
    display: block;
}

.content .todo_list {
        position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:1em 1em 0 1em;

    overflow-y: auto;
}
/*
.content .todo_list h1 {
        font-size:1.5em;
        line-height: 1em;
        margin: 0;
        display: inline;
}*/

.content .learnings {
        position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:0.5em 1em 1em 1em;
}

.content .learnings .space {
        width:1.3em;
        height: 1.5em;
        margin-right: 0.5em;
        display: inline-block;
        visibility: hidden;
}

.content .learnings textarea {
        width: 80%; /*this gets recomputed*/
        height: 100%;
        padding:0;
        margin:0;
        /*border: 1px dotted #000000; */
        border:0;

        background-color: #F0F0F0;

        outline: none;
        resize: none;
        overflow: auto;

        font-size:1em;

        background: #F0F0F0 url(images/wdylt.png) center center no-repeat;
        background-size: contain;
}


.todo_txt {
    border: 0;
    border-bottom: 1px dotted #000000;
    border-radius: 0;
    outline:0;
    font-size:1em;
    height: 1.2em;
    padding:0.2em 0 0 0;

    width:80%; /*this gets recomputed*/
}
.todo_txt.highlight_red {
	background-color: red;
}
.todo_txt.highlight_yellow {
	background-color: yellow;
}
.todo_txt.highlight_green {
	background-color: green;
}

.done .todo_txt {
    text-decoration: line-through;
    color: grey;
}
.donelater .todo_txt {
    text-decoration: line-through;
    color: #800000;
}
.notneeded .todo_txt {
    text-decoration: line-through;
    color: #c0c0c0;
}
.section .todo_txt {
    font-weight: bolder;
    font-size: 1.2em;
    height: 1.2em;
    padding:0;
    vertical-align: top;
    font-family: inherit;
}
.section, .empty, .notdone, .done, .doing, .onhold, .donelater, .notneeded {
        height: 1.5em;
}
/*.todo_txt:hover {
        background-color: #F4F4F4;
}*/
.todo_status {
    width:1.3em;
    height: 1.5em;
    display: inline-block;
    margin-right: 0.5em;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="1000" width="785.714"><path d="M624.96 142.912h-464.256q-36.828 0 -63.054 26.226t-26.226 63.054v464.256q0 36.828 26.226 63.054t63.054 26.226h464.256q36.828 0 63.054 -26.226t26.226 -63.054v-464.256q0 -36.828 -26.226 -63.054t-63.054 -26.226zm160.704 89.28v464.256q0 66.402 -47.151 113.553t-113.553 47.151h-464.256q-66.402 0 -113.553 -47.151t-47.151 -113.553v-464.256q0 -66.402 47.151 -113.553t113.553 -47.151h464.256q66.402 0 113.553 47.151t47.151 113.553z" fill="black"/></svg>') no-repeat center center;

    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.empty .todo_status {
        visibility: hidden;
}
.notdone .todo_status {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="1000" width="785.714"><path d="M624.96 142.912h-464.256q-36.828 0 -63.054 26.226t-26.226 63.054v464.256q0 36.828 26.226 63.054t63.054 26.226h464.256q36.828 0 63.054 -26.226t26.226 -63.054v-464.256q0 -36.828 -26.226 -63.054t-63.054 -26.226zm160.704 89.28v464.256q0 66.402 -47.151 113.553t-113.553 47.151h-464.256q-66.402 0 -113.553 -47.151t-47.151 -113.553v-464.256q0 -66.402 47.151 -113.553t113.553 -47.151h464.256q66.402 0 113.553 47.151t47.151 113.553z" fill="black"/></svg>');
}
.doing .todo_status {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"><path d="m636.990112,191.191757c-32.670715,0 -59.148315,28.106186 -59.148315,62.784409c0,18.139221 7.242981,34.480255 18.829895,45.942596l-46.2005,-12.088318l-72.576294,19.440094l-28.656311,62.767792l-6.48468,11.553528l-8.726196,15.305176l26.585266,6.066193l50.843201,-60.344208l19.293396,4.736572l-29.754456,136.062195l0.2229,0.526428l-81.099243,75.654297l-86.069824,-63.191223l-24.389862,11.925598l8.52356,16.307861l80.22464,103.735352l152.492676,-61.816589l78.835938,-20.339783l42.965149,107.431885l24.779053,3.192871l4.729187,-31.473145l-20.045715,-129.151855l-91.236816,-15.755768l38.723267,-101.766571l87.73468,34.414551l70.059998,-92.784973l12.919067,-6.875427l4.613403,-22.758789l-20.101929,-9.253601l-87.436218,70.908325l-54.290466,-35.908661c29.780334,-3.266205 53.008179,-29.988831 53.008179,-62.462402c0,-34.678223 -26.49823,-62.784409 -59.166626,-62.784409l0,0z" id="path4206" fill="black" transform="translate(-310,-180)"/></svg>');
}
.onhold .todo_status {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" viewBox="4 2 28 26" width="32px" height="32px" xmlns="http://www.w3.org/2000/svg"><path d="M11.961,7.404c0.446-0.044,0.918,0,1.389,0.144c0.891,0.273,1.582,0.848,1.97,1.538c0.19,0.337,0.527,0.468,0.892,0.341  c0.521-0.182,1.116-0.226,1.721-0.117l-2.247,7.319L15.7,16.63l0.44,0.041l0.178,0.017c0.093,0.008,0.183,0.017,0.275,0.025  l2.192-7.141c0.561,0.25,1.028,0.619,1.357,1.062c0.231,0.31,0.583,0.391,0.929,0.218c0.709-0.354,1.604-0.441,2.494-0.168  c0.471,0.144,0.887,0.374,1.231,0.66c0.598,0.496,0.968,0.199,0.799-0.892c-0.433-2.8-2.351-5.247-5.153-6.28l0.113-0.367  c0.072-0.235-0.06-0.484-0.295-0.557c-0.24-0.076-0.484,0.061-0.557,0.295L19.59,3.911c-2.901-0.718-5.863,0.232-7.792,2.309  C11.048,7.026,11.188,7.48,11.961,7.404z M8.278,15.666c0,0,0.689,0.811,1.801,1.952c0.275,0.288,0.57,0.603,0.897,0.922  c0.162,0.161,0.328,0.326,0.498,0.496l0.257,0.256l0.254,0.245l0.147,0.115c0.126,0.103,0.564,0.371,0.754,0.42  c0.121,0.043,0.226,0.084,0.363,0.118c0.152,0.032,0.308,0.058,0.464,0.073c0.266,0.004,0.535,0.008,0.806,0.013h9.569  c0.46-0.012,0.856-0.377,0.918-0.848c0.069-0.521-0.298-0.999-0.819-1.067l-10.135-1.134l-0.018-0.02l-0.062-0.068l-3.486-3.593  c-0.29-0.268-0.664-0.405-1.039-0.405c-0.351,0-0.703,0.12-0.992,0.365C7.808,14.054,7.73,15.021,8.278,15.666z M6.548,13.358  c1.169,0,2.117-0.948,2.117-2.117S7.717,9.124,6.548,9.124s-2.117,0.948-2.117,2.117C4.431,12.41,5.379,13.358,6.548,13.358z   M25.898,24.061l-1.705-2.565c-0.014-0.021-0.03-0.043-0.047-0.064c-0.004-0.005-0.01-0.007-0.014-0.011  c-0.092-0.216-0.289-0.38-0.535-0.421h-9.954c-0.017-0.002-0.037,0.002-0.055,0h-1.286l-6.516-6.352  C5.484,14.354,5,14.359,4.705,14.663c-0.295,0.303-0.288,0.786,0.015,1.081l6.22,6.055l-1.504,2.263  c-0.168,0.255-0.122,0.604,0.119,0.803c0.258,0.213,0.64,0.177,0.854-0.082l1.895-2.295h10.727l1.895,2.295  c0.195,0.235,0.543,0.292,0.803,0.119C26.008,24.716,26.084,24.34,25.898,24.061z"/></svg>');
}
.done .todo_status {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="-50 120 800 800"><path d="M572.5 865l-416.25 0q-65 0 -110.625 -45.625t-45.625 -110.625l0 -417.5q0 -65 45.625 -110.625t110.625 -45.625l260 0q21.25 0 36.875 15.625t15.625 36.875 -15.625 36.875 -36.875 15.625l-260 0q-21.25 0 -36.875 15t-15.625 36.25l0 417.5q0 21.25 15.625 36.25t36.875 15l416.25 0q21.25 0 36.875 -15t15.625 -36.25l0 -156.25q0 -21.25 15.625 -36.875t36.875 -15.625 36.25 15.625 15 36.875l0 156.25q0 65 -45.625 110.625t-110.625 45.625zm-147.5 -217.5q-28.75 0 -48.75 -20l-138.75 -138.75q-20 -21.25 -20 -50t20 -48.75 48.75 -20 48.75 20l75 73.75 180 -283.75q13.75 -25 41.875 -33.125t53.125 5.625 32.5 41.875 -6.25 53.125l-225 363.75q-18.75 36.25 -61.25 36.25z" fill="black"/></svg>');
}
.donelater .todo_status {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="-50 120 800 800"><path d="M572.5 865l-416.25 0q-65 0 -110.625 -45.625t-45.625 -110.625l0 -417.5q0 -65 45.625 -110.625t110.625 -45.625l260 0q21.25 0 36.875 15.625t15.625 36.875 -15.625 36.875 -36.875 15.625l-260 0q-21.25 0 -36.875 15t-15.625 36.25l0 417.5q0 21.25 15.625 36.25t36.875 15l416.25 0q21.25 0 36.875 -15t15.625 -36.25l0 -156.25q0 -21.25 15.625 -36.875t36.875 -15.625 36.25 15.625 15 36.875l0 156.25q0 65 -45.625 110.625t-110.625 45.625zm-147.5 -217.5q-28.75 0 -48.75 -20l-138.75 -138.75q-20 -21.25 -20 -50t20 -48.75 48.75 -20 48.75 20l75 73.75 180 -283.75q13.75 -25 41.875 -33.125t53.125 5.625 32.5 41.875 -6.25 53.125l-225 363.75q-18.75 36.25 -61.25 36.25z" fill="%23800000" stroke="%2300000"/></svg>');
}
.notneeded .todo_status {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7 0 146 145"><defs id="defs2016"><linearGradient id="linearGradient2026" y2="425.4" gradientUnits="userSpaceOnUse" x2="-395.85" gradientTransform="matrix(-.65718 0 0 .65718 -16.966 114.63)" y1="274.71" x1="-344.15"><stop id="stop2557" offset="0" stop-color="white"/><stop id="stop2559" offset="1" style="stop-color:white;stop-opacity:0"/></linearGradient></defs><g id="layer1" transform="translate(-318.52 -325.57)"><g id="g2071" transform="matrix(.9 0 0 .9 170.16 46.297)"><rect id="rect3417" rx="39.43" transform="scale(-1,1)" ry="39.43" width="145.82" y="318.34" x="-318.76" height="144.64" fill="%23303030"/><g id="g3479" transform="matrix(.65718 0 0 .65718 -102.64 -95.387)"><path id="path3419" d="m554.13 739.6l35.77-35.77c3.75-3.75 5.63-7.9 5.63-12.44-0.23-4.09-2.1-7.9-5.63-11.42-3.18-3.18-6.92-4.99-11.24-5.45-4.43-0.34-8.63 1.48-12.61 5.45l-35.78 35.78-35.77-35.78c-3.64-3.63-7.73-5.45-12.27-5.45-4.43 0.34-8.29 2.16-11.58 5.45-2.84 2.84-4.49 6.53-4.95 11.08-0.45 4.77 1.2 9.03 4.95 12.78l35.77 35.77-35.77 35.78c-3.18 3.18-4.95 7.33-5.29 12.44 0.34 4.43 2.11 8.23 5.29 11.41 2.95 2.96 6.7 4.77 11.24 5.45 4.43 0.35 8.63-1.47 12.61-5.45l35.77-35.77 35.78 35.77c3.75 3.75 7.9 5.4 12.44 4.94 4.66-0.34 8.46-1.98 11.41-4.94 2.73-2.72 4.38-6.41 4.95-11.07 0.68-4.54-0.97-8.8-4.95-12.78l-35.77-35.78" fill="black"/><path id="path3421" d="m552.28 739.6l32.99-32.98c3.45-3.46 5.18-7.28 5.18-11.47-0.21-3.77-1.94-7.28-5.18-10.53-2.94-2.93-6.39-4.6-10.37-5.02-4.08-0.32-7.96 1.36-11.62 5.02l-32.99 32.99-32.99-32.99c-3.35-3.35-7.12-5.02-11.31-5.02-4.08 0.31-7.64 1.99-10.68 5.02-2.62 2.62-4.14 6.03-4.56 10.22-0.41 4.39 1.1 8.32 4.56 11.78l32.99 32.98-32.99 32.99c-2.93 2.93-4.56 6.75-4.87 11.47 0.31 4.08 1.94 7.59 4.87 10.52 2.72 2.72 6.18 4.4 10.37 5.03 4.08 0.31 7.96-1.36 11.62-5.03l32.99-32.99 32.99 32.99c3.45 3.46 7.27 4.98 11.46 4.56 4.3-0.32 7.8-1.84 10.53-4.56 2.51-2.51 4.03-5.92 4.55-10.21 0.63-4.19-0.89-8.11-4.55-11.78l-32.99-32.99" fill="white"/></g><path id="path3423" d="m280.23 324.53h-68.77c-18.2 0-32.86 14.65-32.86 32.86v66.55c0.59 14.21 2.86 5.23 7.17-10.51 5.02-18.29 21.35-34.27 41.23-46.25 15.18-9.15 32.17-14.99 63.1-15.54 17.54-0.32 15.99-22.58-9.87-27.11z" fill="url(%23linearGradient2026)"/></g></g></svg>');
}
.section .todo_status {
        visibility: hidden;
}

#task_status_menu,
#highlight_menu {
    display: none;
    position: absolute;
    top:0;
    left:0;


    margin: 0;
    padding: 0;
    list-style: none;

    font-size:1.3em;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.9);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.9);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.9);

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#task_status_menu li {
    display: block;
    background: white;
    padding: 0.1em 0.5em 0.1em 0.1em;
    /*border: 1px solid #ccc;
    border-bottom: 0;*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

    font-family: arial, sans-serif;
    cursor: pointer;
}
#task_status_menu li:hover {
        background-color: #E0E0E0;
        /*background-color: #356094;
        background-color: #4479BA;

        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    color: white;*/
}
#task_status_menu li img {
        height: 1em;
        width: 1.2em;
        vertical-align: bottom;
        margin-right: 0.5em;
}
#task_status_menu li svg {
    height: 1em;
    width: 1.2em;
    vertical-align: bottom;
    margin-right: 0.5em;
}

#highlight_menu li {
	display: block;
	width: 3em;
	height: 1em;
	padding: 0.1em 0.5em 0.1em 0.1em;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
#highlight_menu li.highlight_red {
	background-color: red;
}
#highlight_menu li.highlight_yellow {
	background-color: yellow;
}
#highlight_menu li.highlight_green {
	background-color: green;
}


#today {
    position: absolute;
    top:2em;
    right:2px;
    left:2px;
    width: calc(100% - 4px);

    font-size:1.5em;
    padding:0.3em 0;
    text-align: center;
    cursor: pointer;
    font-family: arial, sans-serif;
}


.button_right {
    position: absolute;
    right:2px;
    left:2px;
    width: calc(100% - 4px);

    font-size:1em;
    padding:0.4rem 0 0.25rem 0;
    cursor: pointer;
    font-family: arial, sans-serif;
}
#signin,#signout {
    bottom: 2px;
}
#offline_txt{
        color:white;
        position: absolute;
        right:0;
        left:0;
        bottom:0;
        width:100%;

        font-size:1em;
        padding:0.4em 0 0.4em 0;
    font-family: arial, sans-serif;
    text-align: center;
    display: none;
}
#new_habit {
    bottom:calc(12.5rem + 2px);
}
#edit_habits {
    bottom:calc(10rem + 2px);
}
#fullscreen{
    bottom:calc(5rem + 2px);
}
#help{
    bottom:calc(2.5rem + 2px);
}

#prev {
    left:2px;
}
#next {
    right:2px;
}

.lr_btn {
    font-size:1.5em;
    position: absolute;
    top:0;
    width:45%;
    padding:0.1em 0 0.2em 0;
}

/************ signin form ************/
#signin_form {
    display:none;
    width:100%;
    height:100%;
    background-color: #E0E0E0;

    position: absolute;
    top:0;
    left:0;
}

#signin_form p {
        width:62%;

        margin:0.1em auto;
        font-size:1.5em;
        font-family: arial, sans-serif;
        position: relative;
}
#signin_form input {
        width: 100%;
        -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size:0.8em;
        font-family: arial, sans-serif;
        margin-bottom: 1em;

    border: 1px dotted black;
    outline:0;
    background-color: white;
}

#signin_form .privacy_concerns {
        font-size: 0.7em;
        color:gray;
        float:right;
        position: absolute;
        bottom: 0;
        right: 0;
}
#signin_signin {
        font-size: 1em;
        padding: 0.2em 1em;
        position: absolute;
        left:0;
}
#signin_register {
        font-size: 1em;
        padding: 0.2em 1em;
        position: absolute;
        right:0;
}
#signin_cancel {
        font-size: 1em;
        padding: 0.2em 1em;
}


#signin_username_txt {
        color: gray;
}
#signin_title {
        margin: 2em auto 2em auto !important;
        font-size: 2em !important;
        font-weight: bolder;
        text-align: center;
}


/************ New Habit form ************/

#darkenedBg {
    background-color: black;
    opacity: 0;

    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display:none;
    transition: opacity 0.5s;
}

.dlgWrapper {
    position: fixed;
    top:calc(50% - 15em);
    bottom:3em;
    left:0;
    right:0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    opacity:0;
    font-size: 1.2em;
    display:none;
    transition: opacity 0.5s;
}

.dlgContent {
	width: calc(100% - 4em);
	max-width: 38em;
    margin: 1em;
    display: inline-block;
    padding: 1em;
    text-align: left;
    font-family: "system";

    background: white;
    box-shadow: 0px 0px 5px 5px white;
}

.dlgWrapper h1 {
    text-align: center;
    margin: 0;
}


.dlgWrapper input[type=text], 
.dlgWrapper input[type=number] {
    font-size: 1em;
    border-radius: 0.2em;

    padding: 0 0.2em;

    border: solid 1px #dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

.dlgWrapper input[type=text]:focus {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

.dlgWrapper button {
	font-size: 1em;
	width: 5em;
	padding:0.1em 0 0.1em 0;
}

.flexContainer {
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	align-items: baseline;
	margin: 1em 0;
}

.flexContainer select {
	font-size: inherit;
}


.hbtRow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.3em;
}

.hbtTxt {
	flex: 10 0 5em;
}
.hbtBtns {
	flex: 0 0 15em;
	text-align: right;
}

button.mini {
	font-size: 1rem;
}