.error-msg {
    color: red !important;
}

.error-hide {
    display: none !important;
}

.panel-body hr {
    margin: 5px !important;
}

.ob-right {
    text-align: right;
}

.ob-center {
    text-align: center;
}

#placeOrderForm input.form-control {
    height: 15px;
    padding: 8px 2px;
    width: auto;
}

.borderless table {
    border-top-style: none !important;
    border-left-style: none !important;
    border-right-style: none !important;
    border-bottom-style: none !important;
}

.borderless td, .borderless th {
    border: none !important;
}

.app-container > footer {
    height: 20px;
    padding: 5px;
}

.panel-footer {
    padding: 0px 15px;
}

.app {
    padding-bottom: 5px;
}

/*********************** ngShow/Hide animations**********************/

/* when hiding the thing */
.ng-hide-add {
    -webkit-animation: 0.5s lightSpeedOut ease;
    animation: 0.5s lightSpeedOut ease;
}

/* when showing the thing */
/*.ng-hide-remove      { 
  -webkit-animation:0.5s flipInX ease; 
  animation:0.5s flipInX ease; 
}*/

/* ANIMATIONS (FROM ANIMATE.CSS) */

/* flip in */
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        -ms-transform: perspective(400px);
        transform: perspective(400px);
    }
}

/* light speed out */
@-webkit-keyframes lightSpeedOut {
    0% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

/*********************************************************************/
/*######################### ANGULAR AUTO COMPLETE ###################*/

.autocomplete-custom-template li {
    border-bottom: 1px solid #ccc;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal;
}

    .autocomplete-custom-template li:last-child {
        border-bottom-width: 0;
    }

.autocomplete-custom-template .item-title,
.autocomplete-custom-template .item-metadata {
    display: block;
    line-height: 2;
}

    .autocomplete-custom-template .item-title md-icon {
        height: 18px;
        width: 18px;
    }

/*####################################################################*/

/*######################### CHART JS #################################*/

.openorderwidget {
    width: 120px;
    position: relative;
    float: left;
}

.easypielabel {
    width: 120px;
    text-align: center;
    position: relative;
    z-index: auto;
    top: 65px;
    float: left;
    display: block;
}

/*#######################################################################*/

#Chart_SalesOfTheDay div.xAxis div.tickLabel {
    color: transparent;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); /* IE 9 */
    -moz-transform: rotate(-90deg); /* Firefox */
    -webkit-transform: rotate(-90deg); /* Safari and Chrome */
    -o-transform: rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

#Chart_InvoiceValueOfTheDay div.xAxis div.tickLabel {
    color: transparent;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg); /* IE 9 */
    -moz-transform: rotate(-45deg); /* Firefox */
    -webkit-transform: rotate(-45deg); /* Safari and Chrome */
    -o-transform: rotate(-45deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

#Chart_DiscountTotal div.xAxis div.tickLabel {
    color: transparent;
}

#Chart_ReorderItems div.xAxis div.tickLabel {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); /* IE 9 */
    -moz-transform: rotate(-90deg); /* Firefox */
    -webkit-transform: rotate(-90deg); /* Safari and Chrome */
    -o-transform: rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

#Chart_FMItems div.xAxis div.tickLabel {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -moz-transform: rotate(-90deg); /* Firefox */
    -webkit-transform: rotate(-90deg); /* Safari and Chrome */
    -o-transform: rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

.btn-refresh {
    padding: 0px 2px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    border-radius: 2px !important;
}

/*###################################################*/
/*############## KENDO GRID TABLE ####################*/

.k-grid td {
    padding: 0.0em 1em !important;
}

.k-grid .k-button {
    padding: 6px 14px !important;
    border-radius: 0px !important;
}

/*###################################################*/

.product-table-wrapper {
    height: 450px;
    width: 100%;
    overflow-y: auto; /* Only vertical scroll */
    overflow-x: hidden; /* Disable horizontal scroll */
}


.purchse-order-product-list {
    width: 100%;
    table-layout: fixed; /* Force even column widths */
    border-collapse: collapse;
}

.purchse-order-product-list th,
.purchse-order-product-list td {
    padding: 8px;
    border: 1px solid #ddd;
    word-wrap: break-word;
    white-space: normal;   /* Allow text to wrap */
}

/* Sticky header style scoped to purchse-order-product-list */
.purchse-order-product-list thead.k-grid-header th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 3;
    border-bottom: 2px solid #666; /* Darker bottom border */
    border-right: 1px solid #888;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ✨ Separation shadow */
}

/* Optional: Prevent double border look by removing top border from tbody rows */
.purchse-order-product-list tbody tr:first-child td {
    border-top: none;
}

.border-required {
    border: 2px solid red !important;
    box-shadow: 0 0 3px red;
}