body {
  background-color: rgb(255, 255, 255);
  font: 400 1em/1.38 Helvetica;
  color: rgb(200, 200, 200);
}

.add {
  display: block;
  height: auto;
  opacity: 0.32;
  overflow: hidden;
}

.add:hover {
  cursor: pointer;
  opacity: 0.75;
}

.count {
  margin-left: 10px;
  margin-top: 10px;
  font-size: 3.75em;
  font-weight: 700;
  color: rgb(216, 68, 68);
  position: absolute;
}

.count:hover {
  cursor: pointer;
  background: #db4444;
  color: #fff;
}

.dashboard {
  width: 100%;
}

.dashboard .sidebar {
  float: left;
  margin-right: 4%;
  margin-top: 20px;
  width: 16%;
}

.dashboard .sidebar .user {
  background:#ccc;
  float: left;
  margin-bottom: 5px;
  padding: 5px;
  width: 100%;
}

.dashboard .sidebar .user .profile {
  display: block;
  width: 100%;
}

.dashboard .sidebar .user .location {
  color: rgb(128, 128, 128);
  font-size: 0.813em;
  margin: 0;
}

.dashboard .sidebar .user .name {
  color: rgb(216, 68, 68);
  font-size: 1.375em;
  font-weight: 700;
  margin-bottom: 0;
  text-transform: uppercase;
}

.dashboard .sidebar .buttons {
  margin: 0;
  padding: 0;
}

.dashboard .sidebar .buttons li {
  background:#ccc;
  float: left;
  margin-bottom: 5px;
  padding: 5px;
  width: 100%;
}

.dashboard .sidebar .buttons li a {
  display: block;
}

.dashboard .sidebar .buttons li:hover {
  background:#FFF;
}

.dashboard .content {
  float: left;
  width: 80%;
}

.dashboard .content .list {

}

.dashboard .content .list .list-item {
  margin: 0 0 10px 0;
}

.dashboard .content .list .list-item .item-thumbnail {
  background-color: #dddddd;
  float: left;
  height: 120px;
  overflow: hidden;
  position: relative;
  width: 20%;
}

.dashboard .content .list .list-item .item-thumbnail img {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dashboard .content .list .list-item .item-thumbnail .placeholder {
  opacity: .25;
  width: 20%;
}

.dashboard .content .list .list-item .item-thumbnail .thumbnail {
  min-height: 100%;
  min-width: 100%;
}

.dashboard .content .list .list-item .item-title {
  float: left;
  font-size: 2.5em;
  margin-left: 2%;
  width: 78%;
}

.dashboard .content .list .list-item .item-description {
  color: black;
  float: left;
  font-size: 1.5em;
  margin-left: 2%;
  width: 78%;
}

.description {
  clear: both;
  border-left: 1px dotted rgb(216, 68, 68);
  margin-top: 10px;
  padding:10px;
}

.icon {
  display: block;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  opacity: 0.25;
  overflow: hidden;
}

.icon:hover {
  opacity: 0.50;
}

.ingredient {
  float: left;
  width: 56.129032258%;
  height: 40px;
  padding: 6px;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(204, 204, 204);
}

.ingredients {
  float: left;
  clear: both;
  width: 100%;
  height: auto;
  margin-top: 7px;
}

.ingredients .add {
  float: right;
  width: 45px;
  margin-top: 6px;
}

.ingredients .add:hover {
  opacity: 0.5;
  cursor: pointer;
}

.ingredients .label {
  float: left;
  width: 16.7741935483%;
  font-size: 1.2em;
  color: rgb(216, 68, 68);
}

.item {
  position: relative;
  float: left;
  clear: both;
  width: 100%;
  height: 40px;
}

.item .delete-ingredient {
  position: absolute;
  right:10px;
  top: 10px;
  font-size: 1.6em;
  display:none;
}

.item .delete-ingredient:hover {
  color:#db4444;
  cursor: pointer;
}

.label {
  font-weight: 700;
  line-height: 1.38;
}

.page {
  /*width: 17.175572519%;*/
  margin-top: 10px;
  font-weight: 700;
  line-height: 1.38;
  color: rgb(216, 68, 68);
}

.photo {
  background: none;
  overflow:hidden;
  position: relative;
}

.qty {
  position: relative;
  float: left;
  width: 16.5591397849%;
  height: 40px;
  padding: 6px;
  border-right: 1px dotted rgb(204, 204, 204);
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(204, 204, 204);
}

.recipe {
  float: left;
  width: 100%;
  margin-left: 2.0833333333%;
  margin-bottom:300px;
  counter-reset: recipestep;
}

.recipe .back {
  cursor: pointer;
  display: block;
  margin: 15px 0;
}

.steps {
  margin-top:20px;
}

.steps h2 {
  font-weight: bold;
  color:#db4444;
  text-align: center;
}

.step {
  clear: both;
  height: auto;
  border: 0px dotted rgb(0, 0, 0);
  width:80%;
  margin:10px auto;
  background:#efefef;
  counter-increment: recipestep;
  padding:10px;
}

.step .description {
  font-size:1.4em;
  margin-top: 20px;
  font-weight: 400;
  line-height: 1.38;
  height: 100px;
  overflow:auto;
  width:100%;
  /*color: rgb(200, 200, 200);*/
}

.step .count {
  z-index: 5;
}

.step .count::before {
  content: counter(recipestep);
}

.step .count:hover::before {
  content: 'X';
}

.step .upload-image {
  height: 200px;
  position: relative;
}

.step .upload-image .icon {
  width: 79px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.upload-image.has-image:hover .image,
.uploading .upload-image.has-image .image {
  opacity: .25;
}

.upload-image.has-image:hover::after {
  content: 'Upload a new image';
  color: #d84444;
  display: block;
  font-size: 32px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  position: absolute;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.upload-image.uploading:hover .image {
  opacity: 1 !important;
}

.upload-image.uploading:hover::after {
  display: none !important;
}

.uploading .upload-image .icon {
  display: none;
}

.photo.uploading .spinner {
  display: block;
}

.photo .spinner {
  display: none;
  top: 50%;
  left: 50%;
  padding-top: 85px;
  position: absolute;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.photo .spinner::after {
  color: #d84444;
  content: 'Processing';
  display: block;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .35);
}

.photo .spinner .double-bounce1, .photo .spinner .double-bounce2 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #d84444;
  opacity: 0.6;
  position: absolute;
  margin: -40px;
  top: 40px;
  left: 50%;

  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.photo .spinner .double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.step .photo {
  width: 100%;
  background: #DDD;
  position: relative;
}

.step .title {
  margin-top:10px;
  width: 100%;
  font-size: 1.8em;
  line-height: 1.8;
  font-weight:bold;
  height:50px;
}

.step .add-step {
  display: none;
}

.step:last-of-type .add-step {
  display: block;
}

.text {
  width: 92.7835051546%;
  margin-top: 10px;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(200, 200, 200);
}

.title {
  padding: 7px;
  margin-top: 10px;
  border-left: 1px dotted rgb(216, 68, 68);
  color: rgb(200, 200, 200);
}

.unit {
  position: relative;
  float: left;
  width: 27.3118279569%;
  height: 40px;
  padding: 6px;
  border-right: 1px dotted rgb(204, 204, 204);
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(204, 204, 204);
}

._button {
  display: block;
  width: 50%;
  height: 58px;
  margin: 10px auto;
  border-radius: 5px;
  border: 0;
  outline: none;
  background-color: rgb(216, 68, 68);
  font-weight: bold;
  font-size: 1.3em;
  line-height: 1.38;
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
}

._button._secondary {
  background-color: transparent;
  border: 1px solid rgb(216, 68, 68);
  color: rgb(216, 68, 68);
}

._button._tertiary {
  background-color: transparent;
  color: rgb(216, 68, 68);
  font-size: 1em;
}

._button:hover {
    background:#db1111;
}

._button._tertiary:hover {
    background-color: transparent;
    color:#db1111;
}

.add-2 {
  clear: both;
  width: 75px;
  margin: 0 auto;
}

.description-1 {
  height: 100px;
  font-size:1.8em;
  outline: none;
  overflow: auto;
  width: 100%;
}

.icon-1 {
  width: 86px;
}

.item-1 {
  z-index: 7;
}

.item-2 {
  z-index: 3;
  margin-top: 5px;
}

.qty-1 {
  z-index: 4;
}

.qty-2 {
  z-index: 0;
}

.title-1 {
  clear: both;
  width: 99.9999999999%;
  min-height: 42px;
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1.38;
  outline: none;
}

.unit-1 {
  z-index: 5;
}

.unit-2 {
  z-index: 1;
}

.status {
  margin-bottom:5px;
  padding:10px;
  border-radius: 8px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  clear: both;
  background-color:#db4444;
}

.recipe-status {
  display: none;
  position:fixed;
  margin: 5px;
  width: 100px;
  top: 140px;
  left: 10px;
}

.editable {
  outline:none;
  background-color:#f7f7f7;
}

.edited {
  color: #666;
  /*background: none;*/
  border:none;
}

label.select {
  display: block;
  margin-top: 10px;
  position:relative
}

label.select::after {
    content:'<>';
    font-family: "Consolas", monospace;
    color:#aaa;
    font-size: 1.3em;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:.5em;
    top: .4em;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}

label.select::before {
    content:'';
    right:6px;
    top:1px;
    width:3em;
    height:calc(100% - 2px);
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

label.select select {
  padding:10px;
  margin: 0;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  background: #f7f7f7;
  color:#666;
  font-size: 1.3em;
  border: 1px solid #dddddd;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  width: 100%;
}

.live {
  background: none;
}

form.upload {
  position: absolute;
  left: -99999px;
}

.upload-image {
  background: none;
  border: 0;
  width:100%;
  height:270px;
  padding: 0;
  background:#ddd;
  overflow: hidden;
  position: relative;
  display: block;
}

.upload-image.has-image {
  height: auto;
}

.upload-image .image {
  min-width: 100%;
}


@media(max-width: 480px) {
  .dashboard .recipe {
    clear: both;
    width: 99.9999999999%;
    height: 425px;
    margin-top: 10px;
    margin-left: 0;
  }

  .dashboard .user {
    width: 99.9999999999%;
  }

  .ingredients .add {
    height: auto;
    margin-top: -73px;
  }

  .ingredients .item {
    position: relative;
  }

  .ingredients .label {
    width: 22.8739002932%;
  }

  .item .ingredient {
    width: 9.6774193548%;
    margin-top: -74px;
  }

  .item .qty {
    position: relative;
    width: 9.6774193548%;
  }

  .item .unit {
    position: relative;
    clear: both;
    width: 9.6774193548%;
    margin-top: -74px;
    margin-left: 16.42228739%;
  }

  .photo .icon {
    height: auto;
  }

  .recipe .page {
    width: 57.5520833333%;
  }

  .recipe .step {
    margin-top: -145px;
  }

  .step .count {
    width: 2.6392961876%;
    margin-top: -14px;
  }

  .step .description {
    margin-top: -54px;
    outline: none;
    height:auto;
  }

  .step .icon {
    float: left;
    margin-top: 159px;
    margin-right: 0;
    margin-left: 22.2929936305%;
  }

  .step .ingredients {
    margin-top: -36px;
  }

  .step .photo {
    margin-top: 6px;
  }

  .step .title {
    clear: both;
    width: 141.642228739%;
    margin-top: 49px;
    margin-left: 75.9530791788%;
    font-weight: bold;
    font-size:1.4em;
  }

  .user .profile {
    height: auto;
  }

  .recipe ._button {
    margin-left: 29.4270833333%;
  }

  .ingredients .item-1 {
    z-index: 7;
  }

  .ingredients .item-2 {
    z-index: 3;
  }

  .item .ingredient-1 {
    margin-left: 43.6950146627%;
  }

  .item .ingredient-2 {
    margin-left: 43.9882697947%;
  }

  .item .qty-1 {
    z-index: 4;
  }

  .item .qty-2 {
    z-index: 0;
    margin-left: 12.3167155425%;
  }

  .item .unit-1 {
    z-index: 5;
  }

  .item .unit-2 {
    z-index: 1;
  }

  .recipe .photo-1 {
    clear: both;
  }

  .recipe .title-1 {
    margin-top: 29px;
  }

  .step .add-2 {
    height: auto;
    margin-top: 22px;
    margin-left: -10.5571847508%;
  }
}

@media(max-width: 380px) {
  body {
    font-size: 1em;
  }

  .dashboard {
    width: 79.4736842105%;
  }

  .dashboard .user {
    position: relative;
  }

  .ingredients .add,
  .step .add-2 {
    height: auto;
  }

  .ingredients .item {
    position: relative;
  }

  .ingredients .label {
    width: 29.1044776119%;
  }

  .item .ingredient {
    width: 12.3134328358%;
  }

  .item .qty,
  .item .unit {
    position: relative;
    width: 12.3134328358%;
  }

  .photo .icon {
    height: auto;
  }

  .photo .label {
    width: 163px;
    margin-top: 10px;
    font-size: 0.938em;
  }

  .recipe .page {
    width: 40.3973509933%;
  }

  .recipe .step {
    margin-top: -133px;
  }

  .step .count {
    width: 3.3582089552%;
    margin-top: -131px;
  }

  .step .icon {
    margin-top: 68px;
    margin-left: 0;
  }

  .step .ingredients {
    margin-top: -113px;
  }

  .step .photo {
    clear: both;
    width: 99.9999999999%;
    margin-top: -86px;
    margin-right: -4.8507462687%;
    border-width: 5px;
  }

  .step .title {
    margin-top: 75px;
  }

  .user .location {
    width: 167px;
    margin-top: 0;
    margin-left: 0;
  }

  .user .name {
    width: 165px;
    margin-left: 0;
  }

  .user .profile {
    height: auto;
    margin-top: -40px;
    margin-right: 0;
  }

  .ingredients .item-1 {
    z-index: 7;
  }

  .ingredients .item-2 {
    z-index: 3;
  }

  .item .ingredient-1 {
    margin-left: 44.0298507462%;
  }

  .item .qty-1 {
    z-index: 4;
  }

  .item .qty-2 {
    z-index: 0;
  }

  .item .unit-1 {
    z-index: 5;
  }

  .item .unit-2 {
    z-index: 1;
  }

  .recipe .description-1 {
    width: 100%;
    height: auto;
  }
}