/*
 * Material customization
 * https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme
 */
:root {
    --mdc-theme-primary: #3f6ad8;
    --mdc-theme-secondary: #3f6ad8;
    --mdc-theme-secondary-light: #e6edfa;
    --dz-color-logo: #1F1F35;
    --dz-color-txt: #E72B4A;
    --dz-breadcrumb-bg: #f7f9fa;
    --dz-content-bg: #f0f4f6;
}

.fa-xl {
    font-size: 18px;
}

/*
.mdc-text-field:not(.mdc-text-field--invalid) .mdc-floating-label--float-above {
    color: var(--mdc-theme-primary);
}*/

.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
    color: var(--mdc-theme-primary);
}

.mdc-floating-label:after { /* remove Required asterix */
    content: '' !important;
    margin-left: 0 !important;
}

.mdc-form-field {
    margin-bottom: 15px;
}

.mdc-text-field, .text-field-container, .mdc-select {
    width: 100%;
}

.mdc-top-app-bar {
    background-color: white;
    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
    z-index: 7;
}

.mdc-drawer {
    z-index: 5;
    box-shadow: 7px 0 60px rgba(0,0,0,0.05);
    border:0;
}

.mdc-drawer-scrim {
    z-index: 4;
}

.mdc-drawer-app-content,
#page-content {
    flex: auto;
    overflow: auto;
    position: relative;
    height: 100%;
}

.mdc-top-app-bar__section {
    padding-left: 20px;
    padding-right: 20px;
}

ul.mdc-list {
    padding-top: 0;
    padding-bottom: 0;
}

.mdc-list-item > a {
    display: block;
    height: 48px;
    font-size: 0.9rem;
    line-height: 48px;
    width: 100%;
}
.mdc-tab {
    max-width: 200px;
}

.main-content {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    background-color: var(--dz-content-bg);
}

.app-bar {
    position: fixed;
    top: 0 !important;
}

#dz-account-btn {
    letter-spacing: normal;
}


.dz-button-blue {
    background-color: #16aaff !important;
}

.dz-button-grey {
    background-color: #6c757d !important;
}

@media screen and (max-width: 768px) {
    .main-content {
        position: fixed;
        width: 100%;
        left: 0;
    }
    .mdc-top-app-bar__section {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.main-content {
    opacity: 0;
    visibility: 0;
    /*transition: visibility 0s, opacity 0.05s linear;*/
}

.main-content.show {
    visibility: visible;
    opacity: 1;
}

.dz-circle-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: auto;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    border-width: 2px;
    border-color: var(--dz-color-txt) !important;
    background-color: var(--dz-color-txt) !important;
    color: white !important;
    font-size: 16px;
}

.dz-account-show .dz-circle-btn {
    width: 60px !important;
    height: 60px !important;
    font-size: 30px;
}

.dz-account-show h1 {
    margin-bottom: 5px;
}
.dz-account-show h2 {
    font-weight: normal;
    font-size: 12px;
    margin-top: 0;
    text-align: center;
    color:#7f909a;
}

.dz-account-show {

}

/*
 * Header
 */
.mdc-top-app-bar .digitiz-icon-logo,
.mdc-top-app-bar .digitiz-icon-full {
    font-size: 32px;
}

/*
 * Breadcrumb
 */
.breadcrumb > h1 {
    text-transform: uppercase;
    margin: 0 0 5px 0;
}

.breadcrumb {
    font-size:14px;
    color: #6c757d;
}

.breadcrumb > i {
    margin-left: 10px;
    margin-right: 10px;
}

/*
 * Menu
 */
.metismenu {
    margin: 0 15px 15px 15px;
}
.metismenu > li {
    color: #6c757d;
    margin-top: 15px;
}

.metismenu > li > a {
    display: block;
    position: relative;
    padding: 12px 15px 12px 50px;
    transition: all .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.metismenu > li.active > a {
    font-weight: 600;
}

.metismenu > li > a > i {
    position: absolute;
    top: 12px;
    left: 22px;
    color: lightgrey;
    font-size: 22px;
    transform: translateX(-50%);
}
.metismenu > li > a:hover > i {
    color:darkgrey;
}
.metismenu i span {
    font-family: Montserrat;
    font-size: 18px;
}

.metismenu > li > ul {
    margin: 4px 0 10px 20px;
    border-left: #e0f3ff 3px solid;
}

.metismenu > li > ul > li {
    padding: 5px;
    display: block;
}

.metismenu > li > ul > li > a {
    padding: 10px;
    display: block;
    transition: all .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.metismenu > li > a:hover,
.metismenu > li > ul > li > a:hover {
    background-color: #e0f3ff;
    border-radius: 5px;
    color: #3f6ad8;
}

.metismenu > li > ul > li.active > a {
    color: #3f6ad8;
}

.metismenu > li > ul > li > a:not(.enabled) {
    opacity: 0.25;
    pointer-events: none;
}

.metismenu .has-arrow::after {
    -webkit-transform: rotate(45deg) translate(0,-50%);
    transform: rotate(45deg) translate(0,-50%);
    color: lightgrey;
}

.metismenu > li.active > a > i,
.metismenu > li.active .has-arrow::after {
    color: darkgrey;
}

.metismenu > li > a > i.fad.fa-terminal {
    top: 8px;
}

.metismenu > li > a > i.fad.fa-terminal:after {
    color: #ff0762;
}

/*
 * Page title
 */
.container-page-title {
    width: 100%;
    background-color: var(--dz-breadcrumb-bg);
    padding: 30px;
    height: 120px;
}
.container-page-title h1 {
    color:#495057;
}

.container-page-title-icon {
    text-align: center;
    position: relative;
    margin: 0 30px 0 0;
    background: #fff;
    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
    border-radius: .25rem;
    width: 60px;
    height: 60px;
}

.container-page-title-icon:before {
    font-family: "Font Awesome 5 Pro";
    font-size: 33px;
    background: linear-gradient(#fccb90, #d57eeb);
    /* linear-gradient(120deg, #fccb90 0%, #d57eeb 100%) !important */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header-btn i:before {
    font-family: "Font Awesome 5 Pro";
    color: white;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.dz-button-icon > i {
    margin-right: 10px;
}

.container-page-title-button-xs {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1;
}

.container-page-title-button-xs > i {
    color: white;
    font-size:20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
    .container-page-title {
        padding: 0 15px 0 15px;
        height: 100px;
    }
    .dz-datatable-card {
        margin-bottom: 130px !important;
    }
}

/*
 * Page content
 */
.container-page-content {
    width: 100%;
    padding:30px;
}

.dz-block-msg {
    width: 300px;
    border-radius: 15px;
    font-size: 13px;
}

@media screen and (max-width: 768px) {
    .container-page-content {
        padding:15px;
        margin-bottom: 30px;
    }
}

/*
 * Popup
 */
.dz-close-popup {
    position: fixed;
    top: 20px;
    right: 20px;
    color: var(--mdc-theme-primary);
    font-size: 42px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    text-align: center;
}
.dz-close-popup > i {
    margin-left: 3px;
}

/*
 * Card
 */
.dz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03), 0 0.9375rem 1.40625rem rgba(4,9,20,0.03), 0 0.25rem 0.53125rem rgba(4,9,20,0.05), 0 0.125rem 0.1875rem rgba(4,9,20,0.03);
    border: 0;
    transition: all .2s;
    margin-bottom: 30px;
    padding:30px;
}

@media screen and (max-width: 768px) {
    .dz-card {
        padding:15px;
    }
}

/*
 * Form with tabs
 */
.dz-form-container.dz-form-reverse {
    display: flex;
    flex-direction: column-reverse;
}

.dz-form-container.dz-form-reverse > div {
    flex: 1;
}

.mdc-tab-bar {
    margin-bottom: 15px;
}

/*
 * Resetting
 */
.dz-resetting-check-email p {
    font-size: 12px;
    margin-bottom: 30px;
}

#pwdchar, #pwdupper, #pwdlower, #pwdnumber, #pwdspecial {
    color:var(--dz-color-txt);
    font-weight: bold;
}

#pwdchar.valid, #pwdupper.valid, #pwdlower.valid, #pwdnumber.valid, #pwdspecial.valid {
    color: #4cb050;
}

/*
 * Icons
 */
#header-btn-new i:before { content: '\f067'; }
#header-btn-back i:before { content: '\f053'; }
body.catalogue.allergen .container-page-title-icon:before { content: '\f461'; }
body.catalogue.label .container-page-title-icon:before { content: '\f02b'; }
body.configuration.lang .container-page-title-icon:before { content: '\f1ab'; }
body.catalogue.nutrition_fact .container-page-title-icon:before { content: '\f554'; }
body.catalogue.option_product .container-page-title-icon:before,
body.catalogue.option_product_item .container-page-title-icon:before { content: '\f249'; }
body.catalogue.sticker .container-page-title-icon:before { content: '\f335'; }
body.catalogue.workstation .container-page-title-icon:before { content: '\f6f5'; }
body.catalogue.tax .container-page-title-icon:before { content: '\f541'; }
body.catalogue.product .container-page-title-icon:before { content: '\f49d'; }