@charset "UTF-8";


  body {

    background:#edf0f1;
    /* added this padding as the list is behind the header, this
    takes into accoun the height of the header so the list is visable */
    padding: 80px 0 0 0;
  }



  body, input, button {

    font-family: 'Roboto', sans-serif;

  }
  /*Huh>>>>*/
  .noFill {
    fill:none;
  }


  header{
    width: 100%;
    height: 80px;
    position:fixed;
    padding: 15px;
    top:0;
    left:0;
    z-index: 5;
    background:#25b99a;
    /*          x,  y, blue, color*/
    box-shadow:0px 2px 4px rgba(44,62,80,.15);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  header input {
    width: 100%;
    height: 50px;
    float: left;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    text-indent: 18px;

    /* This stops user input before button, also stops,
    the character half way so user knows they are in overflow */
    padding: 0 60px 0 0;

    background: rgba(255,255,255,0.2);
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    border-top-right-radius:25px;
    border-bottom-right-radius:25px;
    border:0px;
    box-shadow: none;
    outline: none;

    /*wtf is this? */
    -webkit-appearance: none;
    -moz-appearance: none;

  }

  header input::-webkit-input-placeholder{
    color:rba(255,255,255,0.75);

  }

    header input::-moz-input-placeholder{
    color:rba(255,255,255,0.75);

  }

    header input::-moz-input-placeholder{
    color:rba(255,255,255,0.75);

  }

    header input::-ms-input-placeholder{
    color:rba(255,255,255,0.75);

  }

  header button {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index:2;
    border-radius: 25px;
    background:#fff;
    border:0px;
    box-shadow:none;
    outline:none;

    cursor:pointer;


    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;


  }

  header button svg {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin:-8px 0 0 -8px;

  }

  header button svg .fill {
    fill: #25b99a;

  }


  .container {
    width:100%;
    float: left;
    padding:15px;
  }






  ul.todo {
    width: 100%;
    float: left;
  }

  ul.todo li{
    width: 100%;
    float: left;
    font-size:14px;
    font-weight: 500px;
    color: #444;
    line-height: 22px;
    min-height: 50px;

    background: #fff;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 1px 2px rgba(44,62,80,0.10);
    margin: 0 0 10px 0;
    padding: 14px 100px 14px 14px;
  }

  ul.todo li:last-of-type {
  margin: 0;

  }

  ul.todo li .buttons {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
  }

  ul.todo li .buttons button{
    width: 50px;
    height: 50px;
    float: left;
    position: relative;
    background: none;
    border: 0px;
    outline: none;
    cursor: pointer;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

  }


    ul.todo li .buttons button:last-of-type:before {
      content:'';
      width: 1px;
      height:30px;
      position:absolute;
      top:10px;
      left: 0;
      background: #edf0f1;

    }

    ul.todo li .buttons button svg{
      width: 22px;
      height: 22px;
      position:absolute;
      top: 50%;
      left: 50%;
      margin: -11px 0 0 -11px;

    }

    ul.todo li .buttons button.complete svg{
      border-radius: 11px;
      border:1.5px solid #25b99a;

      transition:background 0.2s ease;

    }

    ul.todo#completed li .buttons button.complete svg {
      background:#25b99a;
      border:0px;

    }


    ul.todo:not(#completed) li .buttons button.complete:hover svg {
      background:rgba(37, 185, 154, 0.75);
    }



    ul.todo#completed li .buttons button.complete svg .fill {
      fill: #fff;

    }