/*Add on for web*/

.active{display:block!important;}
a.openSettings{display: none!important;}

 .topR_container, .bottomRight, #linksRow, #linksBox,.moduleTodo, #imageLink{display: none!important}


.clarieBtn i{
    vertical-align: bottom;
    padding-right: 10px;
    color: #fff;
    transition: all ease-in-out 300ms!important;
}

.clarieBtn:hover i{
    color: #fff;
    transition: all ease-in-out 300ms!important;
}

.clarieBtn{
    display: none;
    padding: 30px 30px;
    text-align: center;
    width: 350px;
    margin: 0 auto;
    border-radius: 3px;
    color: #fff;
    font-size: 20px;
    border: 1px solid;
     box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
  transition: all ease-in-out 300ms!important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8)!important;
    border-color: #4e9100;
    background-color: #66bf00;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76c600), color-stop(100%, #538300 100%));
    background-image: -webkit-linear-gradient(top, #76c600 0%, #538300 100% 100%);
    background-image: linear-gradient(to bottom, #76c600, #538300 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#76c600, endColorstr=#538300=100%, GradientType=0)
}


.clarieBtn:hover{
     background-color: #66bf00;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #538300), color-stop(100%, #76c600 100%));
    background-image: -webkit-linear-gradient(top, #538300 0%, #76c600 100% 100%);
    background-image: linear-gradient(to bottom, #538300, #76c600 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#538300, endColorstr=#76c600=100%, GradientType=0)
    color: #fff;
    box-shadow: 0px 37px 20px -20px rgba(0,0,0,0.6);
    transform: translate(0px, -10px) scale(1.2)!important;

}

.mainheader {
    display: block!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    padding: 20px!important;
    width: 100vw;
/* margin-bottom: 80px;*/
 z-index: 1;
 background: -moz-linear-gradient(270deg, rgba(0,0,0,0.5) 1%, rgba(255,255,255,0) 100%)!important; /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(0,0,0,0.5)), color-stop(100%, rgba(255,255,255,0)))!important; /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0.5) 1%, rgba(255,255,255,0) 100%)!important; /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(0,0,0,0.5) 1%, rgba(255,255,255,0) 100%)!important; /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(0,0,0,0.5) 1%, rgba(255,255,255,0) 100%)!important; /* ie10+ */
background: linear-gradient(180deg, rgba(0,0,0,0.5) 1%, rgba(255,255,255,0) 100%)!important; /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 )!important; /* ie6-9 */

}



.Htop {
    display: inline-block;
    vertical-align: bottom;
    float: left;
   /*margin-left: 50px;*/
}


.topnav {
    display: inline-table;
    float: left;
    padding-left: 50px;
    margin-top: 8px;
}

.cws {
    display: block;
    float: right;
    /*margin-right: 50px;*/
}

.topnav ul {
    margin: 0;
    padding: 0;
}


.topnav ul li {
    list-style: none;
    display: inline-table;
}



.topnav ul li a {
    color: #fff;
    padding: 5px 10px;
    border: 1px solid #fff;
    border-radius: 3px;
    text-decoration: none;
}



.topnav ul li a:Hover {
    color: #333;
    background: #fff;
}


.footer{
    display: block;
    position: absolute;
    bottom: 20px;
    left: 0px;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.footer a{
    display: inline-table;
    color: #fff;
    text-decoration: none;
    padding-left: 10px;
    font-size: 13px;
}

/*End of Add on for web*/


::-webkit-scrollbar {
    width: 12px
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 10px
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5)
}
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: none;
    background: rgba(0, 0, 0, .6)
}
a.openSettings {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    padding: 10px;
    display: block;
    background: transparent;
    opacity: .8
}
a.openSettings img {
    width: 30px
}
a.openSettings i {
    font-size: 1.3em;
    opacity: .5
}
a.openSettings:hover,
a.openSettings i:hover {
    opacity: 1
}
#cpanel {
    position: fixed;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 3;
    color: #fff;
    width: 300px;
    left: -300px;
    transition: all .2s ease-in-out
}
#cpanel.open {
    left: 0
}
#cpanel a.openSettings {
    position: relative;
    top: 3px;
    left: 10px;
    width: 50px;
    padding: 10px;
    display: block;
    background: transparent;
    opacity: 1
}
#cpanel a.openSettings img {
    width: 30px
}
#cpanel a.openSettings i {
    font-size: 1.3em
}
#cpanel .topBar {
    display: block;
    position: absolute;
    height: 45px;
    width: 100%;
    padding: 10px 20px;
    top: 0;
    background: #000
}
#cpanel .topBar span {
    font-size: 100%;
    padding-left: 30px
}
#cpanel .topBar .saveBtn {
    display: block;
    float: right;
    font-size: 80%;
    background: #00e676;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    color: #000
}
#cpanel .btmBar {
    display: block;
    position: absolute;
    height: 45px;
    width: 100%;
    padding: 10px 20px;
    bottom: 0;
    background: #000;
    z-index: 2
}
#cpanel .btmBar span {
    font-size: 100%
}
#cpanel .btmBar .resetBtn {
    display: block;
    float: right;
    font-size: 70%;
    border: 1px solid #383838;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer
}
#cpanel .btmBar .resetBtn:hover {
    background: #383838
}
#cpanel .A fieldset span,
#cpanel .B fieldset span {
    font-size: 80%
}
#cpanel ul.colorSettings li {
    padding-bottom: 20px;
    font-size: 80%
}
#cpanel ul.colorSettings li input {
    width: 70px;
    padding: 5px;
    float: right;
    border: none!important;
    cursor: pointer;
    margin-right: 10px
}
#cpanel .titleSettings {
    padding: 10px 0 15px;
    display: block;
    color: #fff;
    font-size: .8em
}
#cpanel .ext-settings-wrapper {
    display: block;
    height: calc(100% - 90px);
    height: -moz-calc(100% - 90px);
    overflow-y: scroll;
    margin: 10px 0;
    padding: 0 20px
}
#cpanel .ext-settings-wrapper ul {
    list-style: none;
    color: #888!important
}
#cpanel .timeFormat input[type=radio] {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid #a9a9a9;
    border-radius: 50%;
    outline: none;
    box-shadow: inset 0 0 5px 0 gray
}
#cpanel .timeFormat input[type=radio]:hover {
    box-shadow: inset 0 0 5px 0 orange
}
#cpanel .timeFormat input[type=radio]:before {
    content: "";
    display: block;
    width: 11px;
    height: 10px;
    margin: 20% auto;
    border-radius: 50%;
    margin-top: 1px!important;
    margin-left: 1px!important
}
#cpanel .timeFormat input[type=radio]:checked:before {
    background: #00e676
}
#cpanel .timeFormat span {
    padding-right: 47px
}
#cpanel .timeFormat label {
    padding-left: 10px;
    font-size: 100%
}
#cpanel .tempFormat input,
#cpanel .timeFormat label {
    padding-top: 8px
}
#cpanel .tempFormat input[type=radio] {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid #a9a9a9;
    border-radius: 50%;
    outline: none;
    box-shadow: inset 0 0 5px 0 gray
}
#cpanel .tempFormat input[type=radio]:hover {
    box-shadow: inset 0 0 5px 0 orange
}
#cpanel .tempFormat input[type=radio]:before {
    content: "";
    display: block;
    width: 11px;
    height: 10px;
    margin: 20% auto;
    border-radius: 50%;
    margin-top: -7px!important;
    margin-left: 1px!important
}
#cpanel .tempFormat input[type=radio]:checked:before {
    background: #00e676
}
#cpanel .tempFormat span {
    padding-right: 57px
}
#cpanel .tempFormat label {
    padding-left: 10px;
    font-size: 120%
}
#cpanel .tempFormat input,
#cpanel .tempFormat label {
    padding-top: 8px
}
#cpanel label[for=c] {
    padding-left: 18px
}
#cpanel fieldset {
    display: block;
    position: relative;
    padding: 5px 20px 5px 0;
    border: none
}
#cpanel fieldset span {
    font-size: 100%
}
#cpanel fieldset .switch {
    position: absolute;
    right: 20px;
    top: 5px
}
#cpanel .loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, .8)
}
#cpanel .loading img {
    width: 80px;
    padding-top: 50%
}
.switch {
    width: 50px;
    height: 20px;
    position: relative
}
.switch input {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer
}
.switch label {
    width: 80%;
    height: 100%;
    position: relative;
    background: #2b2b2b;
    border-radius: 30px 30px 30px 30px;
    box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(0, 0, 0, .5), 0 1px 0 hsla(0, 0%, 100%, .2)
}
.switch input~label i,
.switch label {
    display: block;
    transition: all .2s ease
}
.switch input~label i {
    height: 15px;
    width: 15px;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 2;
    border-radius: inherit;
    background: #383838;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .2), 0 0 8px rgba(0, 0, 0, .3), 0 8px 8px rgba(0, 0, 0, .3)
}
.switch label+span {
    left: 45px;
    top: 4px;
    background: #2b2b2b
}
.switch input:checked~label+span,
.switch label+span {
    content: "";
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    transition: all .2s ease;
    z-index: 2
}
.switch input:checked~label+span {
    background: #00e676
}
.switch input:checked~label i {
    left: auto;
    left: 63%;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .2), 0 0 8px rgba(0, 0, 0, .3), 0 8px 8px rgba(0, 0, 0, .3), inset -1px 0 1px #198550;
    transition: all .2s ease
}
.closeBackground i {
    font-size: 1.3em
}
.closeBackground {
    border: none!important;
    float: right;
    padding-top: 3px;
    cursor: pointer;
    opacity: .5
}
.closeBackground:hover {
    opacity: 1
}
button {
    display: block;
    background: transparent;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #6d6d6d;
    cursor: pointer;
    font-size: 100%
}
button:hover {
    background: #6d6d6d
}
.imgThumbs img {
    width: 100%
}
.colorSettings .imgThumbs img {
    height: 150px
}
.extendCpanel {
    position: fixed;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    border-right: 1px solid #383838;
    width: 500px;
    left: 300px;
    transition: all .2s ease-in-out
}
.extendCpanel.open {
    left: 300
}
.extendCpanel .topBar {
    display: block;
    position: absolute;
    height: 45px;
    width: 100%;
    padding: 10px 20px;
    top: 0;
    background: #000
}
.extendCpanel .topBar span {
    font-size: 100%;
    display: inline-table;
    vertical-align: top
}
.extendCpanel .topBar button {
    display: inline-table;
    vertical-align: top;
    float: right;
    font-size: 80%
}
.extendCpanel .saveBtn {
    display: block;
    float: right;
    font-size: 80%;
    background: #00904a;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-weight: 400
}
.bgControl {
    text-align: center;
    padding-bottom: 0!important
}
.bgControl i {
    font-size: 200%;
    opacity: .5;
    cursor: pointer
}
.bgControl i:hover {
    opacity: 1
}
.bgControl #bgSave {
    padding: 0 10px
}
button.openBackground {
    width: 100%
}
#selectBackground {
    transition: all .3s ease-in-out;
    box-shadow: inset 7px 0 20px 1px rgba(0, 0, 0, .5);
    display: block;
    z-index: 3;
    left: -500
}
#selectBackground.openinner {
    left: 300
}
#selectBackground.closeinner {
    left: -500
}
.catSelector {
    display: block;
    padding-top: 55px;
    padding-left: 20px;
    color: #9a9a9a;
    font-size: .8em
}
.catSelector span {
    padding-right: 10px
}
.catSelector select {
    padding: 3px;
    width: 150px;
    text-transform: capitalize;
    border-radius: 3px
}
.backgroundPagination {
    display: block;
    position: relative;
    padding: 20px
}
.backgroundPagination i {
    display: none;
    position: absolute;
    padding: 0 20px;
    font-size: 200%;
    opacity: .5
}
.backgroundPagination i:hover {
    opacity: 1
}
.backgroundPagination i.fa-chevron-circle-right {
    right: 150px
}
.backgroundPagination i.fa-chevron-circle-left {
    left: 150px
}
.backgroundCatContainer {
    display: block;
    margin: 20px;
    padding-left: 10px;
    padding-top: 10px;
    overflow-y: scroll;
    height: calc(90% - 120px)
}
.backgroundCatContainer .imgThumbs {
    display: inline-table;
    position: relative;
    vertical-align: top;
    width: 130px;
    margin: 0 10px 10px 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: all .2s ease
}
.backgroundCatContainer .imgThumbs img {
    width: 100%;
    box-sizing: border-box
}
.backgroundCatContainer .imgThumbs:hover {
    border: 1px solid #fff;
    transform: scale(1.1)
}
.wallpaper_categories .selectActive {
    position: relative;
    z-index: 2;
    border: 1px solid #fff!important
}
.wallpaper_categories option {
    text-transform: capitalize;
    padding-bottom: 5px
}
.selectActive:after {
    content: "\f058";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    color: #fff;
    font-size: 150%;
    position: absolute;
    top: 3px;
    right: 3px
}
.about {
    padding-bottom: 30px
}
.about title {
    font-size: 85%;
    display: block;
    padding-bottom: 20px
}
.about img {
    margin: 0 auto;
    width: 100px;
    display: block
}
.about p {
    text-align: center
}
.about a {
    color: #888;
    text-decoration: none;
    cursor: pointer
}
.about .t1 {
    padding-top: 5px;
    font-size: 120%
}
.about .t2 {
    padding-top: 5px;
    font-size: 80%;
    color: #888
}
.about .t3 {
    padding-top: 10px;
    font-size: 60%;
    color: #888;
    cursor: pointer
}
.ui-autocomplete {
    background-color: rgba(0, 0, 0, .8)!important;
    border: none!important
}
.ui-autocomplete .ui-corner-all,
.ui-autocomplete .ui-corner-all span {
    color: #fff!important;
    font-size: 80%
}
.ui-autocomplete .ui-corner-all span {
    font-size: 100%!important
}
ul.ui-widget-content {
    background: rgba(0, 0, 0, .8)!important;
    font-family: Open Sans, sans-serif!important
}
a.ui-state-hover {
    background: none!important;
    border: none!important;
    margin: 0!important
}
#ui-active-menuitem {
    text-decoration: underline;
    transition: all .2s ease-in-out
}
.squaredThree {
    width: 20px;
    position: relative;
    margin: 20px auto
}
.squaredThree label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(top, #222, #45484d);
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 hsla(0, 0%, 100%, .4)
}
.squaredThree label:after {
    content: "";
    width: 9px;
    height: 5px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 3px solid #fcfff4;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    transform: rotate(-45deg)
}
.squaredThree label:hover:after {
    opacity: .3
}
.squaredThree input[type=checkbox] {
    visibility: hidden
}
.squaredThree input[type=checkbox]:checked+label:after {
    opacity: 1
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}
body {
    display: none;
    font-size: 1em;
    font-family: Open Sans, sans-serif
}
i {
    color: #efefef;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35)
}
:focus {
    outline: none
}
::-webkit-input-placeholder {
    color: #fff
}
::-moz-placeholder {
    color: #fff
}
:-ms-input-placeholder {
    color: #fff
}
:-moz-placeholder {
    color: #fff
}
::selection {
    background: transparent
}
::-moz-selection {
    background: transparent
}


@media screen and (max-height: 700px) {

    .centeredBox {
        top: 20%!important
    }

}


@media screen and (max-height: 600px) {
    .app .todoContainer {
        max-height: 300px!important
    }
    .centeredBox {
        top: 20%!important
    }
    .clock_container {
        font-size: 700%!important
    }
    #onboarding,
    #sayHi {
        font-size: 180%!important;
        padding-bottom: 10px!important
    }
    .moduleTodo h1 {
        font-size: 120%!important
    }
    #quote,   #quote2 {
        font-size: 100%!important
    }
    .app {
        width: 300px
    }
    #imageLink {
        font-size: 80%
    }
}
.tshadows {
    text-shadow: 2px 4px 3px rgba(0, 0, 0, .3)!important
}
.divider {
    display: block;
    border-bottom: 1px solid #2b2b2b;
    margin: 10px 0
}
.site-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}
.container {
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}
.bottomR_container {
    bottom: 10px;
    right: 0
}
.bottomR_container,
.topR_container {
    display: block;
    position: absolute;
    text-align: right;
    color: #fff
}
.topR_container {
    top: 20px;
    right: 20px;
    font-size: 110%
}
.userDate_container {
    padding-bottom: 5px
}
.userLoc_container {
    padding-bottom: 3px
}
.userDate_container,
.userLoc_container,
.userWeather_container {
    display: block;
    font-size: 80%
}
.userWeather_container i {
    font-size: 250%;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, .3);
    padding-left: 10px;
    display: inline-table;
    vertical-align: middle
}
.userWeather_container span {
    font-size: 150%;
    padding-top: 5px;
    display: inline-table;
    vertical-align: middle
}
.mainfocusContainer {
    text-align: center;
    display: block
}
.clock_container {
    font-size: 900%;
    font-weight: 400;
    box-sizing: border-box
}
.search_container {
    left: 50%;
    margin-left: -225px;
    margin-top: 10px;
    display: none!important;
}
.clock_container {
    text-align: center
}
#onboarding,
#quote,  #quote2,
#sayHi,
#searchForm,
.clock_container,
.links_container,
.search_container {
    display: block
}
#searchForm {
    width: 500px;
    position: relative
}
#searchForm input[type=text] {
    display: inline;
    width: 90%;
    height: 44px;
    font-size: 100%;
    padding: 10px;
    border: none;
    margin: 0 auto;
    border-bottom: 1px solid #fff!important;
    vertical-align: top;
    background: transparent;
    color: #fff!important
}
#searchForm input[type=text]:focus {
    outline-width: 0
}
#searchForm button#doSearch {
    display: inline;
    padding: 10px;
    height: 44px;
    background: transparent;
    border-width: 0;
    cursor: pointer;
    vertical-align: top;
    margin-left: -45px;
    transition: all .2s ease-in-out
}
#searchForm button#doSearch i {
    color: #fff
}
#searchForm button#doSearch:hover {
    background: transparent
}
#searchForm button#doSearch img {
    width: 24px
}
.links_container {
    padding-top: 20px;
    position: absolute
}
.linksBox {
    overflow: hidden;
    width: 50px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out
}
#favor,
.linksBox {
    display: block;
    height: 50px
}
#favor {
    position: relative;
    margin-left: 50px;
    padding: 8px;
    width: 720px
}
#favor>span>i {
    font-size: 2.2em;
    position: absolute;
    left: 0;
    margin-left: -40px
}
#favor>span>a>img {
    padding-right: 9px;
    padding-left: 9px;
    opacity: .5;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease
}
#favor>span>a>img.starBtn {
    padding-left: 1px;
    margin-right: 5px
}
#favor>span>a>img.starBtn:hover {
    transform: scale(1)
}
#favor>span>a>img:hover {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    opacity: 1
}
.logo {
    display: block;
    position: absolute;
    padding: 5px;
    bottom: 0
}
.logo img {
    width: 150px
}
.expand {
    width: 750px!important
}
.footerlinks {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center
}
.footerlinks ul {
    list-style-type: none
}
.footerlinks ul Li {
    display: list-item;
    padding-left: 20px;
    display: inline
}
.footerlinks ul Li a {
    text-decoration: none;
    font-size: 80%
}
.bubble {
    display: none;
    left: 70px;
    width: 200px;
    height: 100px;
    padding: 20px;
    background: #383838;
    color: #fff;
    font-size: 70%;
    border-radius: 10px;
    box-shadow: 0 9px 46px 8px rgba(0, 0, 0, .14), 0 11px 15px -7px rgba(0, 0, 0, .12), 0 24px 38px 3px rgba(0, 0, 0, .2);
    position: absolute;
    top: 10px
}
.bubble:after {
    position: absolute;
    top: 15px;
    content: "";
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #383838;
    display: block;
    width: 0;
    z-index: 1;
    left: -15px
}
.midBox {
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh
}
.topBox {
    display: block;
    top: 0;
    position: absolute;
    width: 100%
}
.topBox * {
    position: relative;
    transition: cubic-bezier(.18, .64, .83, .67)
}
.centeredBox {
    display: block;
    top: 30%;
    position: relative;
    width: 100%
}
.centeredBox * {
    position: relative;
    transition: cubic-bezier(.18, .64, .83, .67)
}
.customTextColor {
    color: #fff!important
}
.bg {
    position: relative;
    display: none
}
.bg:before {
    content: "";
    background-image: url(overlay-bg.png);
    background-size: 100% 100%;
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    position: fixed
}
.bg img {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover
}
#todo-text,
.new-task a.add-new,
ul.todo-list li.row {
    font-size: 150%
}
.moduleTodo {
    background: transparent;
    overflow: hidden;
    width: 100%;
    color: #fff;
    border-radius: 3px 3px 0 0
}
.moduleTodo .focus-list {
    display: inline-block;
    list-style: none
}
.moduleTodo .focus-list li {
    font-size: 180%;
    line-height: 0
}
.moduleTodo .title {
    background: transparent;
    display: inline-table
}
.moduleTodo h1 {
    font-size: 80%;
    font-weight: lighter!important;
    padding: 10px 15px;
    margin-top: -3px;
    font-size: 150%
}
.add {
    display: inline-table;
    border-radius: 3px;
    margin-right: 20px;
    margin-top: 5px;
    padding: 8px 10px;
    font-size: 150%
}
.add,
.add:hover {
    background: transparent
}
.add:hover {
    cursor: pointer
}
.row {
    color: #fff;
    /*background: transparent;*/
    width: 100%;
    padding-left: 10px;
    line-height: 2.8
}
.row:hover a {
    width: 40px;
    opacity: 1
}
.completed,
.remove,
.row:hover,
.row:nth-child(2n) {
    background: transparent
}
.completed,
.remove {
    display: inline-table;
    text-align: center;
    height: 40px;
    width: 0;
    color: #fff;
    opacity: 0;
    text-decoration: none;
    display: inline-block;
    transition: all .2s ease
}
.completed i,
.remove i {
    padding-top: 10px
}
.completed:hover,
.remove:hover {
    background: transparent;
    transform: scale(1.3)
}
.remove,
.remove:hover {
    background: transparent
}
.done {
    text-decoration: line-through;
    color: #ccc
}
.add-new {
    display: none;
    height: 40px;
    width: 40px;
    text-align: center;
    background: transparent;
    color: #fff;
    line-height: 2.8;
    transition: all .2s linear
}
.add-new i {
    padding-top: 12px
}
.add-new:hover {
    transform: scale(1.3);
    border-radius: 3px
}
.new-task {
    display: none;
    margin-right: 15px;
    box-sizing: border-box
}
.new-task input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid #fff!important;
    font-size: 14px;
    font-family: Open Sans, sans-serif;
    min-width: 150px;
    max-width: 800px;
    text-align: center;
    height: 40px;
    border: none;
    outline: none;
    color: #fff!important
}
.new-task span {
    width: 800px;
    display: inline-block;
    overflow: hidden
}
.ui-sortable-helper {
    box-shadow: 10px 10px 0 rgba(0, 0, 0, .2)
}
ul.ui-sortable li {
    padding-right: 20px
}
input.todo-item {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    overflow: hidden
}
#onboarding,
#sayHi {
    color: #fff;
    width: 100%;
    text-align: center;
    font-size: 230%;
    padding-bottom: 50px
}
#onboarding input.username__input,
#sayHi input.username__input {
    display: none
}

 #quote2{
    width: 70%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    top: 20px;
    font-size: 150%;
    transition: all .2s ease-in-out
 }

#quote{
    text-align: center;
    color: #fff;
    width: 800px;
    left: 50%;
    top: 20px;
    margin-left: -400px;
    font-size: 150%;
    transition: all .2s ease-in-out
}
#quote:hover>.author_link, #quote2:hover>.author_link {
    opacity: 1;
    margin-top: 0
}
#quote .author_link, #quote2 .author_link {
    display: block;
    opacity: 0;
    margin-top: -30px;
    font-size: 90%;
    font-style: italic;
    line-height: 3em;
    cursor: auto;
    color: #fff;
    text-decoration: none!important;
    transition: all .2s ease-in-out
}
blockquote {
    position: relative
}
blockquote:before {
    content: "\201C";
    padding-right: 10px
}
blockquote:after,
blockquote:before {
    font-family: Georgia, serif;
    font-size: 150%;
    font-weight: 700;
    color: #fff
}
blockquote:after {
    content: "\201D";
    padding-left: 10px
}
#imageLink {
    display: block;
    position: absolute;
    bottom: 20px;
    color: #fff;
    font-size: 100%;
    text-align: center;
    width: 600px;
    left: 50%;
    margin-left: -300px;
    opacity: .5;
    cursor: pointer;
    z-index: 2
}
#imageLink a {
    text-decoration: none;
    color: #fff
}
.bottomRight {
    display: block;
    position: absolute;
    bottom: 20px;
    z-index: 2;
    right: 20px
}
.bottomRight .todoBtn {
    color: #fff;
    float: right;
    cursor: pointer
}
.bottomRight .todoBtn i {
    display: none;
    padding-right: 5px
}
.app {
    width: 375px;
    min-height: 200px;
    margin: 0 auto;
    border-radius: 5px;
    background: rgba(0, 0, 0, .8);
    font-family: Noto Sans, sans-serif;
    text-shadow: 0 0 1px rgba(0, 0, 0, .1);
    box-shadow: 0 7px 15px -2px rgba(0, 0, 0, .07);
    -webkit-backface-visibility: hidden;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 20px
}
.app .todoContainer {
    display: block;
    max-height: 600px;
    overflow-y: scroll
}
.app .info {
    position: relative;
    height: 150px;
    width: auto;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: #000
}
.app .info .date {
    position: relative;
    width: 100%;
    padding: 11px 0 5px;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text
}
.app .info .date #day {
    text-align: center;
    font-size: 1.2em;
    color: #fff
}
.app .info .date #month {
    text-align: center;
    font-size: 26px;
    color: #fff;
    font-size: 14px
}
.app .info .date #today {
    font-weight: 700
}
.app .info .info-bottom {
    height: 50px;
    width: 85%;
    position: relative;
    margin: 10px auto 0
}
.app .info .info-bottom .left {
    float: left
}
.app .info .info-bottom .right {
    float: right
}
.app .info .info-bottom .right p {
    color: #00e676!important
}
.app .info .info-bottom .middle {
    width: 140px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0
}
.app .info .info-bottom .middle P {
    color: #ffc107!important
}
.app .info .info-bottom #count,
.app .info .info-bottom #count_done,
.app .info .info-bottom #remaining_done,
.app .info .info-bottom #remaining_tasks,
.app .info .info-bottom #tasks,
.app .info .info-bottom #tasks_done {
    margin-top: 11px;
    font-size: .8em;
    color: #fff;
    font-weight: 700;
    text-align: center;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text
}
.app .info .info-bottom #remaining_tasks,
.app .info .info-bottom #tasks,
.app .info .info-bottom #tasks_done {
    font-weight: 400;
    font-size: 14px;
    margin-top: -2px
}
.app ul {
    height: 100%;
    margin: 10px auto
}
.app ul #today2 {
    width: 100%;
    height: 36px;
    text-align: center;
    line-height: 36px
}
.app ul #today2,
.app ul li {
    color: #636363;
    margin: 10px auto
}
.app ul li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    width: 92%;
    min-height: 35px;
    transition: all .35s ease-in-out
}
.app ul li a {
    width: 35px;
    height: 30px;
    margin-top: -3px;
    display: inline-block;
    color: #636363;
    text-decoration: none;
    line-height: 31px
}
.app ul li a i {
    transition: all .5s ease-in-out;
    margin-left: 7px;
    margin-top: -1px;
    font-size: 20px;
    font-weight: 700
}
.app ul li a .mark,
.app ul li a .mark-alt,
.app ul li a:hover>i {
    color: #00e676
}
.app ul li .right {
    width: 80%;
    height: 100%;
    display: inline-block;
    margin: 0 auto
}
.app ul li .right p {
    width: 90%;
    height: 100%;
    display: inline-block;
    word-wrap: break-word;
    line-height: 28px;
    outline: none;
    margin: 0;
    font-size: 15px;
    letter-spacing: -1px;
    font-weight: 700;
    transition: all .25s ease-in-out;
    margin-top: -8px
}
.app ul li .right p strong {
    color: #fff!important;
    font-weight: 400
}
.app ul li .right p span {
    cursor: text
}
.app ul li .right .line-through {
    color: #636363;
    text-decoration: line-through;
    font-style: italic;
    margin-left: 7px
}
.app ul li .right .line-through strong {
    color: #636363!important
}
.app ul li span {
    display: inline-block;
    width: 35px;
    height: 30px;
    line-height: 31px;
    cursor: pointer;
    margin-top: -3px
}
.app ul li span i {
    transition: all .25s ease-in-out;
    font-size: 20px;
    margin-left: 7px;
    margin-top: -1px
}
.app ul li span:hover>i {
    color: #f44336
}
.app .bottom {
    height: 60px;
    width: auto;
    margin-top: -24px
}
.app .bottom a {
    width: 150px;
    height: 40px;
    line-height: 40px;
    display: block;
    margin: 20px auto;
    font-size: 90%;
    background: #000;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    border: 1px solid #383838
}
.app .bottom a i {
    margin-right: 5px
}
.app .bottom a:hover {
    background: #383838
}
.app .bottom #undo {
    display: none;
    border-radius: 100px;
    width: 30px;
    height: 30px;
    float: right;
    line-height: 30px;
    opacity: 0;
    cursor: default;
    margin-top: -54px;
    margin-right: 21px;
    pointer-events: none
}
.app .bottom #undo i {
    margin-left: 5px
}
.down {
    -webkit-animation: a .4s;
    animation: a .4s
}
@-webkit-keyframes a {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
        margin-top: -41px
    }
    20% {
        opacity: 0
    }
    80% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 10px
    }
}
@keyframes a {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
        margin-top: -41px
    }
    20% {
        opacity: 0
    }
    80% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 10px
    }
}
.up {
    -webkit-animation: b .6s;
    animation: b .6s
}
@-webkit-keyframes b {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 10px
    }
    30% {
        opacity: 0
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
        margin-top: -45px
    }
}
@keyframes b {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 10px
    }
    30% {
        opacity: 0
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
        margin-top: -45px
    }
}
.pop_in {
    pointer-events: all!important;
    cursor: pointer!important;
    opacity: 1!important;
    -webkit-animation: c .25s;
    animation: c .25s
}
@-webkit-keyframes c {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    60% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15)
    }
    90% {
        -webkit-transform: scale(.85);
        transform: scale(.85)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes c {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    60% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15)
    }
    90% {
        -webkit-transform: scale(.85);
        transform: scale(.85)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
.pop_out {
    pointer-events: none;
    cursor: default;
    opacity: 0;
    -webkit-animation: d .25s;
    animation: d .25s
}
@-webkit-keyframes d {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes d {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
.bottomLeft {
    display: block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2
}
.bottomLeft .linksBtn {
    color: #fff;
    float: left;
    cursor: pointer
}
.bottomLeft .linksBtn i {
    display: none;
    padding-left: 5px
}
#linksRow {
    display: none;
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 150px;
    margin-bottom: 10px;
    z-index: 3
}
#linksRow>span>a>img {
    opacity: .5;
    cursor: pointer!important
}
#linksRow>span>a>img:hover {
    opacity: 1;
    transform: scale(1.1)
}
.username__input {
    border: none;
    background-color: transparent;
    color: #fff;
    font-size: 100%;
    max-width: 300px;
    text-align: left;
    border-bottom: 1px solid #fff;
    text-align: center
}
.username {
    display: inline-block;
    max-width: 800px;
    overflow: hidden;
    vertical-align: middle;
    margin-bottom: 5px
}
.username:hover {
    border-bottom: 1px solid #fff
}
#onboarding {
    z-index: 9;
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    width: 100vw;
    height: 100vh;
    padding-bottom: 0!important;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0, hsla(0, 0%, 100%, .08) 66%, hsla(0, 0%, 100%, 0) 77%, hsla(0, 0%, 100%, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#ffffff", GradientType=1)
}
#onboarding,
#onboarding .onboarding__main_msg {
    text-shadow: 2px 4px 3px rgba(0, 0, 0, .3)!important
}
#onboarding .onboarding__main_msg {
    font-size: 100%
}
#onboarding .onboarding__sec_msg {
    font-size: 80%;
    padding-top: 30px;
    padding-bottom: 30px;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, .3)!important
}
#onboarding input.onboarding__input {
    text-align: center;
    background: transparent;
    color: #fff;
    font-size: 100%;
    border: none;
    border-bottom: 3px solid #fff;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, .3)!important
}
#onboarding img {
    width: 130px;
    padding-bottom: 30px;
    top: 50%;
    margin-top: -200px
}