.TxtAlignLeft{
    text-align:left;
}
.TxtAlignRight{
    text-align:right;
}
.btn-active
{
    color:white;
    background-color:#4bacc6;
    border:none;
}
.btn-finished
{
    color:white;
    background-color:#92d050;
    border:none;
}
.btn-q
{
    color:white;
    background-color:#f67f26;
    border:none;
}
/* reset layout*/
      html,
      body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      }

      /* body*/
      body {
        background: #f2f2f2;
        color: #595959;
        margin: 0 auto;
      }

      /* no outline for buttons & checkboxes*/
      /*button,*/
      input[type="checkbox"] {
        outline: none;
      }

      /* style the todo app*/
      #todoapp {
        background: rgba(255, 255, 255, 0.9);
        position: relative;
        min-height: 86%;

        border: none;
        box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.2), 0px 25px 50px 0px rgba(0,0,0,0.15);
      }

      /* section styles*/
      /*@media (min-width: 650px) {*/
      @media (min-width: 240px) {
          /* style the todo list to look better on larger screens*/
            #todoapp {
                width: 74%;
                left: 13%;
                top: 50px;

                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
            }

            #headerBand {
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
            }
        }


        /* the header that contains the input*/
        header {
            height: 50px;
        }

        /* dark band on the header*/
        #headerBand {
            position: relative;
            height: 20%;
            max-height: 20px;
            border-bottom: 1px solid #6c615c;
            background: rgba(52, 59, 69, 1);
        }

        /* the new to-do entry*/
        #new-todo {
            background: rgba(237, 237, 237, 0.9);
            position: relative;
            margin: 0;
            height: 80%;
            max-height: 70px;
            font-size: 21px;
            font-family: "Arial";
            border: 0;
            outline: none;
            color: rgb(114, 115, 115);
            padding: 0 0 0 56px;
            width: 100%;
            box-sizing: border-box;
        }

        /* the main section that hosts the listview*/
        #main {
            position: relative;
            z-index: 1;
            border-top: 1px dotted #adadad;
        }

        /* todo list*/
        #courses-list,
        #todo-list {
            margin: 0px;
            overflow-y: auto;
        }

        /* the host template*/
        .templateWrapper {
            position: relative;
            overflow: hidden;
        }

        /* blue border under the template*/
        .templateBorder {
            height: 0;
            border-bottom: 2px solid #bfdbf2;
        }

        /* container for the todo-address div*/
        .templateContainer {
            margin: 4px 5px 0px 10px;
        }

        .templateContainer input[type="text"] {
            font-size: 18px;
            font-family: "Arial";
            background: none;
            color: #2d3239;
            border: 1px solid rgba(0, 0, 0, 0);
            line-height: 0.6em;
            margin: 0px;
            width: 100%;
            display: block;
            padding: 4px 0px 4px 10px;
            border-radius: 0;
            -webkit-appearance: none;
        }

        .templateContainer input[type="text"]:active,
        .templateContainer input[type="text"]:focus {
            color: #2d3239;
            border: 1px solid #b2b2b2;
            outline: none;
            margin-left: 2px;
            text-decoration: none !important;
            padding-left: 8px;
        }

        input[type="text"]:active ~ .templateRemove,
        input[type="text"]:focus ~ .templateRemove,
        .templateRemove:active,
        .templateRemove:focus {
            display: inline-block;
        }

        input[type="text"]:active ~ .templateToggle,
        input[type="text"]:focus ~ .templateToggle,
        .templateRemove:active ~ .templateToggle,
        .templateRemove:focus ~ .templateToggle {
            display: none;
        }

        .crossedOut.templateTitle {
            text-decoration: line-through;
        }

        .templateContainer .templateAddress {
            color: #727272;
            font-size: 12px;
            font-family: "Arial";
            padding-top: 0px;
            margin: 0px 0px 0px 0px;
            font-weight: normal;
        }

        .templateContainer p {
            margin: 0px 0px 4px 0px;
        }

        /* button on the templated item*/
        button.templateLeft {
            position: absolute;
            top: 6px;
            left: 5px;
            border: none;
            width: 29px;
            height: 29px;
            min-width: 0;
            min-height: 0;
            background-color: transparent;
        }

        /* button when the item is checked*/
        button.templateToggle.checked {
            background-image: url('../images/IC738814.png');
        }

        /* button when the item is unchecked*/
        button.templateToggle.unchecked {
            background-image: url('../images/IC738815.png');
        }

        /* button for removing the item*/
        button.templateRemove {
            display: none;
            background-image: url('../images/IC738816.png');
  }


.item {
    display: inline;
}
.login-page {

    padding: 8% 0 0;
    margin: auto;
}

.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    margin: 0 auto 100px;
    padding: 45px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

    .form input {
        outline: 0;
        background: #f2f2f2;
        border: 0;
        margin: 0 0 15px;
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
    }

    .form button {
        text-transform: uppercase;
        outline: 0;
        background: #4bacc6;
        width: 100%;
        border: 0;
        padding: 15px;
        color: #FFFFFF;
        font-size: 14px;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
        margin-bottom: 10px;
    }

        .form button:hover, .form button:active, .form button:focus {
            background: #2d3239;
        }

    .form .message {
        margin: 15px 0 0;
        color: #000000;
        font-size: 14px;
    }

    .form .message a {
        color: #4bacc6;
        text-decoration: none;
    }

    .form .register-form {
        display: none;
    }
    .form .fieldset {
    padding:20px;
    }

input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
    padding: 5px;
    margin-left:5px;
    margin-right:5px;
}
input[type=text] {
    width:100%;
}
input[type=password] {
    width: 100%;
}