.md .button.active-state,
.ios .button.active-state {
    background: rgba(20, 48, 78, 0.27) !important;
}

.window-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #518cd4f5;
    color: white;
    font-size: 35px;
    z-index: 1000000;
    top: 100%;
    left: 0;
    text-align: center;
    /* padding: 30%; */
    transition: all 0.35s;
}

.window-cover::after {
    content: 'Please Wait';
    position: absolute;
    width: 100%;
    height: 50%;
    top: 30%;
    left: 0;
    text-align: center;
    font-size: 30px;
}

/*#region  ****  Framework7 Override  ****/

.md,
.ios {
    --f7-navbar-height: 55px;
    --f7-navbar-tablet-height: 55px;
}

.tooltip-in {
    z-index: 5555555;
}

/* 
.md .navbar,
.ios .navbar {
    height: 55px;
    transition: all 0.35s;
} */
/* .md .navbar-inner,
.ios .navbar-inner {
    height: 100%;
} */

/* .md .navbar~*:not(.no-navbar) .page-content,
.md .navbar~.page-content,
.ios .navbar~*:not(.no-navbar) .page-content,
.ios .navbar~.page-content {
    padding-top: 55px;
} */

.md .navbar a.link,
.ios .navbar a.link {
    line-height: 55px;
    height: 55px !important;
    width: 100%;
    padding: 10px 11px;
    font-size: 20px;
}

.no-lineBefore::before,
.no-lineAfter::after {
    content: unset !important;
}

.line-after::after {
    content: '';
    position: absolute;
    background-color: #c8c7cc5e;
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

button {
    width: unset;
}

.md .page,
.ios .page {
    background: #fbfbfb !important;
}

.md .links-list a,
.ios .links-list a {
    height: 55px;
}

.md .panel-backdrop,
.ios .panel-backdrop {
    background: rgba(0, 0, 0, 0.15);
}

/* solve problem of hidden data on invoice-list page */
/* or can be solved use class .general-tab  */
.tabs-animated-wrap .tab {
    overflow: scroll;
}

/* this to fix bug */
.calendar-modal {
    z-index: 13001;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  toggle-icon.big  ***  */

.md .toggle-icon.big,
.md .toggle-icon.big {
    width: 60px;
    border-radius: 20px;
    height: 40px;
}

.md .toggle-icon.big:before,
.md .toggle-icon.big:before {
    width: 56px;
    height: 36px;
    border-radius: 20px;
}

.md .toggle-icon.big:after,
.md .toggle-icon.big:after {
    height: 36px;
    width: 36px;
    border-radius: 20px;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  GENERAL  ****/

body,
.unselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
    display: none;
}


/* .my-list-s{
    margin: 5px 0 !important;
    font-size: 15px;    
} */

.my-list {
    margin: 5px 0 !important;
}

/* .ios .my-list-s .item-inner:after, */

.md .my-list .item-inner:after,
.ios .my-list .item-inner:after {
    content: '';
    position: absolute;
    background-color: #c8c7cc5e;
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.my-smart-value {
    height: 44px;
    padding-top: 8px;
    font-size: 17px;
}

.my-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-right: -15px;
    margin-left: -15px;
}

.view-main {
    transition-property: transform, -webkit-transform, all;
    transition-duration: 400ms;
}

.my-togle-item {
    margin-top: 15px;
}

.block-container {
    float: left;
    position: relative;
    width: 96%;
    margin: 35px 2% !important;
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 13px;
    -webkit-box-shadow: 1px 1px 22px -6px rgba(163, 163, 163, 1);
    -moz-box-shadow: 1px 1px 22px -6px rgba(163, 163, 163, 1);
    /* box-shadow: 1px 1px 22px -6px rgba(163,163,163,1); */
    box-shadow: 4px 4px 25px -10px rgb(0, 0, 0);
    box-sizing: border-box;
}

.block-container .block {
    margin: 0 !important;
    padding: 5px 0 !important;
}

.block-container .block-strong:after {
    height: 0 !important;
}

.general-note {
    width: 85%;
    margin: 10px auto 35px;
    font-size: 13px;
    /* float: left; */
    color: steelblue;
}

/* Start IbrahimChange
 .panel-left:after {
    content: '';
    position: absolute;
    background-color: #c7c5c5d6;
    display: block;
    z-index: 5001;
    top: 0;
    right: 0px;
    bottom: auto;
    left: auto;
    width: 2px;
    height: 100%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

.panel-left:before {
    content: '';
    position: absolute;
    background-color: #c7c5c5d6;
    display: block;
    z-index: 5001;
    top: 0;
    left: 0px;
    bottom: auto;
    right: auto;
    width: 2px;
    height: 100%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}  
End IbrahimChange*/

.btn-50 {
    width: 48%;
    /* height: 50px !important; */
    /* font-size: 22px; */
    margin: 0 1%;
    float: left;
}

.btn-md-50 {
    width: 48%;
    height: 50px !important;
    font-size: 22px;
    margin: 0 1%;
    float: left;
}

.btn-md-100 {
    width: 100%;
    height: 50px !important;
    font-size: 22px;
    margin: 0 1%;
    float: left;
}

.btn-big-50 {
    width: 48%;
    height: 60px !important;
    font-size: 22px;
    margin: 0 1%;
    float: left;
}

.btn-big-100 {
    width: 98%;
    height: 60px !important;
    font-size: 22px;
    margin: 0px auto;
    position: relative;
    /* float: left; */
}

/* .btn-big-100 {
    width: 100%;
    height: 60px !important;
    font-size: 22px;
    margin: 0 1%;
    float: left;
} */

/* ((((((((((((((((////////////////-------------------////////////)))))))))))))))) */
.btn-col-opertion {
    margin: 10px 0 0 0;
}


.radio.active span {
    width: 40px;
    height: 40px;
    background: no-repeat center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23007aff'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
    background-size: 13px 10px;
}

/*#endregion*/

/*#region  ****  shift managment  ***  */

@media (max-width: 600px) {

    .btn-manageShift-paidInOut,
    .btn-manageShift-endSift {
        width: 98%;
    }

    #btn-manageShift-endSift {
        margin-bottom: 40px;
    }
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  General 2  ***  */

.header-1 {
    width: 100%;
    text-align: center;
    font-size: 40px;
}

.header-2 {
    width: 100%;
    text-align: center;
    font-size: 32px;
    /* margin-bottom: 20px; */
}

.header-3 {
    width: 100%;
    text-align: center;
    font-size: 25px;
    /* margin-bottom: 20px; */
}

.container-full {
    position: relative;
    width: 100%;
    float: left;
    /* font-size: 15px;
    color: #6d6d72; */
}

.container-lg {
    position: relative;
    width: 96%;
    margin: 20px 2% !important;
    float: left;
    font-size: 15px;
    color: #6d6d72;
}

.container-md {
    position: relative;
    width: 88%;
    margin: 20px 6% !important;
    float: left;
    font-size: 15px;
    color: #6d6d72;
}

.container-sm {
    position: relative;
    width: 70%;
    margin: 20px 15% !important;
    float: left;
    font-size: 15px;
    color: #6d6d72;
}

p.bold-3 {
    font-weight: 700;
    font-size: 20px;
}

.input-block {
    height: 65px;
    background-color: white !important;
    border: 1px solid #d8d8d8a1 !important;
    font-size: 22px !important;
    position: relative;
    width: 100%;
    padding: 8px 10px;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.input-block input {
    white-space: nowrap;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    text-align: right;
}

.rtl .input-block input {
    margin-left: unset;
    margin-right: auto;
    text-align: left;
}

.block-container.container-full {
    width: 100%;
    margin: 0;
}

td input.form-control {
    height: 24px;
}

/* .dragable-row{
    background-image: url(../img/img-dragRow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
} */
/* .dragable-row ::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
} */
@media (max-width: 768px) {
    .container-md {
        width: 96%;
        margin: 20px 2% !important;
    }

    .container-sm {
        width: 96%;
        margin: 20px 2% !important;
    }
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/* --------------------------------------------------------------------------  */

/*#region  ****  left-panel-main  ****/

#panel-left {
    transition: all 0.5s;
}

/* .container-mainNav-resize-big,
.container-mainNav-resize-small {
    margin-top: 5px;
} */

.mainNav-icon-container {
    width: 29%;
    text-align: end;
}

.mainNav-icon {
    width: 32px;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 34px;
}

.mainNav-link:hover .mainNav-icon-container .mainNav-icon {
    text-decoration: underline;
}

.link-mainNav-resizeBig {
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 36%;
    padding: 0;
    border: 2px solid #2048a9;
    background-image: linear-gradient(-180deg, #648ae4 0%, #00113d 100%);
    box-shadow: 0 1rem 1.25rem 0 rgb(22 75 195 / 32%),
        0 -0.25rem 1.5rem rgba(110, 15, 155, 1) inset,
        0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset,
        0 0.25rem 0.5rem 0 rgba(180, 70, 207, 1) inset !important;
    text-align: center;

}

.link-mainNav-resizeSmall {
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 36%;
    padding: 1px 0px;
    border: 2px solid #2048a9;
    background-image: linear-gradient(-180deg, #648ae4 0%, #00113d 100%);
    box-shadow: 0 1rem 1.25rem 0 rgb(22 75 195 / 32%),
        0 -0.25rem 1.5rem rgba(110, 15, 155, 1) inset,
        0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset,
        0 0.25rem 0.5rem 0 rgba(180, 70, 207, 1) inset !important;
    text-align: center;
}

.img-mainNav-resizeBig {
    width: 35px;
    position: absolute;
    left: -3px;
    top: -4px;
}

.img-mainNav-resizeSmall {
    width: 24px;
    margin-bottom: 5px;
}

.list-custom-leftPanel li:hover {
    border-left: 5px solid;
    border-right: 5px solid;
    color: #648ae4;
}

.list-custom-leftPanel li.active {
    border-left: 3px solid;
    border-right: 6px solid;
    color: #293b7f;
    font-weight: bold;
}

.list-custom-leftPanel li a:focus {
    text-decoration: unset;
}

.list-custom-leftPanel li.active:after {
    content: ' ';
    border-top: 5px solid transparent;
    border-right: 7px solid #ffffff;
    border-bottom: 5px solid transparent;
    position: absolute;
    right: -6px;
    top: 22px;
}

.list-custom-leftPanel li.active:before {
    content: ' ';
    border-top: 5px solid transparent;
    border-left: 7px solid #293b7f;
    border-bottom: 5px solid transparent;
    position: absolute;
    left: 0;
    top: 22px;
}

.list-custom-leftPanel li.active a:before {
    content: unset;
}

.visibility {
    visibility: hidden;
}

.link-mainNav-resizeBig:hover,
.link-mainNav-resizeBig:focus {
    color: #007aff;
}

.link-mainNav-resizeSmall:hover,
.link-mainNav-resizeSmall:focus {
    color: #007aff;
}

.rtl .mainNav-icon {
    margin-right: 35px;
}


.rtl .list-custom-leftPanel li.active {
    border-left: 6px solid;
    border-right: 3px solid;
    color: #293b7f;
    font-weight: bold;
}

.rtl .list-custom-leftPanel li.active:after {
    content: ' ';
    border-top: 5px solid transparent;
    border-right: 7px solid #293b7f;
    border-bottom: 5px solid transparent;
    position: absolute;
    right: 0;
    top: 22px;
}

.rtl .list-custom-leftPanel li.active:before {
    content: ' ';
    border-top: 5px solid transparent;
    border-left: 7px solid #ffffff;
    border-bottom: 5px solid transparent;
    position: absolute;
    left: -6px;
    top: 22px;
}

/*#endregion*/

/*#region  ****  left-panel-backOffice  ****/

.list-custom-backOffice li:hover {
    border-left: 5px solid;
    border-right: 5px solid;
    color: #648ae4;
}

.list-custom-backOffice li.active {
    border-left: 5px solid;
    border-right: 5px solid;
    color: #293b7f;
    font-weight: bold;
}

/*#endregion*/

/*#region  ****  daily Duty detail  ****/
.div-btn-add-dailyDuty {
    text-align: -webkit-right;
}

.rtl .div-btn-add-dailyDuty {
    text-align: -webkit-left;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/* --------------------------------------------------------------------------  */

/*#region  ****  maintinance request  ****/
.messagebar {
    background-color: #f7f7f8;
}

.messagebar:before {
    background-color: #e3e3e3 !important;
}

.block-custome {
    padding: 10px 20px;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  some images bg  ****/
.splash-image {
    /* background-image: url(../img/alien/a-1.png); */
    background-image: url(../img/alien/logo.png);
    width: 100%;
    height: 100%;
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center;
}

.bg-img-1 {
    background-image: url(../img/alien/a-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  animation  ***  */

@-webkit-keyframes animation-vibrate {
    0% {
        -webkit-transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        -webkit-transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        -webkit-transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        -webkit-transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        -webkit-transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
    }
}

@-webkit-keyframes animation-shaking {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(-50px, 0px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(25px, 0px) rotate(0deg);
    }

    60% {
        -webkit-transform: translate(-10px, 0px) rotate(0deg);
    }

    80% {
        -webkit-transform: translate(5px, 0px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

@-webkit-keyframes animation-shaking-round {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(-50px, -20px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(25px, 20px) rotate(0deg);
    }

    60% {
        -webkit-transform: translate(-10px, 20px) rotate(0deg);
    }

    80% {
        -webkit-transform: translate(5px, -10px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

@-webkit-keyframes animation-blink {
    0% {
        opacity: 1.0;
        background-color: black;
        color: yellow;
    }

    50% {
        opacity: 0.3;
        background-color: yellow;
        color: black;
    }

    100% {
        opacity: 1.0;
        background-color: black;
        color: yellow;
    }
}

@-webkit-keyframes animation-addToCart {
    0% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        left: 0px;
        top: 100px;
        -webkit-transform: translate(0px, 0px) rotate(360deg);
    }
}

@-webkit-keyframes animation-addToCart-rtl {
    0% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        right: 0px;
        top: 100px;
        -webkit-transform: translate(0px, 0px) rotate(360deg);
    }
}

.shaking {
    -webkit-animation-name: animation-shaking;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
}

.shaking-round {
    -webkit-animation-name: animation-shaking-round;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
}

.blink {
    -webkit-animation-name: animation-blink;
    -webkit-animation-duration: 0.7s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 2;
    /* -webkit-animation-fill-mode: backwards; */
}

.add-to-cart {
    position: absolute;
    z-index: 5001;
    opacity: 1;
    /* border: 1px solid gray; */

    -webkit-animation-name: animation-addToCart;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

.add-to-cart-rtl {
    position: absolute;
    z-index: 5001;
    opacity: 1;
    /* border: 1px solid gray; */

    -webkit-animation-name: animation-addToCart-rtl;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

/* .shake {
    display:inline-block
} */

/*#endregion*/

/*#region  ****  last-change-order  ***  */
.last-change-order {
    -webkit-animation-name: animation-shaking-round;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0.25s;
    background-color: #4b9cfe2b !important;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  numpad  ***  */

.user-pin {
    width: 100%;
    text-align: center;
    font-size: 33px !important;
    margin: 15px 0 !important;
}

.numpad-container {
    width: 300px;
    height: 400px;
    margin: auto;
    background: #ffffff73;
}

.numpad-holder-row {
    height: 25%;
    width: 100%;
    /* display: inline; */
    /* position: relative; */
}

.numpad-holder {
    height: calc(100% - 10px);
    width: calc(33.33% - 10px);
    margin: 5px 5px;
    /* border: solid 2px #c3c3c32e; */
    /* background-color: #ffffff69; */
    /* display: inline-block; */
    box-sizing: content-box;
    position: relative;
    float: left;
    /* ------ */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.rtl .numpad-holder {
    float: right;
}

.numpad-btn {
    width: 100%;
    height: 100% !important;
    border: solid 1px blue !important;
    border-radius: 50% !important;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 33px;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  home-page  ***  */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,300);


.footer-home {
    /* background: #42A5F5; */
    color: white;
    padding: 20px;
    position: absolute;
    height: 30px;
    width: 100%;
    bottom: 0;
    background-image: linear-gradient(-180deg, #648ae4 0%, #00113d 100%);
    text-align: center;
}

.my-row-custom {
    margin-right: 10px;
    margin-left: 10px;
}

.my-row-custom span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.general-info-span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.genral-info {
    width: 100%;
    height: 50px;
    display: block;
    color: black;
    position: relative;
    /* background-image: linear-gradient(-180deg, #f7f7f8 0%, #c1c1ccb5 100%); */
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
}

.user-name {
    height: 100%;
    vertical-align: middle;
}

.city {
    text-align: center;
    margin-top: -8px;
}

.weather-div {
    text-align: end;
    /* font-size: 15px; */
    margin-top: -8px;
}

.weather-icon-img {
    width: 35px;
    /* height: 120px;
    display: block;
    margin: 15px auto 0 auto; */
}

.h4-line {
    text-align: center;
    font-weight: 800;
    color: #0c0c0c;
    margin-top: 15px;
    width: 100%;
}

.div-line {
    position: relative;
    border-bottom: 1px solid #e3e3e3;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 95%;
    margin-left: 2.5%;
}

.rtl .div-line {
    margin-right: 2.5%;
}

.div-style-triangle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 30px;
    text-align: center;
}

.triangle-line {
    position: relative;
    display: inline-block;
    width: 0;
    top: 0;
    border: 25px solid transparent;
    border-top: 25px solid #1b326b;
    /* cursor: pointer; */
}

.arrow-triangle {
    position: absolute;
    width: 100%;
    left: -8.8px;
    top: -26px;
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    -webkit-text-stroke-width: 1px;
}

.card-header-pic-custom,
.card-header-customexx {
    height: 8vw;
    width: 80%;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 10%;
}

.rtl .card-header-pic-custom {
    margin-right: 10%;
}

.card-workflow {
    height: 11vw;
    width: 70%;
}

.card-header-custome {
    height: 100%;
    justify-content: center;
    border-radius: 10px;
    width: 100%;
    padding: 0;
    border: 1px solid #2048a9;
    background-image: linear-gradient(-180deg, #648ae4 0%, #00113d 100%);
    box-shadow: 0 1rem 1.25rem 0 rgb(22 75 195 / 32%),
        0 -0.25rem 1.5rem rgba(110, 15, 155, 1) inset,
        0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset,
        0 0.25rem 0.5rem 0 rgba(180, 70, 207, 1) inset !important;
    line-height: unset;
}

.card-img {
    width: 40%;
    height: 95%;
    background-repeat: no-repeat;
    text-align: center;
    position: absolute;
    background-position: center 40%;
    background-size: contain;
}

.txt-card {
    width: 100%;
    height: 20px;
    background-color: #ffffff;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    text-align: center;
    transition: all 1s;
    z-index: 1;
}

.txt-card span {
    color: rgba(110, 15, 155, 1);
    transition: all 1s;
    position: absolute;
    top: calc(100% - 20px);
    left: 0;
    width: 100%;
    font-weight: bold;
    text-transform: none;
}

.card-header-custome:hover .txt-card {
    height: 100%;
    transition: all 1s;
    border-radius: 10px;
    background-color: #ffffffbd;
}

.card-header-custome:hover span {
    top: 40%;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  user-login  ***  */

.block-user-login {
    width: 100%;
    height: 100%;
    background-color: white;
    position: relative;
    float: left;
}

.btn-logoutStore {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 100px;
    height: 100px !important;
    z-index: 9;
    border: none;
    background-color: white;
    background-image: url(../img/logout-2.png);
    background-size: cover;
}

.div-appVersion {
    font-size: 18px;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
    /* color: #fffc00; */
}

.card-custome {
    /* background-image: linear-gradient(-180deg, #648ae4 0%, #00113d 100%); */
    box-shadow: 0 1rem 1.25rem 0 rgb(22 75 195 / 32%),
        0 -0.25rem 1.5rem rgba(110, 15, 155, 1) inset,
        0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset,
        0 0.25rem 0.5rem 0 rgba(180, 70, 207, 1) inset;
}

.fab-postion {
    top: unset;
    bottom: 20px !important;
    left: 46px;
}

.fab-a-custome {
    font-weight: bold;
    font-size: 16px;
    border: 2px solid #2048a9;
    background-image: linear-gradient(-180deg, #648ae4 0%, #00113d 100%);
    box-shadow: 0 1rem 1.25rem 0 rgb(22 75 195 / 32%),
        0 -0.25rem 1.5rem rgba(110, 15, 155, 1) inset,
        0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset,
        0 0.25rem 0.5rem 0 rgba(180, 70, 207, 1) inset !important;
}

.fab-a-custome:hover,
.fab-a-custome:focus {
    color: #fbf905;
    text-decoration: unset
}

/*#endregion*/

/*#region  ****  login media  600 not 768px ***  */
@media (max-width: 600px) {

    .user-pin {
        font-size: 27px !important;
        /* margin: 0 0 10px 0 !important; */
    }

    .numpad-container {
        width: 270px;
        height: 360px;
    }

    .btn-logoutStore {
        width: 70px;
        height: 70px !important;
    }

    .div-appVersion {
        font-size: 16px;
        padding: 7px;
        bottom: 15px;
        right: 15px;
    }
}

/*#endregion*/

/*#region  ****  item details page  ***  */

/* .item-image{
    width: 50px;
    height: 50px;
    background-image:url(../img/img-temp.png);
    background-size: cover;
    cursor: pointer;
} */

.box-setup {
    position: relative;
    width: 120px;
    height: 120px;
    background: red;
    margin: auto;
    text-align: center;
    font-size: 40px;
    color: white;
    border: 1px solid #e6e6e6;
    /* border: 1px solid #c5c5c5; */
    /* text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; */
    /* display: flex; */
}

.box-color,
.box-image {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.box-color>span,
.box-color>input {
    width: 100%;
    height: 75%;
    text-align: center;
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.box-name {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30%;
    background-color: #00000040;
    /* border: 1px solid #d4d4d4; */
    /* text-align: center; */
    font-size: 15px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 2;
    text-align: center;
    line-height: 15px;
    background-color: black;
    opacity: 0.6;
}

.color-container {
    width: 400px;
    position: relative;
    margin: auto;
    margin: 30px calc(50% - 200px);
    float: left;
}

.color-container>div {
    width: 100px;
    height: 100px;
    float: left;
}

.bg-red {
    background: red;
}

.bg-blue {
    background: blue;
}

.bg-pink {
    background: pink;
}

.bg-yellow {
    background: yellow;
    color: gray;
}

.bg-green {
    background: green;
}

.bg-purple {
    background: purple;
}

.bg-gray {
    background: gray;
}

.bg-orange {
    background: orange;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  grid POS  ***  */
.navbar-posStation {
    width: 300px;
    top: 10px;
    left: 10px;
}

.navbar-posStation .right {
    height: 100%;
    width: 222px;
}

.rtl .navbar-posStation {
    left: unset;
    right: 10px;
}

.station-left-container,
.grid-attribute {
    transition: all 0.5s;
    width: 300px;
    height: calc(100% - 145px);
    /* height: calc(100% + 36px); */
    /* margin: 10px 0px 0px 10px; */
    position: absolute;
    top: 65px;
    left: 10px;
    /* float: left; */
    background: #f9f9f9;
}

.grid-container {
    transition: all 0.5s;
    width: calc(100% - 320px);
    /* height: calc(100% - 90px); */
    height: calc(100% - 90px);
    position: absolute;
    top: 10px;
    left: 315px;
    /* float: left; */
    background: #f9f9f961;
    overflow: scroll;
}

.rtl .station-left-container,
.rtl .grid-attribute {
    left: unset;
    right: 10px;
}

.rtl .grid-container {
    left: unset;
    right: 315px;
}

.grid {
    /* margin: auto; */
    /* top: 100px; */
    /* width: 768px; */
    width: 100%;
    height: 100%;
    min-height: 100%;
    /* position: absolute; */
    /* overflow: scroll; */
    /* background: #f9f9f9e3; */
    z-index: 500;
    /* padding-bottom: 50px; */
    z-index: 99;
    top: 0;
    display: none;
    max-width: 850px;
    /* min-width: 600px; */
    margin: auto;
}

.grid.active {
    z-index: 100;
    /* opacity: 1; */
    display: block;
}

.box {
    /* height: calc(100% - 4px);
    width: calc(100% - 4px);
    background-color: black;
    position: relative;
    top: 2px;
    left: 2px; */
    height: calc(100% - 0px);
    width: calc(100% - 0px);
    position: relative;
    top: 0px;
    left: 0px;
    cursor: pointer;
    z-index: 100;
    /* -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden; */
    /* transition: all 0.06s; */
    /* transition-timing-function: ease-out; */
    font-size: 40px;
    color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.box-category-folder {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 26%;
    height: 24%;
    z-index: 1;
    background-image: url("../img/img-folder-2.png");
    background-size: 75%;
    background-position: top right;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 0 0 0 60%;
    opacity: 0.8;
}

.box-discount-image {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 70%;
    z-index: 1;
    background-image: url("../img/discount-label.png");
    background-size: cover;
    background-position: center;
}

.box-discount-image>span {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 17px;
    font-weight: 800;
    transform: rotate(-45deg);
}

.box.active span,
.box.active-partial span {
    color: #9e1546;
}

.box.active .box-discount-image ::after {
    content: 'All';
    width: 20px;
    height: 20px;
    background: #f6f6f7;
    position: absolute;
    top: 55px;
    left: calc(50% - 10px);
    font-size: 14px;
    border-radius: 15px;
}

.box.active-partial .box-discount-image ::after {
    content: 'S';
    width: 20px;
    height: 20px;
    background: #f6f6f7;
    position: absolute;
    top: 55px;
    left: calc(50% - 10px);
    font-size: 14px;
    border-radius: 15px;
}

.box-delete {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -5px;
    left: -5px;
    background-color: white;
    color: #bdbdbd;
    border: 1px solid #bdbdbd;
    border-radius: 18px;
    text-align: center;
    font-size: 20px;
    /* font-weight: 700; */
    z-index: 11;
}

.box-mask {
    position: absolute;
    background-color: yellow;
    z-index: 5001;
    opacity: 0.7;
    border: 1px solid gray;
    top: 0;
    left: 0;
}

/* special handling for rtl to solve bug on iOS */
.box-mask-rtl {
    position: absolute;
    background-color: yellow;
    z-index: 5001;
    opacity: 0.7;
    border: 1px solid gray;
    top: 0;
    right: 0;
}

.held {
    border: solid 1px blue;
    background-color: red;
    position: absolute;
    z-index: 701 !important;
    opacity: 0.75 !important;
}

/* .held .box-delete {
    display: none;
} */

.holder {
    /* height: 120px; */
    height: calc(100% - 8px);
    width: calc(20% - 8px);
    margin: 2px 4px;
    border: solid 2px #c3c3c30f;
    background-color: #cccccc0d;
    display: inline-block;
    box-sizing: content-box;
    position: relative;
    /* ------ */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;

    -webkit-box-shadow: 3px 3px 16px -5px rgb(185, 185, 185);
    box-shadow: 3px 3px 16px -5px rgb(185, 185, 185);
}

.holder.hovered {
    border: dotted 2px gray;
    background-color: #ececec;
    /* opacity: 0.75; */
}

.holder-row {
    height: 20%;
    width: 100%;
    /* display: inline; */
    /* position: relative; */
}

.holder-add {
    position: absolute;
    height: 60%;
    width: 60%;
    margin: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: xx-large;
    color: darkmagenta;
}

/*#endregion*/


/*#region  ****  pos-nav-btn  ***  */
.btn-newInvoice {
    font-size: 52px;
    background-color: #2768e2;
    border-radius: 50%;
    height: 45px;
    width: 45px !important;
    margin-left: 50px;
    line-height: 34px;
    /* display: flex; */
    text-align: center;
    color: white;
    font-weight: 600;
}

.pos-nav-btn {
    right: 0;
    /* width: 150px; */
    width: 75px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    font-size: 20px;
    border-left: 1px solid #52525236;
}

.rtl .pos-nav-btn {
    border-right: 1px solid #52525236;
    border-left: unset;
}

.navbar-posStation .navbar-previous .navbar-bg {
    display: none;
}

.pos-nav-btn.edit-grid {
    /* background-image: url(../img/img-drag-1.png);
    background-size: 55%; */
    background-image: url(../img/img-drag-2.png);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
}

.pos-nav-btn-edit-grid-border-right{
    border-right: 1px solid #52525236;
}

.pos-nav-btn.service-tables {
    /* background-image: url(../img/img-tables-1.png);
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center -17px; */
    background-image: url(../img/img-tables-1.png);
    background-size: 77%;
    background-repeat: no-repeat;
    background-position: center -10px;
}

.show-left-invoice {
    display: none;
}

.badge-invoice-counter {
    background-color: #007aff;
    color: white;
    height: 30px;
    min-width: 30px;
    line-height: 30px;
    /* margin-left: 7px; */
    border-radius: 50%;
    font-weight: 700;
    font-size: 18px;
    padding: 0 7px;
    text-align: center;
}

/*#endregion*/


/* not used */
/*#region  ****  pos-toolbar  ***  */

/* .page-content.with-pos-toolbar {
    padding-bottom: 50px;
}

.pos-toolbar {
    width: 100%;
    margin: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 500;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    position: absolute;
    height: 50px;
    font-size: 17px;
    background: #f7f7f8;
    bottom: 0;
}

.pos-toolbar>a {
    float: left;
    width: 50px;
    height: 100%;
} */

/*#endregion*/


/*#region  ****  pos tab-container  ***  */

.bFloor-tab-container,
.grid-tab-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 70px;
    float: left;
    display: flex;
    align-items: center;
    overflow: scroll;
}

.bFloor-tab,
.grid-tab {
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    /* width: calc(100%/2); */
    width: 100%;
    min-width: 110px;
    height: 100%;
    cursor: pointer;
    text-align: center;
    border-left: 1px solid #e2e2e236;
    /* ------ */
    font-weight: 700;
    font-size: 18px;
    /* background-color: #636060d4; */
    background-color: gray;
    color: #ffffff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bFloor-tab.active,
.grid-tab.active {
    background-color: #383535;
    color: #ffffff;
    font-size: 25px;
    text-decoration: underline;
}

.tab-delete {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -10px;
    left: -10px;
    background-color: white;
    color: #bdbdbd;
    border: 1px solid #bdbdbd;
    border-radius: 18px;
    text-align: center;
    font-size: 20px;
    /* font-weight: 700; */
}

/*#endregion*/


/*#region  ****  bFloor  ***  */
.bFloor-tab.special {
    max-width: 150px;
    /* color: mediumslateblue; */
    font-size: 20px;
}

.bFloor-container {
    width: 100%;
    height: calc(100% - 70px)
}

.bFloor {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    display: none;
    background-color: mintcream;
}

.bFloor.active {
    z-index: 100;
    display: block;
}

.bFloor-table {
    position: absolute;
    background: #383838;
    color: #eae6e6;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 13px 13px 40px -8px rgb(70, 70, 70);
    -moz-box-shadow: 13px 13px 40px -8px rgb(70, 70, 70);
    box-shadow: 13px 13px 40px -8px rgb(70, 70, 70);
    transform-style: preserve-3d;
}

.bFloor-table::before {
    content: '';
    position: absolute;
    width: 25%;
    height: 25%;
    top: -20%;
    transform: translateZ(-1px);
    background-color: #ffffffd6;
    /* box-shadow: 14px 7px 17px 0px rgb(0, 0, 0); */
    border: 2px solid;
    border-radius: 60%/65px 50px 0 0;
}

.bFloor-table span {
    /* transform: rotate(-30deg); */
    /* background-color: white;
    color: gray; */
    background-color: #0000001c;
    color: #fffefe;
    border-radius: 15px;
    padding: 6px;
    font-size: 24px;
    line-height: 24px;
}

.table-open {
    background: #224792;
}

.invoice-indicator-sample {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
}

.bFloor-table .invoice-indicator {
    position: absolute;
    z-index: 1000;
    top: -30px;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
}

.multi-invoice::after {
    content: 'SP';
    /* width: 20px; */
    /* height: 20px; */
    padding: 5px;
    background: #5959c5;
    color: white;
    position: absolute;
    top: -27px;
    left: 0px;
    font-size: 14px;
    border-radius: 10px;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  popup-pos ***  */

/* @media (min-height: 630px) and (min-width: 630px) {
    .popup.popup-pos:not(.popup-tablet-fullscreen) {
        width: 768px;
        height: 768px;
        max-width: 100%;
        max-height: 100%;
        left: 50%;
        top: 50%;
        margin-left: -384px;
        margin-top: -384px;
        -webkit-transform: translate3d(0, 100vh, 0);
        transform: translate3d(0, 100vh, 0);
    }

    .popup.popup-pos:not(.popup-tablet-fullscreen).modal-in {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
} */

@media (min-height: 630px) and (min-width: 768px) {
    .popup.popup-pos:not(.popup-tablet-fullscreen) {
        width: 768px;
        height: 100%;
        max-width: 100%;
        left: 50%;
        top: 0;
        margin-left: -384px;
        margin-top: 0;
        -webkit-transform: translate3d(0, 100vh, 0);
        transform: translate3d(0, 100vh, 0);
    }

    .popup.popup-pos:not(.popup-tablet-fullscreen).modal-in {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.popup-pos .navbar {
    height: 64px !important;
    /* background: #f9f9f9; IbrahimChange */
}

.md .popup-pos .navbar a.link,
.ios .popup-pos .navbar a.link {
    line-height: 64px;
    height: 64px !important;
}

.popup-pos .page-content {
    padding-top: 64px !important;
    background: #fbfbfbcf;
}

.popup.popup-thin-sm {
    width: 320px;
    margin-left: -160px;
    height: 320px;
    margin-top: -160px;
    left: 50%;
    top: 50%;
}

.popup.popup-md-md {
    width: 440px;
    margin-left: -220px;
    height: 400px;
    margin-top: -200px;
}

.popup.popup-md-sm {
    width: 440px;
    margin-left: -220px;
    height: 300px;
    margin-top: -150px;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  popup order  ***  */

/* .pop-order-discount-container,
.pop-order-note-container,
.pop-order-tax-container,
.pop-order-modifier-container {
    position: relative;
    width: 88%;
    margin: 20px 6%;
    float: left;
    font-size: 15px;
} */

.pop-order-modifier-name {
    position: relative;
    width: 100%;
    float: left;
}

.pop-order-variant {
    position: relative;
    width: 48%;
    height: 60px;
    margin: 8px 1%;
    float: left;
    background-color: #efefef;
    border: 1px solid #80808052;
    color: #4c4c4c;
    padding: 8px;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
}

.pop-order-variant.active {
    background-color: #4c4c4c;
    border: 1px solid #040404;
    color: white;
}

.pop-order-discount,
.pop-order-tax {
    width: 50%;
    position: relative;
    float: left;
}

.pop-order-note {
    width: 58%;
    height: 140px;
    background-color: white;
    margin: 10px 1%;
    position: relative;
    float: left;
    border: 1px solid #a0a0a0a1;
    padding: 10px;
    font-size: 20px;
}

.pop-order-qty-box {
    width: 38%;
    height: 100px;
    position: relative;
    float: right;
    margin: 10px 0% !important;
}

.pop-order-qty {
    width: 100%;
    height: 60px;
    background-color: white !important;
    position: relative;
    float: left;
    text-align: center;
    border: 1px solid #a0a0a0a1 !important;
    font-size: 24px !important;
}

.pop-order-qty-btn {
    width: 50% !important;
    height: 70px !important;
    margin: 10px 0%;
    position: relative;
    font-size: xx-large;
    float: left;
    border: 1px solid #a0a0a0a1 !important;
    font-size: 47px;
    line-height: 0px !important;
    border-radius: 0 !important;
    /* background: #efefef; */
}


/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  station invoice  ***  */

/* .item-content.item-main .item-inner::after {
    z-index: 0;
} */

.station-invoice-detail ul {
    padding-bottom: 5px;
}

.order-voided {
    text-decoration: line-through;
    color: gray
}

.item-content.order-voidReason,
.item-content.item-variant {
    min-height: 20px !important;
    font-size: 14px;
}

.item-content.order-total {
    min-height: 20px !important;
    font-size: 21px;
}

.item-content.order-voidReason .item-inner,
.item-content.order-total .item-inner,
.item-content.item-variant .item-inner {
    min-height: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.item-content.order-times {
    min-height: 18px !important;
    font-size: 17px;
}

.item-content.order-times .item-inner {
    min-height: 18px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* 
.item-content.order-total .item-inner {
    min-height: 20px;
    padding-top: 0px;
    padding-bottom: 4px;
} */

.item-content.order-voidReason .item-title {
    text-decoration: none;
}

.order-discounted {
    width: 43px;
    height: 29px;
    /* background-color: red; */
    background-image: url(../img/discount-tag.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.order-status {
    width: 10px;
    height: 35px;
    position: absolute;
    /* border-radius: 50%; */
    /* top: 30px; */
    left: 0px;
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 38% 62%, 0 88%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 38% 62%, 0 88%, 0 0);
}

.rtl .order-status {
    left: unset;
    right: 0;
}

.order-status.new {
    background-color: lightgreen;
}

.order-status.hold {
    background-color: #ffdc00;
}

.order-status.sent {
    background-color: red;
}

.order-status.returned {
    background-color: #d81e1e;
}

.order-status.voided {
    background-color: #e8e8e8;
}



/* .item-content.item-variant .item-inner::after {
    background-color: #c8c7cc1c !important;
    z-index: 0;
} */

.smart-value-posStation-serviceType {
    /* text-align: center;  */
    padding: 10px 10px;
    font-size: 17px;
}

.station-invoice-header {
    width: 100%;
    height: 43px;
    padding-top: 5px;
    background-color: #fbfbfb;
    border-bottom: 1px solid #80808061;
}

.invoice-service-type {
    width: 45%;
    float: left;
}


.station-ticketNo {
    height: 100%;
    width: 45%;
    float: left;
    /* text-align: center; */
    padding: 14px 0px;
    font-size: 13px;
    color: #757373;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.rtl .invoice-service-type,
.rtl .station-ticketNo {
    float: right;
}

.station-ticketNo::after {
    /* content: ">"; */
    content: "\21E9";
    right: 10px;
    position: absolute;
    font-size: 23px;
    line-height: 21px;
    top: 15px;
}

.rtl .station-ticketNo::after {
    right: unset;
    left: 10px;
}

.station-invoice-detail {
    margin: 0 !important;
    overflow: scroll;
    width: 100%;
    /* height: calc(100% - 150px); */
    height: calc(100% - 44px);
    padding-bottom: 150px;
}

.station-invoice-buttons {
    position: absolute;
    bottom: 0;
    max-height: 110px;
    width: 100%;
    background: #f7f7f7;
    border-top: 1px solid #f98989;
    z-index: 10;
    overflow: hidden;
}

.station-invoice-buttons .btn-50 {
    width: calc(50% - 2px);
    height: 50px;
    float: left;
    font-size: 27px;
    margin: 1px;
    border: 1px solid #0000004d;
    border-radius: 10px;
    background: #484848;
    color: white;
}

.station-invoice-buttons .btn-100 {
    width: calc(100% - 2px);
    height: 50px;
    float: left;
    font-size: 27px;
    margin: 1px;
    border: 1px solid #0000004d;
    border-radius: 10px;
    background: #a0a0a0;
    color: white;
}

/*#endregion*/

/*#region  ****  station invoice buttons animation  ***  */

@-webkit-keyframes animation-hideButton {
    0% {
        display: '';
        height: 50px;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    50% {
        height: 0;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    95% {
        display: '';
        height: 0;
        -webkit-transform: translate(-400px, 0px) rotate(0deg);
    }

    100% {
        display: none !important;
        height: 0;
        -webkit-transform: translate(-400px, 0px) rotate(0deg);
    }
}

@-webkit-keyframes animation-showButton {
    0% {
        display: none !important;
        height: 0;
        -webkit-transform: translate(-400px, 0px) rotate(0deg);
    }

    5% {
        height: 0;
        -webkit-transform: translate(-400px, 0px) rotate(0deg);
    }

    50% {
        display: '';
        height: 0;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        display: '';
        height: 50px;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

.showButton {
    -webkit-animation-name: animation-showButton;
    -webkit-animation-duration: 0.55s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

.hideButton {
    -webkit-animation-name: animation-hideButton;
    -webkit-animation-duration: 0.55s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */
/* --------------------------------------------------------------------------  */

/*#region  ****  posstation media  ***  */
@media (max-width: 768px) {

    .station-left-container,
    .grid-attribute {
        width: calc(100% - 0px);
        height: calc(100% - 149px);
        top: -100%;
        left: 0;
        z-index: 101;
    }

    .station-left-container.show,
    .rtl .station-left-container.show,
    .grid-attribute.show,
    .rtl .grid-attribute.show {
        top: 55px;
        left: unset;
        right: unset;
    }

    .grid-container,
    .rtl .grid-container {
        top: 60px;
        height: calc(100% - 153px);
        left: 5px;
        right: unset;
        width: calc(100% - 10px);
    }

    .grid-tab-container {
        height: 90px;
    }

    .bFloor-tab,
    .grid-tab {
        padding-bottom: 10px;
    }

    .navbar-posStation,
    .rtl .navbar-posStation {
        /* width: calc(100% - 20px); */
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
    }

    .navbar-posStation .right {
        width: auto;
    }

    .holder {
        width: calc(20% - 2px);
        margin: 2px 1px;
        border: solid 2px #c3c3c324;
        box-shadow: 3px 5px 10px -6px rgb(185, 185, 185);
    }

    .box {
        font-size: 27px;
    }

    .box-name {
        font-size: 12px;
        line-height: 12px;
    }

    .show-left-invoice {
        display: flex;
    }
}

@media (max-width: 600px) {
    .pop-order-variant {
        width: 98%;
    }

    .pop-order-note {
        width: 98%;
        margin: 10px 1% 0 1%;
    }

    .pop-order-qty-box {
        width: 98%;
        height: auto;
        margin: 0px 1% !important;
    }

    .pop-order-qty {
        width: 56%;
    }

    .pop-order-qty-btn {
        width: 22% !important;
        height: 60px !important;
        margin: 0;
    }

    .pop-order-discount,
    .pop-order-tax {
        width: 100%;
    }
}

@media (min-width: 1399px) {

    .station-left-container,
    .grid-attribute {
        width: calc(100% - 830px);
        /* height: calc(100% - 149px); */
        /* left: unset; */
        /* right: unset; */
    }

    .navbar-posStation {
        width: calc(100% - 830px);
    }

    /* Start IbrahimChange */
    .grid-container {
        width: 800px;
        right: 10px;
        left: unset;
    }

    .rtl .grid-container {
        right: unset;
        left: 10px;
    }

    /* End IbrahimChange */
}

/*#endregion*/

/* --------------------------------------------------------------------------  */
/* --------------------------------------------------------------------------  */

/*#region  ****  popup invoice pay  ***  */

.input-invoicePaySplit-amount,
.input-invoicePay-tip,
.input-invoicePay-tendered {
    width: 50%;
    height: 60px;
    margin: 0 25% !important;
    background-color: white !important;
    position: relative;
    float: left;
    text-align: center;
    border: 1px solid #a0a0a0a1 !important;
    font-size: 24px !important;
}

.rtl .input-invoicePaySplit-amount,
.rtl .input-invoicePay-tip,
.rtl .input-invoicePay-tendered {
    float: right;
}

.input-invoicePay-tip,
.input-invoicePay-tendered {
    margin: 0 !important;
}

.invoicePay-content-header {
    min-height: 100px;
    color: #6d6d72;
    margin: 25px 0;
}

.paymentMethod-tab-container {
    /* float: right; */
    height: 80px;
    display: flex;
    width: calc(100% - 300px);
    margin: 0px 150px;
    align-items: center;
    /* overflow: scroll; */
    /* position: absolute; */
    /* bottom: 0px; */
}

.paymentMethod.tab-link {
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    width: calc(100%/2);
    min-width: 110px;
    height: 100%;
    cursor: pointer;
    text-align: center;
    border: 1px solid #c3c3c336;
    border-bottom: none;
    font-weight: 600;
    font-size: 20px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.paymentMethod.tab-link-active {
    background-color: #fbfbfb;
    color: #6d6d72;
    font-size: 25px;
    box-sizing: border-box;
    /* border-top: none; */
}

.paymentMethod.tabs-animated-wrap {
    height: calc(100% - 228px);
    border-top: 1px solid #dedede;
    margin-top: -2px;
    /* padding-bottom: 80px; */
    /* padding-top: 50px; */
}

.paymentMethod-tab-content {
    /* width: 100%; */
    padding: 30px 0 !important;
    background-color: #fbfbfb;
    /* height: calc(100% - 200px); */
}

.btn-apply-payment {
    height: 60px !important;
    width: 266px;
    float: right;
    font-size: 32px;
    margin-right: 1%;
}

.rtl .btn-apply-payment {
    float: left;
}

.btn-tender-amount {
    height: 100px !important;
    width: 18%;
    margin: 1%;
    float: left;
    font-size: 19px;
}

.rtl .btn-tender-amount {
    float: right;
}

.container-btn-creditParty {
    display: flex;
    overflow: scroll;
}

.btn-creditParty {
    height: 100px !important;
    max-width: 50%;
    min-width: 20%;
    font-size: 21px;
    margin: 20px auto;
}

.btn-creditParty.active {
    background-color: #000000;
    /* color: white; */
}

.chequeNote {
    float: left;
    width: 60%;
    border: 1px solid #d0d0d0;
    height: 180px;
    padding: 10px;
    background-color: white;
    font-size: 20px;
}

.rtl .chequeNote {
    float: right;
}

/* --------------------------------------------------------------------------  */

.invoicePaySplit-amount-detail {
    float: left;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    font-size: 18px;
}

.btn-splitEqual {
    height: 150px !important;
    width: 23%;
    margin: 1%;
    float: left;
    font-size: 22px;
}

.btn-splitEqual hr {
    margin: 18px;
}

.rtl .btn-splitEqual {
    float: right;
}

.invoicePaySplit-payment-record {
    position: relative;
    float: left;
    width: 100%;
    height: 70px;
    border: 1px solid #d8d8d8;
    border-left: none;
    margin: 5px 0;
    box-sizing: border-box;
    /* padding: 10px; */
    font-size: 30px;
}

.invoicePaySplit-payment-record .method {
    position: relative;
    float: left;
    height: 100%;
    width: 60%;
    display: flex;
    align-items: center;
    margin-left: 30px;
}

.invoicePaySplit-payment-record .amount {
    position: relative;
    float: left;
    height: 100%;
    /* width: 0%; */
    display: flex;
    align-items: center;
    /* margin-left: 30px; */
}

.invoicePaySplit-payment-record button {
    float: right;
    width: 150px;
    height: 100% !important;
    background-color: #efefef;
    border: none !important;
    border-left: 1px solid #d2d2d2 !important;
    font-weight: 700;
    font-size: 21px;
    border-radius: 0 !important;
    color: #007aff;
}

/*#endregion*/

/*#region  ****  payment media  ***  */
@media (max-width: 768px) {
    .paymentMethod-tab-container {
        margin: 0;
        width: 100%;
    }

    .paymentMethod-tab-content {
        padding: 0 !important;
    }

    .input-invoicePay-tip,
    .input-invoicePay-tendered {
        width: 100%;
    }

    .btn-apply-payment {
        width: 100%;
        float: unset;
        top: 5px;
    }

    .container-btn-creditParty {
        display: unset;
    }

    .btn-creditParty,
    .btn-tender-amount {
        height: 65px !important;
        width: 48%;
        margin: 1%;
        float: left;
        /*  needed for creditparty */
    }

    .chequeNote {
        width: 100%;
    }

    .input-invoicePaySplit-amount {
        width: 100%;
        margin: 0 !important;
    }

    .btn-splitEqual {
        width: 48%;
        height: 130px !important;
    }
}

/*#endregion*/


/* --------------------------------------------------------------------------  */

/*#region  ****  popup invoice List  ***  */

.pop-invoice-list-row {
    height: 50px !important;
    font-size: 20px;

}

.pop-invoice-list-row tr {
    vertical-align: middle;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  generalDef  ***  */

.generalDef-logo {
    width: 100%;
    height: 150px;
    /* margin-left: calc(50% - 75px); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.generalDef-span-height {
    width: 100%;
    text-align: center;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  popup invoice split  ***  */
.container-invoiceSplit {
    /* position: relative; */
    /* float: left; */
    width: 100%;
    height: 100%;
    overflow: scroll;
    /* display: flex; */
    /* flex-wrap: nowrap; */
    /* overflow-x: auto; */
    padding: 0 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
}

.iSplit-container {
    position: relative;
    /* float: left; */
    width: 350px;
    height: calc(100% - 100px);
    margin: 50px 20px;
    background-color: white;
    border: 1px solid #efe5e5c9;
    border-radius: 2px;
    /* display: inline-block; */
    ;
    flex: 0 0 auto;
}

.iSplit-header {
    width: 100%;
    height: 50px;
    background: #fffbfb99;
    font-size: 25px;
    line-height: 50px;
    padding-left: 10px;
}

.iSplit-detail {
    margin: 0 !important;
    overflow: scroll;
    width: 100%;
    /* height: calc(100% - 150px); */
    height: calc(100% - 100px);
    padding-bottom: 30px;
}

.iSplit-footer {
    position: absolute;
    height: 50px;
    width: 100%;
    bottom: 0;
    background-color: #eaefb199;
    text-align: center;
    font-size: 22px;
    line-height: 50px;
}

.btn-iSplit {
    width: 100%;
    height: 100% !important;
    font-size: 23px;
    top: 2px;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  popup invoice transfer  ***  */
.container-invoiceTransfer {
    /* position: relative; */
    /* float: left; */
    width: 100%;
    height: 100%;
    overflow: scroll;
    /* display: flex; */
    /* flex-wrap: nowrap; */
    /* overflow-x: auto; */
    padding: 0 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
}

.iTransfer-container {
    position: relative;
    /* float: left; */
    width: 350px;
    height: calc(100% - 100px);
    margin: 50px 20px;
    background-color: white;
    border: 1px solid #efe5e5c9;
    border-radius: 2px;
    /* display: inline-block; */
    ;
    flex: 0 0 auto;
}

.iTransfer-container-middle {
    position: relative;
    width: 150px;
    height: calc(100% - 100px);
    margin: 50px 20px;
    /* background-color: white; */
    flex: 0 0 auto;
}

.iTransfer-header {
    width: 100%;
    height: 50px !important;
    background: #fffbfb99;
    font-size: 25px;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
    display: flex;
}

.iTransfer-detail {
    margin: 0 !important;
    overflow: scroll;
    width: 100%;
    /* height: calc(100% - 150px); */
    height: calc(100% - 165px);
    padding-bottom: 30px;
}

.iTransfer-footer {
    position: absolute;
    height: 50px;
    width: 100%;
    bottom: 0;
    background-color: #eaefb199;
    text-align: center;
    font-size: 22px;
    line-height: 50px;
}

.btn-iTransfer {
    width: 100%;
    height: 80px !important;
    font-size: 23px;
    top: 30%;
    white-space: pre-line;
    word-break: break-word;
    font-weight: 800;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */


.bttable-btn-action {
    width: 100%;
    padding: 10px 15px;
    font-size: 20px;
}


/* --------------------------------------------------------------------------  */

/*#region  ****  general-tab   ***  */

.general-tab-link-container {
    /* float: right; */
    height: 55px;
    display: flex;
    /* width: calc(100% - 300px); */
    /* margin: 0px 150px; */
    align-items: center;
    /* overflow: scroll; */
    /* position: absolute; */
    /* bottom: 0px; */
    overflow: scroll;
    position: static;
}

.general-tab-link.tab-link {
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    width: calc(100%/2);
    min-width: 150px;
    height: 100%;
    cursor: pointer;
    text-align: center;
    border: 1px solid #c3c3c336;
    border-bottom: none;
    font-weight: 600;
    font-size: 20px;
    /* -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; */
}

.general-tab-link.tab-link-active {
    background-color: #ffffff;
    color: #6d6d72;
    /* font-size: 25px; */
    box-sizing: border-box;
    /* border-top: none; */
}

.general-tabs-container {
    height: calc(100% - 55px);
    border-top: 1px solid #dedede;
    margin-top: -2px;
    overflow: scroll;
}

.general-tab {
    background-color: #ffffff;
    overflow: scroll;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  navbar tabs  ***  */

.navbar-tab-container {
    /* height: 100%; */
    height: 49px;
    margin: 3px 0;
}

.navbar-tab.tab-link {
    display: inline-flex;
    /* width: calc(100%/2); */
    min-width: 150px;
    height: 100% !important;
}

.navbar-tab.tab-link-active {
    background-color: #ffffff;
    color: #6d6d72;
    box-sizing: border-box;
    /* font-size: 25px; */
    /* border-top: none; */
}

.go-home {
    margin-left: 20px;
}

.rtl .go-home {
    margin-right: 20px;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  list page with filter header  ***  */
.container-filter-controls {
    min-height: 100px;
    width: 100%;
}

.container-page-with-filter {
    height: calc(100% - 101px);
    width: 100%;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */
/* --------------------TEST NAV DOWN--------------------------  */
/* --------------------------------------------------------------------------  */

/*#region  ****    ***  */

/* .ios .navbar {
    height: 55px;
    bottom: 0;
    top: unset;
    background: #482a2a;
    color: white;
}

.ios .navbar a.link {
    line-height: 55px;
    height: 55px;
    color: white;
}


.ios .navbar ~ *:not(.no-navbar) .page-content, .ios .navbar ~ .page-content {
    padding-top: 0px;
    padding-bottom: 55px;
}

.ios .navbar-hidden {
    -webkit-transform: translate3d(0, +100%, 0);
    transform: translate3d(0, +100%, 0);
} */

/*#endregion*/


/* --------------------------------------------------------------------------  */




.lbl-large {
    font-size: 23px;
    margin: 3px 0;
}

.input-paidInOut-amount {
    width: 50%;
    height: 60px;
    margin: 0 25% !important;
    background-color: white !important;
    position: relative;
    float: left;
    text-align: center;
    border: 1px solid #a0a0a0a1 !important;
    font-size: 24px !important;
}

/* 
.btn-payInOut{
    width: 48%;
    height: 60px;
    font-size: 22px;
    margin: 0 1%;
} */

/* --------------------------------------------------------------------------  */

/*#region  ****  home-page media  ***  */

@media (max-width: 1024px) {

    .card-header-pic-custom {
        height: 15VW;
    }

    .txt-card .maintenance-request {
        padding-left: 5px;
    }
}

@media (max-width: 991px) {
    .my-row-custom {
        justify-content: center;
    }

    .space-div {
        display: none;
    }
}

@media (max-width: 800px) {

    .card-header-pic-custom {
        height: 20VW;
    }
}

@media (max-width: 500px) {

    .txt-card {
        height: 14px;
        font-size: 12px;
    }

    .txt-card span {
        top: calc(100% - 14px);
    }
}

@media (max-width: 425px) {

    .genral-info {
        height: 40px;
        font-size: 10px;
    }

    .weather-icon-img {
        width: 25px;
    }

    .city {
        margin-top: -5px;
    }

    .weather-div {
        margin-top: -6px;
    }
}

/*#endregion*/

/* -------------------------------------------------------  */
/* ------------------------ rtl --------------------------  */
/* -------------------------------------------------------  */

/*#region  ****  rtl  ***  */
.AR {
    display: none;
}

.rtl .AR {
    display: unset;
}

.rtl .EN {
    display: none;
}

.rtl .fixed-table-container thead th:first-child:not([data-not-first-th]),
.rtl .fixed-table-container tbody td:first-child {
    border-left: 1px solid #ddd !important;
    /* set important as we load this css after bootstrap */
}

.rtl .fixed-table-container thead th:last-child:not([data-not-first-th]),
.rtl .fixed-table-container tbody td:last-child {
    border-left: none !important;
    /* set important as we load this css after bootstrap */
}

.rtl th {
    text-align: right !important;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */