/* Move down content because we have a fixed navbar that is 50px tall */
* {
    font-family: 'Yekan' !important;
    box-sizing: border-box !important;
}

.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

.login_form .dxflCaption {
    font-weight: normal;
    color: black;
}

body {
    padding-top: 55px;
    padding-bottom: 20px;
    background-color: #012a2b;
    direction: rtl;
    color: white;
    font-size: 20px !important;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 10px;
    padding-right: 10px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    /*  max-width: 280px;  //1397-8-6 */
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

.dxflFormLayout {
    font-size: 16px;
}
/*toolbar*/
.toolbar {
    background-color: #026669;
    height: 55px;
}

    .toolbar .nav a {
        color: #9ff19f !important;
    }

        .toolbar .nav a:hover {
            color: #00ff00 !important;
        }

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

.logo-box {
    float: right;
}

    .logo-box .b {
        display: block !important;
        width: 100%;
        margin: 0 !important;
        padding: 1px !important;
    }

    .logo-box .a {
        float: right;
    }

    .logo-box .apprequest {
        float: right;
        display: flex;
        margin: 5px 0 0 12px;
        flex-direction: column;
        align-items: center;
        right: 0px;
        font-size: 1rem;
        position: relative;
        padding-left: 8px;
    }

        .logo-box .apprequest a {
            font-size: 1.3rem;
            color: #fff;
        }

    .logo-box a.apprequest-badge {
        background-color: #968c8c;
        border-radius: 50%;
        color: #fff !important;
        text-align: center;
        font-size: 1.5rem;
        padding: 0 10px;
        font-weight: bold;
        text-decoration: none;
    }

    .logo-box .apprequest-badge.show {
        background-color: #ff3939;
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
    }

span#toolbar-date {
    font-size: 1.6rem;
    opacity: 0.5;
    max-width: 215px;
}

/*sidebar*/
.sidebar {
    max-width: 170px;
    padding: 10px;
}

.navbar-header, .navbar-nav {
    float: right;
}

    .navbar-nav > li {
        float: none;
        display: inline-block;
    }

.navbar-brand {
    color: white !important;
    padding: 4px !important;
    padding-left: 30px !important;
}

.navbar-username {
    color: white !important;
    box-shadow: none;
    background: transparent;
    height: 54px;
    padding: 12px !important;
    display: block;
    border: none;
    font-size: 17px !important;
    padding: 10px 0 !important;
    cursor: pointer;
    min-width: 100px;
}

    .navbar-username.expire-soon {
        background: #ff3535 !important;
        text-align: center;
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
    }
    .blink_notifier {
        background: #ff3535 !important;
        text-align: center;
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
    }

/*title*/
.title-bar {
    border-bottom: 2px solid #024169;
    margin: 0;
    height: 45px;
}

    .title-bar h2 {
        padding: 5px 20px 5px 5px;
        margin: 0;
    }

.body-content {
    padding: 10px;
    font-size: 10px !important;
}


/*buttons*/
.btns {
    color: white !important;
    padding: 5px;
    border: none !important;
    display: inline-table;
    text-decoration: none;
    font-size: 2rem;
    text-align: center;
    position: relative;
    margin-bottom: 5px;
    background: transparent;
    height: 42px;
    width: 100% !important;
    max-width: 300px;
}

.btns1 {
    color: white !important;
    padding: 2px;
    text-align: center;
    text-decoration: none;
    display: inline-table;
    border: none !important;
    font-size: 1.5rem;
    position: relative;
    margin: 2px;
    background: transparent;
    width: 90px !important;
    height: 30px;
    /*float: right;*/
    margin-left: 2px;
    text-align: center;
    max-width: 300px;
}

    .btns:hover, .btns1:hover, .btns:focus, .btns1:focus {
        text-decoration: none;
    }

    .btns1.btn-blue {
        background-color: #0240F0;
    }

    .btns1 > .dxb {
        padding-top: 10px !important;
        padding-bottom: 11px !important;
    }
/*small buttons*/
.smallbtns {
    color: white !important;
    padding: 1px;
    display: block;
    border: none !important;
    font-size: 2rem;
    position: relative;
    margin-bottom: 5px;
    background: transparent;
    height: 30px;
}

    .smallbtns.btn-blue {
        background-color: #0240F0;
    }

    .smallbtns.btn-blue-dark {
        background-color: #026669;
    }

    .smallbtns.btn-blue-f {
        background-color: #024d69;
    }


.btns.btn-blue {
    background-color: #024d69;
}

    .btns.btn-blue.loading {
        background-color: #024d69 !important;
        cursor: progress;
    }

.btns1.btn-blue {
    background-color: #024d69;
}

.smallbtns.btn-yellow {
    background-color: #ffd900;
    color: #02394e !important;
}

.btns1.btn-yellow {
    background-color: #ffd900;
    color: #02394e !important;
}

.btns.btn-yellow {
    background-color: #ffd900;
    color: #02394e !important;
}


.btns.btn-green {
    background-color: #00c000;
}

.btns.btn-lblue {
    background-color: #7c7b85;
}

.btns.btn-red {
    background-color: #c00000;
}

.btns.btn-dark-green {
    background-color: #012a2b;
}

.btns.btn-cobalt-blue {
    background-color: #0047ab;
}

.red {
    font-size: 1.5rem;
    background-color: #fff;
    border-radius: 25px;
    padding: 0 10px;
    color: red;
}

.btns.btn-green-accent {
    background-color: #026669;
}

.btns.btn-green-active {
    background-color: #00ff00 !important;
}

.btns.btn-green-accent-light {
    background-color: #42bd9a;
}

.btns.btn-disabled,
.btns.dxbDisabled,
.btns.btn-darkblue.dxbDisabled {
    background-color: #ffffff !important;
    color: #c0c1c1 !important;
}

.btns.btn-image {
    padding-right: 44px;
}

.btn-image img {
    position: absolute;
    right: 10px;
    width: 24px;
    height: 24px;
}


/*login*/
#login_page {
    width: 1000px;
    height: 600px;
    text-align: center;
    background-image: url('../Images/01.jpg');
    background-size: 100%;
    background-color: #204344;
    padding-top: 0px;
    padding-left: 500px;
    margin: auto;
    background-repeat: no-repeat;
}

    #login_page .login_form {
        width: 250px;
        margin: auto;
    }


/*dashboard*/
.dxtcLite > .dxtc-content {
    background: transparent;
    border: none;
}

.dxtcLite > .dxtc-stripContainer {
    border-bottom: 2px solid #026669;
}


    .dxtcLite > .dxtc-stripContainer .dxtc-rightIndent,
    .dxtcLite > .dxtc-stripContainer .dxtc-leftIndent {
        border-bottom: none;
    }

.dxtc-link span.dx-vam {
    color: #fff;
    font-size: 2rem;
    padding: 10px;
}

.dxtcLite > .dxtc-stripContainer .dxtc-tab,
.dxtcLite > .dxtc-stripContainer .dxtc-activeTab {
    background: transparent !important;
    border: none !important;
}

    .dxtcLite > .dxtc-stripContainer .dxtc-activeTab .dxtc-link span.dx-vam {
        color: #ffd900;
    }

.dxtc-spacer {
    display: none !important;
}

.dashboard-panel {
    width: 170px;
    display: inline-block;
    margin-left: 20px;
    vertical-align: top;
}


    .dashboard-panel .dp-title {
        color: #026669;
        display: block;
        text-align: center;
        font-size: 2rem;
        margin-bottom: 10px;
    }

/*factorsell*/

.cardview-box,
.cview-box {
    overflow: auto;
}

    .cardview-box .cardview,
    .cview-box .cview {
        width: 100%;
    }

.dxcvTable {
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0;
}

.dxcvCSD {
    overflow-x: hidden !important;
    margin-top: -14px;
}

table[id=MainContent_MainPanel_ClothGroupASPxPanel_ClothGroupCardView_DXMainTable] .dxcvFlowCard,
table[id=MainContent_ClothGroupASPxPanel_ClothGroupCardView_DXMainTable] .dxcvFlowCard {
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
    padding: 0;
    width: 120px;
    height: 140px;
    text-align: center;
    background-color: #204344 !important;
    cursor: pointer;
}

table[id=MainContent_MainPanel_ClothGroupASPxPanel_ClothGroupCardView_DXMainTable] .dxcvFocusedCard,
table[id=MainContent_ClothGroupASPxPanel_ClothGroupCardView_DXMainTable] .dxcvFocusedCard {
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
    padding: 0;
    width: 120px;
    height: 140px;
    text-align: center;
    background-color: #149b14 !important;
    cursor: pointer;
}

table[id=MainContent_MainPanel_ClothGroupASPxPanel_ClothGroupCardView_DXMainTable] .dxeBase,
table[id=MainContent_ClothGroupASPxPanel_ClothGroupCardView_DXMainTable] .dxeBase {
    background-color: #204344 !important;

}

table[id=MainContent_MainPanel_ClothASPxPanel_ClothCardView_DXMainTable] .dxcvFlowCard,
table[id=MainContent_ClothASPxPanel_ClothCardView_DXMainTable] .dxcvFlowCard,
table[id=MainContent_DescriptionMainGroupASPxPanel_DescriptionMainGroupCardView] .dxcvFlowCard,
table[id=MainContent_DescriptionSubGroupASPxPanel_DescriptionSubGroupCardView] .dxcvFlowCard,
table[id=MainContent_DescriptionASPxPanel_DescriptionCardView] .dxcvFlowCard {
    margin: 5px;
    padding: 0;
    width: 120px;
    height: 130px;
    text-align: center;
    cursor: pointer;
}
/*Robert*/
table[id=MainContent_MainPanel_ClothASPxPanel_ClothCardViewBASE_DXMainTable] .dxcvFlowCard,
table[id=MainContent_ClothASPxPanel_ClothCardViewBASE_DXMainTable] .dxcvFlowCard,
table[id=MainContent_DescriptionMainGroupASPxPanel_DescriptionMainGroupCardView] .dxcvFlowCard,
table[id=MainContent_DescriptionSubGroupASPxPanel_DescriptionSubGroupCardView] .dxcvFlowCard,
table[id=MainContent_DescriptionASPxPanel_DescriptionCardView] .dxcvFlowCard {
    margin: 5px;
    padding: 0;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
}

table[id=MainContent_MainPanel_ClothASPxPanel_ClothCardView_DXMainTable] .dxcvFlowCard {
    height: 30px;
}

table[id=MainContent_DescriptionASPxPanel_DescriptionCardView] .dxcvFlowCard {
    display: inline-block;
    width: 49%;
    margin: 1px !important;
}


/*table[id=MainContent_MainPanel_ClothASPxPanel_ClothCardView_DXMainTable] .dxeBase {
    background-color: #204344 !important;
}*/


table[id=MainContent_MainPanel_ProductCallback_ProductASPxPanel_ProductCardView] .dxcvFlowCard {
    margin: 5px;
    padding: 0;
    width: 140px;
    height: 230px;
    text-align: center;
    cursor: pointer;
}

table[id=MainContent_ProductCallback_ProductASPxPanel_ProductCardView] .dxcvFlowCard {
    margin: 5px;
    padding: 0;
    width: 140px;
    height: 140px;
    text-align: center;
    cursor: pointer;
}

table[id=MainContent_MainPanel_ColorASPxPanel_ColorCardView_DXMainTable] .dxcvFlowCard,
table[id=MainContent_ColorASPxPanel_ColorCardView_DXMainTable] .dxcvFlowCard {
    margin: 5px;
    padding: 0;
    width: 100px;
    height: 100px;
    text-align: center;
    cursor: pointer;
}

table[id=MainContent_MainPanel_ServiceASPxPanel_ServiceCardView_DXMainTable] .dxcvFlowCard {
    margin: 0px;
    border: none;
    padding: 2px;
    width: 160px;
    text-align: center;
    cursor: pointer;
}

table[id=MainContent_MainPanel_ProductPriceFormCallback_ProductPriceListASPxPanel_ProductPriceListCardView_DXMainTable] .dxcvFlowCard,
table[id=MainContent_MainPanel_PriceFormCallback_PriceListASPxPanel_PriceListCardView_DXMainTable] .dxcvFlowCard {
    margin: 0px;
    border: none;
    padding: 2px;
    width: 160px;
    height: 40px;
    text-align: center;
    cursor: pointer;
}
/*PayRcv Bank Items*/
div[id=MainContent_MainPanel_PayRcvCallbackPanel_PayRcvPanel_PayRcvCardView_DXDataCard0] .dxcvFlowCard,
div[id=MainContent_PayRcvCallbackPanel_PayRcvPanel_PayRcvCardView] .dxcvFlowCard { /*MainContent_MainPanel_PayRcvCallback_PayRcvPanel_PayRcvCardView_DXMainTable*/
    margin: 0px;
    border: none;
    padding: 2px;
    width: 600px;
    height: 40px;
    text-align: center;
    cursor: pointer;
}

/*factorsell page items*/
.dxeBase {
    font-size: 16px;
}
/*CustomerCombobox*/
.dxeListBoxItem {
    text-align: center;
}
/*Cloth Group Picture*/
#uploadedImage, .uploadedImage {
    max-width: 100% !important;
    max-height: 120px !important;
}

/*services*/
.service-box .dxcvFlowCard {
    height: auto;
    border: none;
    background: grey;
    cursor: pointer;
}

.service-box .service-name {
    color: #000000 !important;
    text-align: center;
}

.service-box .btns {
    cursor: pointer;
    text-align: center;
}
/**/

/*bank*/
.bank-box .dxcvFlowCard {
    height: auto;
    width: 100%;
    border: none;
    background: grey;
    cursor: pointer;
    float: right;
    display: inline;
    margin-top: 0px;
}

.bank-item .dxcvFlowCard {
    height: auto;
    border: none;
    background: grey;
    cursor: pointer;
    float: right;
    display: inline;
}

.bank-box .smallbtns {
    cursor: pointer;
    text-align: center;
    float: right;
    display: inline-block;
    width: 100px;
    margin: 2px;
}
/**/


/*numpad*/
.nmpd-overlay {
    z-index: 4999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}

.nmpd-grid {
    border: none;
    padding: 20px;
    width: 249px;
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 5000;
    -khtml-user-select: none;
    border-radius: 10px;
    padding: 10px;
    width: initial;
    direction: ltr;
}

    .nmpd-grid button {
        background: #fff;
        border: 1px solid #ccc;
        margin: 3px;
        min-width: 50px;
        min-height: 50px;
    }

        .nmpd-grid button.del,
        .nmpd-grid button.clear,
        .nmpd-grid button.cancel,
        .nmpd-grid button.done {
            min-width: 100px;
            margin-left: 40px;
        }

        .nmpd-grid button.del,
        .nmpd-grid button.clear,
        .nmpd-grid button.cancel {
            font-size: 80%;
        }

        .nmpd-grid button.done {
            background-color: #2ad42a;
            color: #fff;
        }

.nmpd-display {
    max-width: 100%;
    width: 100%;
    margin-bottom: 20px;
    text-align: center !important;
    font-size: 30px;
}

.prc {
    font-size: 80%;
}

/*#MainContent_MainPanel_ClothASPxPanel_ClothCardView [data-clothcode] span {
    
     line-height: 38px;
}*/

.modal-dialog {
    max-width: 800px;
    width: auto;
    color: #000;
}

#MainContent_MainPanel_ASPxPanel1_CustomerTextBox_I {
    cursor: pointer;
}

.selectModal .modal-footer {
    text-align: center;
}

    .selectModal .modal-footer button.btn.btn-success {
        width: 200px;
        font-size: 2rem;
    }

    .selectModal .modal-footer button.btn.btn-secondary {
        float: left;
    }

    .selectModal .modal-footer .btn.btn-secondary.add {
        float: right;
        background: #ccc;
        color: #000;
    }

.show_factor {
    position: relative;
    display: inline-block !important;
}

    .show_factor .sbtn {
        position: absolute;
        top: 3px;
        border-radius: 20px;
        background: #eee;
        left: 6px;
    }

.show_customer .detail {
    display: none;
}

.show_customer.show .detail {
    display: inline-block;
    position: absolute;
    background: #f5f5f5;
    width: 126%;
    padding: 10px;
    right: -15%;
    margin-top: -1px;
    border: 1px solid #ccc;
    border-top: none;
    box-shadow: 1px 7px 9px #333;
    color: #333;
    z-index: 9;
}

.show_customer .detail > div {
    text-align: right;
}

.show_customer .detail .label {
    color: #333;
    font-weight: normal;
    min-width: 80px;
    display: inline-block;
    text-align: right;
}

.show_customer .detail .value {
    color: #333;
    font-weight: bold;
    text-align: right;
}

.SumBox .show_factor {
    display: block !important;
}

.alert {
    max-width: 600px;
    margin: auto;
    position: fixed;
    z-index: 1031;
    left: 0;
    top: -100px;
    right: 0;
}

.dxgvTable_Glass {
    color: #000;
}

/*Sum Factor*/
.SumInput {
    background: white;
    height: 31px;
    color: black;
    width: 57%;
    min-width: 100px;
    display: inline-flex;
    margin: 1px;
    background-color: white;
    padding: 0 10px;
    align-items: center;
    text-align: center;
}



.SumInputLabel {
    padding-left: 2px;
    text-align: left;
}

.TakhfifLabel {
    padding: 0px;
    display: flex;
    margin-left: 0px;
    margin-top: 2px;
    justify-content: flex-end;
}


    .TakhfifLabel table {
        padding: 0px;
        height: 30px;
        background-color: white;
    }

    .TakhfifLabel > span {
        font-size: 1.5rem;
    }

.dxDisabled {
    opacity: 0.5;
}


.dxcvFocusedCard {
    outline: 0px !important;
}
/* form buttom menu */
.dxbButton div.dxb {
    padding: 3px 8px 4px;
    border: none !important;
}

.web-reporter {
    direction: ltr;
}

.TouchScroller {
    position: relative;
}

.filter-icon {
    padding: 3px 28px;
    background: #ffd900;
    color: #02394e;
    margin-top: 10px;
    display: inline-block;
    clear: both;
    border-radius: 10px 10px 0 0;
    /*display: -webkit-inline-box;*/
}

    .filter-icon .filter {
        display: none;
    }

    .filter-icon.active .filter {
        display: inline-block;
    }

.d-desc {
    position: relative;
}

    .d-desc > span {
        position: absolute;
        z-index: 22;
        top: 0;
        padding: 8px;
        background: #dcdcdc;
        left: 0;
    }

    .d-desc input {
        padding-left: 25px !important;
    }

.descriptioncardview {
    width: 100% !important;
}

.TouchScrollerDown .t-scroller .cview-box {
    max-height: 200px;
}


.inpt,
.inpt input {
    background: #fff;
    margin-top: 2px;
    color: #000 !important;
    font-size: 12pt !important;
    padding: 0;
    text-align: center;
}

.so-form-panel {
}

    .so-form-panel .md {
        display: inline-block;
        width: 202px;
        vertical-align: top;
    }

        .so-form-panel .md.label {
            vertical-align: top;
            font-weight: normal;
            line-height: 30px;
            text-align: left;
            width: 96px;
        }

        .so-form-panel .md.label1 {
            vertical-align: top;
            font-weight: normal;
            color: yellow;
            line-height: 30px;
            text-align: center;
            width: 110px;
        }

        .so-form-panel .md.time {
            width: 100px;
        }

    .so-form-panel .show_factor.md,
    .so-form-panel .show_factor.md > table {
        width: 150px;
    }

        .so-form-panel .show_factor.md.grp,
        .so-form-panel .show_factor.md.grp > table {
            width: 134px;
        }

.barcode-box {
    position: absolute;
    left: 12px;
    display: flex;
    align-items: center;
    margin-top: 2px;
    z-index: 1;
}

    .barcode-box > .md {
        display: inline-block;
    }

        .barcode-box > .md.label {
            vertical-align: top;
            font-weight: normal;
            line-height: 30px;
            text-align: left;
        }

.rcall-box, .rsms-box {
    display: none !important;
}

.rcall .rcall-box,
.rsms .rsms-box {
    display: block !important;
}

.rcall-box {
    padding: 5px;
    margin-right: 0px;
    text-align: center;
    flex: 1;
}

li.rcall-box > span {
    margin-right: 10px;
}

.title-bar .rcall-box > .link {
    display: inline-block;
    padding: 2px 14px !important;
    margin-right: 40px;
    color: #4e3636 !important;
    background: #fff;
    border-radius: 20px;
    text-decoration: none;
    -moz-transition: all .51s;
    -o-transition: all .51s;
    -webkit-transition: all .51s;
    transition: all .51s;
}

    .title-bar .rcall-box > .link:hover {
        border-radius: 10px;
    }

.title-bar .rcall-box > .exit {
    font-size: 90%;
    margin-right: 70px !important;
    cursor: pointer;
}

.title-bar.rcall {
    background-color: #c71818;
}

.rrbox, .rsbox {
    display: flex;
    padding: 0;
}

.rsms-box {
    background-color: #e8bb15;
    flex: 1;
    overflow: auto;
    height: 43px;
}

.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.rsms-box div {
    display: block;
    border-bottom: 1px solid #fff;
    font-size: 80%;
}

.rsms-box .name {
    padding-right: 10px;
}

.rsms-box .text {
    display: block;
}

.so-form-panel .md.date-input {
    direction: ltr;
    text-align: center;
    width: 125px;
    
}
.so-form-panel .input {
    direction: ltr;
    text-align: center;
    width: 125px;
    height: 50px;
    font-size:xx-large;
}

.date-input {
    font-size: 20px;
    text-align: center;
    border: none;
}


/*parde*/
.parde-size {
    display: inline-flex;
    padding: 10PX;
    align-items: center;
}

.parde-size-calc {
    font-size: 14px;
    background: #FFFF00;
    padding: 0 10px;
    color: #000;
    margin-right: 10px;
    border-radius: 17px;
}

    .parde-size-calc .PardeSize {
        font-size: 20px;
        padding-left: 9px;
    }

/*فونت لوکاپ*/
.dxgvEditFormDisplayRow td.dxgv, .dxgvDetailCell td.dxgv, .dxgvDataRow td.dxgv, .dxgvDetailRow.dxgvADR td.dxgvAIC {
    overflow: hidden;
    border-bottom: 1px Solid #CFCFCF;
    border-right: 1px Solid #CFCFCF;
    border-top-width: 0;
    border-left-width: 0;
    padding: 3px 6px 4px;
    font-size: large;
}


.modal-body, .modal-header {
    background-color: lightslategray;
    margin-top: 0px;
}

.modal-header {
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

    .modal-header > span {
        font-size: 2rem;
        margin-right: 20px;
    }

.modal-footer {
    background-color: lightslategray;
    text-align: center;
}

.hidden-btn {
    display: none !important;
}


.content-hidden > * {
    display: none !important;
}



/*pie*/
.set-size {
    font-size: 2.5em;
    float: left;
}

.charts-container:after {
    clear: both;
    content: '';
    display: table;
}

.pie-wrapper {
    height: 1em;
    width: 1em;
    float: left;
    position: relative;
}

    .pie-wrapper:nth-child(3n + 1) {
        clear: both;
    }

    .pie-wrapper .pie {
        height: 100%;
        width: 100%;
        clip: rect(0, 1em, 1em, 0.5em);
        left: 0;
        position: absolute;
        top: 0;
    }

        .pie-wrapper .pie .half-circle {
            height: 100%;
            width: 100%;
            border: 0.1em solid #3498db;
            border-radius: 50%;
            clip: rect(0, 0.5em, 1em, 0);
            left: 0;
            position: absolute;
            top: 0;
        }

    .pie-wrapper .label {
        background: #34495e;
        border-radius: 50%;
        bottom: 0.4em;
        color: #ecf0f1;
        cursor: default;
        display: block;
        font-size: 0.25em;
        left: 0.4em;
        line-height: 2.8em;
        position: absolute;
        right: 0.4em;
        text-align: center;
        top: 0.4em;
    }

        .pie-wrapper .label .smaller {
            color: #bdc3c7;
            font-size: .45em;
            padding-bottom: 20px;
            vertical-align: super;
        }

    .pie-wrapper .shadow {
        height: 100%;
        width: 100%;
        border: 0.1em solid #bdc3c7;
        border-radius: 50%;
    }

    .pie-wrapper.style-2 .label {
        background: none;
        color: #7f8c8d;
    }

        .pie-wrapper.style-2 .label .smaller {
            color: #bdc3c7;
        }

.pie-wrapper--solid {
    border-radius: 50%;
    overflow: hidden;
}

    .pie-wrapper--solid:before {
        border-radius: 0 100% 100% 0 / 50%;
        content: '';
        display: block;
        height: 100%;
        margin-left: 50%;
        -webkit-transform-origin: left;
        transform-origin: left;
    }

    .pie-wrapper--solid .label {
        background: transparent;
    }

    .pie-wrapper--solid.pie-progress {
        background: linear-gradient(to right, #e67e22 50%, #34495e 50%);
    }

        .pie-wrapper--solid.pie-progress:before {
            background: #e67e22;
            -webkit-transform: rotate(-270deg);
            transform: rotate(-270deg);
        }
/*pie*/

.gen-title span, .service-title span {
    display: inline-flex;
    padding: 1px;
    padding-left: 20px;
    margin-left: 10px;
    margin-bottom: 1px;
    padding-right: 20px;
    background: #ccc;
    border: 1px solid #ccc;
    font-size: 18px;
    min-width: 50px !important;
    float: left;
}

.service-title span {
    float: right;
}


    .service-title span.normal {
        background: transparent;
        border-color: transparent;
    }

.service-title span {
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
}

    .gen-title span.active, .service-title span.active {
        background-color: #ffd900;
        border: 1px solid Black;
    }

.AllReadyActive {
    background-color: #ffd900 !important;
    border: 1px solid Black;
    background-color: #ffd900 !important;
    background-repeat: no-repeat;
    border: 1px solid Black;
    background-image: none;
}

.itemname {
    padding: 20px;
    margin-top: 20px;
}

.dxtcFixed label {
    color: #fff;
}

.SelectDescription {
    color: black;
    font-size: 18px;
}

.sodoor_date {
    width: 100%;
}

    .sodoor_date.active {
        background-color: darkorange;
    }

.UserName-box {
    float: left;
    position: relative;
}


    .UserName-box .popup {
        display: none;
        position: absolute;
        background-color: #026669;
        padding: 10px;
        left: -20px;
        width: 200px;
        min-width: 160px;
        border-radius: 0 0 10px 10px;
        text-align: center;
    }

        .UserName-box .popup ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .UserName-box .popup ul span {
                font-size: 1.6rem;
            }

            .UserName-box .popup ul li:first-child span {
                font-size: 1.6rem;
                color: yellow !important;
            }

            .UserName-box .popup ul li:nth-child(2) span {
                font-size: 1.6rem;
                color: #00ff00 !important;
            }

            .UserName-box .popup ul li:nth-child(3) {
                margin-top: 10px;
            }

            .UserName-box .popup ul li:nth-child(6) {
                margin-top: 10px;
            }

            .UserName-box .popup ul li:last-child {
                margin-top: 10px;
            }

    .UserName-box:hover .popup {
        display: initial;
    }

.header-menu {
    margin: auto;
    float: none !important;
}

.c .ctext {
    margin: auto;
}

.regalModal > .modal-dialog {
    width: 1330px !important;
    max-width: none !important;
}

.regal_box {
    direction: ltr;
    font-size: 2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 60vh;
    overflow: auto;
}


    .regal_box > .regal_item {
        margin-right: 10px;
        margin-bottom: 5px;
        padding: 0 10px;
        background-color: #fff;
        border-radius: 5px;
        cursor: pointer;
        width: 65px;
        text-align: center;
        float: left;
    }



        .regal_box > .regal_item.disabled {
            background-color: #a2a2a2 !important;
            color: #666;
            cursor: not-allowed;
        }


        .regal_box > .regal_item.active {
            background: #9eec4b;
        }

        .regal_box > .regal_item.first {
            clear: both;
        }

        .regal_box > .regal_item.last {
            position: relative;
        }

            .regal_box > .regal_item.last:after,
            .regal_box > .regal_item > span {
                color: #9eec4b;
                position: absolute;
                left: 85px;
                width: 25px;
                text-align: center;
            }

                .regal_box > .regal_item > span.empty {
                    color: #bbb !important;
                }

.showing {
    display: block !important;
}

.btn-left {
    float: left;
}

.normal-style .dxeEditArea.dxeDisabled,
.normal-style .dxeDisabled .dxeMemoEditArea {
    color: black;
}

.toolbar-UserName {
    display: none;
}


/*chat*/
.chatroom {
    position: fixed;
    left: 10px;
    bottom: 0;
    background-color: #fff;
    width: 200px;
    border-radius: 10px 10px 0 0;
}

    .chatroom .title {
        background: #ff6600;
        font-size: 0.8em;
        padding: 2px 10px;
        border-radius: 10px 10px 0 0;
        cursor: pointer;
    }

    .chatroom .list {
        display: none;
        color: #333;
    }

        .chatroom .list.show {
            display: block;
        }

    .chatroom .room {
        cursor: pointer;
        border-bottom: 1px solid #ccc;
        padding: 2px 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .chatroom .room:last-child {
            border-bottom: none;
        }

        .chatroom .room .time {
            font-size: 0.8em;
            color: #999;
        }

        .chatroom .room .count {
            border-radius: 10px;
            color: red;
            font-size: 0.8em;
        }

.chat {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    flex: 1;
}

    .chat .input {
        flex: 1;
    }

    .chat .messages_box {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        .chat .messages_box .hit {
            align-self: center;
        }

    .chat .dotindicator {
        align-self: center;
    }

    .chat .message_box {
        display: flex;
        flex-direction: column;
        margin: 5px;
        margin-right: 50px;
        background-color: rgb(213, 236, 193);
        padding: 5px 10px;
        border-radius: 20px;
        align-self: flex-end;
        min-width: 100px;
        cursor: pointer;
    }

        .chat .message_box.me {
            background-color: rgb(193, 226, 236);
            align-self: flex-start;
            margin-right: 0px;
            margin-left: 50px;
        }

    .chat .message {
        word-break: break-word;
    }

    .chat .name {
        font-size: 0.7em;
        color: #666;
    }

    .chat .time {
        font-size: 0.6em;
        color: #666;
        text-align: left;
    }

    .chat .message_box.date {
        flex-direction: row;
        margin: 0 auto;
        background-color: rgb(224, 224, 224);
        min-width: 100px;
        justify-content: center;
        color: rgb(148, 148, 148);
    }

.chat-actions .message_send_box {
    background: white;
    padding: 0 10px 10px;
}

.chat-actions .login_text {
    font-size: 12px;
    color: #fff;
    padding: 10px;
}

.chat-actions .login_container {
    background-color: #2e7d32;
    padding: 10px;
    border-radius: 25px;
    border: none;
    height: 50px;
    margin: 2px 10px 0 0;
    min-width: 50px;
}

.chat-actions .flatWrap {
    /* marginBottom: 10; */
    flex-direction: row;
    display: flex;
}

.message-input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 10px;
}

.chatModal .modal-body, .chatModal .modal-header, .chatModal .modal-footer {
    background-color: #fff;
    color: #222;
}


.chat {
    max-height: 60vh;
    overflow: auto;
}

.chatModal .modal-dialog {
    padding-top: 0;
    padding-bottom: 0;
}


.modal {
    background: rgba(0,0,0,0.5);
}

    .modal.show {
        display: block;
    }

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.captcha input {
    font-size: 35px !important;
    text-align: center;
    font-family: Times New Roman !important;
}

.captcha .dxcaRefreshButton, .captcha .dxeErrorCell {
    font-size: 15px;
}


/*factorsell*/
.sell-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.row {
    margin: 0;
}

.sell-footer > div:nth-child(2) {
    flex: 1;
}

.FooterSumBox {
    padding: 10px 10px 0 0;
}

.dxeSpinIncButton, .dxeSpinDecButton {
    display: none;
}

.page-title {
    display: flex;
    align-items: center;
}

    .page-title .help-link {
        color: #ccc;
        text-decoration: none;
        font-size: 0.8em;
        display: none;
    }

        .page-title .help-link.show {
            display: initial;
        }

        .page-title .help-link i {
            /*background-color:#fff;*/
            /*border:2px solid #fff;*/
            width: 30px;
            height: 30px;
            /*border-radius:15px;*/
            /*font-size:0.8em;*/
            text-align: center;
            /*line-height:19px*/
        }

.dropZoneExternal img {
    max-width: 200px;
    max-height: 200px;
}

.remove-icons {
    display: none;
    cursor: pointer;
}

body.public {
    padding-top: 25px;
}

    body.public .toolbar, body.public .chatroom {
        display: none;
    }


.title-bar .rcall-box .detail {
    display: none;
}

.title-bar .rcall-box .name {
    cursor: default;
}

    .title-bar .rcall-box .name:hover + .detail {
        display: inline-block;
        position: absolute;
        background: #f5f5f5;
        width: 35%;
        padding: 10px;
        right: 28%;
        margin-top: 40px;
        border: 1px solid #ccc;
        border-top: none;
        box-shadow: 1px 7px 9px #333;
        color: #333;
        z-index: 9;
        text-align: right;
    }

.title-bar .rcall-box .detail .label {
    color: #333;
    font-weight: normal;
    min-width: 80px;
    display: inline-block;
    text-align: right;
}

.title-bar .rcall-box .detail .value {
    color: #333;
    font-weight: bold;
    text-align: right;
}

.title-bar .rcall-box.isnew .detail,
.title-bar .rcall-box.isnew .name,
.title-bar .rcall-box.isnew .orders {
    display: none;
}


/* notification */
body .marquee {
    display: none;
    color: #27ff00;
    width: 200px;
    height: 28px;
    overflow: hidden;
    direction: ltr;
}

.marquee .js-marquee {
    direction: rtl;
}

body.show_notification .marquee {
    display: block;
}

body.show_notification .navbar-brand {
    display: none !important;
}

label {
    font-weight: normal !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 17px;
        width: 17px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #1aa51a;
}

input:focus + .slider {
    box-shadow: 0 0 1px #1aa51a;
}

input:checked + .slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }


/*App Request*/
.receive-header {
    background: #b0b0f5;
}

.receive-item {
    background-color: #d7d7f5;
}

.dxgvFocusedRow_Glass .receive-item {
    background-color: #a3a3de;
}

.deliver-header {
    background: #7af589;
}

.deliver-item {
    background-color: #c8f3c7;
}

.dxgvFocusedRow_Glass .deliver-item {
    background-color: #90dc92;
}

.chbx {
    text-align: right;
}

.times-container, .addresses-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .times-container > div {
        display: flex;
        align-items: center;
    }

    .addresses-container > div {
        display: flex;
        align-items: center;
        border-radius: 30px;
        padding: 0 10px;
        margin-bottom: 10px;
    }

        .times-container > div > div:first-child, .addresses-container > div > div:first-child {
            margin-left: 10px;
        }

    .times-container > div input {
        width: 80px;
        text-align: center;
    }

    .addresses-container > div > div.addr {
        display: flex;
        flex: 1;
    }

    .addresses-container span.select {
        border-radius: 22px;
        padding: 0 10px;
        margin-left: 10px;
        background-color: #fff;
        cursor: pointer;
    }

    .addresses-container > div > div:first-child input {
        width: 100px;
    }

    .addresses-container > div > div.addr input {
        flex: 1;
    }

    .addresses-container > div input.old {
        background: transparent;
        max-width: 100%;
        border: none;
        color: #fff;
    }



    .times-container > div .delete,
    .addresses-container > div .delete {
        color: #cc2a2a;
        font-size: 30px;
        cursor: pointer;
        margin-left: -14px;
    }


.AppRequestBtn {
    display: none !important;
}

.grp-box {
    display: inline-flex;
}

.show_facorsell_warning::before {
    content: "";
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background: rgba(0,0,0,0.7);
}

.timer_factorsell_warning_notification {
    display: none;
}

.show_facorsell_warning .timer_factorsell_warning_notification {
    display: flex;
    position: fixed;
    top: 20%;
    left: 0;
    align-items: center;
    text-align: center;
    right: 0;
    font-size: 2em;
    justify-content: center;
    z-index: 9999999;
    flex-direction: column;
    padding: 0 20px;
    z-index: 1070;
}

    .show_facorsell_warning .timer_factorsell_warning_notification .message {
        color: red;
    }

    .show_facorsell_warning .timer_factorsell_warning_notification .timer {
        display: flex;
        direction: ltr;
    }

.btn-bg-image {
    background-size: 24px;
}

input:disabled {
    color: #4e4e4e !important;
    background: #fff;
}


.date input {
    direction: ltr;
    text-align: right;
}

.btn-loading .btns.btn-blue.dxeDisabled {
    cursor: progress;
}

.error-text {
    font-size: .7em;
}

.flex-1 {
    flex: 1;
}

.text-left {
    text-align: left;
}


.bolder {
    font-weight: bold;
    font-size: 20px;
}



.detail-grid {
    padding: 20px;
    background: #fff;
    display: flex;
    color: Black;
    align-items: baseline;
    margin: 10px 0;
    border: 1px solid #7eacb1;
    flex-wrap: wrap;
    font-size: 1.3em;
}

    .detail-grid > div:first-child {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, 1fr);
        flex: 1;
    }

        .detail-grid > div:first-child > span:first-child {
            font-size: 1.5em;
        }

    .detail-grid > div:last-child {
        flex-basis: 100%;
    }

        .detail-grid > div:last-child > div {
            display: flex;
            align-items: center;
        }

            .detail-grid > div:last-child > div > div {
                max-width: 200px;
                margin-right: 10px;
            }



.mt-10 {
    margin-top: 10px;
}

.tabs {
    display: flex;
    margin: 10px 0;
    justify-content: space-evenly;
}

    .tabs > h2 {
        background-color: #748485;
        margin-left: 25px;
        padding: 10px 25px;
        border-radius: 15px;
        cursor: pointer;
    }

        .tabs > h2.active {
            background-color: #026669;
        }

.left125 {
    min-width: 125px !important;
    text-align: left;
}


.dfx {
    display: flex;
    align-items: center;
}

    .dfx button {
        height: 100%;
        padding: 5px 10px;
    }



.sbt {
    border-radius: 20px;
    color: #000000;
    font: 12px Tahoma, Geneva, sans-serif;
    border: 1px solid #7F7F7F;
    background: #eee;
    padding: 3px 8px 4px;
}

.lrt-cell-grid {
    direction: ltr;
    text-align: center;
}

.btn-server-render{
    background-image: none;
}