html > body {
    font-family: 'FFDINWebProRegular','Helvetica','Arial', sans-serif !important
}

.mdl-button--icon {
    color: #505050;
}

.mdl-card__supporting-text-bottom {
    bottom: 0;
    position: absolute;
}

.mdl-textfield__fixed-label {
    color: rgb(0,167,181);
    font-size: 12px;
    top: 4px;
    visibility: visible;
}

.inline-card {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 16px;
}

    .inline-card .mdl-card__actions {
        position: absolute;
        bottom: 0;
    }

.inline-card--250 {
    min-height: 250px;
}

.inline-card--300 {
    min-height: 300px;
}

.inline-card--350 {
    min-height: 350px;
}

.inline-card-width--400 {
    min-width: 400px;
}

.inline-card--400-tall {
    min-height: 400px;
}

.inline-card-width--300 {
    min-width: 300px;
}

.inline-card-width--350 {
    min-width: 350px;
}

.inline-card-width--400 {
    min-width: 400px;
}

.inline-card-width--450 {
    min-width: 450px;
}

.inline-card-width--500 {
    min-width: 500px;
}

.inline-card-width--550 {
    min-width: 550px;
}

.inline-card-width--570 {
    min-width: 570px;
}

.inline-card-width--600 {
    min-width: 600px;
}

.inline-card-width--650 {
    min-width: 650px;
}

.inline-card-width--700 {
    min-width: 700px;
}

.inline-card-width--800 {
    min-width: 800px;
}

.mdl-textfield--fullwidth {
    width: 100%;
}

.mdl-layout__header-row .material-icons {
    color: white;
}

/*.mdl-layout__drawer.navigation-drawer {
    width: 260px;
}*/

/*.mdl-layout--fixed-drawer > .mdl-layout__content {
    margin-left: 60px;
}

.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__header {
    margin-left: 60px;
    width: calc(100% - 60px);
}*/

.mdl-layout__drawer.navigation-drawer .mdl-navigation .mdl-navigation__link {
    padding: 8px 24px;
}

.back-button {
    /*margin-left: -35px;*/
    margin-left: -4px;
    margin-right: 5px;
}

.inline {
    display: inline-block;
}

.no-break {
    white-space: nowrap;
}

.mdl-dialog-narrowwide {
    width: 400px;
}

.mdl-dialog {
    width: 600px;
}

.mdl-dialog-wide {
    width: 700px;
}

.mdl-dialog-extrawide {
    width: 780px;
}

.mdl-dialog-altrawide {
    width: 55%;
}

.mdl-dialog-fullheight {
    height: calc(100% - 6px - 2em);
}

/* jQuery Autocomplete Styles */
.ui-menu {
    list-style: none;
    padding: 0;
    display: block;
    width: auto;
    max-width: 1000px;
    background: white;
    z-index: 99;
    margin: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

    .ui-menu .ui-menu-item {
        background: white;
    }

        .ui-menu .ui-menu-item a {
            text-decoration: none;
        }

    .ui-menu .ui-menu-item-wrapper {
        padding-left: 4px;
    }

.ui-state-hover, .ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: rgb(0, 167, 181);
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    background-image: none;
}

.ui-helper-hidden-accessible {
    display: none;
}

/*.ui-sortable-placeholder {
    display: table;
    width: auto !important;
    height: 34px !important;
}*/

.mdl-color--secondary-50 {
    background-color: #e8eaf6 !important;
}


#toast-container {
    position: absolute;
    top: 110px;
    right: 16px;
    padding: 16px;
}

.toast {
    font-size: 13pt;
}

.main-progress {
    width: 100%;
}

.main-progress-placeholder {
    height: 4px;
}

.busy-overlay, .load-overlay {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 999;
}

.sessionexpired-overlay {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 999998;
}

.sessionexpiry-card {
    margin-top: 8%;
    margin-left: 5%;
}

div.hopscotch-bubble {
    z-index: 999990;
}

.is-favourite {
}

.is-verified {
    margin-top: 5px;
    margin-left: 14px;
}

.is-verified-icon {
    color: #aace49 !important;
}

.indented {
    margin-left: 24px;
}

/* Textfield with menu */
.mdl-textfield__icon {
    width: 32px;
    text-align: left;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.mdl-textfield.is-disabled .mdl-textfield__icon {
    color: rgba(0, 0, 0, 0.26) !important;
}

.mdl-textfield.is-invalid .mdl-textfield__icon {
    color: #de3226 !important;
}
/* End Textfield with menu */

.mdl-textfield--fullwidth.mdl-textfield--large {
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    width: 66%;
}

.mdl-textfield--header {
    -ms-transform: scale(1.25, 1.25);
    -webkit-transform: scale(1.25, 1.25);
    transform: scale(1.25, 1.25);
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    width: 75%;
}


.outermost-container {
    background-color: #EDECEC;
}

.is-disabled-color {
    color: rgba(0,0,0,.26);
}

.mdl-textfield--150 {
    max-width: 150px;
}

.mdl-textfield--160 {
    max-width: 160px;
}

.mdl-textfield--200 {
    max-width: 200px;
}

.mdl-textfield--240 {
    max-width: 240px;
}
.mdl-textfield--250 {
    max-width: 250px;
}

.mdl-textfield--300 {
    width: 300px;
    max-width: 300px;
}

.mdl-textfield--350 {
    width: 350px;
    max-width: 350px;
}

.mdl-textfield--400 {
    width: 400px;
    max-width: 400px;
}

.mdl-textfield--450 {
    width: 450px;
    max-width: 450px;
}

.mdl-textfield--numeric input {
    text-align: right;
}

.navigation-link {
    font-size: 1.3em;
    display: inline-block;
    margin-left: 8px;
    position: relative;
    top: -4px;
    vertical-align: middle;
}

.navigation-bottom-area {
    position: absolute;
    bottom: 48px;
    width: 100%;
}

.mdl-layout__header-row .mdl-textfield .mdl-textfield__input {
    border-bottom-color: rgba(255,255,255,.20);
}

.mdl-layout__header-row .mdl-textfield__label:after {
    background-color: white;
}

.for-export .is-disabled, .for-export .is-hidden, .for-export .is-export-hidden {
    display: none !important;
}

    .for-export .is-export-hidden span {
        display: none !important;
    }

.table-title {
    height: 64px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    position: relative;
}

    .table-title.actions .action-button {
        float: left;
        margin-left: 16px;
        margin-top: 5px;
    }

    .table-title h5 {
        margin: -4px 16px 0 16px;
    }

.main-tab-panel {
    margin: 0 -24px 0 -24px;
    background-color: #EDECEC;
    padding: 24px;
}

.details-tab-panel {
    margin: 0 0px 0 0px;
    background-color: #EDECEC;
    padding: 24px;
}

.message-container {
    font-size: 13pt;
    margin-top: 4px;
    margin-bottom: 16px;
    padding-left: 32px;
    position: relative;
}

    .message-container i {
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
    }

.info-message i {
    color: #ffbf3f;
}

.info-message-round {    
}
.info-message-round i {
    color: #DA1884;   
}

.warning-message i {
    color: #ffbf3f;
}

.vertical-spacer--small {
    height: 16px;
}

.vertical-spacer--large {
    height: 32px;
}

.mdl-card--fullwidth, .mdl-card--fullwidth div {
    width: 100%;
}
#recipe-report-labels .mdlext-menu__item:focus,
#recipe-report-countries .mdlext-menu__item:focus {
    outline-offset: inherit;
    outline-width: inherit;
    outline-color: inherit;
    background-color: inherit;
}
#recipe-report-labels .mdlext-menu__item.active,
#recipe-report-countries .mdlext-menu__item.active {
    background-color: #e0e0e0;
}
    #recipe-report-labels .mdlext-menu__item.active:before,
    #recipe-report-countries .mdlext-menu__item.active:before {
        content: "\2713";
        position: absolute;
        font-size: .75em;
        left: 8px;
        pointer-events: none;
    }
#recipe-report-countries .mdlext-menu__item:not(.active)[aria-selected=true]:before {
    content: '';
}
.search-options-menu label {
    display: inline;
}

.search-options-menu .mdl-menu__item {
    opacity: 1;
}

.search-options-menu .mdlext-menu__item[aria-selected=true]:before {
    content: "";
}

.search-options-menu .mdl-checkbox .mdl-checkbox__label {
    top: -3px;
}

.search-options-menu .mdlext-menu__item > :first-child {
    padding-left: 24px;
}

.search-options-menu .mdlext-menu__item[aria-selected=true] {
    background-color: inherit;
}

.search-options-menu .mdlext-menu__item:focus {
    outline-width: 0;
}

.search-options {
    padding-left: 8px;
    padding-right: 8px;
    min-width: 0;
}


.validation-message-icon {
    position: relative;
    top: 2px;
}

    .validation-message-icon i,
    .warning-message i {
        background: radial-gradient(ellipse at center, black 33%,transparent 34%);
        background-position-y: 2px;
    }

.validation-message-text {
    display: block;
    font-weight: normal;
}

.qtip.validation-message-tip,
.qtip.validation-error-tip {
    font-size: 1.3em;
    line-height: 1.3em;
    max-width: 400px;
}

.qtip-validation-message-tip {
    width: 400px;
}

.qtip.validation-error-tip {
    color: #d50000;
}

.mdl-textfield {
    margin-right: 20px;
}

.mdl-textfield__error {
    top: 19px;
    right: -20px;
    width: 16px;
    color: #d50000;
}

    .mdl-textfield__error i {
        font-size: 2em;
    }

.radio-indented {
    display: block;
    margin-left: 24px;
}

.radio-noindent {
    display: block;
}

.radio-secondary {
    margin-top: -16px;
}


/* Cross browser line clamping */
.line-clamp {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    position: relative;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 !important;
}

    .line-clamp:after {
        content: '...';
        text-align: right;
        bottom: 0;
        right: 0;
        width: 25%;
        display: block;
        position: absolute;
        height: calc(1em * 1.2);
    }

@supports (-webkit-line-clamp: 1) {
    .line-clamp:after {
        display: none !important;
    }
}

.line-clamp-1 {
    -webkit-line-clamp: 1;
    height: calc(1em * 1.2 * 1);
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
    height: calc(1em * 1.2 * 2);
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
    height: calc(1em * 1.2 * 3);
}

.line-clamp-4 {
    -webkit-line-clamp: 4;
    height: calc(1em * 1.2 * 4);
}

.line-clamp-5 {
    -webkit-line-clamp: 5;
    height: calc(1em * 1.2 * 5);
}
/* End required CSS. */

.recent-navigation-link {
    cursor: pointer;
}

.mdl-layout__drawer.navigation-drawer .mdl-navigation .mdl-navigation__link.recent-navigation-link {
    padding-left: 55px;
    padding-top: 1px;
    padding-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.recent-navigation-link span {
    margin-left: 4px;
}

.navigation-lower-section {
    margin-bottom: 16px;
}

.listview-style-switch-container {
    float: right;
    margin-top: -3px;
}

.listview-style-button {
    margin-top: 2px;
}

.centre-page-units-button {
    margin-top: 2px;
}

.icon-error {
    color: #D10000;
}

.icon-ok {
    color: green;
}

.icon-basket {
    color: #00A7B5;
    vertical-align: top;
    margin-left: 8px;
    margin-right: 5px;
}

.centred-container {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.mdl-layout--fixed-drawer > .mdl-layout__content.no-navigation {
    margin-left: 0;
    /*background: white;*/
}

.logo-container {
    text-align: center;
    margin-top: 15px;
}

.centred {
    text-align: center;
}

.page-button-container {
    margin-top: 32px;
}

    .page-button-container span {
        padding-left: 8px;
        padding-right: 8px;
    }

.main-content.no-navigation {
    overflow-y: hidden;
    padding-left: 16px;
    padding-right: 16px;
}

    .main-content.no-navigation .page-title {
        margin-top: 64px;
        margin-bottom: 32px;
    }

    .main-content.no-navigation .main-content-outer-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

        .main-content.no-navigation .main-content-outer-container .content {
            -webkit-flex: 1;
            -ms-flex: 1;
            -o-flex: 1;
            flex: 1; /* this is the key; consumes all available height */
            overflow: auto;
            width: 100%;
            margin: 0 auto;
        }

        .main-content.no-navigation .main-content-outer-container header {
            width: 100%;
            margin: 32px auto;
        }

            .main-content.no-navigation .main-content-outer-container header .page-title {
                margin-top: 48px;
                margin-bottom: 0;
            }

        .main-content.no-navigation .main-content-outer-container footer {
            width: 100%;
            margin: 32px auto 64px auto;
        }

@media only screen and (min-width : 768px) {
    .main-content.no-navigation .main-content-outer-container .content,
    .main-content.no-navigation .main-content-outer-container header,
    .main-content.no-navigation .main-content-outer-container footer {
        width: 700px;
    }

    .mdl-layout__drawer {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 280px;
        height: 100%;
        max-height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
        border-right: 1px solid rgb(224,224,224);
        background: rgb(250,250,250);
        transform: translateX(-280px);
        transform-style: preserve-3d;
        will-change: transform;
        transition-duration: 0.2s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-property: transform;
        color: rgb(66,66,66);
        overflow: visible;
        overflow-y: auto;
        z-index: 5;
    }

    .mdl-layout--fixed-drawer > .mdl-layout__content {
        margin-left: 0;
    }
}

@media only screen and (min-width : 1024px) {
    .main-content.no-navigation .main-content-outer-container .content,
    .main-content.no-navigation .main-content-outer-container header,
    .main-content.no-navigation .main-content-outer-container footer {
        width: 800px;
    }

    .mdl-layout__drawer {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 280px;
        height: 100%;
        max-height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
        border-right: 1px solid rgb(224,224,224);
        background: rgb(250,250,250);
        transform: translateX(-280px);
        transform-style: preserve-3d;
        will-change: transform;
        transition-duration: 0.2s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-property: transform;
        color: rgb(66,66,66);
        overflow: visible;
        overflow-y: auto;
        z-index: 5;
    }

    .mdl-layout--fixed-drawer > .mdl-layout__content {
        margin-left: 0;
    }
}

@media only screen and (min-width : 1025px) {
    .main-content.no-navigation .main-content-outer-container .content,
    .main-content.no-navigation .main-content-outer-container header,
    .main-content.no-navigation .main-content-outer-container footer {
        width: 1200px;
    }

    .mdl-layout__drawer {
        width: 280px;
    }

    .mdl-layout--fixed-drawer > .mdl-layout__content {
        margin-left: 280px;
    }

}

.main-content.no-navigation .whole-page-card .page-title {
    margin-top: 0;
}

.whole-page-card-content {
    margin: 32px;
}

.main-content.no-navigation .main-content-outer-container .content .whole-page-card {
    margin: auto;
    margin-bottom: 48px;
}

.failure-message-container {
    margin-bottom: 32px;
}

    .failure-message-container span {
        color: red;
        /*font-weight: bold;*/
        font-size: 1.2em;
    }

.has-page-banner .mdl-layout__drawer-button {
    /*top: 40px;*/
}

.page-banner {
    height: 40px;
    background: rgb(218, 24, 132);
    color: white;
    text-align: center;
    display: table;
    width: 100%;
    cursor: pointer;
    /*z-index: 99;*/   
}

    .page-banner div {
        display: table-cell;
        vertical-align: middle;
    }

    .page-banner div h4 {
        margin-left: 15%;
        margin-right: 10%;
    }

.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .page-banner {
    margin-left: 280px;
    width: calc(100% - 280px)
}

.card-wrapping-container {
    display: flex;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .card-wrapping-container .inline-card {
        display: block;
    }

.mdl-layout__header-row .mdl-button {
    color: white;
    top: 3px;
}


/* Custom colors */

.circle-icon-container {
    padding: 3px;
    -ms-border-radius: 12px;
    border-radius: 12px;
}

    .circle-icon-container .material-icons {
        font-size: 18px;
        color: white !important;
        position: relative;
        top: -2px;
    }

.recipe-centre-icon-container {
    background: #97d700;
}

.ingredient-centre-icon-container {
    background: #ffbf3f;
}

.help-and-support-icon {
    color: #00a7b5;
}

.chat-button-icon {
    color: #DA1884 !important;
}

.chat-button {
    cursor:pointer;
    display:none;
}

.chat-link {
    margin-left: 4px !important;
}

.card-info-icon {
    float: right;
    margin-top: 5px;
    color: rgb(218,24,132);
    z-index: 1;
    cursor: pointer;
    font-size: 22px;
}

.card-help-icon {
    color: #00a7b5;
    float: right;
    margin-top: 5px;
    z-index: 1;
    cursor: pointer;
    font-size: 22px;
}

.card-help-icon-report {
    color: #00a7b5;
    z-index: 1;
    cursor: pointer;
    font-size: 22px;
    vertical-align: text-bottom;
}

.card-copy-icon {
    float: right;
    margin-top: 25px;
    color: rgb(218,24,132);
    z-index: 1;
    cursor: pointer;
    font-size: 22px;
    vertical-align: text-bottom;
}

.card-help-icon-padding {
    padding-left: 10px;
}

.card-help-icon-link {
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 110px;
}

.card-help-icon-input {
    color: #00a7b5;
    z-index: 1;
    cursor: pointer;
    font-size: 14px;
    vertical-align: middle;
}

.card-title-with-icon-minwidth {
    min-width: 135px;
}

.general-info-icon {
    color: rgb(218,24,132);
    z-index: 1;
    cursor: pointer;
    font-size: 22px;
    vertical-align: text-top;
}

.mdl-tooltip {
    background: rgb(218, 24, 132) !important;
    z-index: 1;
}

.card-width {
    width: 100% !important;
}

.card-header {
    width: 100%;
}

.account-icon, .preferences-icon {
    color: #75787b;
}

.navigation-drawer-logo {
    width: 144px;
    margin-left: 55px;
    margin-top: 48px;
    margin-bottom: 32px;
}

.mdl-dialog {
    padding: 0;
    border-radius: 5px;
}

dialog .mdl-dialog__title {
    background: #ffbf3f;
    color: white;
    padding-bottom: 24px;
}

.mdl-card, .inline-card, .mdl-shadow--2dp {
    border-radius: 2px;
}

.mdl-dialog__title {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.mdl-dialog__actions {
    margin: 16px;
}

.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
    height: 3px;
    background-color: white;
}

.floating-title {
    color: #97999b;
}

.message-container {
    color: rgba(0,0,0, 0.87);
}

.mdl-dialog__content {
    color: rgba(0,0,0, 0.87);
}

.mdl-data-table th {
    color: black;
}


@media screen and (min-width: 1025px) {
    .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Custom Fonts */

.mdl-textfield__input, .mdl-layout .mdl-stepper {
    font-family: 'FFDINWebProRegular', 'Helvetica', 'Arial', sans-serif;
}

.mdl-card__title-text, .mdl-button, .mdl-menu__item, .mdl-layout__tab,
h5, h4, h3, .mdl-layout-title, .navigation-link, .message-container, .validation-message-title,
.qtip-titlebar, .bill-estimate-amount, .card-expiry, .card-number, .mdlext-menu__item,
.toast-title, .no-results-container {
    font-family: 'FFDINWebProMedium', 'Helvetica', 'Arial', sans-serif;
    letter-spacing: inherit;
    font-weight: normal !important;
}

p, dialog {
    font-size: 12pt;
}

.mdl-layout-title {
    font-size: 18pt;
}

.floating-title {
    font-family: 'DINEngschriftLT', 'Helvetica', 'Arial', sans-serif;
    text-transform: uppercase;
    font-size: 18pt;
    width: 300px;
}

.mdl-card {
    overflow: visible;
    z-index: 10;
}

.mdl-chip {
    line-height: 20pt;
}

.mdl-chip__text {
    font-size: 11pt;
}

.mdl-button {
    font-size: 13pt;
    line-height: 13pt;
    height: 35px;
    padding-bottom: 4px;
}

.mdl-button--fab {
    font-size: 24px;
    line-height: normal;
    height: 56px;
    padding-bottom: 0;
}

.mdlext-menu__item {
    font-size: 13pt !important;
    min-height: 36px !important;
}

.mdl-menu__item {
    font-size: 13pt;
}

.create-secondary-button {
    line-height: 19pt;
}

.mdlext-aria-expanded-more-less {
    height: 27px !important;
}

.mdlext-js-menu-button {
    line-height: 19pt;
    padding-bottom: 0;
}

.mdl-data-table, .mdl-data-table th {
    font-size: 12pt;
}

    .mdl-data-table th {
        font-weight: normal;
    }

h5 {
    font-size: 18pt;
    letter-spacing: inherit;
}

h3 {
    font-size: 24pt;
    letter-spacing: inherit;
}

.mdl-layout__tab {
    font-size: 13pt;
}

.mdl-button--icon .material-icons {
    transform: translate(-12px, -10px);
}

.mdl-card__menu .mdl-button--icon .material-icons {
    transform: translate(-12px, -11px);
}

.add-tag-button .material-icons,
#commit-new-team-member .material-icons,
ingredient-actions .material-icons {
    transform: translate(-12px, -12px);
}

.mdl-card__menu {
    right: 8px;
}

.mdl-navigation__link {
    font-size: 11pt;
}

    .mdl-navigation__link .material-icons {
        position: relative;
        top: -2px;
    }

.mdl-card__title-text {
    overflow: visible;
    line-height: 26px;
}

.mdl-card__supporting-text {
    padding-top: 8px;
    font-size: 12pt;
}

.recipe-report-view-actions button {
    top: -4px;
}

.save-button {
    top: 3px;
}

.RootTerm {
    font-weight: bold;
    text-transform: uppercase;
}

.mdl-button--icon, .ui-sortable-handle i, .recipe-ingredient-drag-handle i {
    color: #75787b;
}

    .mdl-button--icon .material-icons {
        line-height: 20px;
    }

.mdl-layout__header #toast-container > .toast {
    background-image: none !important;
}

    .toast-success {
        background-color: #aace49 !important;
    }

.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__header {
    margin-left: 280px;
    width: calc(100% - 280px);
}

.page-banner-extended {
    height: 40px;
    background: rgb(218, 24, 132);
    color: white;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    width: 100%;
    margin: 0;
    display: table;
    font-size: 17px;
    font-weight: 400;
    padding: .33em .5em;
    -webkit-font-smoothing: antialiased;
    position: fixed;
    box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
    z-index: 1000;
    margin-bottom: 10px;
}

.page-banner-extended.regular {
    height: 40px;
    font-size: 14px;
    padding: .2em .5em;
}

.page-banner-extended-content-wrapper {
    text-align: center;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

    .page-banner-extended-content-wrapper p {
        margin-top: 0;
        margin-bottom: 0;
    }

.page-banner-extended-text-wrapper {
    margin-right: .67em;
    display: inline-block;
    line-height: 1.3;
}

    .page-banner-extended-text-wrapper .page-banner-extended-headline-text {
        font-size: 1em;
        display: inline-block;
        vertical-align: middle;
    }

.page-banner-extended .page-banner-extended-cta {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 0;
    color: #ffffff;
    background-color: #22af73;
    border-color: #22af73
}

.page-banner-extended-cta-button {
    opacity: 1;
    color: #fff;
    display: block;
    cursor: pointer;
    line-height: 1.5;
    max-width: 22.5em;
    text-align: center;
    position: relative;
    border-radius: 3px;
    white-space: nowrap;
    margin: 1.75em auto 0;
    text-decoration: none;
    padding: 0;
    overflow: hidden;
}

    .page-banner-extended-cta-button .page-banner-extended-text-holder {
        border-radius: inherit;
        padding: 5px 15px;
    }

.page-banner-extended-close-wrapper {
    display: table-cell;
    width: 1.6em;
}

    .page-banner-extended-close-wrapper .icon-close {
        font-size: 14px;
        top: 15px;
        right: 25px;
        width: 15px;
        height: 15px;
        opacity: .3;
        color: #000;
        cursor: pointer;
        position: absolute;
        text-align: center;
        line-height: 15px;
        z-index: 1000;
        text-decoration: none;
    }

.page-banner-with-pointer {
    cursor: pointer;
}

.primary-color {
    color: rgb(218,24,132) !important;
}

.navbar-link-important {
    font-weight: 900 !important;
}

.navbar-new-button {
    cursor: pointer;
}

.create-ingredient-button-container2 {
    text-align: right;
    position: absolute;
    z-index: 99;
    display: none;
    margin-top: 70px;
    left: 20px;
}

    .create-ingredient-button-container2:hover {
        text-align: right;
        position: absolute;
        z-index: 99;
        display: none;
        margin-top: 70px;
        left: 20px;
    }

.create-ingredient-button-inner-container2 {
    position: relative;
}

.create-secondary-button2 {
    display: block;
    margin-bottom: 12px;
    margin-right: 0;
    padding-left: 8px;
    padding-top: 1px;
    background: rgb(220, 220, 220);
    width: 238px;
}

    .create-secondary-button2 i {
        margin-top: -2px;
    }

    .create-secondary-button2:hover {
        display: block;
        margin-bottom: 12px;
        margin-right: 0;
        padding-left: 8px;
        padding-top: 1px;
        background: #a4a4a4;
        width: 238px;
    }

.create-ingredient-button__text {
    vertical-align: middle;
    font-size: 12pt;
}

.mdl-tooltip-wide {
    max-width: 620px
}

@media screen and (max-width: 1024px) {
    .mdl-layout__tab-bar {
        padding: 0 0 0 60px;
    }
}

.phone-scroll {
}

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:3) {
    @media {
        .phone-scroll {
            max-height: 370px;
            overflow: auto;
        }
    }
}

@media not all and (min-resolution:.001dpcm) {
    @media {
        .phone-scroll {
            max-height: 370px;
            overflow: auto;
        }
    }
}

@media screen and (max-width: 1600px) {
    .new-plan-container {
        height: 480px;
        overflow-y: auto;
    }
}

@media screen and (max-width: 1300px) {
    .new-plan-container {
        height: 480px;
        overflow-y: auto;
    }
}

@media screen and (max-width: 1024px) {
    .new-plan-container {
        height: 380px;
        overflow-y: auto;
    }
    
    .main-tab-panel {
        overflow: scroll;
    } 
}

@media screen and (max-width: 768px) {
    .new-plan-container {
        height: 280px;
        overflow-y: auto;
    }
}