body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media (orientation: landscape) {
    .hide-on-landscape {
        display: none;
    }
}

@media (orientation: portrait) {
    .hide-on-portrait {
        display: none;
    }
}

@-webkit-keyframes spinner-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes spinner-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: spinner-grow .75s linear infinite;
    animation: spinner-grow .75s linear infinite;
}

.spinner-grow-sm {
    width: 1.35rem;
    height: 1.35rem;
}

#progress-overlay {
    background: #ffffff;
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 2147483647;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    padding-top: 25%;
    opacity: .80;
}

#after-failure{
    position: fixed;
    z-index: 2147483647;
}

.clickable {
    cursor: pointer;
}

/*-- Hide the number increment spin-buttons --*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

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

/*------------------------------------
  Tagsinput
------------------------------------*/

.u-tagsinput .bootstrap-tagsinput .tag {
    position: relative;
    display: inline-block;
    font-size: .875rem;
    color: #77838f;
    background-color: rgba(119, 131, 143, 0.1);
    border-radius: 0.3125rem;
    /*padding: .25rem 1.875rem .25rem .75rem;*/
    padding: .25rem 1rem .25rem .75rem;
    margin-bottom: .25rem;
    margin-right: 0;
}

.u-tagsinput .bootstrap-tagsinput .tag [data-role="remove"] {
    position: absolute;
    right: .5rem;
    top: 50%;
    color: #77838f;
    font-size: 1.25rem;
    outline: none;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.u-tagsinput .bootstrap-tagsinput .tag [data-role="remove"]::after {
    content: "\00d7";
}

.u-tagsinput .bootstrap-tagsinput .tag [data-role="remove"]:hover {
    color: #1e2022;
    box-shadow: none;
}

/*------------------------------------
  DataTables Clear Button
------------------------------------*/

.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button {
    -webkit-appearance: button !important;
}

/*------------------------------------
  DataTables Scroll
------------------------------------*/

.dataTables_scrollBody::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.dataTables_scrollBody::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: #777;
    border-radius: 10px;
}


/*------------------------------------
  Order Status Colors
------------------------------------*/

.status-color-new {
    color: #ff964f
}
.status-color-process {
    color: #92B9E7
}
.status-color-ready {
    color: #6fd088
}
.status-color-attention {
    color: #ff6961
}

/*-------------------------------------------------
  Fix modal shifting left when scroll is visible
--------------------------------------------------*/

.modal-open[style] {
    padding-right: 0px !important;
}

/*-------------------------------------------------
  Progress Bar
--------------------------------------------------*/

.dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 999999
}
.dialog-overlay .dialog {
    width: 400px;
    margin: 100px auto 0;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    border-radius: 3px;
    overflow: hidden
}
.dialog-overlay .dialog header {
    padding: 10px 8px;
    background-color: #f6f7f9;
    border-bottom: 1px solid #e5e5e5
}
.dialog-overlay .dialog header h3 {
    font-size: 14px;
    margin: 0;
    color: #555;
    display: inline-block
}
.dialog-overlay .dialog header .fa-close {
    float: right;
    color: #c4c5c7;
    cursor: pointer;
    transition: all .5s ease;
    padding: 0 2px;
    border-radius: 1px
}
.dialog-overlay .dialog header .fa-close:hover {
    color: #b9b9b9
}
.dialog-overlay .dialog header .fa-close:active {
    box-shadow: 0 0 5px #673AB7;
    color: #a2a2a2
}
.dialog-overlay .dialog .dialog-body {
    padding: 12px 10px
}
.dialog-overlay .dialog .dialog-body {
    margin: 0;
    margin-bottom: 15px;
    font-size: 15px;
    color: #333
}
.dialog-overlay .dialog footer {
    border-top: 1px solid #e5e5e5;
    padding: 8px 10px
}
.dialog-overlay .dialog footer .controls {
    direction: rtl
}
.dialog-overlay .dialog footer .controls .button {
    padding: 5px 15px;
    border-radius: 3px
}