/*kendo*/
/* Hide scrollbar for Chrome, Safari and Opera */
/*.flex-container-judul2::-webkit-scrollbar {
    display: none;
}
containerScroll/* Hide scrollbar for IE, Edge flex-contain Firefox */
/*.dx-theme-ios7 .dx-selectbox-container .dx-texteditor-input {
    font-size: 10px;
    padding: 3px;
}

.dx-theme-ios7 .dx-selectbox-container .dx-placeholder {
    font-size: 10px;
}*/
/*variable*/
/*CARA 3 HOR SCROLL*/
/*::-webkit-scrollbar {
    display: none;
}*/
/*::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}


::-webkit-scrollbar-button {
    width: 2px;
    height: 2px;
}*/
/*salesman*/
/*flexbox centering*/
/*.flex-container {
    display: flex;
    height: 300px;
    justify-content: center;
    align-items: center;
}*/
/*<div class="flex-container" >
<div style="flex-grow: 1" > 1</div >
<div style="flex-grow: 1" > 2</div >
<div style="flex-grow: 8" > 3</div >
</div >*/
/*.k-grid td {
    border-width: 0;
}*/
/*inputorderjualconnected*/

/*https://docs.telerik.com/kendo-ui/styles-and-layout/components-rendering-overview*/
/*OLD CLASS NEW CLASS
k-state-default         N/A
k-state-active          k-active
k-state-selected        k-selected
k-state-disabled         k-disabled
k-state-focus           k-focus
k-state-hover           k-hover*/


/*#gridPopupHistoryJualCustomer .k-grid-content {
    min-height: 100px;
    max-height: 400px;
}*/

/*https://www.jquery2dotnet.com/2013/07/counter-notification-css-on-inbox-top.html*/
/*sample badge notification*/


.k-map .k-i-marker-custom-marker {
    background-image: var(--urlbgtitikGpsVg);
    /*background-image: url('https://home.connectedapp.my.id/gambarConnected/connecteddemo/titikgps.jpg');*/
    background-size: 18px;
    width: 18px;
    height: 18px;
}



.app-box {
    width: 90%;
    margin-top: 15px;
}

.app-title {
    /*font-size: 24px;
    font-weight: bold;*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-top: 5px;
}

.reminder {
    /*background: white;
    height: 45px;
    margin-bottom: 24px;*/
    position: relative;
    
}

.notifications {
    border: 5px solid #f9f9f9;
    border-radius: 50%;
    height: 20px;
    font-size: 14px;
    /*font-weight: bold;*/
    left: 90%;
    line-height: 20px;
    margin: -16px 0 0 -16px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 20px;
}

.red {
    background:red;
}

.red-shadow {
    /*-webkit-box-shadow: 4px 4px 6px rgba(217, 56, 60, 0.75);
    -moz-box-shadow: 4px 4px 6px rgba(217, 56, 60, 0.75);
    box-shadow: 4px 4px 6px rgba(217, 56, 60, 0.75);*/
}

.green {
    background: #4cbe83;
}

.green-shadow {
    -webkit-box-shadow: 4px 4px 6px rgba(76, 190, 131, 0.75);
    -moz-box-shadow: 4px 4px 6px rgba(76, 190, 131, 0.75);
    box-shadow: 4px 4px 6px rgba(76, 190, 131, 0.75);
}

.blue {
    background: #6cc8d4;
}

.blue-shadow {
    -webkit-box-shadow: 4px 4px 6px rgba(108, 200, 212, 0.75);
    -moz-box-shadow: 4px 4px 6px rgba(108, 200, 212, 0.75);
    box-shadow: 4px 4px 6px rgba(108, 200, 212, 0.75);
}

.yellow {
    background: #feb742;
}

.yellow-shadow {
    -webkit-box-shadow: 4px 4px 6px rgba(254, 183, 66, 0.75);
    -moz-box-shadow: 4px 4px 6px rgba(254, 183, 66, 0.75);
    box-shadow: 4px 4px 6px rgba(254, 183, 66, 0.75);
}

.purple {
    background: #9d5da0;
}

.purple-shadow {
    -webkit-box-shadow: 4px 4px 6px rgba(157, 93, 160, 0.75);
    -moz-box-shadow: 4px 4px 6px rgba(157, 93, 160, 0.75);
    box-shadow: 4px 4px 6px rgba(157, 93, 160, 0.75);
}

.k-dropdowngrid-popup .k-table-row .k-alt { /* customize the styles of the items in the popup */
    /*background-color: #FFDFDD !important;*/
    background-color: antiquewhite !important;
}
.k-dropdowngrid-popup .k-table-row { /* customize the styles of the items in the popup */
    /*background-color: #FFDFDD !important;*/
    background-color: burlywood !important;
    border:none;
}

.k-dropdowngrid-popup .k-selected { /* customize the styles of the selected items in the popup */
    background-color:forestgreen !important;
    /*border: 2px solid #E56E94 !important;*/
}   

tr.k-alt {
    color: black;
    background-color: antiquewhite !important;
    font-size:16px;
    height:25px;
}
 

tr {
    color: black;
    font-size: 16px;
    height: 25px;
    background-color: burlywood !important;
}
 
    tr.k-selected {
        color: black;
        background-color:Highlight !important;
    }

.highlighted-row {
    background-color: #eeffee;
}

    .highlighted-row.k-alt {
        background-color: #ccffcc;
    }


.k-widget.k-tooltip-validation {
    border-color: green;
    background-color: lightgreen;
    color: #000;
}

#reportViewer1 {
    position: absolute;
  
    left: -5px;
    right: 0px;
    top: 0px;
    bottom: 10px;
    overflow: hidden;
    font-family: Verdana, Arial;
}

.wrapperSignaturePad {
    position: relative;
    width: 100%;
    height: 100%;
    /*-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
   
}
.wrapper {
    display: grid;
   
}

.wrapper3 {
    display: flex;
    flex-direction: row;
    text-align:center;
    vertical-align:middle;
    color:white;
    background-color:deepskyblue;
    text-transform:uppercase;
    max-height:60px;
}


.wrapper3col {
    flex: 1;
    height: 50px;
    width: 100%;
    background: transparent;    
    margin: 0 auto;
    display: flex;    
    justify-content: center;    
    align-items: center;   
}

    .wrapper3col:first-child {
        width: 64px; /* Or a percentage value */
        flex: initial;
        background: transparent;
    }
    .wrapper3col:last-child {
        width: 64px; /* Or a percentage value */
        flex: initial;
        background: transparent;
    }

.wrapper2 {
    display: flex;
    flex-direction: row;
    text-align: center;
    vertical-align: middle;
    /*color: white;*/
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
}


.wrapper2col {
    flex: 1;
    background: transparent;
}

    .wrapper2col:first-child {
        width: 64px; 
        flex: initial;
        background: transparent;
    }

.smallFont {
    font-size: 12px;
    padding-left: 3px;
    font-family: "Times New Roman", Times, serif;
}
.k-icon-12 {
    font-size: 12px;
}
.k-icon-24 {
    font-size: 24px;
}

.k-icon-32 {
    font-size: 32px;
}
.k-icon-36 {
    font-size: 36px;
}

.k-icon-48 {
    font-size: 48px;
}



/* Base layout */
.connected-attach-document-Popup {
    /*width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;*/
    display: flex;
    flex-direction: column;
    height: 100vh; /* FULL SCREEN HEIGHT */
    overflow: hidden; /* supaya scroll tidak double */
}

/* Header */
.wrapper3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    background-color: deepskyblue;
    text-transform: uppercase;
    height: 50px;
    font-weight: bold;
    justify-content: space-between;
}

.wrapper3col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

    .wrapper3col:first-child,
    .wrapper3col:last-child {
        width: 64px;
        flex: 0 0 64px;
    }


.boxconnected-attach-document-Popup-1 {
    flex: 0 0 auto; /* tingginya mengikuti isi */
    overflow: visible;
}


.boxconnected-attach-document-Popup-2 {
    /*flex: 1; 
    overflow-y: auto;
    overflow-x: hidden;*/

    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

.label {
    font-weight: bold;
    margin-bottom: 4px;
}

.objectkendo input {
    width: 100% !important;
    box-sizing: border-box;
}

/* === MEDIA QUERIES === */

/* 📱 Small phones (portrait) */
@media (max-width: 480px) {
    .connected-attach-document-Popup {
        font-size: 12px;
    }


    /* Reduce top so grid has space to scroll */
    /*#top_ConnectedAttachDocumentAllPopup {
        min-height: 120px !important;
        max-height: 160px;
        overflow: hidden;
        transition: max-height .25s ease-out;
    }*/

    /*#top_ConnectedAttachDocumentAllPopup {
        max-height: 260px !important; 
    }

    #gridtemplatePopupAttachDocumentAll .k-grid-content {
        height: calc(100vh - 260px) !important;
        max-height: calc(100vh - 260px) !important;
    }*/


    #top_ConnectedAttachDocumentAllPopup {
        max-height: none !important; /* allow natural size */
        height: auto !important;
    }

    #gridtemplatePopupAttachDocumentAll .k-grid-content {
        /*height: calc(100vh - 100px) !important; 
        max-height: calc(100vh - 100px) !important;*/
        max-height: calc(100vh - 40px) !important;
        height: calc(100vh - 40px) !important;
        overflow-y: auto !important;

    }


    /* Enable smooth scrolling on mobile grid */
    .boxconnected-attach-document-Popup-2 {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }


    .wrapper3 {
        flex-direction: row; /* tetap 1 baris */
        height: 50px; /* konsisten */
        justify-content: space-between; /* kiri - tengah - kanan */
        padding: 0 4px;
        text-align: center;
    }

    .wrapper3col {
        flex: 1;
        padding: 0;
    }

        .wrapper3col:first-child,
        .wrapper3col:last-child {
            flex: 0 0 50px; /* icon kiri & loader kanan tetap kecil */
            width: 50px;
        }

    /*.boxconnected-attach-document-Popup-1 #top_ConnectedAttachDocumentAllPopup {
        min-height:200px;
    }*/

    .boxconnected-attach-document-Popup-1 .row {
        flex-direction: column;
    }

    .col-sm-6.col-md-4 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }

    #uploadAttachDocumentAllContainer {
        width: 100% !important;
    }
}

/* 📲 Phones (landscape) & small tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .connected-attach-document-Popup {
        font-size: 13px;
    }

    .wrapper3col {
        padding: 0 6px;
    }

    .col-sm-6.col-md-4 {
        width: 50%;
    }
}

/* 💻 Tablets (portrait & landscape) */
@media (min-width: 769px) and (max-width: 1024px) {
    .connected-attach-document-Popup {
        font-size: 14px;
    }

    .wrapper3 {
        height: 55px;
    }

    .col-sm-6.col-md-4 {
        width: 50%;
    }
}

/* 🖥️ Desktop / large screens */
@media (min-width: 1025px) {
    .connected-attach-document-Popup {
        font-size: 15px;
    }

    .wrapper3 {
        height: 60px;
    }

    .col-sm-6.col-md-4 {
        width: 33.3333%;
    }
}




.myinformationNotification {
    background-color: green;
    height: auto;
}

.myWarningNotification {
    background-color: red;
    height: auto;
}

.k-i-calendar {
    width: 10px;
    height: 10px;
    background: red;
    margin: 0 3px;
}


.k-picker-wrap .k-input {
    height: 1.7em;
    line-height: 1.7em;
    min-height: 1.7em;
    font-size: 100%;
}

.k-picker-wrap {
    height: 1.7em;
}

    .k-picker-wrap .k-select {
        height: 1.7em;
        min-height: 1.7em;
        line-height: 1.7em;
    }

.gridRowFontTablet {
    padding-top: 2px;
    font-weight: normal;
    font-size: 12px;
    font-family: "Times New Roman", Times, serif;
    min-height: 25px;
    /*white-space: pre*/
}

.loaderCenter {
    /*position:fixed;*/
    top: 50%;
    left: 50%;
    z-index: 90000000;
}

.dologin1Css {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    background-color: white;
    color: black;
    font-weight: bold;
}
/*.dologin1Css :focus {
        background-color: deepskyblue;
    }*/

.fieldlist {
    margin: 0 0 -1em;
    padding: 0;
}

    .fieldlist li {
        list-style: none;
        padding-bottom: 1em;
    }

#overlay-drawer {
    border: 0;
}

.k-drawer-content {
    padding: 1em;
}

#example .demo-section {
    max-width: 640px;
}


.zindex1juta {
    z-index: 1000000;
}

.dropdown-header {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    padding: 0px;
    background-color:transparent;
    line-height: normal;
    word-wrap: break-word;
    white-space: nowrap;
}


/*#cnt_subgroup_-list.dropdown-header {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    padding: 0px;
    line-height: normal;
    word-wrap: break-word;
    white-space: nowrap;
}*/



#containerdropdowndrItemConnectedGlobal-list.dropdown-header {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    padding: 0px;
    line-height: normal;
    word-wrap: break-word;
    white-space: nowrap;
}

#containerdropdownCustomerInputOrderJualConnected-list .dropdown-header {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    padding: 0px;
}

#dropdownSalesmanInputOrderJualConnected-list .dropdown-header {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    padding: 0px;
}

#dropdownGudangStockOpnameConnected-list .dropdown-header {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    padding: 0px;
    color: white;
}
#containerdropdownBarangInputStockOpnameConnected-list .dropdown-header {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    padding: 0px;
    color: white;
}
#containerdropdownJenisTrxMasukStockOpname-list .dropdown-header {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    padding: 0px;
    color: white;
}


.wrap {
    display: flex;
    /*background: #ccc;*/
    width: 100%;
    justify-content: space-between;
}


.grow div:nth-child(1) {
    flex: 1;
}

.grow2 div:nth-child(2) {
    flex: 1;
}

.wrapjudul {
    display: flex;
    /*background: #ccc;*/
    width: 100%;
    justify-content: space-between;
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
    text-transform: uppercase;
    height: 40px;
    color: var(--ColorJudulSalesman);
    font-weight: bold;
    font-size: 20px;
}

.iconJudul {
    width: 40px;
    padding-left: 4px;
}

.captionJudul {
    text-align: center;
    line-height: 16px;
    font-size:16px;
    white-space: pre-wrap;
    padding-top: 3px;
}

.fontCart {
    height: 25px;
    color: black;
    text-align: right;
    vertical-align: middle;
    font-weight: bold;
    padding-top: 10px;
    font-size: 17px;
    font-family: 'Times New Roman', Times, serif;
   
}

.fontCartRPNew {
    height: 25px;
    color: black;
    text-align: right;
    vertical-align: middle;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Times New Roman', Times, serif;
    
}

.daftarSOSalesmanBottom {
}
/*.k-image {

    object-fit: contain;
    width: 70px;
    height: 50px;
}*/
.gridConnected {
    margin: 4px;
    padding-left: 2px;
    margin-bottom: 60px;
}

.displaynone {
    display: none;
}

.bottomCaption {
    font-weight: bold;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
}

.divbottom {
    display: block;
    position: fixed;
    bottom: var(--divbottomPosition);
    left: 0px;
    width: 100%;
}

.divbottomFuncton {
    background-color: lavender;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height:100%;
}



/* Base Layout */


/* Make the login container always take full screen and center content */
.loginForm1 {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* avoid cut edge on small screens */
    box-sizing: border-box;
    background: #f5f5f5; /* optional */
}

/* The login box should not overflow */
.loginBox {
    width: 100%;
    max-width: 350px;
    min-height: 380px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;
}


/* Logo */
.brand_logo {
    width: 120px;
    max-width: 35vw;
    height: auto;
    object-fit: contain;
}

/* Phones – Portrait */
@media (max-width: 480px) and (orientation: portrait) {
    .loginBox {
        max-width: 90vw;
        min-height: 380px;
    }

    .brand_logo {
        max-width: 45vw;
    }
}

/* Phones – Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .loginForm1 {
        height: auto;
        padding-top: 20px;
    }

    .loginBox {
        max-width: 80vw;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .loginBox {
        max-width: 400px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .loginBox {
        max-width: 420px;
    }
}


.km-switch-container {
    background-color: deepskyblue;
}

.km-switch-on .km-switch-container {
    background-color: deepskyblue;
}


.k-button > .k-loader {
    margin-right: 8px;
}

.customStep {
    font-size: 12px;
    text-align: center;
}

.WizardRegistrasiData1 {
    /*display: flex;*/
    margin-top: 20px;
    margin-bottom: 2px;
    height: 525px;
    width: 100%;
    padding-left: 1px;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    /*justify-content: center;
    align-items: center;*/
}

.popupNotification {
    width: var(--lebarPopupNotification);
    height: 85px;
    display: flex;
    flex-direction: column;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    font-size: 14px;
    font-weight: normal;
    background-color: blue;
    color: white;
}

.breakword {
    text-align: center;
    padding-top: 0px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    height: 53px;
    color: white;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.popupNotificationHideTextSource {
    text-align: left;
    padding-top: 0px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    display: none;
}

.popupNotificationHideTextNotran {
    text-align: left;
    padding-top: 0px;
    font-family: 'Times New Roman', Times, serif;
    display: none;
}

.popupNotificationButton {
    text-align: left;
    padding: 6px 6px 6px 6px;
    padding-top: 1px;
    padding-right: 5px;
    margin-right: 5px;
    margin-bottom: 4px;
    font-family: 'Times New Roman', Times, serif;
    width: 100px;
    height: 20px;
    border: solid;
    border-color: burlywood;
    background-color: chocolate;
    font-size: 12px;
    text-transform: uppercase;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-align: center;
    border-radius: 30px;
    color: white;
}



.flex-container-navbar-connected-col {
    display: flex;
    flex-direction: column;
    width: 100px;
    padding-bottom: 2px;
    overflow-y: scroll;
    z-index: 500000;
    justify-content: center;
}



.dx-placeholder {
    /*color: green;*/
    text-align: left !important;
    width: 100% !important;
    vertical-align: middle !important;
    line-height: 12px;
    font-size: 12px;
}

.captionGrid {
    font-size: 12px;
    display: inline-block;
    height: 20px;
    color: black;
    /*background-color:red;*/
}

.grid-header {
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    font-size: 12px;
    font-weight: normal;
    color: black !important;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    height: auto;
    display:flex;
    flex-direction:column;
    /*line-height: 2px;*/
   
   /*display: inline-block;*/
}

.k-grid-header .k-header {
    height: 30px;
    padding: 0;
    background-color: chocolate;
    color: black;
}

.qtyCheckoutOrderCustomerSalesman {
    padding-right: 8px;
    font-weight: bold;
    font-size: 14px;
    color: blue;
    text-align: right;
    line-height: 14px;
}

.namaitemCheckoutCustomerOrderSalesman {
    padding-left: 8px;
    font-weight: bold;
    font-size: 12px;
    color: black;
    text-align: left;
    line-height: 12px;
}

.gambarPopupAttachDocument {
    height: 180px;
    width: 180px;
    padding: 0 0 0 0;
    /*display: inline-block;*/
    border-radius: 15px;
    background-size: 175px 175px;
    background-position: center center;
    vertical-align: middle;
    /*background-position: center;*/
    background-repeat: no-repeat;
    /*background-size: cover;*/
}

.kodeitemCheckoutOrderCustomerSalesman {
    padding-left: 8px;
    font-size: 12px;
    color: black;
    text-align: left;
    line-height: 12px;
}

.OpnameItemAndQty {
    padding-left: 8px;
    font-size: 14px;
    color: black;
    text-align: left;
    line-height: 14px;
}


.fontGridPopupAttachDocument {
    margin-top: 10px;
    padding-left: 2px;
    font-size: 15px;
    color: black;
    text-align: left;
    line-height: 20px;
    font-family: "Times New Roman", Times, serif;
}

.satuanCheckoutCustomerOrderSalesman {
    padding-left: 8px;
    font-size: 12px;
    color: black;
    text-align: left;
    line-height: 12px;
}

.kodesatuanCheckoutCustomerOrderSalesman {
    width: 100px;
    font-size: 12px;
    font-weight: bold;
    /*background-color: aqua;*/
}

.discountCheckoutCustomerOrderSalesman {
    width: 400px;
    font-size: 12px;
    font-weight: bold;
}

.deleteCheckoutCustomerOrderSalesman {
    width: 50px;
    font-size: 24px;
    color: red;
    margin-right: 5px;
    /*background-color: yellow;*/
}

.editCheckoutCustomerOrderSalesman {
    width: 50px;
    font-size: 24px;
    color: blue;
    margin-right: 5px;
}

.orderLagiDaftarSOSalesman {
    width: 100px;
    height: 30px;
    font-size: 12px;
    /*background-color: yellow;*/
}

.orderLagi1TrxDaftarSOSalesman {
    width: 170px;
    height: 30px;
    font-size: 12px;
}

.hargaCheckoutCustomerOrderSalesman {
    padding-right: 8px;
    font-weight: bold;
    width: 150px;
    font-size: 14px;
    color: blue;
    text-align: right;
    line-height: 14px;
    /*background-color: greenyellow;*/
}


.samadenganCheckoutCustomerOrderSalesman {
    font-size: 11px;
    width: 5px;
    text-align: center;
}

.salesman-customerOrder-Cart-Container {
    display: flex;
    height: 37px;
    /*background-color: orange;*/
    width: 100%;
    justify-content: flex-start;
    /*border: solid;
    border-color: white;
    border-radius: 10px;*/
}

.salesman-checkoutCustomerOrderSalesman-Cart-Container {
    display: flex;
    height: 37px;
    /*background-color: orange;*/
    width: 100%;
    justify-content: space-between;
    /*margin-left: auto;*/
    /*border: solid;
    border-color: white;
    border-radius: 10px;*/
}

.salesman-customerOrder-Cart {
    height: 40px;
    /*background-color: aqua;*/
    width: 50px;
}

.grow1 div:nth-child(2) {
    flex: 1;
    background-color: green;
}

.salesman-customerOrder-RPCart {
    height: 40px;
    background-color: beige;
    color: white;
    text-align: right;
    vertical-align: middle;
    font-weight: bold;
    padding-top: 5px;
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
}

.container-badgeku-cart-CustomerOrderSalesman {
    position: relative;
    background-color: yellow;
    width: 50px;
    height: 30px;
}

.container-badgeku-cart-PopupBarangConnected {
    position: relative;
    width: 50px;
    height: 30px;
}

.container-badgeku-Rpcart-CustomerOrderSalesman {
    position: relative;
    width: 50px;
    height: 30px;
}

.container-badgeku-cart-CustomerOrderSalesman-top {
    position: absolute;
    top: var(--topBadgeCartCustomerOrderSalesman);
    left: var(--leftBadgeCartCustomerOrderSalesman);
    color: red;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
}

.container-badgeku-cart-checkoutCustomerOrderSalesman-top {
    position: relative;
    /*text-align:center;*/
    color: red;
    padding-left: 15px;
    font-weight: bold;
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
    margin-top: -30px;
}

.container-badgeku-cart-PopupBarangConnected-top {
    position: absolute;
    top: var(--topBadgeCartCustomerOrderSalesman);
    left: var(--leftBadgeCartCustomerOrderSalesman);
    color: red;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
}
.connectedNumber {
    font-weight: normal;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    /*width: 100%;*/
    display: flex;
    text-align: right;
    height: auto;

    flex-direction: row;
}
    .connectedNumber .rp {
        width: 15px;
        text-align: left;
    
    }
    .connectedNumber .rpValue {
        flex-grow: 1;
        text-align: right;
        width:100%;
        padding-right:2px;
        word-break:break-all;      
    }
    .connectedNumber .Value {
        flex-grow: 1;
        text-align: right;
        width: 100%;      
        word-break: break-all;
    }
.flex-containerEnd {
    font-weight: normal;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    text-align: left;
    width: 100%;
    display: flex;
    height: auto;
    justify-content: flex-end;
    flex-direction: column;
}

.lblProsesCalculateSOSal {
    width: 360px;
}

.janjibayarcashPBC {
    width: 100px;
    /*background-color:yellow;*/
}

.flex-containerFill {
    display: flex;
    /*align-items: stretch;*/
    background-color: #f1f1f1;
    height: 60px;
    padding-bottom: 20px;
}

    .flex-containerFill > div {
        background-color: DodgerBlue;
        color: white;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }

.gridPiutangCustomerHide {
    /*height: 100%;
    width: 100%;*/
    display: none;
}

.displayBlank {
    display: none;
}

.Wrappercenter1Col {
    display: flex;
    flex-direction: row;
    justify-content: center;

}
    .Wrappercenter1Col div {  
        align-items: center;
    }
    .Wrappercenter1Col canvas {
        align-items: center;
    }

   
.btnOkCancelTakePictureIndex {
    display: flex;
    flex-direction: row;
    width: 99%;
    height: 60px;
    justify-content: center;
    margin-top: 7px;
}
    .btnOkCancelTakePictureIndex div {
        border: 1px solid black;
        margin: 10px;
        height: 60px;
        align-items: center;
    }

.gridPiutangCustomerShow {
    /*height: 100%;
    width: 100%;*/
}

.gridkunjungancustomer {
    font-family: 'Times New Roman', Times, serif;
    font-size: 13px;
    color: black;
}

.gridkunjungancustomerNilai {
    font-family: 'Times New Roman', Times, serif;
    font-size: 13px;
    color: black;
    padding-right: 4px;
    text-align: right;
    width: 145px;
}

.gridMstBarangCustomerOrderSalesman {
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    /*color: black;*/
    white-space: pre-wrap;
    text-transform: uppercase;
}

.gridMstBarangCustomerInvoiceJualSalesman {
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    /*color: black;*/
    white-space: pre-wrap;
    text-transform: uppercase;
}

.gridMax2RowText {
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    color: black;
    white-space: pre-wrap;
    /*text-transform: uppercase;*/
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.gridCekPosisiSalesman {
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    color: black;
    white-space: pre-wrap;
    /*text-transform: uppercase;*/
    line-height: 12px;
}


.box1SearchCustomerKunjunganCustomer {
    width: auto;
    height: 33px;
}

.flex-container-justify-center {
    display: flex;
    justify-content: center;
    height: 50px;
    /*background-color:red;*/
    z-index: 1000;
}

.flex-container-justify-center-popupbarang {
    display: flex;
    justify-content: center;
    width: var(--lebarWindow);
    height: 50px;
    /*background-color:red;*/
    z-index: 1000;
}

.equal2 {
    width: 50%;
    height: 50px;
    /*background-color:aqua;*/
    height: 50px !important;
    padding: 3px 3px 3px 3px;
    /*padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 8px;*/
    /*margin: auto;*/
}

.equal1 {
    width: 100%;
    /*background-color:aqua;*/
    height: 50px !important;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    /*margin: auto;*/
}

.equal2_Kecil {
    width: 20%;
    /*background-color:aqua;*/
    height: 50px !important;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
}

.equal2_Besar {
    width: 80%;
    /*background-color:aqua;*/
    height: 50px !important;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
}

.dialogConnected .k-window-titlebar,
.dialogConnected .k-window-actions {
    background-color: whitesmoke;
    color: black;
}

.dialogConnectedSuccess .k-window-titlebar,
.dialogConnectedSuccess .k-window-actions {
    background-color: limegreen;
    color: white;
}
/*.dialogConnectedError .k-window-actions*/

.dialogConnectedError .k-window-titlebar
{
    background-color: red;
    color: white;
    font-size: 8px;
}

.dialogConnectedSuccess .k-window-titlebar {
    background-color:forestgreen;
    color:white;
    font-size: 8px;
    font-weight:bold;
}

.dialogConnected .k-window-titlebar {
    background-color:burlywood;
    color: white;
    font-size: 8px;
}



.bgJudulConnected {
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
}
.flex-intervalAging {   
    padding: 0px 0px 0px 0px;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    font-weight: bold;

}
.flex-judulku1 {
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    /*background-image: url(../images/bgSalesmanHeaderJudul.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    padding: 0px 0px 0px 0px;
    text-transform: uppercase;
    display: flex;
    text-align: center;
    width: 100%;
    flex-direction: row;
    height: 40px;
    color: var(--ColorJudulSalesman);
    font-weight: bold;
    font-size: 20px;
    justify-content: center;
    align-items: center;
}

    .flex-judulku1 .colicon {
        /*width: var(--lebarjudulicon);*/
        padding-left: 5px;
        text-align: left;
        color:red;       
        font-size:48px;
        font-weight:bold;
        /*background-color: var(--bgColorSalesman);*/
        /*margin: auto;*/
    }

    .flex-judulku1 .coljudul {
        text-transform: uppercase;
        width: 100%;
        /*background-color: var(--bgColorSalesman);*/
        font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
        font-size: 16px;
        line-height:12px;
        font-weight: 400;
        padding-left: 10px;
        text-align: center;
        white-space: pre;
    }



.flex-judulku1 .coljudulCheckout {
    text-transform: uppercase;
    color: lawngreen;
    width: var(--lebarjudulcaption);
    /*background-color: var(--bgColorSalesman);*/
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding-left: 10px;
    /*line-height: 26.4px;*/
    line-height: 16px;
    margin: auto;
}

.flex-judulku {
    padding: 0px 0px 0px 0px;
    text-transform: uppercase;
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    /*background-image: var(--urlbgSalesmanheaderJudulVg);*/
    display: flex;
    flex-direction: row;
    height: 40px;
    color: var(--ColorJudulSalesman);
    font-weight: bold;
    font-size: 20px;

    justify-content: center;
    align-items: center;
}
    .flex-judulku .colicon {
        /*width: var(--lebarjudulicon);*/
        padding-left: 5px;
        text-align: left;
        width: 48px;
        font-size:48px;
        font-weight:bold;
        color:red;
        /*margin: auto;*/
    }

    .flex-judulku .coljudul {
        flex: 1;
        text-transform: uppercase;
        font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding-left: 10px;
        line-height: 16px;
        text-align:center;
       
    }

.flex-judulkuNEW {
    /*padding: 0px 0px 0px 0px;*/
    text-transform: uppercase;
    background-image: var(--urlbgsalesmanhomeVg);
    display: flex;
    flex-direction: row;
    height: var(--tinggiFlexJudulkuNEW);
    color: var(--ColorJudulSalesman);
    font-weight: bold;
    font-size: 20px;
    padding-top: var(--paddingTopFlexJudulkuNEW);
}

    .flex-judulkuNEW .colicon {
        width: var(--lebarjudulicon);
        padding-left: 5px;
        /*margin-top:30px;*/
    }

    .flex-judulkuNEW .coljudul {
        text-transform: uppercase;
        width: var(--lebarjudulcaption);
        font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding-left: 10px;
        line-height: 26.4px;
    }

.flex-containernew1 {
    padding-top: 0px;
    height: 20px;

    background-color: transparent;
    display: flex;
    flex-direction: row;
    /*height: 30px;*/
}

.flex-containernew1AutoHeight {
    padding-top: 0px;
    min-height: 17px;
    height:auto;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    margin-bottom:3px;
    /*height: 30px;*/
}


.flex-containerConnected {
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    justify-content: center ;
    height:100%;  
    /*height: 30px;*/
}

  


.flex-containernew2 {
    padding-top: 10px;
    height: 40px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    /*height: 30px;*/
}

.flexCheckInCustomer {
    display: flex;
    flex-direction: row;
    overflow: scroll;
    /*background-color:orange;*/
}

.flex-containernew {
    padding-top: 5px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    /*height: 30px;*/
}

.flex-containernewEnd {
    padding-top: 5px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content:flex-end;
    /*height: 30px;*/
}

.colGambarSalesmanHome {
    height:144px;
    width: 144px;
}

    .flex-containernew .labelMulaiKerja {
        width: 130px;
        padding-top: 5px;
        text-align: right;
        /*font-family: 'Times New Roman', Times, serif;
        font-size: 14px;
        font-weight:bold;
        text-transform:uppercase;*/
    }

    .flex-containernew .labelUbahPasswordSaya {
        width: 170px;
        padding-top: 5px;
        text-align: right;
        font-family: 'Times New Roman', Times, serif;
        font-size: 14px;
    }

    .flex-containernew .oneButton {
        width: 100%;
        padding: 5px 5px 5px 5px;
        text-align: center;
        font-weight: bold;
        height: 50px;
        font-size: 24px;
    }

    .flex-containernew .compMulaiKerja {
        /*background-color:moccasin;*/
        width: var(--lebarcompMulaiKerja);
        text-align: left;
    }

    .flex-containernew .compUbahPassword {
        width: var(--lebarcompUbahPassword);
        text-align: left;
    }

.labelRegisterNewUser {
    width: 90%;
    padding-top: 5px;
    text-align: left;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.btnUbahPassword {
    margin: auto;
    width: 90%;
    text-align: center;
    margin-top: 20px;
    color: black;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    font-weight: bold;
}

.salesman-checkInCustomer-Profile {
    text-align: left;
    text-transform: uppercase;
    padding-top: 3px;
    padding-bottom: 3px;
    /*padding-left: 5px;*/
    font-size: 16px;
    color: var(--clSalesmanHome);
}

.salesman-checkInCustomer-Caption {
    text-align: left;
    text-transform: uppercase;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    font-size: 14px;
    line-height: 14px;
    font-weight:bold;
    font-family: 'Times New Roman', Times, serif;
    color: var(--clSalesmanHome);
}

.popup-stockopname-connected {
    text-align: left;
    text-transform: uppercase;
    padding-top: 3px;
    padding-bottom: 1px;
    padding-left: 3px;
    font-size: 15px;
    line-height: 15px;
    color: black
}

.salesman-checkInCustomer-Limit-CaptionR {
    text-align: right;
    text-transform: uppercase;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    font-size: 13px;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    /*font-family: 'Segoe UI';*/
    color: var(--clSalesmanHome);
}

.salesman-ApproveLimitKredit-Label {
    text-align: left;
    text-transform: uppercase;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    font-size: 14px;
    height:200px;
    color: var(--clSalesmanHome);
}

.salesman-checkInCustomer-Limit-CaptionCurr {
    text-align: right;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    font-size: 11px;
    color: var(--clSalesmanHome);
}



.salesman-home-namapt {
    text-align: left;
    text-transform: uppercase;
    padding-top: 10px;
    padding-left: 15px;
    font-size: 16px;
    color: var(--clSalesmanHome);
}

.headerAndroid {
    /*""*/
    /*background-image: var(--bgSalesmanHeaderJudul);*/
    /*background-image: url(../images/bgSalesmanHeaderJudul.jpg);*/
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    height: 32px;
    /*background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    position: relative;
    padding: 0 0 0 0;
    z-index: 1000;
}
/*#salesmanFotoHome {
    background-color: transparent;
    border-radius: 50%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    background: url("http://192.168.1.3/gambarfurniture/salesman.png");
}*/
.salesman-home {
    /*background-image: url("http://192.168.1.3/gambarfurniture/bgsalesmanhome.jpg");*/
    background-image: var(--urlbgsalesmanhomeVg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*background-image: linear-gradient(to right, red, white);*/
    /*background-color: #cccccc;*/
    /*height: 40%;*/
    top: 0px;
    height: var(--tinggiSalesmanHome);
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
}

.salesman-home-new {
    /*background-image: url("http://192.168.1.3/gambarfurniture/bgsalesmanhome.jpg");*/
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    /*background-image: url(../images/bgSalesmanHome.jpg);*/
    /*background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 53%, rgba(0,212,255,1) 100%);*/
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    /*background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    /*background-image: linear-gradient(to right, red, white);*/
    /*background-color: #cccccc;*/
    /*height: 40%;*/
    top: 0px;
    height: 200px;
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
}

.salesman-checkInCustomer {
    background-image: var(--urlbgsalesmanhomeVg);
    width: 100%;
    height: 60%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 0 0 0 0;
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
}

.salesman-checkInCustomer2 {
    width: 100vw;
    /*height: 60%;*/
    height: 225px;
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    /*background-image: var(--urlbgsalesmanhomeVg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x:hidden;
    overflow-y: unset;
    /*overflow-x:auto;*/
}

.containerdalamsearchCatalogProduk1 {
    position: relative;
    padding: 0 0 0 0px;
    /*margin: 0 20px;*/
    /*background-color:yellow;*/
    /*direction: rtl;*/
    width: 100%;
    text-align: left;
    /*background: #ddd;*/
}

#ImageSearchCatalogProduk {
    position: absolute;
    /*bottom: 2px;*/
    padding-top:3px;
    left: 1px;
    width: 24px;
    height: 24px;
    margin: auto;
    /*text-align: center;*/
}


.searchCatalogProduk1 {
    display: flex;
    z-index: 20000;
    margin-left:3%;
    margin-right:5%;
    width: 90%;
    position: absolute;
    left: 0px;   
    top: var(--topSearchCatalogProduk1);
    padding: 5px 5px 5px 5px;
    padding-top: var(--marginTopSearchCatalogProduk1);
    /*height: 40px;*/
    height: var(--tinggiSearchCatalogProduk1);
    background-color: var(--backgroundColorSearchCatalogProduk1);
}

.searchCatalogProduk2 {
    display: flex;
    z-index: 20000;
    width: 100%;
    position: absolute;
    left: 0px;
    top: var(--topSearchCatalogProduk1);
    padding: 30px 0px 0px 0px;
    height: var(--tinggiSearchCatalogProduk1);
    background-image: var(--urlbgsalesmanhomeVg);
}

.salesman-CustomerOrder-PopupBarang {
    /*background-image: var(--urlbgPopupBarangVg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    background: rgb(61,119,79);
    background: radial-gradient(circle, rgba(61,119,79,1) 0%, rgba(33,111,66,1) 87%, rgba(96,182,123,1) 97%);
    width: var(--lebarWindow);
    height: 105px;
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    /*border-bottom-right-radius: 30px 20px;*/
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
    /*overflow-x:auto;*/
}

.connected-StockOpname-PopupBarang {
    /*background-image: var(--urlbgPopupStockOpnameInputBarangVg);*/
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    width: var(--lebarWindow);
    height: 195px;
    background-size: 100% 195px;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    /*border-bottom-right-radius: 30px 20px;*/
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    /*display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;*/
    /*overflow-x:auto;*/
}

.connected-StockOpname-PopupBarang-Content {
    width: var(--lebarWindow);
    /*background-size: 100% 110px;
    background-position: center center;
    background-repeat: no-repeat;*/
    /*background-color:yellow;*/
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    /*border-bottom-right-radius: 30px 20px;*/
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    height:auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /*display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;*/
    /*overflow-x:auto;*/
}

.connected-attach-document-Popup {
    /*background-image: var(--urlbgPopupBarangVg);*/
    width: var(--lebarWindow);
    height: var(--tinggiWindow);
    /*height:100%;
    min-height:100%;*/
    /*height: 110px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    position: relative;
    padding: 0 0 0 0;
    /*background-color:rebeccapurple;*/
    /*border-bottom-left-radius: 50px 30px;*/
    /*border-bottom-right-radius: 30px 20px;*/
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
    /*overflow-x:auto;*/
}
#ScrollView1HomeSalesman {
    height: 100% !important;
}
.connected-Flex-FullScreen {
    width: 100%;
    /*height: 100vh;*/
    height: 100vh !important; /* ikut tinggi layar */
    /*height: var(--tinggiWindow);*/
    position: relative;
    /*background-color: lightgoldenrodyellow;*/
    padding: 0 0 0 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
}

.connected-Flex-FullScreen-NoScroll {
    width: 100%;
    height: var(--tinggiWindow);
    /*height: var(--tinggiWindow);*/
    position: relative;
    /*background-color: lightgoldenrodyellow;*/
    padding: 0 0 0 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: unset;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
}
.connected-Flex-FullScreen-NoScroll2 {
    width: 101vw;
    height: 100vh;
    /*height: var(--tinggiWindow);*/
    position: relative;
    /*background-color: lightgoldenrodyellow;*/
    padding: 0 0 0 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: unset;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
}
.connected-stock-opname-Popup {
    width: var(--lebarWindow);
    height: var(--tinggiPopup);
    background-color: transparent;
    max-height: 100vh;
    position: relative;
    padding: 0 0 0 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.connected-stock-opname-PopupFixed {
    width: var(--lebarWindow);
    height: var(--tinggiPopup);
    background-color: transparent;
    max-height: 100vh;
    position: absolute;
    padding: 0 0 0 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


.boxconnected-stock-opname-Popup-1 {
    background-color: transparent;
    width: 100%;
    flex: 1 !important;
}

/*.boxconnected-stock-opname-Popup-2 {
    background-color: transparent;
    height: 72px;
    width: 100%;
}*/

.boxconnected-stock-opname-Popup-2 {
    background-color: transparent;
    height: 72px;    
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white; /* or match your theme */
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

.boxconnected-stock-opname-Popup-2B {
    background-color: transparent;
    height: 55px;
    width: 100%;
}
#containercmdCheckoutCustomerOrderSalesman {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white; /* or match your theme */
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

#containercmdAllCheckoutCustomerInvoiceJualSalesman {
    position: fixed!important;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white; /* or match your theme */
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}


#containercmdAllCustomerInvoiceJualSalesman {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white; /* or match your theme */
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

#containercmdCustomerOrderSalesmanConnected {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white; /* or match your theme */
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}



#containercmdDaftarSOSalesman {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white; /* or match your theme */
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}



@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.boxconnected-navbar-main {
    background-color: transparent;
    height: 55px;
    width: 100%;
}
.flex-container-navbar-connected {
    display: flex;
    border-top: solid;
    border-color: lightgray;
    background-color: white;
    height: 55px;
    width: 100%;
    overflow-y: scroll;
    padding: 0px 0px 0px 0px;
    padding-top:3px;
    /*z-index: 0;*/
    justify-content: center;
    border-radius: 30px;
}


.boxconnected-attach-document-Popup {
    text-align: center;
    color: white;
    font-family: sans-serif;
    font-size: 36px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.boxconnected-attach-document-Popup-1 {
    background-color: transparent;
    min-height: 60px;
    border-bottom: solid;
    border-color: grey;
    /*border-top: solid;*/
}
.boxconnected-TTD-document-Popup-1 {
    background-color: transparent;
    min-height: 170px;
    border-bottom: solid;
    border-color: grey;
}
.flexEnd {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.flexCenter {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.divclosePopupConnected {
    background-color: deepskyblue;
    height: 30px
}


.boxconnected-attach-document-Popup-3 {
    background-color: red;
    height: 60px;
}

.salesman-background {
    /*background-image: var(--urlbgsalesmanhomeVg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
}

.salesman-CustomerOrder {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(112,112,168,1) 17%, rgba(0,212,255,1) 100%);
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    width: 100%;
    height: 165px;
    /*background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: unset;
    /*overflow-x:auto;*/
}

.salesman-CustomerOrder-LimitKredit {
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    width: 100%;
    /*background-color:red;*/
    /*overflow:scroll;*/
}

.salesman-ApproveLimitKredit {
    width: 100%;
    height: 200px;
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    /*background-image: var(--urlbgsalesmanhomeVg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: unset;
    /*overflow-x:auto;*/
}


.salesman-DaftarSO {
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    /*background-image: url(../images/bgSalesmanHeaderJudul.jpg);*/
    width: 100%;
    height: 40px;
    /*background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}


.salesman-CustomerOrder-Checkout {
    background-image: var(--urlbgsalesmanhomeVg);
    width: 100%;
    height: 105px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: unset;
}

.InputOrderJualConnectedForm {
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: unset;
}

.CustomerOrderSalesmanForm {
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    width: 100%;
    height: 150%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 0 0 0 0;
    /*border-bottom-left-radius: 50px 30px;*/
    border-bottom-right-radius: 30px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: unset;
}

.InputOrderJualConnectedTabstrip {
    text-align: left;
    /*position: absolute;
    top: var(--topTabCheckoutCustomerOrderSalesman);*/
    width: 99%;
    /*height: var(--tinggiTabCheckout);*/
    /*transform: translate(-50%, -50%);*/
    color: black;
    border-radius: 1em;
    margin-bottom: 10px;
}

.salesman-checkInCustomer-tabstrip {
    text-align: left;
    position: relative;
    /*top: var(--topTabCheckIn);*/
    left: 2%;
    width: 96%;
    height: 60vh;
    /*transform: translate(-50%, -50%);*/
    color: black;
    border-radius: 1em;
}

.salesman-CekPosisiSalesman-tabstrip {
    margin-top: 10px;
    /*position: absolute;*/
    width: 100%;
    /*background-color:red;*/
    height: var(--tinggiTabCekPosisiSalesman);
    z-index: 1000;
}

.salesman-CustomerOrderSalesman-tabstrip {
    text-align: left;
    position: absolute;
    top: var(--topTabCustomerOrderSalesman);
    left: 2%;
    width: 96%;
    height: var(--tinggiTabCheckIn);
    /*transform: translate(-50%, -50%);*/
    color: black;
    border-radius: 1em;
}

.salesman-DaftarSOSalesman-tabstrip {
    text-align: left;
    position: relative;
    left: 1%;
    width: 98%;
    height: var(--tinggiTabDaftarSOCustomer);
    margin-bottom: 60px;
    color: black;
    border-radius: 1em;
}

.salesman-DaftarSISalesman-tabstrip {
    text-align: left;
    position: relative;
    left: 1%;
    width: 98%;
    height:100vh;
    /*height: var(--tinggiTabDaftarSICustomer);*/
    margin-bottom: 20px;
    color: black;
    border-radius: 1em;
}


.tools-ImportContact-tabstrip {
    text-align: left;
    position: absolute;
    /*top: var(--topTabCustomerOrderSalesman);*/
    left: 1%;
    width: 98%;
    height: var(--tinggiTabToolsImportContact);
    color: black;
    border-radius: 1em;
}

.captionCheckoutCustomerOrderSalesman {
    color: var(--ColorJudulSalesman);
    height: 25px;
}

.captionLabelCheckoutCustomerOrderSalesman {
    color: var(--ColorJudulSalesman);
    height: 25px;
    padding-top: 3px;
    text-align: right;
    padding-right: 5px;
}

.salesman-CheckoutCustomerOrderSalesman-tabstrip {
    text-align: left;
    /*position: absolute;
    top: var(--topTabCheckoutCustomerOrderSalesman);*/
    left: 2%;
    width: 96%;
    /*height: var(--tinggiTabCheckout);*/
    /*transform: translate(-50%, -50%);*/
    color: black;
    border-radius: 1em;
    margin-bottom: 30px;
}

.tabs-CheckoutCustomerOrderSalesman-container {
    width: 400px;
    text-align: left;
    height: 20px;
}

.salesman-home-menu {
    background-color: transparent;
    text-align: center;
    position: absolute;
    /*top: 85%;*/
    top: var(--topSalesmanHomeMenu);
    left: 5%;
    width: 90%;
    /*height: 60%;*/
    height: var(--tinggiSalesmanHomeMenu);
    /*height: 100px;*/
    /*transform: translate(-50%, -50%);*/
    color: black;
    border-radius: 1em;
}

.salesman-home-menu-new {
    background-color: transparent;
    text-align: center;
    /*position: relative;*/
    /*top: 85%;*/
    margin-top: -40px;
    left: 5%;
    width: 90%;
    height: var(--tinggiSalesmanHomeMenu);
    color: black;
    border-radius: 1em;
    /*margin-bottom:100px;*/
}

/* Notifications */
.k-notification h3 {
    padding: 30px 10px 5px;
    font-size: 1em;
    line-height: normal;
}

.k-notification exit1 {
    margin: 20px;
    float: left;
}


/* Info template */
.new-mail {
    width: 300px;
    height: 100px;
}

.container-flexdirrow {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
}
.container-flexdircol {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding:0;
}
.container-flexdircolUnlimitedWidth {
    display: flex;
    flex-direction: column;
    
    padding: 0;
}
.container-flexdircol-button {
    display: flex;
    flex-direction: column;
    width: 75px;
 
}

.label {
    height: 25px;
    width: -moz-fit-content;
    width: fit-content;
    color: black;
    font-weight: bold;
    font-size: 15px;
    vertical-align: middle;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color: blanchedalmond;
    font-family: Arial, Helvetica, sans-serif;
}
.label-IntervalAging {
    margin-bottom: 1px;
    margin-top: 5px;
    width: 200px;
    background-color: transparent;
    text-align: center
}


.labelSuaraConnected {
    height: 25px;
    margin-bottom:10px;
    margin-left:5px;
    width: -moz-fit-content;
    width: fit-content;
    color: black;
    font-weight: bold;
    font-size: 20px;
    vertical-align: middle;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color: blanchedalmond;
    font-family: Arial, Helvetica, sans-serif;
}

.labelAutofit {
    height: 20px;
    width: -moz-fit-content;
    width: fit-content;
    color: black;
    font-weight: bold;
    font-size: 15px;
    margin-left: 10px;
    margin-top: 10px;
    vertical-align: middle;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color: lightgray;
    font-family: Arial, Helvetica, sans-serif;
}
.labelAutofit2 {
  
    width: -moz-fit-content;
    width: fit-content;
    color: black;
    font-weight: bold;
    font-size: 12px;
  
    vertical-align: middle;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color:blanchedalmond;
    font-family: Arial, Helvetica, sans-serif;
}
.labelAutofit3 {
    width: -moz-fit-content;
    width: fit-content;
    color: white;
    font-weight: bold;
    font-size: 15px;
    vertical-align: middle;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color:forestgreen;
    font-family: Arial, Helvetica, sans-serif;
}
.labelTotalQtyCart {
    height: 10px;
    width: -moz-fit-content;
    width: fit-content;
    color: black;
    font-weight: bold;
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color: burlywood;
    font-family: Arial, Helvetica, sans-serif;
}

.labelTotalQtyCart2 {
    height: 40px;
    width: 100%;
    /*width: fit-content;*/
    /*height:auto;*/
    color: black;
    font-weight: bold;
    font-size: 12px;
    vertical-align:top;
    text-align: left;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color: burlywood;
    font-family: Arial, Helvetica, sans-serif;
}


.container-badgeku-cart-CustomerOrderSalesmanNew-top {
    position: relative;
    color: white;
    margin-left: 9px;
    padding-left: 2px;
    padding-right: 2px;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    font-family: Cambria;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 50%;
    background-color: red;
}



.labelFadeOut {
    height: 20px;
    width: -moz-fit-content;
    width: fit-content;
    color: white;
    font-weight: bold;
    font-size: 15px;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color: limegreen;
    font-family: 'Times New Roman', Times, serif;
}


.buttonFunction {
    text-align: center;
    height: 60px;
    width: 60px;
    font-size:32px;
    /*display: inline-block;*/
    /*background-color:brown;*/
}


.buttonFunction4040 {
    text-align: center;
    height: 40px;
    width: 40px;
}

.labelFunction4040 {
    height: 12px;
    width: 40px;
    /*width: -moz-fit-content;
    width: fit-content;*/
    color: black;
    font-weight: bold;
    /*margin-left:4px;*/
    font-size: 8px;
    /*vertical-align: middle;*/
    /*padding-left: 2px;*/
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    background-color: lavender;
    font-family: Arial, Helvetica, sans-serif;
}

.labelFunction {
    height: 12px;
    width: 60px;
    /*width: -moz-fit-content;
    width: fit-content;*/
    color: black;
    font-weight: bold;
    /*margin-left:4px;*/
    font-size: 8px;
    /*vertical-align: middle;*/
    /*padding-left: 2px;*/
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    background-color: lavender;
    font-family: Arial, Helvetica, sans-serif;
}
.labelFunctionDataBaru {
    height: 12px;
    width: 60px;
    /*width: -moz-fit-content;
    width: fit-content;*/
    color: black;
    font-weight: bold;
    /*margin-left:4px;*/
    font-size: 8px;
    /*vertical-align: middle;*/
    /*padding-left: 2px;*/
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    background-color: lavender;
    font-family: Arial, Helvetica, sans-serif;
}
.labelFunctionTEST {
    height: 60px;
    width: 60px;
    /*width: -moz-fit-content;
    width: fit-content;*/
    color: black;
    font-weight: bold;
    /*margin-left:4px;*/
    font-size: 60px;
    /*vertical-align: middle;*/
    /*padding-left: 2px;*/
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    background-color: lavender;
    font-family: Arial, Helvetica, sans-serif;
}

.labelToolbarIconGrid {
    height: 12px;
    width: auto;
    margin-right:5px;
    /*width: -moz-fit-content;
    width: fit-content;*/
    color: black;
    font-weight: bold;
    /*margin-left:4px;*/
    font-size: 8px;
    /*vertical-align: middle;*/
    /*padding-left: 2px;*/
    border-radius: 4px;
    text-align: left;
    display: inline-block;
    background-color: lavender;
    font-family: Arial, Helvetica, sans-serif;
}

.labelToolbarSearchTextGrid {
    height: 12px;
    width: auto;
    padding-left: 5px;
    /*width: -moz-fit-content;
    width: fit-content;*/
    color: black;
    font-weight: bold;
    /*margin-left:4px;*/
    font-size: 8px;
    /*vertical-align: middle;*/
    /*padding-left: 2px;*/
    border-radius: 4px;
    text-align: left;
    display: inline-block;
    background-color: lavender;
    font-family: Arial, Helvetica, sans-serif;
}
.labelToolbarSearchTextGridClick {
    height: 12px;
    width: auto;

    /*width: -moz-fit-content;
    width: fit-content;*/
    color: blue;
    font-weight: bold;
    /*margin-left:4px;*/
    font-size: 10px;
    /*vertical-align: middle;*/
    /*padding-left: 2px;*/
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    background-color: lavender;
    font-family: Arial, Helvetica, sans-serif;
}

.labelKode {
    height: 20px;
    word-wrap: break-word;
    width: -moz-fit-content;
    width: fit-content;
    color:black;
    font-weight: normal;
    font-style: italic;
    font-size: 10px;
    vertical-align: middle;
    padding-left: 2px;
    border-radius: 4px;
    display: inline-block;
    background-color: aquamarine;
    font-family: Arial, Helvetica, sans-serif;
}

.objectkendo {
    height: 45px;
    margin-bottom: 7px;
}
.objectkendoMargin4 {
    height: 35px;
    margin-bottom: 4px;
}
.objectkendoMargin2 {
    height: 25px;
    margin-bottom: 2px;
}
.headerApproveLimitKredit {
    width: 90%;
    color: white;
    /*background-image: var(--urlbgsalesmanhomeVg);*/
    background: rgb(111,106,213);
    background: linear-gradient(90deg, rgba(111,106,213,1) 91%, rgba(0,212,255,1) 100%, rgba(191,36,208,1) 100%);
    height: 40px;
    padding: 5px 5px 5px 5px;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    border: solid;
    border-color: white;
    border-radius: 10px;
}

.lblApproveLimitKredit {
    padding-top: 10px;
    font-size: 12px;
    color: black;
    height: 30px;
    text-align: center;
}

.controlApproveLimitKredit {
    padding-left: 5px;
    padding-top: 4px;
    height: 25px;
    text-align: left;
    width: 70%;
}

.container-flexdircol .oneColpopupBarangCustomerOrderSalesman {
    width: 95vw;
    /*margin: auto;*/
    height: 50px;
    background-image: var(--urlbgsalesmanhomeVg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: solid;
    border-color: white;
    border-radius: 10px;
    text-align: center;
    color: var(--clSalesmanHome);
    text-transform: uppercase;
    font-size: 24px;
    line-height: 25px;
    font-family: 'Times New Roman', Times, serif;
}

.container-flexdircol .oneCol {
    width: 100%;
    /*margin:auto;*/
    /*background-color:antiquewhite;*/
    height: 37px;
}

.containerScroll {
    width: 100%;
    /*background-color:green;*/
    display: flex;
    flex-direction: row;
    overflow: auto;
    padding-top: 4px;
    padding-bottom: 4px;
}

.containerScrollBarangCustomerOrderSalesman {
    width: 100%;
    /*background-color:green;*/
    display: flex;
    flex-direction: row;
    overflow: scroll;
    padding-top: 0px;
    padding-bottom: 0px;
    /*background-color:red;*/
}

.containerScroll2 {
    width: 100%;
    /*width: var(--lebarWindow);*/
    /*background-color:green;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /*overflow-scrolling: touch;*/
    -webkit-overflow-scrolling: touch;
    padding-top: 4px;
    padding-bottom: 4px;
}

.flex-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.box1PromoConnected {
    width: 100%;
    height: 252px;
    border: none;
    /*border-color: white;*/
    /*border-radius: 10px;*/
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    /*margin-left: 3px;
    margin-right: 3px;
    padding-right: 3px;*/
    padding: 0px 0px 0px 0px;
}

.box1Saya {
    width: 100%;
    height: 200px;
    /*background-color: red;*/
    border: none;
    background-image: var(--backgroundImageBox1Saya);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0px 0px 0px 0px;
    padding-top: 50px;
}

.box3SayaConnected {
    width: 100%;
    height: 500px;
    overflow-y: scroll;
    border: solid;
    border-color: white;
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    padding-bottom: 3px;
    margin-bottom: 90px;
}

.box3SayaConnected-dir-col {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.box3SayaConnected-dir-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 40px;
}

.box3SayaConnectedWord {
    padding-top: 5px;
}

.box4SayaConnectedPalingKanan {
    margin-left: auto;
    width: 50px;
    padding-top: 3px;
    text-align: right;
}

.box3SayaConnected-dir-row-divider {
    height: 1px;
    background-color: gainsboro;
    width: 100%;
    padding: 0px 0px 0px 0px;
}

.levelSalesmanSaya {
    background-color: orange;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    font-size: 11px;
    border-radius: 30px;
    width: 150px;
    padding-left: 3px;
    padding-bottom: 5px;
    height: 15px;
}

.box1PromoConnectedImageGallery {
    width: 100%;
    height: 200px;
    border: none;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    padding: 0px 0px 0px 0px;
}


.box1PromoConnectedCatalogProdukMaster {
    width: 100%;
    height: 1000px;
    border: none;
    /*border-color: white;*/
    /*border-radius: 10px;*/
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    /*margin-left: 3px;
    margin-right: 3px;
    padding-right: 3px;*/
    margin-bottom: 90px;
    padding: 0px 0px 0px 0px;
}


.sticky {
    /*position: fixed;
    top: 0;
    width: 100%;
    background-color: aqua;*/
    /*position: -webkit-sticky;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
}
/*div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
}*/


.box1PromoConnectedSticky {
    width: 100%;
    height: 252px;
    /*border: solid;
    border-color: white;*/
    /*border-radius: 10px;*/
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    /*margin-left: 3px;
    margin-right: 3px;
    padding-right: 3px;*/
    padding-bottom: 3px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    background-color: greenyellow;
}

.box2PromoConnected {
    width: 100%;
    height: 252px;
    border: solid;
    border-color: white;
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    /*margin-left: 3px;
    margin-right: 3px;
    padding-right: 3px;*/
    padding-bottom: 3px;
    margin-bottom: 60px;
    background-color: yellow;
}

.boxRegisterNewUser {
    width: 100%;
    height: 400px;
    border: solid;
    border-color: white;
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    /*margin-left: 3px;
    margin-right: 3px;
    padding-right: 3px;*/
    padding-bottom: 3px;
    margin-bottom: 60px;
}

.registerNewUserCaption {
    font: bold 12px Arial, sans-serif;
    text-transform: uppercase;
    color: brown;
    background-color: aliceblue;
    border-radius: 10px;
}

.boxGambarPromo {
    width: 100%;
    padding: 0px 0px 0px 0px;
    object-fit: fill;
    background-repeat: no-repeat;
    /*background-size: auto;*/
}

.box3PromoConnected {
    width: 100%;
    height: 252px;
    border: solid;
    border-color: white;
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    /*margin-left: 3px;
    margin-right: 3px;
    padding-right: 3px;*/
    padding-bottom: 3px;
    margin-bottom: 90px;
    background-color: red;
}


.box1CheckInCustomer {
    width: 285px;
    height: 60px;
    border: solid;
    border-color: white;
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    margin-left: 3px;
    margin-right: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
}

.box2CustomerOrderSalesman {
    width: 60px;
    height: 60px;
    border: none;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    margin-left: 1px;
    margin-right: 1px;
    padding-right: 3px;
    padding-bottom: 0px;
}
.box2CustomerOrderSalesman3ROW {
    width: 60px;
    height: 75px;
    border: none;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    margin-left: 1px;
    margin-right: 1px;
    padding-right: 3px;
    padding-bottom: 0px;
}
.box1CustomerOrderSalesman {
    width: 295px;
    height: 65px;
    border: solid;
    border-color: white;
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    margin-left: 1px;
    margin-right: 1px;
    padding-right: 3px;
    padding-bottom: 0px;
    /*background-color:green;*/
}

.box1SearchBarangCustomerOrderSalesman {
    width: 325px;
    height: 80px;
    padding-top: 1px;
    /*padding-bottom:10px;*/
}
.box1SearchdaftarCustomerConnected {
    width: 375px;
    height: 45px;
    padding-top: 1px;
    /*padding-bottom:10px;*/
}
.box1SearchdaftarPendataanCalonCustomer {
    width: 375px;
    height: 45px;
    padding-top: 1px;
    /*padding-bottom:10px;*/
}
.box1PopupBarangCustomerOrderSalesman {
    width: 225px;
    height: 55px;
    padding-top: 3px;
    padding-bottom: 3px;
    /*background-color: red;*/
}

.box1PopupBarangConnected {
    width: 2120px;
    height: 50px;
    /*padding-top: 3px;*/
    /*background-color: red;*/
}

.box1PopupStockOpnameBarangConnected {
    width: 100%;
    height: 40px;
    width: var(--lebarWindow);
    /*padding-top: 3px;*/
    /*background-color: red;*/
}



.lblProsesCalculateSOSal {
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    padding-left: 5px;
    font-weight: bold;
}

.box2PopupBarangConnected {
    width: 260px;
    height: 30px;
    /*padding-top: 3px;*/
    /*background-color: red;*/
}

.boxCaptionPopupBarangConnected {
    width: 2120px;
    height: 30px;
    color: white;
    padding-top: 3px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    vertical-align: middle;
    background-color: orange;
    border-top: solid;
    border-color: white;
    border-radius: 10px;
    margin-bottom: 5px;
}

.boxCaptionPopupStockOpnameBarangConnected {
    width: 100%;
    height: 30px;
    color: white;
    padding-top: 3px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    vertical-align: middle;
    background-color: orange;
    border-top: solid;
    border-color: white;
    border-radius: 10px;
    margin-bottom: 5px;
}


.popupBarangStockOpnameConnected_Qty {
    width: 125px;
    height: 25px;
    text-align: right;
}

.popupBarangStockOpnameConnected_Qty_Caption {
    width: 125px;
    height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.popupBarangConnected_Qty {
    width: 80px;
    height: 25px;
    text-align: right;
}

.popupBarangConnected_Qty_Caption {
    width: 80px;
    height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.popupBarangConnected_Satuan {
    width: 80px;
    color: black;
    padding-top: 7px;
    text-align: center;
    height: 25px;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    line-height: 12px;
    vertical-align: middle;
    text-transform: uppercase;
}

.popupBarangConnected_Satuan_Caption {
    width: 80px;
    /*color: black;*/
    height: 25px;
    text-align: center;
    font-size: 14px;
}

.popupBarangConnected_Harga {
    width: 200px;
    padding-left: 3px;
    height: 25px;
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    text-align: right;
}

.popupBarangConnected_Harga_Caption {
    width: 200px;
    height: 25px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

.box2PopupBarangCustomerOrderSalesman {
    width: 455px;
    height: 55px;
    margin-left: 10px;
    padding-top: 3px;
    /*background-color: green;*/
}

.popupBarangConnected_persenDisc {
    width: 105px;
    padding-left: 3px;
    height: 25px;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    text-align: right;
}

.popupBarangConnected_persenDisc_Caption {
    width: 105px;
    height: 25px;
    font-size: 14px;
    text-align: center;
    /*background-color:aqua;*/
}

.popupBarangConnected_nDisc {
    width: 145px;
    padding-left: 3px;
    height: 25px;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    text-align: right;
}

.popupBarangConnected_nDisc_Caption {
    width: 145px;
    height: 25px;
    font-size: 14px;
    text-align: center;
    /*background-color:blueviolet;*/
}

.box2SearchBarangCustomerOrderSalesman {
    width: 250px;
    height: 80px;
    padding-top: 1px;
    /*padding-bottom:10px;*/
    /*background-color: red;*/
    padding-left: 5px;
    padding-bottom: 1px;
    margin-left: 5px;
}




.box2SSearchBarangCustomerOrderSalesman {
    width: 155px;
    height: 80px;
    padding-top: 1px;
    /*padding-bottom:10px;*/
    /*background-color: red;*/
    padding-left: 5px;
    padding-bottom: 1px;
    margin-left: 5px;
}

.popupBarangConnected_PPN {
    width: 200px;
    color: black;
    padding-top: 0px;
    text-align: center;
    height: 25px;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    line-height: 12px;
    vertical-align: middle;
    display: flex;
}

.popupBarangConnected_PPN_INPUT {
    width: 200px;
    color: black;
    padding-top: 0px;
    text-align: center;
    height: 25px;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    line-height: 12px;
    vertical-align: middle;
    display: flex;
}

.popupBarangConnected_PPN_Caption {
    width: 200px;
    /*color: black;*/
    height: 25px;
    text-align: center;
    font-size: 14px;
}

.popupBarangConnected_INCLUDEPPN {
    width: 110px;
    color: black;
    text-align: center;
    height: 25px;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    line-height: 12px;
    vertical-align: middle;
}

.popupBarangConnected_INCLUDEPPN_Caption {
    width: 110px;
    /*color: black;*/
    height: 25px;
    text-align: center;
    font-size: 14px;
}

.popupBarangConnected_NILAIPPN_Caption {
    width: 120px;
    /*color: black;*/
    height: 25px;
    text-align: center;
    font-size: 14px;
}

.popupBarangConnected_NILAIPPN {
    width: 120px;
    color: black;
    text-align: center;
    height: 25px;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    line-height: 12px;
    vertical-align: middle;
}

.popupBarangConnected_TOTAL {
    width: 160px;
    padding-left: 3px;
    color: black;
    text-align: center;
    height: 25px;
    font-size: 12px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    line-height: 12px;
    vertical-align: middle;
}

.popupBarangConnected_TOTAL_Caption {
    width: 175px;
    /*color: black;*/
    padding-left: 3px;
    height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.box1SearchKartuKB {
    width: 300px;
    height: 52px;
}

.box2SearchKartuKB {
    width: 220px;
    height: 52px;
    padding-left: 10px;
}

.box1 {
    width: 75px;
    height: 75px;
}

/*.box1:nth-child(3n-2) {
        background-color: #EF5350;
    }

    .box1:nth-child(3n-1) {
        background-color: #2E7D32;
    }

    .box1:nth-child(3n) {
        background-color: #03A9F4;
    }*/


.flex-containerSCROLL {
    list-style: none;
    padding: 0;
    margin: 12px;
    display: flex;
    background-color: #E8EAF6;
    width: 600px;
    overflow-x: auto;
    padding: 12px;
}

    .flex-containerSCROLL .flex-item {
        background-color: #C5CAE9;
        width: 150px;
        height: 100px;
        flex-shrink: 0;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .flex-containerSCROLL .flex-item:not(:last-of-type) {
            margin-right: 12px;
        }



.flex-containerSCROL::after {
    content: '';
    flex: 0 0 12px;
}


/*//CARA 4*/

.containerSCROLL2 {
    background-color: #E8EAF6;
    width: 100%;
    height: 52px;
    margin: auto;
    overflow-x: auto;
}

    .containerSCROLL2 .flex-containerSCROLL2 {
        list-style: none;
        padding: 0;
        margin: 0px;
        margin-right: 5px;
        display: inline-flex;
    }
/*.containerSCROLL2 .flex-containerSCROLL2*/
.flex-itemSCROLL2A {
    background-color: #C5CAE9;
    width: 300px;
    display: flex;
    justify-content: center;
    margin-right: 10px;
    align-items: center;
}

.flex-itemSCROLL2 {
    background-color: #C5CAE9;
    margin-right: 10px;
    /*height: 100px;*/
    display: flex;
    justify-content: center;
    align-items: center;
}



:root {
    --lebar1: white;
    --lebarReportPRKPROMESSummaryGroup: 130px;
    --lebarlistviewSalesmanMenu: 130px;
    --bgListviewMenuSalesman: transparent;
    --clSalesmanHome: white;
    --lebarcompMulaiKerja: 200px;
    --lebarjudulicon: 70px;
    --lebarjudulcaption: 300px;
    --bgColorSalesman: blue;
    --ColorJudulSalesman: white;
    --colorBackgroundNavBar: white;
    --colorLoginForm: greenyellow;
    --urlBgSalesmanHeaderVg: '';
    --urlbgSalesmanheaderJudulVg: '';
    --urlbgsalesmanhomeVg: '';
    --urlbgtitikGpsVg: '';
    --urlbgPopupBarangVg: '';
    --tinggiContentEmptyLayout: 100%;
    --tinggiTabCheckIn: 400px;
    --topTabCheckIn: 400px;
    --topBadgeCartCustomerOrderSalesman: 1px;
    --leftBadgeCartCustomerOrderSalesman: 30px;
    --topTabCustomerOrderSalesman: 170px;
    --topTabCheckoutCustomerOrderSalesman: 75px;
    --tinggiTabDaftarSOCustomer: 300px;
    --tinggiTabDaftarSICustomer: 300px;
    --tinggiTabCekPosisiSalesman: 300px;
    --lebarlvCPSSalesman1: 300px;
    --lebarListviewCPS: 250px;
    --heightListviewCPS: 530px;
    --heightGambarListviewCPS: 470px;
    --tinggiTabCheckout: 200px;
    --tinggiSalesmanHome: 400px;
    --topSalesmanHomeMenu: 450px;
    --tinggiSalesmanHomeMenu: 100px;
    --lebarListviewCatalogProduk: 300px;
    --heightListviewCatalogProduk: 200px;
    --heightGambarListviewCatalogProduk: 170px;
    --topSearchCatalogProduk1: 1px;
    --marginTopSearchCatalogProduk1: 1px;
    --tinggiSearchCatalogProduk1: 45px;
    --backgroundColorSearchCatalogProduk1: transparent;
    --urlbackgroundLogin: '';
    --backgroundImageBox1Saya: urlImgBackgroundBox1Saya;
    --heightWindows: 100%;
    --tinggiFlexJudulkuNEW: 40px;
    --paddingTopFlexJudulkuNEW: 30px;
    --lebarcompUbahPassword: 170px;
    --lebarPopupNotification: 300px;
    --bgSalesmanHeaderJudul: '';
    --divbottomPosition: 0px;
    --lebarWindow: 100px;
    --tinggiWindow: 300px;
    --tinggiContent1Window: 200px;
    --tinggiPopup: 300px;
    --brand: #e67e22;
    --ink: #333;
    --muted: #666;
    --card: #fff;
    --bg: #fafafa;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(0,0,0,.08);
}


/*hide loading grid kendo*/
#listview1MasterItemCatalogProduk1 .k-loading-image {
    background-image: none;
}

#gridContainerNotifikasiKB .k-loading-image {
    background-image: none;
}

#gridContainerMutasiKB .k-loading-image {
    background-image: none;
}

#gridContainerKartuKB .k-loading-image {
    background-image: none;
}

.dx-popup-content {
    height: auto !important;
    flex: 1;
    max-height: 70vh; /* equals to the 70% of the browser's window height */
}

.dx-overlay-content {
    display: flex !important;
}

::-ms-clear {
    display: none;
}



/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.container-badgeku {
    position: relative;
    width: 24px;
    height: 30px;
}

    .container-badgeku .top {
        position: absolute;
        top: 2px;
        right: 2px;
    }


    .container-badgeku .top {
        position: absolute;
        top: 2px;
        right: 2px;
    }


.flex-container-dir-col {
    padding-top: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    overflow: hidden;
}

.flex-container-dir-col-scroll {
    padding-top: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    /*overflow: scroll;*/
}

.flex-container-dir-col-scrollReal {
    padding-top: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: auto;
}

.flex-container-dir-col .salesmanhome {
    color: white;
}


.flex-container-judul {
    padding-top: 0px 0px 0px 0px;
    text-transform: uppercase;
    background-color: brown;
    display: flex;
    flex-direction: row;
    height: 30px;
}

.flex-container-judul2 {
    padding-top: 0px 0px 0px 0px;
    text-transform: uppercase;
    background-color: brown;
    display: flex;
    flex-direction: row;
    height: 30px;
    overflow: hidden;
}

    .flex-container-judul2 .col1 {
        background-color: brown;
        padding: 0px 0px 0px 0px;
        /*padding-left:10px;*/
        color: white;
        font-size: 20px;
        font-family: 'Times New Roman', Times, serif;
        font-weight: bold;
        height: 100%;
        text-align: center;
        width: 70%;
    }

.img {
    border-radius: 50%;
    background-color: red;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.flex-container-judul2 .col2 {
    /*background-color: brown;*/
    /*padding: 0px 0px 0px 0px;
        color: white;
        font-size: 20px;
        font-family: 'Times New Roman', Times, serif;
        font-weight: bold;
        height: 30px;
        text-align: center;*/
    width: 30%;
}

.flex-container-judul .row1 {
    background-color: brown;
    padding: 0px 0px 0px 0px;
    color: white;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    height: 30px;
    text-align: center;
    width: 100%;
}

.flex-container1 {
    padding-top: 1px;
    font-family: 'Times New Roman', Times, serif;
    padding-bottom: 1px;
    display: flex;
    flex-direction: row;
    height: 10px;
    width: 100%;
    text-transform: uppercase;
}

    .flex-container1 .col1 {
        height: 10px;
        font-weight: bold;
        text-decoration: underline overline;
        font-size: 12px;
        width: 100%;
        margin: auto;
        text-align: center;
    }

.flex-container3Kolom {
    padding-top: 1px;
    font-family: 'Times New Roman', Times, serif;
    padding-bottom: 1px;
    display: flex;
    flex-direction: row;
    height: 10px;
    width: 100%;
    text-transform: uppercase;
}

    .flex-container3Kolom .col1 {
        height: 10px;
        font-weight: bold;
        font-size: 12px;
        width: 20px;
        margin: auto;
        text-align: left;
    }

    .flex-container3Kolom .col2 {
        height: 10px;
        font-weight: bold;
        font-size: 12px;
        width: 120px;
        margin: auto;
        text-align: right;
    }

    .flex-container3Kolom .col3 {
        height: 10px;
        font-weight: bold;
        font-size: 12px;
        width: 120px;
        margin: auto;
        text-align: right;
    }

.flex-container-listviewReportPRKPromesSummaryGroup {
    /*padding-top: 1px;*/
    font-family: 'Times New Roman', Times, serif;
    /*padding-bottom: 1px;*/
    display: flex;
    flex-direction: row;
    height: 190px;
    width: 100%;
    text-transform: uppercase;
}

    .flex-container-listviewReportPRKPromesSummaryGroup .col1 {
        height: 50px;
    }

.flex-container {
    padding-top: 3px;
    padding-bottom: 4px;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    flex-direction: row;
    height: 10px;
    width: 100%;
}

.col1CheckIn {
    height: 10px;
    font-size: 12px;
    width: 90px;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
    /*margin: auto;*/
    /*text-align: right;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    color: black;*/
}

.col1CustomerOrderSalesmanSOBelumKirim {
    height: 10px;
    font-size: 12px;
    width: 60px;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
    /*margin: auto;*/
    /*text-align: right;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    color: black;*/
}

.col1CheckIn_A {
    height: 10px;
    font-size: 12px;
    width: 75px;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
    /*margin: auto;*/
    /*text-align: right;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    color: black;*/
}

.col2CheckIn {
    height: 10px;
    font-size: 12px;
    width: 110px;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
}

.col2CustomerOrderSalesman {
    height: 10px;
    font-size: 12px;
    width: 100%;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
}

.col2CustomerOrderSalesmanSOBelumKirim {
    height: 10px;
    font-size: 12px;
    width: 150px;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
}


.col2CheckIn_A {
    height: 10px;
    font-size: 12px;
    width: 70px;
    text-align: right;
    font-family: 'Times New Roman', Times, serif;
}

.flex-container .col1 {
    height: 10px;
    font-size: 12px;
    width: 20px;
    margin: auto;
    text-align: right;
}

.flex-container .col2 {
    /*background-color:red;*/
    font-size: 12px;
    height: 10px;
    width: 140px;
    margin: auto;
    text-align: right;
}

.flex-container .col2critical {
    /*background-color:red;*/
    color: red;
    font-size: 12px;
    height: 10px;
    width: 140px;
    margin: auto;
    text-align: right;
}

.flex-container .colKode {
    height: 10px;
    font-size: 12px;
    width: 30%;
    margin: auto;
    text-align: left;
}

.flex-container .colNama {
    height: 10px;
    font-size: 12px;
    width: 70%;
    text-align: left;
}

.flex-container-oneCol {
    padding-top: 1px;
    padding-bottom: 1px;
    display: flex;
    flex-direction: row;
    /*height: 12px;*/
    width: 100%;
}

    .flex-container-oneCol .oneCol {
        /*height: 10px;*/
        font-size: 12px;
        /*line-height:20px;*/
        width: 100%;
        /*margin: auto;*/
        text-align: left;
    }

.flex-container-toolbar {
    display: flex;
    /*align-items:center;*/
    flex-direction: row;
    /*padding: 0 0 0 0;*/
    height: 22px;
    vertical-align: middle;
}
.grid-daftar-connected {
    font-family: 'Times New Roman', Times, serif;
    font-size: 15px;
}
.flex-container-toolbar .colsearchToolbar1 {
    height: 25px;
    font-size: 12px;
    width: 30%;
    text-align: right;
}

    .flex-container-toolbar .colsearchToolbar2 {
        height: 25px;
        font-weight: bold;
        font-size: 12px;
        width: 70%;
        min-width: 90px;
        text-align: right;
    }
.flex-container-toolbar .colTanggal {
    height: 25px;
    
    
    width: 100%;
    
    
}
.notifikasiKB {
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
}

.notifikasiSalesOrder {
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    padding-left: 5px;
}

/*.k-confirm .k-window-titlebar::before {
    content: 'Confirmation';
}

.k-confirm .k-window-titlebar .k-dialog-title {
    visibility: collapse;
}*/
.k-confirm .k-window-titlebar .k-dialog-title {
   
    font-size:12px;
}

/*dev express ubah font dxSelectBox*/
/*.dx-theme-ios7 .dx-selectbox-container .dx-texteditor-input {
    font-size: 10px;
    padding: 3px;
}

.dx-theme-ios7 .dx-selectbox-container .dx-placeholder {
    font-size: 10px;
}
.dx-theme-android5 .dx-selectbox-container .dx-texteditor-input {
    font-size: 10px;
    padding: 3px;
}

.dx-theme-android5 .dx-selectbox-container .dx-placeholder {
    font-size: 10px;
}*/

.dx-dropdownlist-popup-wrapper .dx-list-item {
    font-size: 10px;
    font-weight: bold;
    vertical-align: central;
    padding: 0px;
    height: 20px;
}
/*.dx-texteditor-input {
    text-align: center;
    color: red
}*/


.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    margin-left: 5px;
}

.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 3px;
}



.connected-row-1 {
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    color: black;
}

.connected-row-2 {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: black;
}

.container-button {
    position: relative;
    width: 80%;
}

    .container-button img {
        width: 100%;
        height: auto;
    }

    .container-button .btn {
        position: absolute;
        top: 2px;
        right: 15px;
        /*left:90%;*/
        /*top: 50%;
    left: 50%;*/
        /*transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/
        background-color: blue;
        color: white;
        /*font-size: 16px;*/
        padding: 0px 0px 0px 0px;
        border: none;
        cursor: pointer;
        border-radius: 50%;
        text-align: center;
        font-weight: bold;
        line-height: 2rem;
        font-size: 0.7rem;
        border: 1px solid blue;
    }

    .container-button .btn-back {
        position: absolute;
        top: 30px;
        left: 15px;
        /*background-color: blue;*/
        color: white;
        padding: 0px 0px 0px 0px;
        border: none;
        cursor: pointer;
        /*border-radius: 50%;*/
        text-align: center;
        font-weight: bold;
        line-height: 2rem;
        font-size: 0.7rem;
        height: 30px;
        /*border: 1px solid blue;*/
    }
    /*.divclosePopupConnected*/
    .btnClosePopupAttachDocument {
	    position: absolute;
	    top: 23px;
	    left: 15px;
	    /*background-color: blue;*/
	    color: white;
	    padding: 0px 0px 0px 0px;
	    border: none;
	    cursor: pointer;
	    /*border-radius: 50%;*/
	    text-align: center;
	    font-weight: bold;
	    line-height: 2rem;
	    font-size: 0.7rem;
	    height: 15px;
    }

.container-button .btn-red {
    position: absolute;
    top: 2px;
    right: 15px;
    /*left:90%;*/
    /*top: 50%;
    left: 50%;*/
    /*transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/
    background-color: red;
    color: white;
    /*font-size: 16px;*/
    padding: 0px 0px 0px 0px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    line-height: 2rem;
    font-size: 0.7rem;
    border: 1px solid red;
}

.notify-badge {
    position: relative;
    background: rgba(0,0,255,1);
    height: 1rem;
    top: 0.3rem;
    left: 3.4rem;
    width: 3rem;
    text-align: center;
    line-height: 1rem;
    font-size: 0.5rem;
    border-radius: 50%;
    color: white;
    border: 1px solid blue;
}

.notify-badge-red {
    position: relative;
    background: red; /*rgba(0,0,255,1);*/
    height: 1rem;
    top: 0.3rem;
    left: 3.4rem;
    width: 3rem;
    text-align: center;
    line-height: 1rem;
    font-size: 0.5rem;
    border-radius: 50%;
    color: white;
    border: 1px solid red;
}

.notify-badge-bottom {
    position: relative;
    background: rgba(0,0,255,1);
    height: 2rem;
    bottom: 1rem;
    left: 5rem;
    width: 4rem;
    text-align: center;
    line-height: 2rem;
    font-size: 0.7rem;
    border-radius: 50%;
    color: white;
    border: 1px solid blue;
}

.loginForm1 {
    background-color: var(--colorLoginForm);
    padding-top: 100px;
    
    height: 100%;
    width: 100%;
}

.navbar1 {
    /*colorBackgroundNavBar*/
    background-color: var(--colorBackgroundNavBar);
    color: black;
    margin-right: 8px;
    height: 45px;
    width: 60px;
    font-size: 12px;
    line-height: 15px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    
    /*margin-bottom: 5px;
       
    padding-bottom:5px;*/
    /*border-top: solid;
    border-color: grey;
    border-radius: 5px;*/
}

.fa {
    padding: 2px;
    font-size: 20px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin: 2px 2px;
}

    .fa:hover {
        opacity: 0.7;
    }

.fa-facebook {
    background: #3B5998;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.fa-google {
    background: #dd4b39;
    color: white;
}

.fa-linkedin {
    background: #007bb5;
    color: white;
}

.fa-youtube {
    background: #bb0000;
    color: white;
}

.fa-instagram {
    background: #125688;
    color: white;
}

.fa-pinterest {
    background: #cb2027;
    color: white;
}

.fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
    background: #00aff0;
    color: white;
}

.fa-android {
    background: #a4c639;
    color: white;
}

.fa-dribbble {
    background: #ea4c89;
    color: white;
}

.fa-vimeo {
    background: #45bbff;
    color: white;
}

.fa-tumblr {
    background: #2c4762;
    color: white;
}

.fa-vine {
    background: #00b489;
    color: white;
}

.fa-foursquare {
    background: #45bbff;
    color: white;
}

.fa-stumbleupon {
    background: #eb4924;
    color: white;
}

.fa-flickr {
    background: #f40083;
    color: white;
}

.fa-yahoo {
    background: #430297;
    color: white;
}

.fa-soundcloud {
    background: #ff5500;
    color: white;
}

.fa-reddit {
    background: #ff5700;
    color: white;
}

.fa-rss {
    background: #ff6600;
    color: white;
}


br {
    display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: 10px; /* change this to whatever height you want it */
}

.deskripsi {
    color: black;
    line-height: normal;
    font-family: sans-serif;
}

.containerImage {
    position: relative;
    width: 100%; /* Maximum width */
    margin: 0 auto; /* Center it */
}

    .containerImage .contentImage {
        position: absolute; /* Position the background text */
        bottom: 0; /* At the bottom. Use top:0 to append it to the top */
        right: 0;
        background: rgb(0, 0, 0); /* Fallback color */
        background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
        /*background: rgba(0, 0, 0, 0.5);*/
        font-size: 11px;
        color: #f1f1f1; /* Grey text */
        /*color: #f1f1f1;*/
        width: 50%; /* Full width */
        height: 40px;
        padding: 2px; /* Some padding */
    }

.containerku {
    position: relative;
}

.text-block {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 9px;
    font-weight: bold;
    background-color: white;
    color: black;
    font-family: "Times New Roman", Times, serif;
    padding-left: 1px;
    padding-right: 1px;
}

.mr {
    background-color: white !important;
    font-weight: bold;
}

#gridContainer200 {
    height: 200px;
}

#gridContainer {
    height: 200px;
}

div.b {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/*td[role='gridcell'] {
    border-left-style: none !important;
}*/
/*.borderlessGrid .dx-data-row > td {
    border-right: 2px;
    border-left: 2px;
}*/
/*alternate row color*/
.dx-datagrid-rowsview .dx-row > td, .dx-datagrid-rowsview .dx-row > tr > td {
    background-color: white;
}

.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td {
    background-color: ghostwhite;
}

.custVisited {
    color: forestgreen;
    font-weight: bold;
}

.custVisitedNotOrdered {
    color: red;
    font-weight: bold;
}

.dx-datagrid .dx-row-alt {
    /*background-color:red;*/
}

.mybackground {
    background-color: deepskyblue;
    /*background-color: #60a3bc;*/
    background-image: var(--urlbackgroundLogin);
}

.flex-containerx {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lawngreen;
    height: var(--heightWindows);
    padding-bottom: 30px;
}

.xx {
    width: 300px;
    height: 340px;
    background-color: lawngreen;
}

.centering1 {
    background-color: #f1f1f1;
    color: white;
    width: 300px;
    height: 400px;
    align-items: center;
}

.mybackgroundLogin {
    background-color: deepskyblue;
    /*background-color: #60a3bc;*/
    background-image: var(--urlbackgroundLogin);
    height: var(--heightWindows);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dx-datagrid-table .dx-row .dx-command-expand.dx-datagrid-group-space {
    padding: 0px !important;
}

.box {
    /*position: absolute;*/
    width: 100%;
    font-size: 14px;
    color: red;
    font-weight: 700;
    text-align: center;
    height: 40px;
    /*background-color: red;*/
    vertical-align: middle;
    left: 20px;
    /*top: 20px;*/
    padding-top: -5px;
    z-index: 2;
}

.iconEditOrder {
    color: blue;
    font-size: 14px;
}

.my-cancel-icon {
    /*font-size: 60px;*/
    color: red;
}

.dx-datagrid-table .dx-row .dx-command-expand.dx-datagrid-group-space {
    padding-top: 0px !important;
}

.dx-rtl .dx-datagrid-rowsview .dx-selection.dx-row > td:not(.dx-focused).dx-datagrid-group-space,
.dx-rtl .dx-datagrid-rowsview .dx-selection.dx-row:hover > td:not(.dx-focused).dx-datagrid-group-space {
    border-left-color: rgba(216, 253, 247, 1);
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-lines) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover:not(.dx-row-lines) > td {
    border-bottom: 1px solid rgba(216, 253, 247, 1);
    border-top: 1px solid rgba(216, 253, 247, 1);
}

.dx-datagrid-rowsview .dx-selection.dx-row > td.dx-datagrid-group-space,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td.dx-datagrid-group-space {
    border-right-color: rgba(216, 253, 247, 1);
}

.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
    background-color: rgba(216, 253, 247, 1);
    color: #232323;
}


.my-gradient {
    background-color: ghostwhite;
    background-image: linear-gradient(ghostwhite,white);
}

.my-label {
    font-size: 20px;
    font-weight: bold;
    height: 40px;
    text-align: left;
}

.my-textbox {
    border: thick;
    border-color: blue;
}

.my-label-input {
    font-size: 14px;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
    height: 30px;
    text-align: right;
    padding-top: 5px;
}
/*.dx-textbox .dx-texteditor-input {
    border: 1px solid blue;
}*/

.my-input-textbox .dx-texteditor-input {
    text-align: left;
    color: black;
    font-size: 12px;
}

.my-label-data {
    background-color: #D7DBDD;
    color: black;
}

.my-navbar-icon {
    font-size: 24px;
    color: coral;
    background-color: brown;
    text-align: center;
    height: 40px;
    vertical-align: middle;
    padding-top: 3px;
}

.my-navbar-header {
    background-color: brown;
    color: white;
    padding-top: 10px;
    font-size: 20px;
    font-weight: bold;
    height: 40px;
    text-align: center;
}

.my-navbar-header-sm {
    background-color: brown;
    color: white;
    padding-top: 5px;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    text-align: center;
}

.my-navbar-header-2 {
    background-color: brown;
    color: white;
    padding-top: 5px;
    font-size: 20px;
    font-weight: bold;
    height: 60px;
    text-align: center;
}

.my-popup-label {
    padding-top: 17px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Times New Roman';
    height: 40px;
    width: 100%;
    text-align: left;
}

.my-popup-button {
    background-color: brown;
    color: black;
    padding-top: 5px;
    font-size: 20px;
    font-weight: bold;
    height: 50px;
    width: 100%;
    text-align: center;
}

.my-popup-header {
    background-color: brown;
    color: white;
    padding-top: 5px;
    font-size: 18px;
    font-weight: bold;
    height: 60px;
    text-align: center;
}

.my-jumbotron {
    background-color: brown;
    color: white;
    padding-top: 2px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
}

.icon {
    height: 40px;
    font-size: 30px;
    background-color: brown;
    color: lightgreen;
    width: 100%;
    text-align: center;
    padding-top: 2px;
}

.icon-2 {
    height: 60px;
    font-size: 38px;
    background-color: brown;
    width: 100%;
}

.iconOrder {
    font-size: 40px;
    color: black;
    font-weight: normal;
}

.my-background-color {
    background-color: brown;
    color: white;
}

.my-button-style {
    font-size: 22px !important;
}

.my-button {
    background-color: brown;
    color: white;
    font-size: 16px;
    font-weight: bold;
    height: 40px;
    border-radius: 3px;
}

.dx-tile-content .image {
    height: 100px;
    width: 90%;
    background-color: aquamarine;
    background-position: center;
    background-size: cover;
    display: block;
    border: thick;
    border-color: red;
    border-radius: 10px;
}

.my-button-modul {
    background-color: brown;
    color: white;
    font-size: 14px;
    font-weight: bold;
    height: 80px;
    border-radius: 3px;
}
/*.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}*/

/*.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    color: darkred;
}*/
#popupContainer .dx-popup-title {
    background: yellow;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #60a3bc !important;
    font-size:20px;
}

.user_card {
    height: 440px;
    width: 350px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: lawngreen;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;
}

.brand_logo_container {
    position: absolute;
    height: 170px;
    width: 170px;
    top: -75px;
    border-radius: 50%;
    background: white;
    /*background: #60a3bc;*/
    padding: 10px;
    text-align: center;
}

.brand_logo {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 2px solid white;
}

.form_container {
    margin-top: 20px;
}

.login_btn {
    width: 100%;
    background: cadetblue !important;
    color: white !important;
}

    .login_btn:focus {
        box-shadow: none !important;
        outline: 0px !important;
    }

.login_container {
    padding: 0 2rem;
}

.input-group-text {
    background: teal !important;
    color: white !important;
    border: 0 !important;
    border-radius: 0.25rem 0 0 0.25rem !important;
}

.input_user,
.input_pass:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #c0392b !important;
}




/* Hilangkan layout tabel bawaan */
#gridtemplatePopupAttachDocumentAll .k-grid-content table {
    width: 100% !important;
    table-layout: fixed;
    min-height: 80vh !important; /* paksa scroll selalu ada */
}

    #gridtemplatePopupAttachDocumentAll .k-grid-content table tbody {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px; /* jarak antar card (horizontal & vertical) */
        padding: 5px !important;
    }

        #gridtemplatePopupAttachDocumentAll .k-grid-content table tbody tr {
            display: block !important;
            height: auto !important;
            border: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

            #gridtemplatePopupAttachDocumentAll .k-grid-content table tbody tr td {
                display: block !important;
                width: 100% !important;
                border: none !important;
                height: auto !important;
                padding: 0 !important;
            }

        /* 1 kolom (HP) */
        #gridtemplatePopupAttachDocumentAll .k-grid-content table tbody tr {
            width: calc(100% - 10px);
        }

/* 2 kolom (Tablet) */
@media (min-width: 600px) {
    #gridtemplatePopupAttachDocumentAll .k-grid-content table tbody tr {
        width: calc(50% - 10px);
    }
}

/* 3 kolom (1024px) */
@media (min-width: 1024px) {
    #gridtemplatePopupAttachDocumentAll .k-grid-content table tbody tr {
        width: calc(33.3333% - 10px);
    }
}

/* 4 kolom (1920px) */
@media (min-width: 1600px) {
    #gridtemplatePopupAttachDocumentAll .k-grid-content table tbody tr {
        width: calc(25% - 10px);
    }
}

#gridtemplatePopupAttachDocumentAll .k-grid-content {
    height: calc(100vh - 40px) !important; /* 50px = tinggi toolbar/title, bisa disesuaikan */
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    margin-bottom: 10px; /* prevent last row from being hidden */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}


/* Collapsible form container */
#top_ConnectedAttachDocumentAllPopup {
    height: auto;
    overflow: hidden;
    transition: height 0.18s ease; /* jangan pakai max-height, ini penyebab flicker */
}

    /* When collapsed */
    #top_ConnectedAttachDocumentAllPopup.collapsed {
        height: 0 !important; /* height fix = tidak flicker */
        opacity: 0;
    }

  


/* Grid must take remaining space */
.boxconnected-attach-document-Popup-2 {
    flex: 1;
    overflow: hidden;
}

/* Shadow under header when collapsed */
.header-shadow {
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.3s ease;
}