/* 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-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;
}

.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;
    border-radius: 5px !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;
}

.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(235, 235, 235) !important;
    border: 1px solid rgb(213, 213, 213) !important;
    color: rgb(87, 87, 87) !important;
}

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