/******************************************************/
.recipe-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 24% 24% 24% 24%;
      grid-template-columns: 24% 24% 24% 24%;
  grid-column-gap: 1.5%;
  grid-row-gap: 20px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

/*@media only screen and (max-device-width : 640px) {*/
@media (max-width: 1300px) {
  .recipe-wrapper {
    -ms-grid-columns: 48% 48%;
        grid-template-columns: 48% 48%;
  }
}

@media (max-width: 900px) {
  .recipe-wrapper {
    -ms-grid-columns: 100%;
        grid-template-columns: 100%;
  }
}

.recipe-card {
  background: #325582;
  -webkit-box-shadow: 0 2px 5px 0 black, 0 5px 5px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 5px 0 black, 0 5px 5px 0 rgba(0, 0, 0, 0.5);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  color: #f3f8fe !important;
}

.recipe-card:hover {
  background-color: #73b9ff;
  -webkit-box-shadow: 0 8px 10px 0 black, 0 10px 15px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 8px 10px 0 black, 0 10px 15px 0 rgba(0, 0, 0, 0.5);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}

.recipe-card img {
  width: 98%;
  margin: 1%;
}

.recipe-card header {
  text-align: left;
  margin: 5% 8% 6%;
  font-size: 1.4em;
  letter-spacing: 0.05em;
  margin-bottom: 25px;
  color: #f3f8fe !important;
}

.recipe-card footer {
  padding: 5% 8% 6%;
  font-size: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.recipe-card footer .rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
  cursor: pointer;
  font-size: 1.2em;
}

.recipe-card footer .rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}

.recipe-card footer .rating > span:hover,
.recipe-card footer .rating > span:hover ~ span {
  color: transparent;
}

.recipe-card footer .rating > span:hover:before,
.recipe-card footer .rating > span:hover ~ span:before {
  content: "\2605";
  position: absolute;
  left: 0;
  color: black;
}

.recipe-card footer .favorite {
  background: url(../icons/full-heart.png) no-repeat 0 center;
  width: 25px !important;
  height: 25px !important;
  float: right !important;
  background-size: contain !important;
}

.recipe-card footer .favorite:hover {
  background: url(../icons/empty-heart.png) no-repeat 0 center;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  background-size: contain;
}

.recipe-card footer .not-favorite {
  background: url(../icons/empty-heart.png) no-repeat 0 center;
  width: 25px !important;
  height: 25px !important;
  float: right !important;
  background-size: contain !important;
}

.recipe-card footer .not-favorite:hover {
  background: url(../icons/full-heart.png) no-repeat 0 center;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  background-size: contain;
}

.recipe_image {
  /* Center and scale the image */
  background-image: linear-gradient(5deg, rgba(25, 40, 60, 0.7), rgba(35, 65, 100, 0.4)), url(../uploads/recipe-default.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: -webkit-fill-available;
  min-height: 95vh;
  width: 100%;
  position: absolute;
}

.drop-placeholder {
  background-color: lightgray;
  height: 3.5em;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.2em;
}

.summary-data {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 33% 33% 33%;
      grid-template-columns: 33% 33% 33%;
  margin: 1vh 0;
}

.ingredients ul,
.instructions ul {
  padding-left: 0;
}

.ingredients ol,
.instructions ol {
  padding-left: 15px;
}

.ingredient {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 15% 15% 70%;
      grid-template-columns: 15% 15% 70%;
  padding: 0.5em 1em;
  margin: 0.1em 0;
}

.ingredient span {
  padding: 5px;
}

.ingredient select {
  padding: 5px;
  margin: 0 25px 0 10px;
  background-color: rgba(35, 65, 100, 0.4);
  border: 1px solid #142d4b;
  -webkit-box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
          box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
}

.ingredient select:nth-child(even) {
  background-color: rgba(20, 45, 75, 0.5);
}

.ingredient:nth-child(even) {
  background-color: rgba(20, 45, 75, 0.5);
  border-bottom: 1px solid #19283c;
}

.preparation-step {
  padding: 0.5em 1em;
  margin: 0.1em 0;
}

.preparation-step:nth-child(even) {
  background-color: rgba(20, 45, 75, 0.5);
  border-bottom: 1px solid #0f1923;
}

dt {
  font-size: 1.25em;
  padding: 0.4em 0;
}

dd {
  margin: 0 0;
}

.ingredient-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 15% 15% 70%;
      grid-template-columns: 15% 15% 70%;
  background-color: rgba(20, 45, 75, 0.5);
  border-color: #142d4b;
  color: #192d4b;
}

.ingredient-wrapper div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ingredient-wrapper div img {
  margin: 0;
}

.ingredient-edit {
  padding: 8px;
  margin-bottom: 2px;
}

.instruction-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3% 97%;
      grid-template-columns: 3% 97%;
  background-color: rgba(20, 45, 75, 0.5);
  border-color: #142d4b;
  color: #192d4b;
}

.instruction-wrapper div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.instruction-wrapper div img {
  margin: 0;
}

.instruction-step {
  margin-top: auto;
  margin-bottom: auto;
  padding-bottom: 5px;
  color: #f3f8fe;
}

.instruction-body {
  padding-bottom: 3px;
}

.instruction-textarea {
  width: 100%;
  text-rendering: initial;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textarea;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  resize: auto;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0em;
  font: initial;
  border-width: 0px;
  border-style: solid;
  border-color: darkgray;
  -o-border-image: initial;
     border-image: initial;
  padding: 8px;
  height: 100px;
}

/* Layout------------------------------------------------------------- */
:root {
  --row-gap: 30px;
}

.ingredient-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3vw 10vw 10vw 32.5vw 7vw;
      grid-template-columns: 3vw 10vw 10vw 32.5vw 7vw;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

.ingredient-grid * {
  background-color: #d4e3f7;
  padding: 5px 15px;
  border: 0;
}

.directions-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 4vw 50.7vw 8vw;
      grid-template-columns: 4vw 50.7vw 8vw;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
}

.directions-grid * {
  background-color: #d4e3f7;
  padding: 5px 15px;
  border: 0;
}

.directions-grid textarea {
  width: 100%;
}

.grid-inline {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row wrap;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.grid-inline label {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  margin-bottom: 0;
}

.one-column {
  display: -ms-grid;
  display: grid;
  width: 70%;
  grid-row-gap: 30px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: space-evenly;
      align-content: space-evenly;
  margin: 0 15%;
  padding: 4vh;
}

@media (max-width: 1300px) {
  .two-column-form {
    -ms-grid-columns: 100% !important;
        grid-template-columns: 100% !important;
  }
  .two-column-form .full-width-mobile {
    width: 100%;
  }
}

.two-column-form {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 49% 49%;
      grid-template-columns: 49% 49%;
  grid-column-gap: 2%;
}

.two-column-form .stretch-vertical {
  -ms-grid-row: 1;
      grid-row-start: 1;
  grid-row-end: 4;
}

.two-column-form .stretch-horizontal {
  -ms-grid-column: 1;
      grid-column-start: 1;
  grid-column-end: 4;
}

.two-column-form .row-two {
  -ms-grid-row: 2;
      grid-row-start: 2;
}

.two-column-form .col-two {
  -ms-grid-column: 2;
      grid-column-start: 2;
}

@media (max-width: 1300px) {
  .two-column-form .col-two {
    -ms-grid-column: 1;
        grid-column-start: 1;
  }
  .two-column-form .add-photo .photo-upload-icon {
    margin-top: 0px;
  }
}

.categories .checkbox {
  position: inherit !important;
  display: block !important;
  margin: 0;
}

.categories .checkbox input[type="checkbox"] {
  position: inherit !important;
  display: block !important;
  margin: 0;
}

.add-photo {
  -ms-grid-column-align: center;
      justify-self: center;
}

.add-photo .photo-upload-icon {
  background-image: url(https://images.media-allrecipes.com/ar-images/icons/pic-icon-gray.svg);
  border-radius: 2px;
  width: 276px;
  height: 185px;
  cursor: pointer;
  background-position: center 35px;
  background-size: 36%;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-top: 50px;
  background-repeat: no-repeat;
  background-color: rgba(35, 65, 100, 0.4);
}

.add-photo .note_for_user {
  position: relative;
  top: -45px;
  font-size: 0.8em;
  color: #f3f8fe;
  display: block;
  text-align: center;
}

.form {
  background-color: #142d4b;
  border-radius: 3px;
}

.form .primary-label {
  font-family: "Lobster", Tahoma, sans-serif;
  font-size: 1.5em;
  color: #d4e3f7;
}

.one-third {
  width: 33% !important;
}

.two-thirds {
  width: 66% !important;
}

.half {
  width: 50% !important;
}

.three-quarters {
  width: 75% !important;
}

.full-width {
  width: 100%;
}

.bottom-margin {
  margin-bottom: 1vh;
}

.ingredient-inputs input,
.ingredient-inputs select {
  background-color: #d4e3f7;
  border: 1px solid #234164;
  height: 5vh;
  padding: 5px;
}

.ingredient-inputs tr {
  height: 5vh;
}

.ingredient-inputs td {
  padding: 0;
  border: 1px solid #234164;
}

.categories label {
  color: #d4e3f7;
  font-weight: 400;
}

@media (max-width: 900px) {
  .input-grp,
  .categories label {
    width: 100%;
  }
}

.text-block {
  padding: 0.5vh 0;
  color: #19283c;
  background-color: #9ebee6;
  font-family: "Montserrat", Tahoma, sans-serif;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}

.input-group {
  margin-bottom: 1vh;
}

.input-group .input-group-append .input-group-text {
  min-width: 75px;
  font-size: 1em;
}

.input-grp {
  width: auto;
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box !important;
  display: flex !important;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
          align-items: stretch;
  margin: 5px 0;
}

.input-grp .input-grp-prepend {
  margin-right: -1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.input-grp .input-grp input[type="text"], .input-grp .input-grp input[type="textarea"] {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  border: 0;
  width: 18vw;
  padding: 0.375rem 0.75rem;
}

.input-grp .input-grp-append {
  margin-left: -1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100px;
  color: #19283c;
}

.input-grp .append-label {
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  text-align: center;
  white-space: nowrap;
}

.input-grp .checkbox {
  border-radius: 2px 0 0 2px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  padding: 15px;
  background-color: #d4e3f7;
}

.input-grp .checkbox-label {
  min-width: 11.5vw;
  padding: 15px 8px 15px 11px;
  background-color: #d4e3f7;
  color: #19283c;
  font-size: 0.9em;
  border-radius: 0 2px 2px 0;
  border-left: 1px solid #5573a0;
  margin-right: 3px;
  text-transform: lowercase;
}

@media (max-width: 1300px) {
  .input-grp .checkbox-label {
    min-width: 32vw !important;
  }
}

.input-grp-text {
  width: -webkit-fill-available;
  padding: 0.5rem 0.75rem;
  background-color: #e9ecef;
  border: 0;
}

.inline-group {
  margin: 1vh;
}

.button {
  cursor: pointer;
  border: 0;
  font-weight: 400;
  text-align: center;
  letter-spacing: 2px;
  padding: 1rem 1rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #5573a0;
  -webkit-box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.5);
          box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.5);
  color: #f3f8fe;
  display: inline-block;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}

.button-text {
  background-color: transparent;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
}

.button:hover {
  background-color: #192d4b;
  color: #9ebee6 !important;
}

.button-attached-bottom {
  border-radius: 0 0 4px 4px;
  border: 1px solid #234164;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01), 0 5px 5px 0 rgba(0, 0, 0, 0.01);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01), 0 5px 5px 0 rgba(0, 0, 0, 0.01);
}

.delete.button {
  color: #d4e3f7;
  background-color: #192d4b;
  cursor: pointer;
  padding: 12px 30px;
}

.delete.button:hover {
  color: #0f1923;
  background-color: #d4e3f7;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}

.submit-button {
  border-radius: 0.3rem;
  background-color: #325582;
  color: #f3f8fe;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  text-transform: uppercase;
}

.submit-button:hover {
  background-color: blue;
  color: #f3f8fe;
}

.button-group {
  position: relative;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  vertical-align: middle;
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

@media (max-width: 1300px) {
  .button-group .button {
    font-size: 0.65em;
  }
}

.button-group .button {
  padding: 0.75rem;
  background-color: #234164;
  color: #9ebee6;
  margin-bottom: 0;
  font-family: "Montserrat", Tahoma, sans-serif;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}

.button-group .button:not(:first-child) {
  border-left: 1px solid #0f1923;
  margin-left: -1px;
}

.button-group .button:first-child {
  border-radius: 3px 0 0 0;
}

.button-group .button:last-child {
  border-radius: 0 3px 0 0;
}

.button-group .button.active {
  background-color: #5573a0 !important;
  color: #f3f8fe !important;
  cursor: default;
}

.button-group .button:hover {
  background-color: #5573a0;
  color: #f3f8fe;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}

.button-group .button input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
/*# sourceMappingURL=recipes.css.map */