@import url("../font-awesome/css/font-awesome.min.css");

html {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 1.125em;
    color: #ddd;
    line-height: 1.5em;
    min-height: 100%;
    padding: 0;
    padding-bottom: 0;
    margin: 0;
    background: linear-gradient(to bottom, #1abc9c 0%, #3498db 100%);
    background-attachment: fixed
}

#app {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    padding-bottom: .25em
}

h1,
h2,
h3 {
    color: #aaa
}

h1 {
    font-size: 2.5em
}

h2 {
    font-size: 2em
}

h3 {
    font-size: 1em
}

div {
    padding: 0;
    margin: 0;
}

#app {
    padding: 0;
    margin: 0;
    background: #fff;
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    color: black;
}

a {
    text-decoration: none;
    color: #09f
}

a:hover {
    text-decoration: underline
}

.btn {
    color: #aaa;
    display: inline-block;
    background: 0;
    border: 0;
    margin: .25em;
    cursor: pointer;
    font-size: 2.5em
}

span.btn {
    margin: .5em
}

.fa-stack {
    font-size: 1.25em
}

.fa-inverse {
    color: #2a2e37
}

input,
textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
    font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
    color: #333;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.7);
    display: block;
    padding: .5em;
    border-radius: 3px;
    display: block;
    min-height: 3em
}

li.todo-link>span {
    cursor: pointer;
    padding: .75em;
    padding-left: 1em;
    font-weight: bold;
    display: block
}

li.todo-link span.unchecked-count {
    float: right
}

ul {
    padding-left: 0;
    margin-top: 0
}

li {
    list-style-type: none;
    margin-left: .25em;
    margin-right: .25em;
    margin-top: .25em;
    margin-bottom: .25em;
    border-radius: 3px;
    padding: .25em;
    padding-bottom: .25em;
    display: block;
    min-height: 3em
}

li.todo-line>span {
    display: block;
    padding-left: 1em;
    padding-top: -1em
}

li.todo-line>span.edit-mode {
    margin-bottom: 3.5em
}

.list-title {
    display: inline-block;
    margin: 0;
    margin-left: .5em;
    font-size: 1em;
    position: relative;
    top: -0.5em;
    color: #ddd
}

#add-item {
    float: right;
    margin-right: .3em
}

#clear-completed {
    float: right
}

#add-item-container {
    padding: 0;
    margin: 1em;
    margin-top: .5em
}

#add-item-done {
    display: block;
    text-align: right
}

#back {
    margin-left: .275em
}

#add-list {
    margin-right: .275em
}

#list-edit-container {
    text-align: right;
    margin: 0
}

.update-item-done {
    float: right
}

.delete-item {
    margin-left: -0.1em;
    float: right
}

.edit-item-text {
    margin-top: .5em;
    margin-left: -0.5em
}

.delete-list {
    float: right;
    margin-top: .1em
}

.handle {
    cursor: move;
    cursor: -webkit-grabbing;
    float: right;
    display: inline-block;
    margin-right: .125em
}

.sortable-ghost {
    visibility: hidden
}

.checkbox {
    display: inline-block;
    float: left;
    margin-left: -0.25em
}

.todo-text {
    display: block;
    padding-bottom: 1em;
    margin-left: 2.5em;
    padding-top: 1em
}

.oddeven-0 {
    background-color: rgba(255, 255, 255, 0.05)
}

.message {
    text-align: center;
    color: silver
}

.warn {
    text-align: center;
    font-weight: bold
}

#loader>div {
    width: 50px;
    height: 50px;
    background: #555;
    border: 1px solid #555;
    -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite
}

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px
}

@keyframes square-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }

    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }

    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}