:root {
    /* Main nav bar */
    --nav-main-height: 67px;
    --nav-main-background-color: #fff;
    --nav-main-border-bottom: 1px solid grey;

    /* Secondary nav bar */
    --nav-secondary-height: 67px;
    --nav-secondary-background-color: #fff;
    --nav-secondary-border-bottom: 1px solid #dadada;

    /* Footer */
    --nav-footer-height: 30px;
    --nav-footer-background-color: rgb(242, 242, 242);
    --nav-footer-border-top: 1px solid #d7d7d7;

    /* Submit bar */
    --submit-bar-height: 67px;
    --submit-bar-background-color: white;
    --submit-bar-border-top: 1px solid #d7d7d7;
}

.nav-main {
    height: var(--nav-main-height);
    background-color: var(--nav-main-background-color);
    border-bottom: var(--nav-main-border-bottom);
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 0;
    padding-bottom: 0;
}

.nav-secondary {
    height: var(--nav-secondary-height);
    background-color: var(--nav-secondary-background-color);
    border-bottom: var(--nav-secondary-border-bottom);
    padding-right: 50px;
    padding-left: 50px;
}

.nav-footer {
    height: var(--nav-footer-height);
    background-color: var(--nav-footer-background-color);
    border-top: var(--nav-footer-border-top);
}

.full-height-y-scroll {
    height: calc(100% - var(--nav-main-height) - var(--nav-secondary-height) - var(--nav-footer-height));
    overflow-y: overlay;
}

.toast {
    position: fixed;
    top: 15px;
    z-index: 9999999999;
}

.recipe-image:hover {
    cursor: pointer;
}

.submit-bar {
    height: var(--submit-bar-height);
    background-color: var(--submit-bar-background-color);
    border-top: var(--submit-bar-border-top);
    justify-content: end;
    display: flex;
    align-items: center;
    padding-right: 50px;
}

.profile-button {
    border: 1px solid #dfdfdf;
    padding: 5px 10px 5px 10px;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 13px;
    color: #3f3f3f !important;
}

.recipe-image-button {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
}

.recipe-image:hover {
    background-color: #f0f0f0 !important;
}

.recipe-image:hover .recipe-image-button {
  display: block !important;
}

.card-ingredient:hover {
    background-color: #fff3eb !important;
    cursor: pointer;
}

.badge-ingredient {
    color: #a54500 !important;
    background-color: #ffdac0 !important;
    border: 1px solid #ffaf75 !important;
}

.page-link {
    color: #923e00 !important;
}

.page-link.active {
    background-color: #ffd5b6 !important;
    border: 1px solid #e19863 !important;
}

/* Delete button on shopping list items */
form > button > i {color: var(--bs-body-color); font-size: 18px;}

/* Delete shopping list button on mobile */
#btn-mb-delete-list {color: var(--bs-body-color); text-decoration: none;}

#btn-delete-list-desktop > i {color: unset !important;}

.instructions-step {
    padding: 10px;
    color: black;
    background-color: #fff4eb;
    border: none;
    border-radius: 7px;
    border-bottom: 2px solid #e66100;
    margin: 0;
}

.btn-primary {
    background-color: #ffd5b6;
    border: 1px solid #e19863;
    color: #923e00;
    border-radius: 0;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #ffc195 !important;
    border: 1px solid #e66100 !important;
    color: #923e00 !important;
}

.btn-secondary {
    background-color: #ffeaa7;
    border: 1px solid #ffb21a;
    color: #754e00;
    border-radius: 0;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #ffe48d !important;
    border: 1px solid #b57800 !important;
    color: #754e00 !important;
}

.thumb{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
}

.thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}


.text-bg-primary {
    background-color: #e66100;
}

.nav-tab {
    color: #e66100 !important;
}

.nav-tab disabled {
    color: grey;
}

.nav-item {
    height: 50px !important;
}

.nav-link.active {
    border-bottom: 2px solid #e66100;
}

.nav-tab.active {
    color: black !important;
}

.list-group-item.active {
    border-color: #ffb784 !important;
    background-color: #ffe0c9 !important;
    color: rgb(43, 43, 43);
}

.dropdown-shoppinglist {
    background-color: white;
    color: rgb(86, 86, 86);
    border: 1px solid rgb(176, 176, 176);
    border-radius: 5px !important;
}

.comment-metadata {
    color: grey;
    font-size: 14px;
    margin-right: 10px;
}

.knapp {
    background-color: #ffcfaa;
    border: 0;
    border-bottom: 3px solid #e66100;
    border-radius: 5px;
    color: #973f00;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    padding: 6px 28px;

    /* padding: 4px 20px; */
    /* font-size: 14px; */
}

.knapp:disabled {
    background-color: #ffcfaa41;
    border-bottom: 3px solid #e660003b;
    color: #973f0088;
    cursor: not-allowed;
}

.knapp:hover {
    background-color: #ffbf8f;
}

.knapp-sm {
    padding: 3px 10px !important;
}

.knapp-no-bg {
    background-color: transparent !important;
    border: none !important;
    color: #e66100;
}

.knapp-secondary {
    background-color: rgb(240, 240, 240);
    border-bottom: 3px solid rgb(154, 154, 154);
    color: rgb(87, 87, 87);
}

.knapp-secondary:hover {
    background-color: rgb(230, 230, 230);
}

.knapp-tertiary {
    background-color: #ffebec;
    border-bottom: 3px solid #e96268;
    color: #e96268;
}

.knapp-tertiary:hover {
    background-color: #ffdddf;
}

.knapp-light {
    background-color: #ffffff;
    border-bottom: 3px solid #cfcfcf;
    color: #5b5b5b;
}

.knapp-light:hover {
    background-color: rgb(227, 227, 227);
}

.form-control, .input-group-text, select {
    border-bottom: 3px solid #d4d4d4 !important;
}

.form-control:focus {
    border-color: #e66100;
    box-shadow: 0 0 0 .25rem #e661002e;
}

.form-control-no-focus:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

.nedtrekk {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgb(203, 203, 203);
    border-bottom: 3px solid rgb(203, 203, 203);
}

.btn-link {
    display: flex;
    text-decoration: none;
}

.btn-link:hover {
    color: orange !important;
    border-color: transparent !important;
    background-color: transparent !important;
}

.navbar-toggler {
    border: none;
}

.login-container {
    padding: 0 !important;
    background-image: conic-gradient(from 0deg, orange, orangered, orange);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: orange;
}

.navbar {
    border-bottom: 1px solid #dedede;
}

.btn-link {
    padding: 4px;
}

.btn-link:hover {
    background-color: rgb(250, 250, 250);
    border: 1px solid rgb(230, 230, 230);
    border-radius: 5px;
}

.vr {
    background-color: #b7b7b7;
}

tr:hover {
    background-color: rgb(237, 237, 237) !important;
}

.knapp-secondary-flat {
    background-color: rgb(255 242 228) !important;
    border: 1px solid rgb(230 175 103) !important;
    color: rgb(145 69 0) !important;
}

.knapp-secondary-flat:hover {
    background-color: rgb(215, 215, 215);
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: #ff9442;
}

a.col {
    text-decoration: none !important;
}

.card-list-item:hover {
    cursor: pointer !important;
}

.loader {
    position: relative;
    width: 108px;
    display: flex;
    justify-content: space-between;
}

.loader::after,
.loader::before {
    content: '';
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: #e3e3e3;
    background-image: radial-gradient(circle 14px, #0d161b 100%, transparent 0);
    background-repeat: no-repeat;
    border-radius: 50%;
    animation: eyeMove 10s infinite, blink 10s infinite;
}

@keyframes eyeMove {

    0%,
    10% {
        background-position: 0px 0px
    }

    13%,
    40% {
        background-position: -15px 0px
    }

    43%,
    70% {
        background-position: 15px 0px
    }

    73%,
    90% {
        background-position: 0px 15px
    }

    93%,
    100% {
        background-position: 0px 0px
    }
}

@keyframes blink {

    0%,
    10%,
    12%,
    20%,
    22%,
    40%,
    42%,
    60%,
    62%,
    70%,
    72%,
    90%,
    92%,
    98%,
    100% {
        height: 48px
    }

    11%,
    21%,
    41%,
    61%,
    71%,
    91%,
    99% {
        height: 18px
    }
}