html,
body {
    height: 100%;
}
:root {
    --mud-content-height: calc(100vh - var(--mud-appbar-height) - 49px);
    --cashdeks-main-bg-color : #2f4364;
    --mud-palette-text-primary: rgba(0,0,0,1)!important;
    --mud-palette-table-lines: rgba(0,0,0,1)!important;
}

body {
    font-family: 'Montserrat';
}

.mudLayout {
    height: 100vh;
}

/*Navbar Design codes*/
.logo {
    width: 150px;
    height: auto;
}

.cashdesk-account-popup {
    border-radius: 15px;
}

.cashdesk-account-popup-main-content {
    min-width: 300px;
    position: relative;
    top: -8px;
}

.cashdesk-account-popup-header, 
.cashdesk-notification-header, 
.cashdesk-notification-popover-header {
    background-color: #2f4465;
    color: white;
}

.cashdesk-account-popup-select {
    margin-right: 20px;
    margin-left: 20px;
}

.cashdesk-account-popup-select-items {
    z-index: 1500 !important;
}

.mud-tooltip {
    z-index: 1500 !important;
}

/*Card and Expansion Panel Css*/
.cashdesk-card, .cashdesk-expansion-panel {
    margin-bottom: 20px;
}

    .cashdesk-card-header, .cashdesk-expansion-panel .mud-expand-panel-header {
        background-color: var(--cashdeks-main-bg-color);
        height: 30px;
        font-weight: bolder;
        color: white;
    }

    .cashdesk-card-header.mud-card-header {
        padding: 15px;
    }

    .cashdesk-expansion-panel .mud-expand-panel-header {
        min-height: 0;
        padding: 15px 24px;
    }

.cashdesk-card-content {
    padding: 15px;
}

.cashdesk-expansion-panel .mud-collapse-container {
    max-height: calc(100% - 30px);
    overflow: auto;
}

.cashdesk-expansion-panel .mud-collapse-container .mud-expand-panel-content {
    padding: 15px;
}

.cashdesk-card .cashdesk-card-content, .cashdesk-expansion-panel .mud-collapse-container {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
/*Dialog*/

.cashdesk-dialog .mud-dialog-title {
    background-color: #2f4465;
    color: white;
    min-height: 60px;    
}
.cashdesk-dialog-pa-3 .mud-dialog-title
{
    padding: 12px;
}
    .cashdesk-dialog .mud-dialog-title button {
        color: red;
    }
.cashdesk-dialog-rounded-header {
    border-radius: 10px;
}
/* BEGIN -> Flip Card */
.flip-card-container {
    display: grid;
    perspective: 700px;
}

.flip-card {
    display: grid;
    grid-template: 1fr / 1fr;
    grid-template-areas: "frontAndBack";
    transform-style: preserve-3d;
    transition: all 0.7s ease;
}

.flip-card-front {
    grid-area: frontAndBack;
}

.flip-card-back {
    display: none;
    grid-area: frontAndBack;
    transform: rotateY(-180deg);
}

.card-flipped {
    transform: rotateY(180deg);
}

    .card-flipped .flip-card-front {
        display: none;
    }

    .card-flipped .flip-card-back {
        display: block;
    }
/* END -> Flip Card */

/* BEGIN -> Zigzag bottom */
.zigzag {
    height: calc(100% - 16px);
}

.zigzag-inner:after {
    background: linear-gradient(-45deg, transparent 22px, var(--mud-palette-surface) 0px), linear-gradient(45deg, transparent 22px, var(--mud-palette-surface) 0px);
    background-repeat: repeat-x;
    background-size: 32px 20px;
    content: " ";
    display: block;
    position: absolute;
    bottom: -15px;
    width: 100%;
    height: 20px;
    margin-left: -12px;
}
/* END -> Zigzag bottom */
/* BEGIN -> Table */

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell,
.mud-table-root .mud-table-head .mud-table-cell
/*.mud-table-sticky-footer * .mud-table-root .mud-table-foot * .mud-table-cell => Only headers should be blue with white txt */ {
    background-color: #2f4465;
    color: white;
    border-bottom-color:transparent!important;
}

.TableHeaderNumber {
    text-align: right !important;
}

.TableCellNumber {
    White-space: nowrap;
    text-align: right !important;
}

.mud-table-root .mud-table-head .mud-table-row > .mud-table-cell:first-child {
    border-top-left-radius: 4px;
}

.mud-table-root .mud-table-head .mud-table-row > .mud-table-cell:last-child {
    border-top-right-radius: 4px;
}

.mud-table-foot .mud-table-row .mud-table-cell {
    font-weight: bold;
}
/* END -> Table */

/* BEGIN -> Mud Main Content Padding */
.mud-main-content {
    padding-top: 10px;
}

.mud-container.mud-container-maxwidth-false {
    padding-left: 0;
    padding-right: 0;
}
/* END -> Mud Main Content Padding */

/* BEGIN -> Open Time Rows */

.hour {
    border-right: solid #D9D9D9 1px;
    height: 1rem;
}
.times {
    display: flex;
    font-size: .73vw;
}

.time-item {
    margin-left: 1.2%;
    width: calc(100%/25);
}

.times-row {
    width: 100%;
    height: 1rem;
    border-radius: 0.3rem;
    margin-top: 5px;
    padding: 0;
    display: flex;
}

.times-row-title {
    font-size: 12px;
    font-weight: bold;
}

.top-time-line {
    width: 100%;
    /*background-color: #28A745;*/
}
.time-margin-left {
    margin-left: -2.5%;
}
.bottom-time-line {
    width: 100%;
    height: .5rem;
    /*background-color: #007BFF;*/
}
@media(max-width : 1441px) {
    .times {
        font-size: .75vw;
    }

    .time-item {
        margin-left: .5%;
    }

    .time-margin-left {
        margin-left: -4%;
    }

    .times-row-title {
        font-size: 9px;
    }
}

@media(max-width : 1900) {
    .times {
        font-size: .73vw;
    }
}

@media(max-width: 1650) {
    .times-row-title {
        font-size: 10px;
    }
}
/* END -> Open Time Rows */

/* BEGIN -> Spacing */
.max-height-85vh {
    max-height: 85vh;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

:root {
    --app-bar-height: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8);
    --container-bg-color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 600px) {
    :root {
        --app-bar-height: var(--mud-appbar-height);
    }
}
/* END -> Spacing */

/* BEGIN -> Colors */
.container-bg-color {
    background-color: var(--container-bg-color) !important;
}

.transparent-bg {
    background-color: transparent !important;
}
/* END -> Colors */

/* BEGIN -> Loading Container */
.loading-container {
    background-color: var(--container-bg-color);
    width: 450px;
    height: 500px;
    padding: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.progress-circular {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-360 .75s linear infinite;
    color: #00c853;
}

@keyframes spinner-360 {
    to {
        transform: rotate(360deg);
    }
}
/* END -> Loading Container */
/* END -> Spacing */
/* BEGIN -> Notification */
.cashdesk-notification-main-content {
    width: 375px;
    position: relative;
    top: -8px;
}
.cashdesk-notification-item {
    font-size: 12px !important;
    width: 335px !important;
}

    .cashdesk-notification-item .mud-expand-panel-header p,
    .cashdesk-notification-item .mud-expand-panel-header .mud-icon-root,
    .cashdesk-notification-item .mud-expand-panel-content p {
        font-size: 12px !important;
    }

    .cashdesk-notification-item .mud-expand-panel-header {
        padding: 0px 16px !important;
    }

.cashdesk-notification-popover {
    z-index: 2000;
    padding: 15px;
    width: 250px;
    overflow: auto;
    top: 185px!important;
}
    .cashdesk-notification-popover-item {
        cursor: pointer;
        border: 1px solid grey;
        border-radius: 5px;
        width: 200px;
        padding: 5px;
    }
/* END -> Notification */

.nowrap {
    white-space: nowrap;
}

button.mud-button-root {
    white-space: nowrap;
}

/* BEGIN -> Backgrounds */
.bg-transparent {
    background-color: transparent;
}
.bg-white {
    background-color: white;
}

.bg-cashdesk-dark-blue {
    background-color: #2F4465 !important;
}
/* END -> Backgrounds*/

@font-face {
    font-family: text-security-disc;
    src: url("https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff");
}

.font-text-security-disc-input input {
    font-family: text-security-disc;
    -webkit-text-security: disc;
}
/* END -> Backgrounds*/

/* BEGIN -> Cursor */
.cursor-pointer {
    cursor: pointer;
}
/* END -> Cursor */

/* BEGIN -> Review Stars */
.stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: 25px;
    font-family: Times;
    line-height: 1;
}
.stars::before {
    content: "★★★★★";
    background: linear-gradient(90deg, #fc0 var(--percent), #000 var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* END -> Review Stars */

/* BEGIN -> ul */
ul.initial {
    list-style: initial !important;
}

ul.initial li {
    text-align: initial !important;
}
/* END -> ul */

.mud-list .flex-column .mud-tooltip-inline {
    width: 100%;
}

/* BEGIN -> Animations */

.bounce {
    animation-duration: 0.5s;
    animation-name: bounce;
    animation-fill-mode: forwards;
}

.flash {
    animation-duration: 0.5s;
    animation-name: flash;
    animation-fill-mode: forwards;
}

.pulse {
    animation-duration: 0.5s;
    animation-name: pulse;
    animation-fill-mode: forwards;
}

.rubberBand {
    animation-duration: 0.5s;
    animation-name: rubberBand;
    animation-fill-mode: forwards;
}

.shakeX {
    animation-duration: 0.5s;
    animation-name: shakeX;
    animation-fill-mode: forwards;
}

.shakeY {
    animation-duration: 0.5s;
    animation-name: shakeY;
    animation-fill-mode: forwards;
}

.headShake {
    animation-duration: 0.5s;
    animation-name: headShake;
    animation-fill-mode: forwards;
}

.swing {
    animation-duration: 0.5s;
    animation-name: swing;
    animation-fill-mode: forwards;
}

.tada {
    animation-duration: 0.5s;
    animation-name: tada;
    animation-fill-mode: forwards;
}

.wobble {
    animation-duration: 0.5s;
    animation-name: wobble;
    animation-fill-mode: forwards;
}

.jello {
    animation-duration: 0.5s;
    animation-name: jello;
    animation-fill-mode: forwards;
}

.heartBeat {
    animation-duration: 0.5s;
    animation-name: heartBeat;
    animation-fill-mode: forwards;
}

.backInDown {
    animation-duration: 0.5s;
    animation-name: backInDown;
    animation-fill-mode: forwards;
}

.backInLeft {
    animation-duration: 0.5s;
    animation-name: backInLeft;
    animation-fill-mode: forwards;
}

.backInRight {
    animation-duration: 0.5s;
    animation-name: backInRight;
    animation-fill-mode: forwards;
}

.backInUp {
    animation-duration: 0.5s;
    animation-name: backInUp;
    animation-fill-mode: forwards;
}

.backOutDown {
    animation-duration: 0.5s;
    animation-name: backOutDown;
    animation-fill-mode: forwards;
}

.backOutLeft {
    animation-duration: 0.5s;
    animation-name: backOutLeft;
    animation-fill-mode: forwards;
}

.backOutRight {
    animation-duration: 0.5s;
    animation-name: backOutRight;
    animation-fill-mode: forwards;
}

.backOutUp {
    animation-duration: 0.5s;
    animation-name: backOutUp;
    animation-fill-mode: forwards;
}

.bounceIn {
    animation-duration: 0.5s;
    animation-name: bounceIn;
    animation-fill-mode: forwards;
}

.bounceInDown {
    animation-duration: 0.5s;
    animation-name: bounceInDown;
    animation-fill-mode: forwards;
}

.bounceInLeft {
    animation-duration: 0.5s;
    animation-name: bounceInLeft;
    animation-fill-mode: forwards;
}

.bounceInRight {
    animation-duration: 0.5s;
    animation-name: bounceInRight;
    animation-fill-mode: forwards;
}

.bounceInUp {
    animation-duration: 0.5s;
    animation-name: bounceInUp;
    animation-fill-mode: forwards;
}

.bounceOut {
    animation-duration: 0.5s;
    animation-name: bounceOut;
    animation-fill-mode: forwards;
}

.bounceOutDown {
    animation-duration: 0.5s;
    animation-name: bounceOutDown;
    animation-fill-mode: forwards;
}

.bounceOutLeft {
    animation-duration: 0.5s;
    animation-name: bounceOutLeft;
    animation-fill-mode: forwards;
}

.bounceOutRight {
    animation-duration: 0.5s;
    animation-name: bounceOutRight;
    animation-fill-mode: forwards;
}

.bounceOutUp {
    animation-duration: 0.5s;
    animation-name: bounceOutUp;
    animation-fill-mode: forwards;
}

.fadeIn {
    animation-duration: 0.5s;
    animation-name: fadeIn;
    animation-fill-mode: forwards;
}

.fadeInDown {
    animation-duration: 0.5s;
    animation-name: fadeInDown;
    animation-fill-mode: forwards;
}

.fadeInDownBig {
    animation-duration: 0.5s;
    animation-name: fadeInDownBig;
    animation-fill-mode: forwards;
}

.fadeInLeft {
    animation-duration: 0.5s;
    animation-name: fadeInLeft;
    animation-fill-mode: forwards;
}

.fadeInLeftBig {
    animation-duration: 0.5s;
    animation-name: fadeInLeftBig;
    animation-fill-mode: forwards;
}

.fadeInRight {
    animation-duration: 0.5s;
    animation-name: fadeInRight;
    animation-fill-mode: forwards;
}

.fadeInRightBig {
    animation-duration: 0.5s;
    animation-name: fadeInRightBig;
    animation-fill-mode: forwards;
}

.fadeInUp {
    animation-duration: 0.5s;
    animation-name: fadeInUp;
    animation-fill-mode: forwards;
}

.fadeInUpBig {
    animation-duration: 0.5s;
    animation-name: fadeInUpBig;
    animation-fill-mode: forwards;
}

.fadeInTopLeft {
    animation-duration: 0.5s;
    animation-name: fadeInTopLeft;
    animation-fill-mode: forwards;
}

.fadeInTopRight {
    animation-duration: 0.5s;
    animation-name: fadeInTopRight;
    animation-fill-mode: forwards;
}

.fadeInBottomLeft {
    animation-duration: 0.5s;
    animation-name: fadeInBottomLeft;
    animation-fill-mode: forwards;
}

.fadeInBottomRight {
    animation-duration: 0.5s;
    animation-name: fadeInBottomRight;
    animation-fill-mode: forwards;
}

.fadeOut {
    animation-duration: 0.5s;
    animation-name: fadeOut;
    animation-fill-mode: forwards;
}

.fadeOutDown {
    animation-duration: 0.5s;
    animation-name: fadeOutDown;
    animation-fill-mode: forwards;
}

.fadeOutDownBig {
    animation-duration: 0.5s;
    animation-name: fadeOutDownBig;
    animation-fill-mode: forwards;
}

.fadeOutLeft {
    animation-duration: 0.5s;
    animation-name: fadeOutLeft;
    animation-fill-mode: forwards;
}

.fadeOutLeftBig {
    animation-duration: 0.5s;
    animation-name: fadeOutLeftBig;
    animation-fill-mode: forwards;
}

.fadeOutRight {
    animation-duration: 0.5s;
    animation-name: fadeOutRight;
    animation-fill-mode: forwards;
}

.fadeOutRightBig {
    animation-duration: 0.5s;
    animation-name: fadeOutRightBig;
    animation-fill-mode: forwards;
}

.fadeOutUp {
    animation-duration: 0.5s;
    animation-name: fadeOutUp;
    animation-fill-mode: forwards;
}

.fadeOutUpBig {
    animation-duration: 0.5s;
    animation-name: fadeOutUpBig;
    animation-fill-mode: forwards;
}

.fadeOutTopLeft {
    animation-duration: 0.5s;
    animation-name: fadeOutTopLeft;
    animation-fill-mode: forwards;
}

.fadeOutTopRight {
    animation-duration: 0.5s;
    animation-name: fadeOutTopRight;
    animation-fill-mode: forwards;
}

.fadeOutBottomLeft {
    animation-duration: 0.5s;
    animation-name: fadeOutBottomLeft;
    animation-fill-mode: forwards;
}

.fadeOutBottomRight {
    animation-duration: 0.5s;
    animation-name: fadeOutBottomRight;
    animation-fill-mode: forwards;
}

.flip {
    animation-duration: 0.5s;
    animation-name: flip;
    animation-fill-mode: forwards;
}

.flipInX {
    animation-duration: 0.5s;
    animation-name: flipInX;
    animation-fill-mode: forwards;
}

.flipInY {
    animation-duration: 0.5s;
    animation-name: flipInY;
    animation-fill-mode: forwards;
}

.flipOutX {
    animation-duration: 0.5s;
    animation-name: flipOutX;
    animation-fill-mode: forwards;
}

.flipOutY {
    animation-duration: 0.5s;
    animation-name: flipOutY;
    animation-fill-mode: forwards;
}

.lightSpeedInRight {
    animation-duration: 0.5s;
    animation-name: lightSpeedInRight;
    animation-fill-mode: forwards;
}

.lightSpeedInLeft {
    animation-duration: 0.5s;
    animation-name: lightSpeedInLeft;
    animation-fill-mode: forwards;
}

.lightSpeedOutRight {
    animation-duration: 0.5s;
    animation-name: lightSpeedOutRight;
    animation-fill-mode: forwards;
}

.lightSpeedOutLeft {
    animation-duration: 0.5s;
    animation-name: lightSpeedOutLeft;
    animation-fill-mode: forwards;
}

.rotateIn {
    animation-duration: 0.5s;
    animation-name: rotateIn;
    animation-fill-mode: forwards;
}

.rotateInDownLeft {
    animation-duration: 0.5s;
    animation-name: rotateInDownLeft;
    animation-fill-mode: forwards;
}

.rotateInDownRight {
    animation-duration: 0.5s;
    animation-name: rotateInDownRight;
    animation-fill-mode: forwards;
}

.rotateInUpLeft {
    animation-duration: 0.5s;
    animation-name: rotateInUpLeft;
    animation-fill-mode: forwards;
}

.rotateInUpRight {
    animation-duration: 0.5s;
    animation-name: rotateInUpRight;
    animation-fill-mode: forwards;
}

.rotateOut {
    animation-duration: 0.5s;
    animation-name: rotateOut;
    animation-fill-mode: forwards;
}

.rotateOutDownLeft {
    animation-duration: 0.5s;
    animation-name: rotateOutDownLeft;
    animation-fill-mode: forwards;
}

.rotateOutDownRight {
    animation-duration: 0.5s;
    animation-name: rotateOutDownRight;
    animation-fill-mode: forwards;
}

.rotateOutUpLeft {
    animation-duration: 0.5s;
    animation-name: rotateOutUpLeft;
    animation-fill-mode: forwards;
}

.rotateOutUpRight {
    animation-duration: 0.5s;
    animation-name: rotateOutUpRight;
    animation-fill-mode: forwards;
}

.hinge {
    animation-duration: 0.5s;
    animation-name: hinge;
    animation-fill-mode: forwards;
}

.jackInTheBox {
    animation-duration: 0.5s;
    animation-name: jackInTheBox;
    animation-fill-mode: forwards;
}

.rollIn {
    animation-duration: 0.5s;
    animation-name: rollIn;
    animation-fill-mode: forwards;
}

.rollOut {
    animation-duration: 0.5s;
    animation-name: rollOut;
    animation-fill-mode: forwards;
}

.zoomIn {
    animation-duration: 0.5s;
    animation-name: zoomIn;
    animation-fill-mode: forwards;
}

.zoomInDown {
    animation-duration: 0.5s;
    animation-name: zoomInDown;
    animation-fill-mode: forwards;
}

.zoomInLeft {
    animation-duration: 0.5s;
    animation-name: zoomInLeft;
    animation-fill-mode: forwards;
}

.zoomInRight {
    animation-duration: 0.5s;
    animation-name: zoomInRight;
    animation-fill-mode: forwards;
}

.zoomInUp {
    animation-duration: 0.5s;
    animation-name: zoomInUp;
    animation-fill-mode: forwards;
}

.zoomOut {
    animation-duration: 0.5s;
    animation-name: zoomOut;
    animation-fill-mode: forwards;
}

.zoomOutDown {
    animation-duration: 0.5s;
    animation-name: zoomOutDown;
    animation-fill-mode: forwards;
}

.zoomOutLeft {
    animation-duration: 0.5s;
    animation-name: zoomOutLeft;
    animation-fill-mode: forwards;
}

.zoomOutRight {
    animation-duration: 0.5s;
    animation-name: zoomOutRight;
    animation-fill-mode: forwards;
}

.zoomOutUp {
    animation-duration: 0.5s;
    animation-name: zoomOutUp;
    animation-fill-mode: forwards;
}

.slideInDown {
    animation-duration: 0.5s;
    animation-name: slideInDown;
    animation-fill-mode: forwards;
}

.slideInLeft {
    animation-duration: 0.5s;
    animation-name: slideInLeft;
    animation-fill-mode: forwards;
}

.slideInRight {
    animation-duration: 0.5s;
    animation-name: slideInRight;
    animation-fill-mode: forwards;
}

.slideInUp {
    animation-duration: 0.5s;
    animation-name: slideInUp;
    animation-fill-mode: forwards;
}

.slideOutDown {
    animation-duration: 0.5s;
    animation-name: slideOutDown;
    animation-fill-mode: forwards;
}

.slideOutLeft {
    animation-duration: 0.5s;
    animation-name: slideOutLeft;
    animation-fill-mode: forwards;
}

.slideOutRight {
    animation-duration: 0.5s;
    animation-name: slideOutRight;
    animation-fill-mode: forwards;
}

.slideOutUp {
    animation-duration: 0.5s;
    animation-name: slideOutUp;
    animation-fill-mode: forwards;
}
.up-direction {
    width: 0px;
    height: 0px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #74bddc;
    margin-left: 2px;
    margin-bottom: 30px;
}

/* END -> Animations */



/* BEGIN -> order detail */
.cashdesk-order-detail-dialog {
    background: transparent;
    box-shadow: none;
}

.cashdesk-order-detail-dialog-main-content {
    background-color: transparent !important;
    overflow: hidden;
    height: var(--mud-content-height);
}

.cashdesk-order-detail-dialog-content {
    background: white; 
    height: 100%;
    border-radius: 10px;
}

.cashdesk-order-detail-dialog-header {
    height: 120px;
}

.cashdesk-order-detail-dialog-body {
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 170px)
}

.cashdesk-order-detail-dialog-footer {
    height: 80px;
}
.cashdesk-order-detail-dialog-content-grid {
    height:100%;
}
.cashdesk-order-detail-dialog-content-grid:has(.cashdesk-order-detail-dialog-footer-zigzag) {
    height: calc(100% - 10px);
}

.cashdesk-order-detail-dialog-content-grid:has(.cashdesk-order-detail-dialog-footer-zigzag) .cashdesk-order-detail-dialog-footer {
    height: 60px;
}
.cashdesk-order-detail-dialog-footer-zigzag::after {
    background: linear-gradient(45deg, transparent 20px, var(--mud-palette-surface) 0), linear-gradient(-45deg, transparent 20px, var(--mud-palette-surface) 0);
    background-repeat: repeat-x;
    background-size: 18px 30px;
    content: '';
    display: block;
    position: absolute;
    bottom: -11px;
    left: 0px;
    width: 101.7%;
    height: 20px;
    right: 0px;
}
.cashdesk-time-line-header 
{
    height: 50px!important;
}
    .cashdesk-time-line-content 
    {
        height: 50%;
        overflow-x: hidden!important;
        overflow-y: auto!important;
    }
    .cashdesk-order-detail-dialog-content-grid:has(.cashdesk-order-detail-time-line-dialog-body) .cashdesk-order-detail-dialog-body
    {        
        height: calc(100% - 55px)!important;
        overflow: hidden;
    }
    .cashdesk-order-detail-dialog-content-grid:has(.cashdesk-order-detail-time-line-dialog-body) .mud-table 
    {
        height: 35%;
        overflow-y: scroll!important;
    }
@media screen and (max-width: 1280px) {
    .cashdesk-order-detail-dialog-main-content {
        overflow-y:scroll;
        overflow-x:hidden;
    }
    .cashdesk-order-detail-dialog-content-grid {
        height: auto;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .cashdesk-order-detail-dialog-header,
    .cashdesk-order-detail-dialog-body,
    .cashdesk-order-detail-dialog-footer,
    .cashdesk-order-detail-dialog-content-grid:has(.cashdesk-order-detail-dialog-footer-zigzag) {
        height: auto!important;
    }

    .cashdesk-order-detail-dialog-body {
        overflow:hidden;
    }
    
    .cashdesk-order-detail-dialog-content-grid:has(.cashdesk-order-detail-time-line-dialog-body)
    {
        height: 100%!important;
    }
    
    .cashdesk-order-detail-dialog-content-grid:has(.cashdesk-order-detail-time-line-dialog-body) .cashdesk-order-detail-dialog-body 
    {
        height: calc(100% - 55px)!important;
    }
    
    .cashdesk-order-detail-dialog-content-grid:has(.cashdesk-order-detail-time-line-dialog-body) .mud-table 
    {
        height: 35%;
        overflow-y: scroll!important;
    }
}
.cashdesk-expansion-panel-border {
    border: .5px solid lightgrey !important;
    border-radius: 5px !important;
}
.cashdesk-expansion-panel-lightgrey {
    border: .5px solid lightgrey !important;
    border-radius: 5px !important;
}

    .cashdesk-expansion-panel-lightgrey .mud-expand-panel-header {
        padding: 10px !important;
    }

    .cashdesk-expansion-panel-lightgrey .mud-expand-panel-content {
        padding: 0 15px 5px !important;
    }

.order-detail-process-row-button .mud-icon-size-small {
    font-size: .8rem;
}

.order-detail-process-row-button {
    padding: 4px 0px;
    border-radius: 0;
    right: -5px;
}

    .order-detail-process-row-button:before, .order-detail-process-row-button:after {
        content: '';
        height: 0;
        width: 0;
        display: block;
        z-index: 1;
        position: absolute;
        top: 0;
        border-style: solid;
        border-width: 14px 0 14px 8px;
    }

    .order-detail-process-row-button:before {
        right: -0.5rem;
    }

    .order-detail-process-row-button:after {
        left: -0.5rem;
    }

.order-detail-process-row-button-bg-error:before {
    border-color: transparent transparent transparent var(--mud-palette-error);
}

.order-detail-process-row-button-bg-error:after {
    border-color: var(--mud-palette-error) var(--mud-palette-error) var(--mud-palette-error) transparent;
}

.order-detail-process-row-button-bg-default:before {
    border-color: transparent transparent transparent var(--mud-palette-action-default-hover);
}

.order-detail-process-row-button-bg-default:after {
    border-color: var(--mud-palette-action-default-hover) var(--mud-palette-action-default-hover) var(--mud-palette-action-default-hover) transparent;
}

.order-detail-process-row-button-bg-success:before {
    border-color: transparent transparent transparent var(--mud-palette-success);
}

.order-detail-process-row-button-bg-success:after {
    border-color: var(--mud-palette-success) var(--mud-palette-success) var(--mud-palette-success) transparent;
}

.order-detail-process-row-button-bg-info:before {
    border-color: transparent transparent transparent var(--mud-palette-info);
}

.order-detail-process-row-button-bg-info:after {
    border-color: var(--mud-palette-info) var(--mud-palette-info) var(--mud-palette-info) transparent;
}

.order-detail-process-row-button-bg-error:hover:before {
    border-color: transparent transparent transparent var(--mud-palette-error-darken);
}

.order-detail-process-row-button-bg-error:hover:after {
    border-color: var(--mud-palette-error-darken) var(--mud-palette-error-darken) var(--mud-palette-error-darken) transparent;
}

.order-detail-process-row-button-bg-default:hover:before {
    border-color: transparent transparent transparent var(--mud-palette-action-disabled-background);
}

.order-detail-process-row-button-bg-default:hover:after {
    border-color: var(--mud-palette-action-disabled-background) var(--mud-palette-action-disabled-background) var(--mud-palette-action-disabled-background) transparent;
}

.order-detail-process-row-button-bg-success:hover:before {
    border-color: transparent transparent transparent var(--mud-palette-success-darken);
}

.order-detail-process-row-button-bg-success:hover:after {
    border-color: var(--mud-palette-success-darken) var(--mud-palette-success-darken) var(--mud-palette-success-darken) transparent;
}

.order-detail-process-row-button-bg-info:hover:before {
    border-color: transparent transparent transparent var(--mud-palette-info-darken);
}

.order-detail-process-row-button-bg-info:hover:after {
    border-color: var(--mud-palette-info-darken) var(--mud-palette-info-darken) var(--mud-palette-info-darken) transparent;
}
/* END -> order detail */
/* BEGIN -> text */


.text-white {
    color: white;
}
/* END -> text */
/* BEGIN -> menu */

.menu-button-row {
    position: relative;
    height: 95px;
    display: flex;
}
        .menu-button-row span i{
            color:lightgray;
        }

    .menu-button-row .mud-icon-button {
        border-radius: 0;
        top: 0px;
        position: relative;
        height: auto;
    }
    .menu-button-row .left-navigation-button {
        background: linear-gradient(to right, white, rgba(91, 90, 90, 0.1));
    }
    .menu-button-row .right-navigation-button {
        background: linear-gradient(to left, white, rgba(91, 90, 90, 0.1));
    }
    .menu-button-row .mud-icon-button:hover {
        background-color:transparent;
        color:black;
    }
    .menu-button-row ul {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap;
        display: block;
        list-style: none;
    }


    .menu-button-row li {
        width: 150px;
        height: 75px;
        display: inline-block;
        text-align: center;
        padding:5px;
    }

    .menu-button-row li button {
        height: 50px;
    }
.menu-product-group-button .mud-list-item-selected .mud-list-item-text {
    background: rgb(var(--selected-background-color));
    color: rgb(var(--selected-text-color));
}

.menu-product-group-button .mud-list-item-selected .mud-icon-root {
    color: rgba(var(--selected-background-color), 0.9);
}

.menu-product-group-button .mud-list-item-unselected .mud-list-item-text {
    background: rgba(var(--selected-background-color), 0.7);
    color: rgb(var(--selected-text-color));
}
.menu-product-group-button .mud-list-item-unselected .mud-icon-root {
    color: rgba(var(--selected-background-color), 0.7);
}
.menu-product-group-button .mud-list-item-unselected .mud-icon-root,
.menu-product-group-button .mud-list-item-selected .mud-icon-root {
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 21px;
}

.menu-product-group-button .mud-list-item-text {
    padding: 10.5px !important;
    width: 100%;
}

.menu-product-group-button .mud-list-item-unselected, .menu-product-group-button .mud-list-item-selected {
    padding: 0 22px 0 0!important;
}

    .menu-product-group-button .mud-list-item-unselected .mud-typography, .menu-product-group-button .mud-list-item-selected .mud-typography {
        line-height: 1;
    }


.menu-product-button {
    width: 100%;
    height: 100%;
    background: rgb(var(--selected-background-color));
    border-radius: 5px!important;
}
.menu-product-button .mud-button-label 
{
    height: 100%;
}
    .menu-product-button .mud-tooltip-root {
        width: 100%;
        height: 100%;
    }
    .menu-product-button .menu-product-button-title {
        padding: 3px;
        color: rgb(var(--selected-text-color));
        white-space: break-spaces;
        line-height: 1.3;
        text-align: left;
        display: inline-block;
        border-bottom: 3px solid rgba(var(--selected-text-color), 0.1) !important;
    }
.menu-product-button-unselected, 
.menu-button-unselected {
    background-color: rgba(var(--selected-background-color),0.7);
    border: 1px solid rgba(var(--selected-background-color),0.7);
}

.menu-product-button-selected,
.menu-button-selected {
    background-color: rgb(var(--selected-background-color))!important;
    border: 1px solid rgb(var(--selected-background-color))!important;
}
.menu-product-button-selected:hover {
    background-color: rgb(var(--selected-background-color));
    border: 1px solid rgb(var(--selected-background-color));
}
    .menu-product-button-selected .mud-typography,
    .menu-button-selected .mud-typography {
        color: rgb(var(--selected-text-color));
    }
.small-input .mud-input {
    width: 100%;
    height: 40px;
}
.multiple-menu-true {
    height: calc(100% - 85px - 161px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.multiple-menu-false {
    height: calc(100% - 85px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#product-content, #product-content * {
    transition: none !important;
    box-shadow: none !important;
}

.menu-more-information-button 
{
    background-color: var(--cashdeks-main-bg-color);
    color: white;
    text-align: center;
    width: 100%;
    height: 20px;
    border-radius: 0px 0px 5px 5px
}
.menu-more-information-button:hover 
{    
    background-color: var(--cashdeks-main-bg-color);
    opacity: 0.7;
    color: white;
    text-align: center;
    width: 100%;
    height: 20px;
    border-radius: 0px 0px 5px 5px
}
.menu-overlay
{
    position: relative!important;
    padding: 5px;
}
.menu-overlay .mud-overlay-content
{    
    width: 100%;
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}
.menu-overlay .mud-overlay-content img
{    
    width: 80px;
    height: 80px;
}


/* END ->  menu */
/* BEGIN -> order list */

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    background-color: #2f4465;
    color: white;
}
.invoice-container {
    min-height: calc(100% - 14px);
}

.invoice-footer {
    position: sticky;
    bottom: 0;
    z-index: 58;
    background-color: #fff;
}
@media screen and (min-width: 1280px) {
    .invoice-container {
        position: relative;
        height: calc(var(--mud-content-height) - 300px);
        display: block;
    }
    .cashdesk-comment-card .mud-expand-panel-content {
        max-height: 100px;
        overflow-y: auto;
    }

    .cashdesk-comment-card .mud-collapse-wrapper-inner {
        padding: 0 !important;
    }

    .cashdesk-order-detail-dialog .mud-expand-panel.mud-panel-expanded {
        margin-top: 0 !important;
    }
}
.cashdesk-table .mud-toolbar {
    height: 100% !important;
    padding:6px;
}
.cashdesk-table .mud-table-container {
    height: calc(var(--mud-content-height) - 138px);
    overflow: scroll!important;
}
.cashdesk-table-toolbar-mobile {
    height:100%;
}

@media screen and (max-width: 1024px)
{
    .cashdesk-table:has(.cashdesk-table-toolbar-mobile-open) .mud-table-container,
    .cashdesk-table:has(.cashdesk-table-toolbar-mobile-close) .mud-table-container {
        height: calc(var(--mud-content-height) - 51px - 64px - 65px);
    }
}

@media screen and (max-width: 960px)
{
    .cashdesk-table:has(.cashdesk-table-toolbar-mobile-open) .mud-table-container {
        height: calc(var(--mud-content-height) - 51px - 64px - 130px);
    }
    .cashdesk-table:has(.cashdesk-table-toolbar-mobile-close) .mud-table-container {
        height: calc(var(--mud-content-height) - 51px - 64px - 80px);
    }
}
@media screen and (max-width: 590px) 
{

    .cashdesk-table:has(.cashdesk-table-toolbar-mobile-open) .mud-table-container {
        height: calc(var(--mud-content-height) - 51px - 64px - 290px);
    }

    .cashdesk-table:has(.cashdesk-table-toolbar-mobile-close) .mud-table-container {
        height: calc(var(--mud-content-height) - 51px - 64px - 80px);
    }
}
@media screen and (max-width: 960px), screen and (max-width: 1920px) and (pointer:coarse) {
    .cashdesk-table .mud-menu {
        display: none !important;
    }
    .cashdesk-table .mud-toolbar .cashdesk-table-toolbar-mobile-close {
        height: 150px;
    }

    .cashdesk-table-toolbar-mobile .cashdesk-table-toolbar-mobile-open {
        height: 350px !important;
    }

    .cashdesk-table .mud-toolbar .cashdesk-filter-container,
    .cashdesk-table .mud-table-cell {
        border: 1px solid #ddd;
    }

    .cashdesk-table .mud-table-cell {
        width: 100%;
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
    }

        .cashdesk-table .mud-table-cell::before {
            width: 25%;
            border-right: 1px solid grey;
            padding: 0 25px 0 0;
            content: attr(data-label);
            float: left;
            font-weight: bold;
            font-size: 12px;
            text-transform: uppercase;
        }

    .cashdesk-table .cashdesk-standart-table-row .mud-table-cell:first-child {
        background: #817F7F;
        opacity: 0.8;
        margin-top: 15px;
        color: white
    }

    .cashdesk-table .mud-table-row:not(.cashdesk-standart-table-row) .mud-table-cell::before {
        width: 0 !important;
        padding: 20px 0;
        border-right: none !important;
    }

    .cashdesk-table .mud-table-row:not(.cashdesk-standart-table-row) .mud-table-cell div {
        width: 100% !important;
    }
}
/* END ->  order list */
/* BEGIN -> Wizard */
div.wizard-navigation-line {
  display: inline-block;
  border-top: 1px solid black;
  width: 10%;
  position: relative;
  top: 50%;
}
.wizard-next-button 
{
    box-shadow: none;
    border-radius: 0px;
}

.wizard-next-button-success {
    background-color: var(--mud-palette-success) !important;
    color: white !important;
    border: 1px solid var(--mud-palette-success-darken);
}
/* End -> Wizard */

/* BEGIN -> layout system */
.loyalty-system-choice 
{
    text-align: start;
    border: 1px solid #323232;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}
.loyalty-system-dialog .mud-dialog-title
{
    padding: 0!important;
}
.loyalty-system-choice p,
.loyalty-system-choice h6,
.loyalty-system-choice span
{
    white-space: break-spaces;
}
.loyalty-system 
{
    width: 100%;
    height: calc(100vh - var(--mud-appbar-height) - 73px);
    overflow:scroll;
}
.loyalty-system .loyalty-system-setting-button
{
    width:100%;
    height:100%;
    border-radius:0px;
    white-space: break-spaces;
}
.loyalty-system .loyalty-system-description-content
{
    background-color:white;
    border-radius:10px;
    height:100%;
}
.loyalty-system .loyalty-system-description-content p,
.loyalty-system .loyalty-system-description-content h5
{
    line-height: 1.5em;
}

.loyalty-system-dialog 
{
    width: 100%;
    height: auto;
    max-height: calc(100vh - var(--mud-appbar-height) - 73px);
    overflow:hidden;
}

.loyalty-system-dialog .mud-dialog-content {
    margin-top: -20px;
}
.loyalty-system-expanded-panel 
{
    border: 1px solid #F3F1F1;
    margin-bottom: 10px;
    border-radius: 10px!important;
}
    .loyalty-system-expanded-panel.mud-panel-expanded {
        border: 1px solid #1657EA !important;
    }
    .loyalty-system-expanded-panel .mud-expand-panel-header,
    .loyalty-system-expanded-panel .mud-expand-panel-content
    {
        padding: 8px 12px;
    }

.loyalty-system-input-group .mud-input {
    background: #F3F1F1;
    border: none;
    border-radius: 5px;
    padding: 3px 10px;
}
    .loyalty-system-input-group .mud-input::before 
    {
        border:none!important;
    }

.loyalty-system-input-group .no-label .mud-input {
    margin-top:0!important;
}

.layout-system-list {
    height: 250px;
    overflow: scroll;
    border-radius: 10px;
    padding: 0px !important;
    margin: 0px !important;
}

.layout-system-list-item {
    background-color: #F3F1F1 !important;
    color: black;
}

.layout-system-list-sub-item {
    color: black;
}

.layout-system-list-group-item {
    border-top: 1px solid #C1C1C1 !important;
    border-bottom: 1px solid #C1C1C1 !important;
}

.layout-system-list-search {
    padding: 0 !important;
}

    .layout-system-list-search .mud-input {
        border-radius: 0px !important;
        border-bottom: 2px solid #C1C1C1 !important;
        margin-top: 0px !important;
    }
    .layout-system-paper 
    {
        background-color: #F3F1F1!important;
    }
    .layout-system-paper .mud-input 
    {
        background-color: white!important;
    }
    .layout-system-paper .layout-system-list-item
    {
        background-color: white!important;
    }
    .reward-product-list-content 
    { 
        border: 3px solid #3232;
        border-radius: 20px;
    }
    .reward-product-list-content .reward-product-list-name 
    {
        padding: 20px;
        background: #F5F5F5;
        text-align: center;
        border-radius: 10px;
        white-space: break-spaces;    
    }
    .reward-product-list-information 
    {
        color: #BDBDBD;
    }
    .reward-product-list 
    {
        height: auto;
        max-height: calc(100vh - var(--mud-appbar-height) - 560px);
        overflow:scroll;
    }
        .reward-product-list .reward-product-list-item:nth-child(2n),
        .reward-product-list .mud-list-item:nth-child(2n) 
        {
            background-color: #F9F9F9 !important;
        }
    .review-and-save-content .review-and-save-content-item
    {
        border: 1px solid #3232;
    }
    .review-and-save-content .review-and-save-content-title 
    {
        background-color: #F2F1F1;
    }

    .reward-configuration-image 
    {
        width: 100%;
        height: 100%;
    }

    .loyalty-system-table .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell, .mud-table-root .mud-table-head .mud-table-cell,
    .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
        background-color: white;
        border-bottom: 1px solid #7E7A7A;
        color: #000000;
    }
    
    .loyalty-system-card {
        border: 1px solid #D9D9D9;
        border-radius: 15px;
    }
    
    .loyalty-system-sidebar .active
    {
        background: #E9F0FE;
        color: #1657EA;
    }

    .loyalty-system-table-settings .mud-table-container
    {
        height:calc(100vh - var(--mud-appbar-height) - 650px);
    }
    
    .loyalty-system-table-overview .mud-table-container 
    {
        height: calc(100vh - var(--mud-appbar-height) - 650px);
    }
    
    .loyalty-system-table-show-all-customers .mud-table-container 
    {
        height: calc(100vh - var(--mud-appbar-height) - 420px);
    }

    .loyalty-system-table-activity .mud-table-container
    {
        height:calc(100vh - var(--mud-appbar-height) - 420px);
    }
/* End -> layout system */

/* BEGIN -> gift card */
.gift-card-choice 
{
    text-align: start;
    border: 1px solid #323232;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}
.gift-card-dialog .mud-dialog-title
{
    padding: 0!important;
}
.gift-card-choice p,
.gift-card-choice h6,
.gift-card-choice span
{
    white-space: break-spaces;
}
.gift-card 
{
    width: 100%;
    height: calc(100vh - var(--mud-appbar-height) - 30px);
    overflow:scroll;
}
.gift-card .gift-card-setting-button
{
    width:100%;
    height:100%;
    border-radius:0px;
    white-space: break-spaces;
}
.gift-card .gift-card-description-content
{
    background-color:white;
    border-radius:10px;
    height:100%;
}
.gift-card .gift-card-description-content p,
.gift-card .gift-card-description-content h5
{
    line-height: 1.5em;
}

.gift-card-dialog 
{
    width: 100%;
    height: auto;
    max-height: calc(100vh - var(--mud-appbar-height) - 30px);
    overflow:hidden;
}
.gift-card-dialog .selected-type {
    border: 1px solid #0D6EFD !important;
    background-color: #F0F8FF;
}
.gift-card-dialog .step-button {
    border-radius: 0px !important;
}
.gift-card-dialog .mud-dialog-content {
    margin-top: -20px;
}
.gift-card-expanded-panel 
{
    border: 1px solid #F3F1F1;
    margin-bottom: 10px;
    border-radius: 10px!important;
}
    .gift-card-expanded-panel.mud-panel-expanded {
        border: 1px solid #1657EA !important;
    }
    .gift-card-expanded-panel .mud-expand-panel-header,
    .gift-card-expanded-panel .mud-expand-panel-content
    {
        padding: 8px 12px;
    }
    .gift-card-input-group .mud-input {
        background: #F3F1F1;
        border: none;
        border-radius: 5px;
        padding: 3px 10px;
    }
.gift-card-input-group .mud-input::before 
{
    border:none!important;
}

.gift-card-table {
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 22px;
}
    .gift-card-table th {
        color: #7E7A7A !important;
        background-color: #F6F6F6 !important;
    }
    .gift-card-table .mud-button {
        border-radius: 0;
        padding: 6px 10px;
    }
    .gift-card-table .mud-toolbar {
        height: auto;
        padding: 0;
        margin: 10px;
    }
        .gift-card-table .mud-toolbar .mud-input {
            margin: 0 !important;
        }
    .gift-card-table .mud-table-container {
        border-radius: 0 0 22px 22px;
        height: calc(100vh - var(--mud-appbar-height) - 340px);
    }
    .gift-card-table .mud-table-foot td {
        border: none;
        background-color: #F6F6F6 !important;
    }
    .gift-card-table .mud-table-foot .mud-checkbox {
        display: none;
    }
/* End -> gift card */
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) {
    background-color: var(--mud-palette-table-striped);
}

.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: white;
}

.mud-adjust-customer-point-balance-dialog .mud-dialog-title
{
    background-color:#F3F3F3;
}
.mud-adjust-customer-point-balance-name 
{
    border-radius:5px;
    background-color: #F1F4FF;
}
.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 2px 6px 2px 6px;
    padding-inline-start:16px;padding-inline-end:24px;
}

@keyframes beatFade {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.beat-fade {
    animation: beatFade 1s infinite;
}

.route-solution-card-selected, .suggested-courier
{
    border: 1px solid var(--mud-palette-primary)!important;
}

.route-solution-card-disabled
{
    color: gray!important;
}

.route-solution-card
{
    border: 1px solid transparent;
    background-color:rgba(201, 218, 234, 0.3);
    margin-bottom: 10px;
    text-align: left;
}

.route-solution-card p
{
    text-align: left;
}

.optimized-route-button
{
    background-color:rgba(201, 218, 234, 0.3)!important;
    box-shadow: none!important;
    color: black!important;
}

.login-background-image {
    height: 100vh;
    background: url(https://v3dev.b-cdn.net/general/images/login-background.jpg) no-repeat;
    background-size: cover;
}
.login-background {
    background-color: white;
    height: 100vh;
    text-align: center;
}
.login-logo {
    width: 100%;
    height: auto;
}
.login-container {
    background-color: white;
}
.login-center-vertical {
    position:relative;
    top: 50%!important;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: transparent;
}
.login-title {
    color:black;
}

@media screen and (max-width: 960px) {
    .login-background-image {
        display: none;
    }
    .login-background {
        background: linear-gradient(to top, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%), url(https://v3dev.b-cdn.net/general/images/login-background.jpg) no-repeat;
        background-size: cover;
    }
    .login-title {
        color:white;
    }
}

@media (max-width: 600px) {
    .pin-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .pin-grid .mud-button {
        font-size: 0.8rem;
        padding: 0.5rem;
    }
}

.navigation-item {
    background-color: #183055;
    color: #FFFFFF;
    border: 0.7px solid #183055;
    border-radius: 6px;
}

.navigation-tooltip.mud-tooltip-inline {
    display: inherit !important;
}

.navigation-item-disabled {
    background-color: #FEFFFF;
    color: #969BA1;
    border: 0.7px solid #EBEBEB;
    border-radius: 6px;
}

.breadcrumbs {
    background: #F4F6FA;
    border-bottom: 1px solid #CCD8EB;
    height: 100%;
    max-height: 30px;
    display: flex;
    align-items: center;
}

.breadcrumbs .mud-breadcrumbs {
    padding: 0;
    font-size: 12px;
    line-height: 1;
}

.main-content {
    height: var(--mud-content-height);
    overflow-y: auto;
    overflow-x: hidden;
}

.index-card {
    border:1px solid #EBEBEB;
    width: 100%;
    height: auto;
    padding: 14px;
    background: #FAFBFE;
}

.index-card-title h6 {
    color:#2f4465;
}

.index-card-item {
    background: #FAFBFE;
    border:1px solid #EBEBEB;
}

.welcome {
    color: #183055;
    padding-bottom: 0;
}

.icon-white-bg
{
    height: 30px;
    padding-top: 10px;
}

.navigation-item .icon-white-bg::before {
    background-color: #FEFFFF;
    padding: 5px;
    border-radius: 3px;
}

.navigation-item-disabled .icon-white-bg::before {
    background-color: #FEFFFF;
    padding: 5px;
    color: #969BA1;
    border-radius: 3px;
    box-shadow: 0px 0px 6.5px 0px #0000001A;
}

.order-notify {
    background-color: #183055;
    color:white;
    box-shadow: none;
    border-radius: 0;
}

/* BEGIN -> branding template */
.tox.tox-tinymce {
    height: calc(100vh - 545px) !important;
}

.tox-tinymce-aux {
    z-index: 9999 !important;
}

.branding-template-choice
{
    text-align: start;
    border: 1px solid #323232;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}
.branding-template-dialog .mud-dialog-title
{
    padding: 0!important;
}
.branding-template-choice p,
.branding-template-choice h6,
.branding-template-choice span
{
    white-space: break-spaces;
}
.branding-template
{
    width: 100%;
    height: calc(100vh - var(--mud-appbar-height) - 30px);
    overflow:scroll;
}
.branding-template .branding-template-setting-button
{
    width:100%;
    height:100%;
    border-radius:0px;
    white-space: break-spaces;
}
.branding-template .branding-template-description-content
{
    background-color:white;
    border-radius:10px;
    height:100%;
}
.branding-template .branding-template-description-content p,
.branding-template .branding-template-description-content h5
{
    line-height: 1.5em;
}

.branding-template-dialog
{
    width: 100%;
    height: auto;
    max-height: calc(100vh - var(--mud-appbar-height) - 30px);
    overflow:hidden;
}
.branding-template-dialog .selected-type {
    border: 1px solid #0D6EFD !important;
    background-color: #F0F8FF;
}
.branding-template-dialog .step-button {
    border-radius: 0px !important;
}
.branding-template-dialog .mud-dialog-content {
    margin-top: -20px;
}
.branding-template-expanded-panel
{
    border: 1px solid #F3F1F1;
    margin-bottom: 10px;
    border-radius: 10px!important;
}
.branding-template-expanded-panel.mud-panel-expanded {
    border: 1px solid #1657EA !important;
}
.branding-template-expanded-panel .mud-expand-panel-header,
.branding-template-expanded-panel .mud-expand-panel-content
{
    padding: 8px 12px;
}
.branding-template-input-group .mud-input {
    background: #F3F1F1;
    border: none;
    border-radius: 5px;
    padding: 3px 10px;
}
.branding-template-input-group .mud-input::before
{
    border:none!important;
}

.branding-template-table {
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 22px;
}
.branding-template-table th {
    color: #7E7A7A !important;
    background-color: #F6F6F6 !important;
}
.branding-template-table .mud-button {
    border-radius: 0;
    padding: 6px 10px;
}
.branding-template-table .mud-toolbar {
    height: auto;
    padding: 0;
    margin: 10px;
}
.branding-template-table .mud-toolbar .mud-input {
    margin: 0 !important;
}
.branding-template-table .mud-table-container {
    border-radius: 0 0 22px 22px;
    /* height: calc(100vh - var(--mud-appbar-height) - 340px); */
}
.branding-template-table .mud-table-foot td {
    border: none;
    background-color: #F6F6F6 !important;
}
.branding-template-table .mud-table-foot .mud-checkbox {
    display: none;
}
/* End -> branding template */


.mud-table-cell {
    font-size: 12px;
}

.mud-icon-button-size-small {
    padding: 2px;
}

.mud-alert {
    padding: 2px 16px;
}

.mud-alert.mud-dense .mud-alert-message {
    padding: 4px;
}

.mud-alert.mud-dense .mud-alert-icon {
    padding: 4px;
}

.mud-icon-size-small {
    font-size: 1.0rem;
}

.mud-button-filled-size-small.mud-icon-button {
    padding-top: 3px;
    padding-right: 6px;
    padding-bottom: 3px;
    padding-left: 6px;
}

.no-label.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0px;
}



@media screen and (max-width: 600px) {
    .mud-grid-item {
        width: 100%;
    }

        .mud-grid-item[class*="mud-grid-item-xs"]:not([class*="mud-grid-item-sm"]):not([class*="mud-grid-item-md"]):not([class*="mud-grid-item-lg"]) {
            width: 100% !important;
            flex-basis: 100% !important;
            max-width: 100% !important;
        }

    ul.mud-breadcrumbs {
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .mud-appbar {
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .mud-toolbar-appbar {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding-right: 200px;
    }

        .mud-toolbar-appbar > *:nth-child(1) {
            order: -1;
            margin-left: -10px;
            max-width: 130px;
        }

        .mud-toolbar-appbar > *:nth-child(3) {
            order: 10;
            padding-right: 100px;
        }

        .mud-toolbar-appbar > *:nth-child(5) {
        }

        .mud-toolbar-appbar > *:nth-child(9) {
            margin-left: -5px;
            max-width: 65px;
        }

        .mud-toolbar-appbar:after {
            content: "";
            display: block;
            right: 0px;
            top: 0;
            width: 70px;
            height: 56px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
            position: fixed;
            pointer-events: none;
        }

        .mud-toolbar-appbar > img {
            order: 99;
        }

        .mud-toolbar-appbar > div {
            width: auto !important;
        }

    .mud-popover.mud-popover-open {
        left: 0 !important;
        max-width: 100% !important;
    }
}

.fa-moped-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: url("https://globalv3.b-cdn.net/GeneralImages/custom_moped_icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.25rem;
    height: 1.25rem;
}