:root { font-family: "Inter", sans-serif; font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */ }
:root { --cg-1: #287DCC; --cg-2: #EF476F; --cg-3: #43AA8B; --cg-4: #FFB703; --cg-5: #5AA6E6; --cg-6: #F78C6B; --cg-7: #7ED6C4; --cg-8: #9B5DE5; --cg-9: #FFD166; --cg-10: #3A86FF; --cg-11: #06D6A0; --cg-12: #E63946; --cg-13: #2A9D8F; --cg-14: #FB8500; --cg-15: #90BE6D; --cg-16: #8338EC; --cg-17: #FF006E; --cg-18: #118AB2; --cg-19: #8ECAE6; --cg-20: #219EBC; --cg-21: #BC6C25; --cg-22: #588157; --cg-23: #F4A261; --cg-24: #2B2D42; --cg-25: #8D99AE; --cg-26: #E76F51; --cg-27: #52B788; --cg-28: #3B8ED6; --cg-29: #FF9F1C; --cg-30: #06A77D; --cg-31: #6A4C93; --cg-32: #4CC9F0; --cg-33: #B5179E; --cg-34: #F72585; --cg-35: #7209B7; --cg-36: #560BAD; --cg-37: #480CA8; --cg-38: #4361EE; --cg-39: #4895EF; --cg-40: #4D908E; --cg-41: #577590; --cg-42: #90BE6D; --cg-43: #F94144; --cg-44: #F3722C; --cg-45: #287DCC33; }

/* general */
* { margin: 0; padding: 0; }
body { font-family: "Inter", sans-serif; font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */ background-color: #FAFAF9; margin: 0; padding: 0; }
.align-items-center { /* -webkit-box-align: center !important; */ -ms-flex-align: center !important; align-items: center !important; }
.h-100 { height: 100% !important; }
.d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
h2 { font-size: 20px; margin: 0; margin-bottom: 15px; font-family: "Inter" }
label { font-size: 14px; font-weight: normal; color: #7B8794; margin-top: 10px; margin-bottom: 5px; line-height: 20px; }
    label.form-check-label { margin-top: auto; margin-bottom: auto; line-height: inherit; margin-left: 7px; }
    .form-control input { border: 1px solid #E4E7EB; }
    .input-group-addon img { max-height: 20px; }

.form-panel { border: 1px solid #E4E7EB; background-color: #fff; padding: 40px; border-radius: 16px; width: 100%; }
.btn-active { background-color: #1C6434; margin-top: 15px; font-size: 14px; }
    .btn-active:hover { background-color: #1C6434; opacity: 0.3; }

menu { display: block; background-color: #fff; border-bottom: 1px solid #E4E7EB; }
menu > div { display: inline-block; min-height: 50px; vertical-align: top; }
    menu > div:last-child { float: right; }
.row { margin-right: unset; }
    menu img { max-height: 40px; margin: 10px 20px; display: inline-block; vertical-align: top; }
    menu .relation-info > div { display: inline-block; padding: 15px 30px 15px 0; border-right: 1px solid #E4E7EB; margin-right: 20px; font-weight: 600; }
    menu .relation-info a { font-size: 12px; color: #7B8794; text-decoration: none; font-weight: normal; }
        menu .relation-info a:hover { font-size: 12px; color: #000; text-decoration: none; }

menu .submenu a { background-repeat: no-repeat; padding-left: 25px; background-size: 16px; font-size: 14px; color: #1F2933; padding-top: 27px; padding-bottom: 28px; display: inline-block; background-position: left center; margin-right: 29px; border-bottom: 2px solid #fff; }
            menu .submenu a:hover, .file-menu a:visited { text-decoration: none; border-bottom: 2px solid #80CC28; }
            menu .submenu a.active { text-decoration: none; border-bottom: 2px solid #80CC28; font-weight: 600; }
            menu .submenu a:hover { opacity: 0.7; color: #1F2933; text-decoration: none; }
            menu .submenu a.calendar { background-image: url('/Content/Images/Icons/ico-cal.png'); }
            menu .submenu a.closing { background-image: url('/Content/Images/Icons/ico-closing.png'); }
            menu .submenu a.docs { background-image: url('/Content/Images/Icons/ico-docs.png'); }
            menu .submenu a.files { background-image: url('/Content/Images/Icons/ico-files.png'); }
            menu .submenu a.news { background-image: url('/Content/Images/Icons/ico-news.png'); }
            menu .submenu a.settings { background-image: url('/Content/Images/Icons/ico-settings.svg'); }
    menu .submenu a > img { height: 16px; margin-top: -3px; }

.btn.btn-secondary { border-color: #E4E7EB; padding: 7px 14px; color: #000; }
.btn.btn-save { border-color: #E4E7EB; background-color: #1C6434; padding: 7px 14px; color: #fff; font-size: 14px; }
.btn-toolbar { display: inline-block; }
.btn-toolbar a { margin-bottom: 5px; }
    .btn-toolbar a.active { background-color: #BFD3C6; }
.log-out { display: block; padding-right: 20px; }
.right-menu { display: inline-block; padding: 17px 15px 0 0; }
.right-menu .row { margin: 0; }
    .right-menu .row > div { padding: 0; }
.btn.logout { background-repeat: no-repeat; padding-left: 30px; background-size: 16px; background-position: 7px center; font-size: 14px; color: #1F2933; background-image: url('/Content/Images/Icons/ico-logout.png'); }
.btn.btn-add { background-repeat: no-repeat; padding-right: 30px; background-size: 16px; background-position: right 7px center; font-size: 14px; color: #fff; background-image: url('/Content/Images/Icons/ico-add-white.png'); }

.body-content { padding: 40px; }
    .body-content h1 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }

a.input-group-addon { cursor: pointer; text-decoration: none; color: #7B8794 }
a.input-group-addon:hover { color: #000; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.input-group-text { background-color: transparent; font-size: 14px; }
.input-group-prepend img { max-height: 16px; }
.input-group input { border-left: none; }
a.input-btn { cursor: pointer; }
a.input-btn:hover { text-decoration: none; }
.btn.btn-secondary, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle { background-color: #fff; border-color: #E4E7EB; font-weight: 600; color: #1F2933; font-size: 14px; }
    .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:hover, .input-group-text.input-btn:hover, .show > .btn-secondary.dropdown-toggle:hover { background-color: #E9F0EB; color: #1C6434; font-size: 14px; }
.btn-save:hover { background-color: #E9F0EB; color: #1C6434; font-size: 14px; opacity: 0.6; }
.dropdown-menu { padding: 5px; }
.dropdown-menu a { border-radius: 8px; }

.modal-dialog .footer { text-align: center; padding: 20px; }
    .modal-dialog .footer > div { background-color: #1C643424; border-radius: 12px; padding: 40px 0; color: #2D2C28B2; font-size: 14px; }
        .modal-dialog .footer > div h5 { font-weight: 700; color: #2D2C28; font-size: 24px; }
        .modal-dialog .footer > div a { font-weight: 500; color: #1C6434; font-size: 14px; }
        .modal-dialog .footer > div a img { height: 16px; }
    .modal-content { border-radius: 16px; }
.modal-dialog h5 { font-size: 18px; font-weight: 600; }

.list-row-action img { max-height: 16px; }

.border-top { border-top: 1px solid #dee2e6; }
.modal-dialog .btn-footer > .row { margin-left: unset; }
.modal-dialog .modal-body .row { margin-right: -15px; }
.btn-normal { }

.cg { font-size: 12px; padding: 3px 10px; border-radius: 10px; font-weight: 400; }
.cg-s { font-size: 9px; padding: 4px 4px; border-radius: 10px; font-weight: 400; margin-left: 2px; }

.cg-1 { background: var(--cg-1); }
.cg-2 { background: var(--cg-2); }
.cg-3 { background: var(--cg-3); }
.cg-4 { background: var(--cg-4); }
.cg-5 { background: var(--cg-5); }
.cg-6 { background: var(--cg-6); }
.cg-7 { background: var(--cg-7); }
.cg-8 { background: var(--cg-8); }
.cg-9 { background: var(--cg-9); }

.cg-10 { background: var(--cg-10); }
.cg-11 { background: var(--cg-11); }
.cg-12 { background: var(--cg-12); }
.cg-13 { background: var(--cg-13); }
.cg-14 { background: var(--cg-14); }
.cg-15 { background: var(--cg-15); }
.cg-16 { background: var(--cg-16); }
.cg-17 { background: var(--cg-17); }
.cg-18 { background: var(--cg-18); }
.cg-19 { background: var(--cg-19); }

.cg-20 { background: var(--cg-20); }
.cg-21 { background: var(--cg-21); }
.cg-22 { background: var(--cg-22); }
.cg-23 { background: var(--cg-23); }
.cg-24 { background: var(--cg-24); }
.cg-25 { background: var(--cg-25); }
.cg-26 { background: var(--cg-26); }
.cg-27 { background: var(--cg-27); }
.cg-28 { background: var(--cg-28); }
.cg-29 { background: var(--cg-29); }

.cg-30 { background: var(--cg-30); }
.cg-31 { background: var(--cg-31); }
.cg-32 { background: var(--cg-32); }
.cg-33 { background: var(--cg-33); }
.cg-34 { background: var(--cg-34); }
.cg-35 { background: var(--cg-35); }
.cg-36 { background: var(--cg-36); }
.cg-37 { background: var(--cg-37); }
.cg-38 { background: var(--cg-38); }
.cg-39 { background: var(--cg-39); }

.cg-40 { background: var(--cg-40); }
.cg-41 { background: var(--cg-41); }
.cg-42 { background: var(--cg-42); }
.cg-43 { background: var(--cg-43); }
.cg-44 { background: var(--cg-44); }
.cg-45 { background: var(--cg-45); }

.cg-pill-1 { background-color: #287DCC33; }
.cg-pill-2 { background-color: #5500FF33; }
.cg-pill-3 { background-color: #FF88004D; }
.cg-pill-4 { background-color: #EA00FF33; }
.cg-pill-5 { background-color: #00BB6633; }

.cg-extra { background: #5500FF33; }
.cg-menu-extra { background: #FF88004D; }
.cg-cart { background: #EA00FF33; }

.modal-simple > div { max-width: 500px; }

/* NUMBER INPUT WITH UNIT */
.u-wrap { display: inline-flex; align-items: stretch; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; overflow: hidden }
    .u-wrap.disabled-num { background-color: transparent !important; color: #6b7280; cursor: not-allowed; border:none; }
        .u-wrap.disabled-num .u-btns { display: none; }
    .u-wrap.disabled-num input {
        padding: 0;
        text-align: right;
    }
.u-num { width: 60px; border: none; outline: none; background: transparent; font-size: 15px; color: #6b7280; padding: 8px 4px 8px 12px; -moz-appearance: textfield; appearance: textfield; font-family: inherit }
    .u-num::-webkit-outer-spin-button, .u-num::-webkit-inner-spin-button { -webkit-appearance: none }
.u-unit { font-size: 15px; color: #6b7280; padding: 8px 12px 8px 0; user-select: none; min-width: 40px; text-align: right; }
.u-btns { display: flex; flex-direction: column; border-left: 1px solid #d1d5db }
.u-btn { width: 28px; border: none; background: #F7F7F7; cursor: pointer; color: #6b7280; padding: 0; font-size: 10px; flex: 1; line-height: 1 }
.u-wrap.disabled-num .u-btn { cursor: not-allowed; }
    .u-btn:first-child { border-bottom: 1px solid #d1d5db }
    .u-btn:hover { background: #f3f4f6 }
    .u-btn:active { background: #e5e7eb }

/* search field */
.search-wrapper { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 16px; width: 16px; height: 16px; color: #aaa; pointer-events: none; flex-shrink: 0; }
.search-input { width: 100%; height: 40px; padding: 0 44px 0 46px; font-size: 14px; font-weight: 400; color: #1F2933; background: #fff; border: 1px solid #DFE2E5; border-radius: 8px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
    .search-input::placeholder { color: #aaa; font-weight: 300; }
    .search-input:hover { border-color: #bbb; }
    .search-input:focus { border-color: #378ADD; box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.12); }

.small-price { font-size: 12px; color: #6b7280; font-style: italic; }

.dieet { margin: 0 0 0 30px; width: 100%; }
    .dieet a { margin: 5px 0; display: inline-block; color: #6b7280; font-style: italic; font-size: 12px; }
    .dieet a:hover { text-decoration: none; }
.dieet-values {  }
.chevron-down { padding-right: 5px; background-image: url(/Content/Images/icons/ico-down-arrow.png); width: 10px; height: 10px; display: inline-block; background-position: center; background-size: cover; }
.chevron-up { padding-right: 5px; background-image: url(/Content/Images/icons/ico-up-arrow.png); width: 10px; height: 10px; display: inline-block; background-position: center; background-size: cover; }
.dieet .form-check-input { margin-left: 0; }
.diet-icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; flex-shrink: 0; }
    .diet-icon.diet-icon-ok circle { fill: #03af00; }
    .diet-icon.diet-icon-alert circle { fill: #af0000; }

.form-check-input { transform: scale(1.2); accent-color: #1C6434; }
    .form-check-input:checked { background-color: #28a745 !important; border-color: #28a745 !important; }

@media (max-width: 1750px) { menu .relation-info img { max-height: 30px; margin: 15px 0 15px 15px; }
}

@media (max-width: 990px) {
    menu > div, menu > div:last-child { display: block; min-height: auto; float: none; }
    menu .submenu > div { text-align: center; padding: 10px 0; }
    menu .submenu a { display: block; text-align: center; }
    menu .relation-info > div { display: block; text-align: center; border: none; margin-right: auto; padding: 15px 30px; border-bottom: 1px solid #E4E7EB; }
    .right-menu { float: none; display: block; margin-top: 10px 0; }
    .log-out { display: block; }
    .right-menu .row > div { text-align: center; }
}