:root {
    --theme-color: #5D7052;
    --theme-color2: var(--dark);
    --theme-color3: var(--warning);
}

@font-face {
    font-family: FoodBuka;
    src: url("../font/Food Buka.otf") format("opentype");
}

@font-face {
    font-family: ValentineDesigner;
    src: url("../font/Valentine Designer.otf") format("opentype");
}

@font-face {
    font-family: NewYear;
    src: url("../font/New Year.otf") format("opentype");
}

@font-face {
    font-family: ChubbyBakery;
    src: url("../font/Chubby Bakery.otf") format("opentype");
}

@font-face {
    font-family: OswaldBold;
    src: url("../font/Oswald-Bold.otf") format("opentype");
}

.text-recipe-title1 {
    font-family: OswaldBold;
}

.text-recipe-title2 {
    font-family: OswaldBold;
}

.text-recipe-title3 {
    font-family: Nunito;
}

/* .text-recipe {
    font-family: OswaldBold;
} */

.navbar-menu {
    font-family: OswaldBold;
}

.main {
    width: 50%;
    margin: 50px auto;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.image-grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}

.img-note {
  width: auto;
  height: 150px;
}

.no-border {
  border: 0;
}


.hover-outline img {
    border: 1px solid white;
}

.hover-outline img:hover {
    border: 1px solid #e3e3e3;
}

.link-no-hover a{
    text-decoration: none;
    color: inherit;
}

.link-no-hover a:link{
    text-decoration: none;
    color: inherit;
}

.link-no-hover a:visited{
    text-decoration: none;
    color: inherit;
}

.link-no-hover a:hover{
    text-decoration: none;
    color: inherit;
}

.link-no-hover a:active{
    text-decoration: none;
    color: inherit;
}

.tag > .btn, .tag {
  padding: .25rem .4rem;
  font-size: .675rem;
  font-weight: bold;
  line-height: .5;
  border-radius: .2rem;
}

.hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.hscroll .image-grid-container{
  display:block;
  padding-bottom: 15px;
}

.recipe-step-edit {
    border-radius: 5px;
    border: solid 1px gray;
    margin: 1rem;
    padding: 1rem;
}

.recipe-step-edit:hover {
    border-color: var(--theme-color);
    border: solid 1px var(--theme-color);
}

#recipe-search-result.card-columns {
    column-count: 3;
}

@media (max-width: 978px) {
    #recipe-search-result.card-columns {
        column-count: 1;
    }
}    

.recipe-card.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

.recipe-card.card:hover {
    border-color: var(--theme-color);
    border-width: 1px;
}

.recipe-card.card-title {
    color: var(--gray-dark);
}

.recipe-card.card-text {
    color: var(--gray-800);
}

.hover-outline img {
  border: 1px solid white;
}

.hover-outline img:hover {
  border: 1px solid #e3e3e3;
}

.custom-file-input input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}

.custom-file-input input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}

.tohover {
    display: none;
}

.instruction-block:hover .tohover {
 display: flex;
}

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

.badge-counter {
  /* position: absolute; */
  transform: scale(0.6);
  transform-origin: top left;
  right: 0.25rem;
  margin-top: -0.25rem;
}

.navbar-nav {
  flex-direction: row;
}

.bookmark-button {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1000;
    margin: 0px 0px 0px 0px;
}

body {
    background-color: #f8f9fa!important;
}

@media (max-width: 978px) {
    body {
        background-color: #ffffff!important;
    }

    .responsive-card, .responsive-card > .card-header, .responsive-card > .card-body, .responsive-card > .card-footer  {
      border-width:0;
      background-color: white;
      box-shadow: none!important;
    }

    .responsive-card-header{
        display:none!important;
    }
}