a {
    text-decoration: none
}

.bold {
    font-weight: 700 !important;
}

.cursor-pointer {
    cursor: pointer;
}

.border-none {
    border: none !important;
}

input[type=tel]:disabled,
input[type=text]:disabled,
input[type=number]:disabled {
    background-color: #ECF0F3 !important;
    color: #161616;
    cursor: not-allowed;
}

/* Removing up/down arrows from Number input field*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

#m-page-back-btn {
    display: flex;
    cursor: pointer;
    align-items: center;
    color: #0072C3;
    background: #FFF;
    border: 1px solid #0072C3;
    padding: 5px 6px 5px 2px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    transition: all 0.1s;
    box-sizing: border-box;
    height: 38px;
    text-shadow: none;
    font-weight: bold;
}

#m-page-back-btn:hover {
    color: #fff;
    background: #0072C3;
}

#m-page-back-btn:hover svg {
    fill: #fff !important;
}

#mainHeader {
    display: none;
}

.userinfo .username {
    /*width: 58px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    text-shadow: none;
}

/* Font Size Classes */
.f-14 {
    font-size: 14px !important;
}

.f-16 {
    font-size: 16px !important;
}

.f-18 {
    font-size: 18px !important;
}

/* Text Color Classes */
.text-danger, .text-error {
    color: #dc3545 !important;
}

.text-primary {
    color: #007bff !important;
}

.text-success {
    color: #198038 !important;
}

/* Text Align Classes*/
.text-left {
    text-align: left !important;
}

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

.text-center{
    text-align: center !important;
}

/* Height Width Classes */
.h-100 {
    height: 100% !important;
}

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

/* Margin Classes */
.m-0{
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.50rem !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

.my-1{
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.ml-2 {
    margin-left: 0.50rem !important;
}

.mr-2 {
    margin-right: 0.50rem !important;
}

.mt-2 {
    margin-top: 0.50rem !important;
}

.mb-2 {
    margin-bottom: 0.50rem !important;
}

.mx-2 {
    margin-left: 0.50rem !important;
    margin-right: 0.50rem !important;
}

.my-2 {
    margin-top: 0.50rem !important;
    margin-bottom: 0.50rem !important;
}


/* Padding Classes*/
.p-0{
    padding: 0 !important;
}

.p-1{
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.50rem !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.py-0{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pl-1 {
    padding-left: 0.25rem !important;
}

.pr-1 {
    padding-right: 0.25rem !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.pl-2 {
    padding-left: 0.50rem !important;
}

.pr-2 {
    padding-right: 0.50rem !important;
}

.pt-2 {
    padding-top: 0.50rem !important;
}

.pb-2 {
    padding-bottom: 0.50rem !important;
}

.px-2 {
    padding-left: 0.50rem !important;
    padding-right: 0.50rem !important;
}

.py-2 {
    padding-top: 0.50rem !important;
    padding-bottom: 0.50rem !important;
}



/* Display Classes */
.d-block {
    display: block !important;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.d-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.align-self-end{
    align-self: flex-end;
}

.align-items-center {
    align-items: center;
}

/* Position Classes */
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

/* Float Classes*/
.pull-left, .float-left {
    float: left !important;
}

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

.btn-footer-container, .footer-btn-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 1em;
    z-index: 10;
    width: 100%;
    background: #fff;
    box-shadow: 0px -4px 8px #55555530;
    box-sizing:border-box;
}

/* Button Classes */
.btn {
    display: inline-block;
    text-shadow: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid transparent;
    /*padding: .375rem .75rem;*/
    padding: .65rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 48px;
}

a.btn {
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-primary {
    background: #0072C3 !important;
    color: #fff !important;
}

.btn-primary:hover {
    color: #fff !important;
    /*background-color: #0069d9 !important;*/
    background-color: #004691 !important;
    border-color: #0062cc !important;
}

.btn-outline-primary {
    background: transparent !important;
    color: #0072C3 !important;
    border: 2px solid #0072C3 !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.btn-success {
    color: #fff !important;
    background-color: #198038 !important;
}

.btn-success:hover {
    color: #fff !important;
    background-color: #165b25 !important;
    border-color: #165b25 !important;
}

.btn-outline-success {
    color: #198038 !important;
    background-color: transparent !important;
    /*background-image: none !important;*/
    border:2px solid #198038 !important;
}

.btn-outline-success:hover {
    color: #fff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.btn-outline-success:hover i {
    filter: brightness(100);
}

.btn-outline-danger {
    color: #dc3545 !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: #dc3545 !important;
}

.btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.btn-light {
    color: #161616 !important;
    border-color: #757575 !important;
}

.btn-light:hover {
    background: #e3eaff;
}

.btn-outline-blacktext {
    height: 48px;
    color: #161616 !important;
    font-size: 18px;
    font-weight: normal !important;
    border: 1px solid #0072C3;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    text-shadow: none;
    margin: 15px 0;
    transition: all 0.1s;
}

.btn-outline-blacktext:hover {
    background: #007bff;
    color: #fff !important;
}

.btn-outline-blacktext:hover i {
    filter: brightness(100);
}

.btn-cancel-unload {
    position: fixed;
    right: 16px;
    top: 62px;
    z-index: 12;
    font-size: 16px;
    width: 118px;
    background: #FFE8E9;
    color: #FF5C5C !important;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

/* Primary Box Styles START*/
.box {
    /*width: calc(50% - 4% - 3px);*/
    width: 206px;
    height: 176px;
    float: left;
    text-align: center;
    box-shadow: 0px 3px 6px #4D4D4D30;
    border: 1px solid #BDBDBD;
    background: #fff;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #373A3C;
    cursor: pointer;
    margin-bottom: 18px;
}

.box:hover {
    color: #4174b2;
    border-color: #293c71;
}

.box .box-banner {
    padding: 8px;
}

.box .box-title {
    font-weight: 700;
    /*padding: 1rem 0;*/
    position: relative;
    font-size: 16px;
}

.box .box-title h4 {
    margin: 0;
}
/* Primary Box Styles END*/


/*Box Full Width Styles START*/
.box.full-width {
    width: 100%;
    height: 90px;
    margin: 1% 0;
    display: flex;
    flex-direction: row;
    color: #0072C3;
    text-align: left;
    border: 1px solid #0072C3;
    box-shadow: none;
}

.box.full-width .box-banner {
    width: 100px;
    height: 100%;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    display: grid;
    place-items: center;
}

.box.full-width .box-title {
    width: 100px;
    height: 100%;
    padding: 0;
    flex-grow: 1;
    display: grid;
    place-content: start;
    align-content: center;
    font-size: 16px;
}

.box.full-width .box-icon {
    padding: 0 1rem;
    height: 100%;
    display: grid;
    place-content: center;
}

.box.full-width .box-icon i {
    width: 1.3rem;
    height: 1.3rem;
}

.box.full-width:hover {
    color: #293c71;
    border-color: #293c71;
}
/*Box Full Width Styles END*/


/* Mobile Grid Styles*/
.container_12 .alpha {
    clear-left: 0
}

.grid_1, .grid_10, .grid_11, .grid_12, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9 {
    margin: 0;
    padding: 0;
    border: 0;
    float: left
}

.container_12 {
overflow: hidden
}

.container_12 .grid_1 {
    width: 8.333333333333334%
}

.container_12 .grid_2 {
    width: 16.666666666666668%
}

.container_12 .grid_3 {
    width: 24%
}

    .container_12 .grid_4 {
        width: 34.33333333333333%
    }

.container_12 .grid_5 {
    width: 41.66666666666667%
}

.container_12 .grid_6 {
    width: 50%
}

.container_12 .grid_7 {
    width: 58.333333333333336%
}

.container_12 .grid_8 {
    width: 65.66666666666667%
}

.container_12 .grid_9 {
    width: 74.4444444444446%
}

.container_12 .grid_10 {
    width: 83.33333333333334%
}

.container_12 .grid_11 {
    width: 91.66666666666667%
}

.container_12 .grid_12 {
    width: 100%
}

.container_12 .prefix_1 {
    padding-left: 8.333333333333334%
}

.container_12 .prefix_2 {
    padding-left: 16.666666666666668%
}

.container_12 .prefix_3 {
    padding-left: 25%
}

.container_12 .prefix_4 {
    padding-left: 33.333333333333336%
}

.container_12 .prefix_5 {
    padding-left: 41.66666666666667%
}

.container_12 .prefix_6 {
    padding-left: 50%
}

.container_12 .prefix_7 {
    padding-left: 58.333333333333336%
}

.container_12 .prefix_8 {
    padding-left: 66.66666666666667%
}

.container_12 .prefix_9 {
    padding-left: 75%
}

.container_12 .prefix_10 {
    padding-left: 83.33333333333334%
}

.container_12 .prefix_11 {
    padding-left: 91.66666666666667%
}

.container_12 .prefix_12 {
    padding-left: 100%
}

.container_12 .suffix_1 {
    padding-right: 8.333333333333334%
}

.container_12 .suffix_2 {
    padding-right: 16.666666666666668%
}

.container_12 .suffix_3 {
    padding-right: 25%
}

.container_12 .suffix_4 {
    padding-right: 33.333333333333336%
}

.container_12 .suffix_5 {
    padding-right: 41.66666666666667%
}

.container_12 .suffix_6 {
    padding-right: 50%
}

.container_12 .suffix_7 {
    padding-right: 58.333333333333336%
}

.container_12 .suffix_8 {
    padding-right: 66.66666666666667%
}

.container_12 .suffix_9 {
    padding-right: 75%
}

.container_12 .suffix_10 {
    padding-right: 83.33333333333334%
}

.container_12 .suffix_11 {
    padding-right: 91.66666666666667%
}

.container_12 .suffix_12 {
    padding-right: 100%
}

.container_16 .alpha {
    clear-left: 0
}

.grid_1, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9 {
    margin: 0;
    padding: 0;
    border: 0;
    float: left
}

.container_16 {
overflow: hidden
}

.container_16 .grid_1 {
    width: 6.25%
}

.container_16 .grid_2 {
    width: 12.5%
}

.container_16 .grid_3 {
    width: 18.75%
}

.container_16 .grid_4 {
    width: 25%
}

.container_16 .grid_5 {
    width: 31.25%
}

.container_16 .grid_6 {
    width: 37.5%
}

.container_16 .grid_7 {
    width: 43.75%
}

.container_16 .grid_8 {
    width: 50%
}

.container_16 .grid_9 {
    width: 56.25%
}

.container_16 .grid_10 {
    width: 62.5%
}

.container_16 .grid_11 {
    width: 68.75%
}

.container_16 .grid_12 {
    width: 75%
}

.container_16 .grid_13 {
    width: 81.25%
}

.container_16 .grid_14 {
    width: 87.5%
}

.container_16 .grid_15 {
    width: 93.75%
}

.container_16 .grid_16 {
    width: 100%
}

.container_16 .prefix_1 {
    padding-left: 6.25%
}

.container_16 .prefix_2 {
    padding-left: 12.5%
}

.container_16 .prefix_3 {
    padding-left: 18.75%
}

.container_16 .prefix_4 {
    padding-left: 25%
}

.container_16 .prefix_5 {
    padding-left: 31.25%
}

.container_16 .prefix_6 {
    padding-left: 37.5%
}

.container_16 .prefix_7 {
    padding-left: 43.75%
}

.container_16 .prefix_8 {
    padding-left: 50%
}

.container_16 .prefix_9 {
    padding-left: 56.25%
}

.container_16 .prefix_10 {
    padding-left: 62.5%
}

.container_16 .prefix_11 {
    padding-left: 68.75%
}

.container_16 .prefix_12 {
    padding-left: 75%
}

.container_16 .prefix_13 {
    padding-left: 81.25%
}

.container_16 .prefix_14 {
    padding-left: 87.5%
}

.container_16 .prefix_15 {
    padding-left: 93.75%
}

.container_16 .prefix_16 {
    padding-left: 100%
}

.container_16 .suffix_1 {
    padding-right: 6.25%
}

.container_16 .suffix_2 {
    padding-right: 12.5%
}

.container_16 .suffix_3 {
    padding-right: 18.75%
}

.container_16 .suffix_4 {
    padding-right: 25%
}

.container_16 .suffix_5 {
    padding-right: 31.25%
}

.container_16 .suffix_6 {
    padding-right: 37.5%
}

.container_16 .suffix_7 {
    padding-right: 43.75%
}

.container_16 .suffix_8 {
    padding-right: 50%
}

.container_16 .suffix_9 {
    padding-right: 56.25%
}

.container_16 .suffix_10 {
    padding-right: 62.5%
}

.container_16 .suffix_11 {
    padding-right: 68.75%
}

.container_16 .suffix_12 {
    padding-right: 75%
}

.container_16 .suffix_13 {
    padding-right: 81.25%
}

.container_16 .suffix_14 {
    padding-right: 87.5%
}

.container_16 .suffix_15 {
    padding-right: 93.75%
}

.container_16 .suffix_16 {
    padding-right: 100%
}


/* Navbar Style*/
.main-header {
    background: #fff !important;
    position: sticky;
    top: 0;
    z-index: 13;
}

.img-logo {
    width: 100%;
    height: 100%;
    display: inline-block;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

.app-navbar {
    background: #F0F0F0;
    height: 38px;
    /*color: #fff;
    box-shadow: 0px 3px 6px #00000029;*/
}

.app-logo-bg {
    /*background: url("Styles/MobileNewMaster/images/bg_logo.svg") no-repeat center;
    background: url("../images/bg_logo.svg") no-repeat center;
    padding: 0 10px;
    background: #fff;*/
    height: 100%;
    width: 80px;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-logo {
    /*background: url("Styles/MobileNewMaster/images/vegam-logo.svg") no-repeat center;
            background-size: contain;
            width: 100%;
            height: 100%;*/
    width: 72%;
}



.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.vegam-footer-logo {
    background: url("../Images/vegam-footer-icon.svg") no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Left Side Bar*/
.sidebar-footer {
    border: none !important;
    background-color: #EFEFEF !important;
    font-size: 12px !important;
    width: 100%;
    text-shadow: none;
    color: #424242;
    /*padding: .7em 0;*/
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Copied From old style for left side bar*/
.header-div {
    float: left;
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    margin: 0;
    z-index: 3;
    /*padding: 1rem;*/
    display: none;
    border: 1px solid #d3d3d3;
    box-shadow: 15px 0 25px #00000040;
}

.header-ul {
    width: 100%;
    list-style-type: none;
    border: 1px solid #006FFF;
    border-radius: 4px;
}

.header-menu-box {
    margin: 0;
    font-size: 14px;
    width: 100%;
    text-align: left;
}

.header-menu-box a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: none;
    color: #006FFF;
    border-bottom: 1px solid #BEBEBE;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    /*padding: 7px 10px;*/
    height: 48px;
    padding: 0 10px;
}

.header-menu-box i {
    float: right;
}

.header-menu-box:last-child a {
    border: none
}

.header-menu-box a:hover {
    color: #fff !important;
    background-color: #0072C3 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

.menuActive.header-menu-box {
    background: #0072C3;
}

.menuActive.header-menu-box a {
    color: #fff;
    text-shadow: none;
}

.menuActive.header-menu-box a i {
    display: none;
}

.header-div .buttons-container button {
    color: #292d2c;
    border: 1px solid #BEBEBE;
    border-radius: 4px;
    text-align: left;
    background: #fff;
    height: 48px;
    padding: 0 10px;
    font-size: 14px;
}

.header-div .buttons-container button:hover {
    background: #e3eaff;
}


/* Table Styles */
#table-horizontal-scroll {
    overflow-x: scroll
}

#table-horizontal-scroll table {
    overflow-y: scroll
}

#table-horizontal-scroll tbody {
    overflow-y: scroll;
    display: block;
    height: 200px;
    background-color: #f5f5f5
}

#table-horizontal-scroll thead {
    display: table-row
}

#table-horizontal-scroll {
    border: 1px solid #5f6973;
    background-color: #5f6973
}

#table-horizontal-scroll table {
    border-collapse: collapse
}

#table-horizontal-scroll td, #table-horizontal-scroll th {
    border: 1px solid #5f6973;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 5px;
    padding-bottom: 5px
}

#table-horizontal-scroll th {
    background-color: #5f6973;
    border-width: 1px;
    color: #fff;
    text-shadow: none !important;
    text-align: left
}

#table-horizontal-scroll td {
    border-width: 1px
}

#table-horizontal-scroll tr:first-child td {
    border-top-width: 0
}

.table-bordered table {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align-items: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    /*max-height: 200px;*/
    background-color: #F5F5F5;
    cursor: pointer;
    word-wrap: break-word
}

.table-bordered table * {
    box-sizing: inherit;
    -moz-box-sizing: inherit
}

.table-bordered thead {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align-items: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    background-color: #F5F5F5;
    color: #161616;
    text-shadow: none;
    word-wrap: break-word;
    position:sticky;
    top: 0px;
    border-top:1px solid #707070; 
    z-index: 99 !important;
}

.table-bordered tbody {
    /*overflow-y: auto;*/
    overflow-y: visible;
    display: inline-block;
    text-shadow: none;
    color: #161616;
    background-color: #fff;
    /*max-height: 163px;*/
    max-height: none !important;
    word-wrap: break-word
}

.table-bordered tbody > tr, .table-bordered tfoot > tr, .table-bordered thead > tr {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.table-bordered tfoot, .table-bordered thead {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.table-bordered tbody td, .table-bordered th {
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    border: 1px solid #707070;
    text-shadow: none
}

.table-bordered th{
    border-top: none !important;
}

.table-bordered tfoot {
    display: inline-block
}

.table-bordered tfoot td {
    width: 100%;
    display: inline-block
}

.table-responsive{
    display: block;
    width: 100%;
    overflow: auto;
}

/*.table-responsive table {
    min-width: max-content;
    max-height: calc(100vh - 260px) !important;
}*/

.row-active {
    background-color: #87ceeb !important;
}

/*dynamic grid pane-table class new mobile styles*/
.pane--table2 thead{
    position: sticky;
    top: 0;
    z-index: 5;
}

.pane--table2 thead tr {
    background-color: #f5f5f5 !important;
    color: #161616 !important;
}
.pane--table2 tbody tr {
    background: #fff ;
}

/* Zebra Dialog Box Styles */
.ZebraDialog *, .ZebraDialog :after, .ZebraDialog :before {
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.ZebraDialog {
    width: 350px;
    z-index: 1001
}

.ZebraDialog, .ZebraDialog .ZebraDialog_Body, .ZebraDialog .ZebraDialog_Buttons a, .ZebraDialog .ZebraDialog_Title {
    margin: 0;
    padding: 0;
    font-family: Helvetica,Tahoma,Arial,sans-serif;
    font-size: 16px;
    text-align: left
}

    .ZebraDialog .ZebraDialog_BodyOuter, .ZebraDialog .ZebraDialog_ButtonsOuter, .ZebraDialog .ZebraDialog_Title {
        border-color: #13252f;
        border-width: 7px
    }

    .ZebraDialog .ZebraDialog_Title {
        font-size: 18px;
        color: #161616;
        text-shadow: none;
        background: #fff;
        vertical-align: middle;
        padding: 12px 15px;
        text-align:center;
    }

    .ZebraDialog .ZebraDialog_BodyOuter {
        background: #fff;
    }

    .ZebraDialog .ZebraDialog_Body {
        color: #44484a;
        padding: 20px;
        border-top: 1px solid #c6c6c6;
        border-bottom-color: #fff;
        text-align:left;
        font-size:16px;
    }

    .ZebraDialog .ZebraDialog_ButtonsOuter {
        background: #fff;
        /*padding: 10px 5px 10px 10px*/
        overflow: hidden;
    }

    .ZebraDialog .ZebraDialog_Buttons:after, .ZebraDialog .ZebraDialog_Buttons:before {
        content: "\0020";
        display: block;
        height: 0;
        visibility: hidden;
        font-size: 0
    }

    .ZebraDialog .ZebraDialog_Buttons:after {
        clear: both
    }
    .ZebraDialog .ZebraDialog_Buttons {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row-reverse;
    }

    .ZebraDialog .ZebraDialog_Buttons a {
        font-weight: 700;
        /* padding: 10px 15px; */
        flex-grow: 1;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .ZebraDialog .ZebraDialog_Buttons a:hover {
            background: #00000017;
        }

    .ZebraDialog a.ZebraDialog_Close {
        position: absolute;
        right: 6px;
        top: 0;
        text-decoration: none;
        font-family: arial,sans-serif;
        font-weight: 700;
        font-size: 21px;
        color: #666
    }

    .ZebraDialog .ZebraDialog_Title a.ZebraDialog_Close {
        color: #e7edef
    }

.ZebraDialogOverlay {
    background: rgba(0,0,0,.1);
    z-index: 1000;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    opacity: 1 !important;
}

.ZebraDialog {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 6px #00000029;
}

.ZebraDialog .ZebraDialog_Title {
    border-radius: 10px 10px 0 0
}



.ZebraDialog .ZebraDialog_NoTitle {
    border-top-style: solid;
    -webkit-border-top-left-radius: 10px;
    -moz-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-top-right-radius: 10px;
    border-top-right-radius: 10px
}

.ZebraDialog .ZebraDialog_NoButtons {
    border-bottom-style: solid;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px
}

.ZebraDialog .ZebraDialog_Body {
    overflow: auto
}

.ZebraDialog .ZebraDialog_NoTitle .ZebraDialog_Body {
    border-top: none
}

.ZebraDialog .ZebraDialog_NoButtons .ZebraDialog_Body {
    border-bottom: none
}

.ZebraDialog .ZebraDialog_Icon {
    background-repeat: no-repeat;
    background-position: 20px 20px;
    min-height: 48px;
    padding-left:88px;
}

.ZebraDialog .ZebraDialog_Confirmation {
    background-image: url(../../zebraImages/confirmation.png)
}

.ZebraDialog .ZebraDialog_Error {
    background-image: url(../Images/i-error.svg)
}

.ZebraDialog .ZebraDialog_Information {
    background-image: url(../Images/i-information.svg)
}

.ZebraDialog .ZebraDialog_Question {
    background-image: url(../Images/i-question.svg)
}

.ZebraDialog .ZebraDialog_Warning {
    background-image: url(../Images/i-warning.svg)
}

    .ZebraDialog .ZebraDialog_ButtonsOuter {
        -webkit-border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px;
        border-top: 1px solid #C6C6C6;
    }

    .ZebraDialog .ZebraDialog_Buttons a {
        white-space: nowrap;
        text-align: center;
        text-decoration: none;
        text-shadow: none;
        /*display: inline-block;
        margin-right: 5px;
        min-width: 60px;
        float: left;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        width: 48%;
        background: #fff;
        padding: 10px 0px;*/
    }

.ZebraDialog .ZebraDialog_Buttons_Centered .ZebraDialog_Buttons {
    display: table;
    margin: 0 auto;
    text-align: center
}

.ZebraDialog .ZebraDialog_Buttons_Centered a {
    zoom: 1
}

.ZebraDialog .ZebraDialog_Preloader {
    height: 32px;
    background: url(../zebraImages/preloader.gif) no-repeat center center
}

.ZebraDialog_Buttons a:nth-child(1) {
    color: #DA1E28;
    /*border-right: 1px solid #C6C6C6;
    height: 100%;
    border-radius: 0;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius:10px;*/
}
.ZebraDialog_Buttons a:nth-child(2) {
    color: #198038;
    border-right: 1px solid #C6C6C6;
}

.ZebraDialog .ZebraDialog_Buttons a:focus-visible {
    outline: none;
}

.Zebra_Infodialog .ZebraDialog_Buttons a {
    color: #0072C3;
}

.Zebra_HasThreeActions a:nth-child(3) {
    color: #007bff;
    border-right: 1px solid #C6C6C6;
}

/* icons classes */
i[class*="i-"] {
    display: inline-block;
    background-size: contain;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

i[class*="i-"].i-xl {
    width: 2rem;
    height: 2rem;
}

i[class*="i-"].i-2x {
    width: 45px;
    height: 45px;
}

.i-default-user-icon,
.i-default-male-user-icon {
    background: url('../images/default-user-icon.png') no-repeat border-box;
    background-position: bottom;
}

.i-default-female-user-icon {
    background: url('../images/i-default-female-user-icon.svg') no-repeat border-box;
    background-position: bottom;
}

.i-home-icon {
    background: url('../images/home-icon.svg') no-repeat border-box;
    background-position: bottom;
}

.i-apps-red {
    background: url('../images/i-apps-red.svg') no-repeat border-box;
}

.i-arrow-right-blue {
    background: url('../images/i-arrow-right-blue.svg') no-repeat border-box;
}

.i-arrow-right-white {
    background: url('../images/i-arrow-right-white.svg') no-repeat border-box;
}

.i-arrow-down-left-green {
    background: url('../images/i-arrow-down-left-green.svg') no-repeat border-box;
}

.i-cross-red {
    background: url('../images/i-cross-red.svg') no-repeat border-box;
}

.i-plus-outline {
    background: url('../images/i-plus-outline.svg') no-repeat border-box;
}

.i-info-circle {
    background: url('../images/i-info-circle.svg') no-repeat border-box;
}

.i-chevron-down {
    background: url('../images/i-chevron-down.svg') no-repeat border-box;
}

.i-checked-green {
    background: url('../images/i-checked-green.svg') no-repeat border-box;
}

.i-unchecked-green {
    background: url('../images/i-unchecked-green.svg') no-repeat border-box;
}

.i-arrow-left-square {
    background: url('../images/i-arrow-left-square.svg') no-repeat border-box;
}

.i-arrow-right-square {
    background: url('../images/i-arrow-right-square.svg') no-repeat border-box;
}

.i-arrow-up-square {
    background: url('../images/i-arrow-up-square.svg') no-repeat border-box;
}

.i-arrow-down-square {
    background: url('../images/i-arrow-down-square.svg') no-repeat border-box;
}

.i-truck-unload {
    background: url('../images/i-truck-unload.png') no-repeat border-box;
}

.i-camera {
    background: url('../images/i-camera.svg') no-repeat border-box;
}

.i-ellipsis-blue {
    background: url('../images/i-ellipsis-blue.svg') no-repeat border-box;
}

.i-beaker {
    background: url('../images/i-beaker.svg') no-repeat border-box;
}

.i-bin-to-bin {
    background: url('../images/i-bin-to-bin.svg') no-repeat border-box;
}

.i-goods-receipt {
    background: url('../images/i-goods-receipt.svg') no-repeat border-box;
}

.i-hazard {
    background: url('../images/i-hazard.svg') no-repeat border-box;
}

.i-jit-sample {
    background: url('../images/i-jit-sample.svg') no-repeat border-box;
}

.i-putaway {
    background: url('../images/i-putaway.svg') no-repeat border-box;
}

.i-reprint-lable {
    background: url('../images/i-reprint-lable.svg') no-repeat border-box;
}

.i-warning-red {
    background: url('../images/i-warning-red.svg') no-repeat border-box;
}

.i-worker {
    background: url('../images/i-worker.svg') no-repeat border-box;
}

.i-pen {
    background: url('../images/i-pen.svg') no-repeat border-box;
}

.i-delete-red {
    background: url('../images/i-delete-red.svg') no-repeat border-box;
}

.i-qc-passed {
    background: url('../images/i-qc-passed.svg') no-repeat border-box;
}

.i-qc-rejected {
    background: url('../images/i-qc-rejected.svg') no-repeat border-box;
}

.i-qc-resample {
    background: url('../images/i-qc-resample.svg') no-repeat border-box;
}

.i-qc-required {
    background: url('../images/i-qc-required.svg') no-repeat border-box;
}

.i-qc-taken {
    background: url('../images/i-qc-taken.svg') no-repeat border-box;
}

.i-printer-blue {
    background: url('../images/printer-blue.svg') no-repeat border-box;
}

.i-document {
    background: url('../images/i-document.svg') no-repeat border-box;
}

.i-search-thin-blue {
    background: url('../images/i-search-thin-blue.svg') no-repeat border-box;
}

.i-rotate-left {
    background: url('../images/i-rotate-left.svg') no-repeat border-box;
}

/* icon Copied from old styles*/
.arrow-right-black-small {
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #5f6973;
    position:relative;
    z-index:1;
    display:inline-block;
}

/* Asterisk(*) */
.required {
    font-family: monospace;
    font-size: 1rem;
    color: red;
}

/* Badge with Bracket Ex - (123)*/
.badge-bracket {
    position: relative;
    width: auto;
    margin: 0 3px;
    padding: 0 .30rem;
    display: inline-block;
    text-align: center;
}

.badge-bracket::before {
    content: '(';
    position: absolute;
    left: 0;
    top: 0;
}

.badge-bracket::after {
    content: ')';
    position: absolute;
    right: 0;
    top: 0;
}

.td-qc-status-span {
    border-left: 1px solid black;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 1px 0 2px;
}

.td-qc-status-span > i{
    width: 23px;
    height: 24px;
}

.no-records-div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: calc(100vh - 175px);
    background: #FFFFFF;
    box-shadow: 0px 3px 6px #00000029;
}

/*Customizing ui classes*/
/*Text color*/
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    color: #373A3C;
}

/*input field default state*/
.ui-input-text, .ui-input-search {
    border-width: 2px;
}

/*input field disabled state*/
.ui-page-theme-a .ui-input-text.ui-state-disabled {
    border-color: #ECF0F3 !important;
    border-radius: 4px !important;
}

.ui-state-disabled {
    opacity: 1 !important;
}

.ui-page {
    /*margin-top: 56px;*/
    margin-bottom: 12px;
    margin-top: 0 !important;
    position: relative !important
}

.ui-content{
    padding:16px;
    padding-top: 15px !important;
}

.ui-corner-all {
    border-radius: 5px !important;
}

.ui-page-theme-a .ui-body-inherit {
    border-color: #c6c6c6 !important;
}

/*.ui-shadow-inset {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}*/

.ui-page-theme-a .ui-focus {
    border: 2px solid #0072C3 !important;
    box-shadow: none !important;
}

/*.ui-page-active {
    padding-bottom: 62px;
}*/

.ui-checkbox .ui-btn {
    font-weight: 500;
    border-radius: 8px !important;
}

.ui-checkbox .ui-btn.ui-btn-active {
    font-weight: 700;
    color: #0072C3;
    background: #FCFCFC;
    border: 1px solid #0072C3;
    text-shadow: none;
}

/* For Autofill input START*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    color: #161616 !important;
    /*-webkit-box-shadow: 0 0 0 30px white inset !important;*/
    -webkit-background-clip: text !important;
}
/* For Autofill input END*/


/* Custom styles */
.label-with-hr {
    display: flex;
    align-items: center;
    justify-content: center;
}

.label-with-hr :first-child {
    margin: 0;
    margin-right: 10px;
    font-weight: 700;
}

.label-with-hr hr,
.label-with-hr .hr {
    flex-grow: 1;
    border: none !important;
    height: 1px;
    background: #03BFB5;
}

.dashed-hr {
    border: none;
    border-bottom: 2px dashed #c6c6c6;
}

.poStatus-label {
    /*padding-top: 14px;*/
    padding-top: 20px;
    font-weight: 700 !important;
}

.poStatus-icon {
    margin-top: 12px;
    margin-left: 8px;
    margin-bottom: 6px;
    margin-right: 8px;
}

.pageHeader {
    margin-top: 0 !important;
}

.mainFooter{
    border: none !important;
}

.page-block {
    background: #FFFFFF;
    box-shadow: 0px 3px 6px #00000029;
}

.empty-page-block {
    background: #FFFFFF;
    box-shadow: 0px 3px 6px #00000029;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 16px;
}

.bg-light-teal {
    background: #ECF0F3;
}

.mx-n-1em{
    margin-right: -1em;
    margin-left: -1em;
}

.px-1em{
    padding-right: 1em;
    padding-left: 1em;
}

.pane--table2 tbody {
    max-height: none !important;
}
.red {
    color: #d4272c !important;
}
.ui-icon-part-bag:after {
    background-image: url(../../images/part-bag.png);
    background-size: 14px 12px;
}

#m-page-name {
    font-size: 16px;
    text-transform:capitalize;
}

.ui-datepicker {
    z-index: 3 !important;
}
.DatePick {
    flex: 1 1 200px;
}
    .DatePick .ui-input-text input {
        text-align: center;
    }
/* Chrome, Safari, Edge, Opera */
.DatePick input::-webkit-outer-spin-button,
.DatePick input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.DatePick input[type=number] {
    -moz-appearance: textfield;
}

.listContent {
    position: relative;
    padding: 10px 10px 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.listContent .listImage {
    width: 180px;
    height: 100px;
}

.listContent .contentImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.listContent .contentData .contentDataText {
    width: 100%;
    line-height: 20px;
}

.uppercase{
    text-transform: uppercase;
}

.blue{
    color: #0000e6;
    text-shadow: none;
}

.center{
    text-align: center !important;
}

/*Custom checkbox*/
.custom-checkbox {
    -webkit-appearance: none; /*hides the default checkbox*/
    appearance: none;
    height: 34px;
    width: 34px;
    transition: 0.10s;
    background-color: #fff;
    border: 2px solid #bdbdbd;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    color: green;
    border-radius: 5px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-checkbox:checked {
    background-color: #fff;
    border-color: green;
}

.custom-checkbox:before {
    content: "";
}

.custom-checkbox:checked:before {
    content: "";
    /* content: "✔"; */
    font-size: 1.5rem;
    border-bottom: 3px solid #198038;
    border-right: 3px solid #198038;
    width: 8px;
    height: 20px;
    transform: rotate(45deg);
    margin-bottom: 4px;
    font-size: 1.5rem;
}

.custom-checkbox:hover {
    cursor: pointer;
    opacity: 0.8;
}

.custom-checkbox:focus,
.custom-checkbox:focus-visible {
    border: 2px solid #0072c3;
}

.custom-dropdown {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    height: 48px;
    display: block;
    width: 98%;
    position: relative;
    margin: 0.5em 0;
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    border: 2px solid #c6c6c6;
    border-radius: 5px;
    background: url('../images/i-ellipsis-blue.svg') #fff no-repeat border-box;
    background-position: 94% 50%;
    box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
    cursor: pointer;
}

.custom-dropdown:focus {
    outline: none;
    box-shadow: none !important;
    border: 2px solid #0072c3;
}

/* MB Dropdown styles - START */
.mb-dropdown-opened {
    overflow: hidden;
}

.mb-dropdown-container {
    background: #f9f9f9;
    box-shadow: inset 0px 3px 6px #00000029;
    z-index: 12;
}

.mb-dropdown-container:focus-visible {
    outline: none;
}

.mb-dropdown-wrapper {
    max-height: 70vh;
    height: 100% !important;
}

.mb-dropdown-select {
    /*height: 40px;*/
    height: 48px;
    margin: 0.5em 0;
    padding: 0.25rem;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #c6c6c6;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
}

.mb-dropdown-select:focus,
.mb-dropdown-select:focus-visible {
    outline-color: #0072C3;
}

/*For Single Select */
.mb-select-label {
    display: inline-block;
    margin: 4px 0 0 3px !important;
    /* font-size: 18px; */
    width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.mb-select-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    pointer-events: none;
    color: #0072c3;
}

.mb-dropdown-options {
    list-style: none;
    /* padding: 4px; */
    padding: 0;
    background: #ffffff;
    margin-top: 0;
    margin-bottom: 0;
}

.mb-dropdown-option {
    color: #161616 !important;
    font-weight: normal !important;
    font-size: 18px;
    border-bottom: 2px dashed #c6c6c6;
    padding: 0.75rem 1rem;
    display: block;
    cursor: pointer;
    text-shadow: none;
    height: 48px;
    box-sizing: border-box;
}

.mb-dropdown-option:hover {
    color: #0066ff !important;
    background: #e4e4e4;
    text-shadow: none !important;
}

.mb-dropdown-option.selected {
    background: #0588e5;
    color: #fff !important;
}

/*For Multiple Select */
.mb-dropdown-wrapper.multiple {
    padding: 0;
    border-radius: 0;
}

.mb-dropdown-wrapper.multiple.os-host-overflow-y {
    padding-right: 22px;
}

.mb-dropdown-options.multiple .mb-dropdown-option {
    display: flex;
    align-items: center;
    grid-gap: 5px;
    margin: 0;
    border-bottom: 1px solid #C6C6C6;
    padding: 1rem 0.1rem;
}

.mb-dropdown-option .mb-option-checkbox {
    -webkit-appearance: none; /*hides the default checkbox*/
    appearance: none;
    height: 25px;
    width: 25px;
    transition: 0.10s;
    background-color: #fff;
    border: 2px solid #bdbdbd;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    border-radius: 5px;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none !important;
    position: relative;
    margin-right: 10px;
}

.mb-dropdown-option .mb-option-checkbox:checked {
    background-color: #0275D8;
    border-color: #0275D8;
}

.mb-dropdown-option .mb-option-checkbox::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 1px;
    height: calc(100% + (2 * 0.78rem));
    background: #C6C6C6;
    right: -10px;
    top: -0.8rem;
}

.mb-dropdown-option .mb-option-checkbox:before {
    content: "";
}

.mb-dropdown-option .mb-option-checkbox:checked:before {
    content: "";
    /* content: "✔"; */
    font-size: 1.5rem;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 31%;
    height: 65%;
    transform: rotate(45deg);
    margin-bottom: 4px;
    font-size: 1.5rem;
}

.mb-dropdown-option .mb-option-checkbox:hover {
    cursor: pointer;
    opacity: 0.8;
}

/* Select box*/
.mb-dropdown-select.disabled,
.mb-dropdown-select[disabled] {
    background-color: #ECF0F3 !important;
    color: #8d8d8d;
    cursor: not-allowed;
    border-color: #ECF0F3 !important;
    border-radius: 4px !important;
    pointer-events: none;
    filter: grayscale(0.5);
    opacity: 1;
}

.mb-dropdown-select.disabled .mb-select-icon,
.mb-dropdown-select[disabled] .mb-select-icon {
    opacity: 0.5;
}
/* MB Dropdown styles - END */


/*ui team changes by followed vinay ux design*/
.table-bordered, .os-host {
    background: #fff;
    padding: 4px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 8px;
    height: calc(100vh - 390px);
    min-height: 150px;
}
    .table-bordered.os-host-overflow-x {
        height: calc(100vh - 408px);
    }
    /*.table-bordered {
        min-height:260px;
    }*/
    .table-bordered tbody > tr, .table-bordered tfoot > tr, .table-bordered thead > tr {
        min-height: 42px;
    }
    .table-bordered tbody td, .table-bordered th{
        display:flex;
        align-items:center;
    }
    /* Scroll plugin customization*/
    .os-host-overflow-x {
        padding-bottom: 22px;
    }

.os-host-overflow-y {
    width: calc(100% - 15px);
    padding-right: 22px;
}

.os-theme-thick-dark > .os-scrollbar-vertical {
    width: 9px !important;
    margin-right: 3px;
}

.os-theme-thick-dark > .os-scrollbar-horizontal {
    height: 9px !important;
    margin-bottom: 5px;
}

.os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover,
.os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: #0072c3 !important;
    border-radius: 15px;
}

.os-theme-thick-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:after {
    content: "";
    display: block;
    background: url("../../mobile-new-master/images/i-arrows-left-right-round.svg") no-repeat content-box;
    background-size: contain;
    width: 44px;
    height: 44px;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-57%, -50%) rotate(90deg);
    z-index: 1;
    cursor: pointer;
}

.os-theme-thick-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:after {
    content: "";
    display: block;
    background: url("../../mobile-new-master/images/i-arrows-left-right-round.svg") no-repeat content-box;
    background-size: contain;
    width: 44px;
    height: 44px;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%);
    z-index: 1;
    cursor: pointer;
}

/*-----Changes-------*/

#breadcrumb {
    top: 38px !important;
}

.ui-mobile label, div.ui-controlgroup-label, body {
    font-size: 14px !important
}

.ui-input-text,
.ui-input-search{
    height: 44px !important;
    min-height: unset;
    box-sizing: border-box;
    font-size: 14px !important;
}

.ui-input-text input, .ui-input-search input {
    height: 100%;
}


.btn {
    min-height: 44px;
    font-size: 16px !important;
    padding: .55rem .75rem;
}

.mb-dropdown-select, .custom-dropdown {
    height: 44px !important;
}


@media only screen and (min-width: 600px) {
    html {
        background: #333 !important;
    }

    body {
        width: 600px;
        margin: 0 auto !important;
        background: #F9F9F9;
    }

    .ui-page {
        width: 600px !important;
        margin: 0 auto !important;
        position: relative !important
    }

    .btn-cancel-unload{
        position: absolute;
        top: -57px;
        right: 0;
    }

    .btn-footer-container, .footer-btn-container {
        width: 600px !important;
    }

    .footer {
        width: 600px !important;
    }
}

@media screen and (min-width:380px)and (max-width:460px){
    .box {
        width: 168px;
        height: 143px;
        margin-left: 0px;
    }
}
@media screen and (min-width:359px) and (max-width:379px) {
    .box {
        width: 153px;
        height: 131px;
        margin-left: 0px;
    }
}
@media screen and (max-width:380px){
    #m-page-name {
        margin-left:25px;
    }
}
@media screen and (max-width: 380px) {
    #m-page-back-btn {
        position: absolute;
        /*top: 5px;*/
    }

    .ui-input-text,
    .ui-input-search,
    .ui-input-text input,
    .ui-input-search input {
        height: 38px !important;
        font-size: 14px !important;
    }

    .poStatus-label {
        padding-top: 14px;
    }

    .mb-dropdown-select, .custom-dropdown {
        height: 38px !important;
    }

    .mb-select-label {
        margin: 5px 0 0 3px !important
    }
}

.i-tick-green {
    background: url('../images/i-tick-green.png') no-repeat border-box;
}

@media screen and (max-width: 400px) {
    #m-page-back-btn {
        position: static;
        transform: translateY(0);
        margin-left: 16px
    }

    #m-page-back-btn:not(.hide) + .m-heading-name {
        padding: 0 10px;
        text-align: left !important;
    }

    #m-page-name {
        margin: 0;
        font-size: 14px
    }
}

/*@media screen and (max-width:380px){
    .box{
        width:206px;
    }
    .box-wrap {
        display: grid;
    }
}*/

@media screen and (max-height:280px) {
    .btn-footer-container, .footer-btn-container {
        position: static;
        transform: none;
        margin-left: -16px;
        margin-right: -16px;
        width: auto;
        box-shadow: none;
        background: transparent;
    }
}