body {
    /* Disables pull-to-refresh and overscroll glow effect.
       Still keeps swipe navigations. */
    overscroll-behavior-y: none;
}

.prinitInvisible {
    visibility: hidden;
}

/*no print the url on page*/
@page {
    size: auto;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */

}

.table td.fit {
    white-space: nowrap;
    width: 1%;
    /*Make a class that will fit table cell width to content*/
}

.checkbox-lg
{
    /* Double-sized Checkboxes */
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */

}


/* Turn off number input Spinners */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.sticky-bottom-button{
    cursor: pointer;
    position:fixed !important;
    bottom: 40px;
    right: 30px;
    opacity: 0.9;
}

.warning-qty {

    color: white;
    /*background: white;*/
    /*background-color: red;*/
    animation: blinker 1s linear infinite;
}
.no-qty {

    color: white;
    /*background: white;*/
    /*background-color: red;*/
    animation: blinker_1 1s linear infinite;
}
@keyframes blinker {
    100% {
        background-color: orangered;
    }
}
@keyframes blinker_1 {
    100% {
        background-color: darkgreen;
    }
}

.counter {
    position: relative;
    top: -15px;
    left: auto;
    z-index: 2;
    padding: 1px 7px;
    margin-left: -23px;
    font-size: 11px;
    color: #fff;
    background-color: #fe1212;
    border-radius: 10em;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}

.btn-yepos-green {
    color: #fff;
    background-color: #4a8840 !important
}

.btn-yepos-green:hover {
    color: #fff;
    background-color: #38B80C !important
}
.btn-yepos-dg {
    color: #fff;
    background-color: #336568 !important
}

.btn-yepos-dg:hover {
    color: #fff;
    background-color: #029076 !important
}
.btn-yepos-br {
    color: #fff;
    background-color: #8D5E4A !important
}
.btn-yepos-br:hover {
    color: #fff;
    background-color: #D37A00 !important
}
.btn-yepos-tl {
    color: #fff;
    background-color: #79B7A5 !important
}

.btn-yepos-tl:hover {
    color: #fff;
    background-color: #8EC0BB !important
}
.btn-pink {
    color: #fff;
    background-color: deeppink !important
}
.btn-pink:hover {
    color: #fff;
    background-color: #FF2DB5 !important
}

.btn-light-blue {
    color: #fff;
    background-color: lightblue !important
}
.btn-blue-grey {
    color: #fff;
    background-color:steelblue !important
}
.btn-cyan {
    color: #fff;
    background-color:cyan !important
}
.btn-deep-orange {
    color: #fff;
    background-color:darkorange !important
}
.btn-dark-green {
    color: #fff;
    background-color:darkgreen !important
}
.btn-deep-purple {
    color: #fff;
    background-color:darkmagenta !important
}
.btn-elegant {
    color: #fff;
    background-color:lightsteelblue !important
}
.btn-indigo {
    color: #fff;
    background-color:indigo !important
}
.btn-brown {
    color: #fff;
    background-color:saddlebrown !important
}
.btn-purple {
    color: #fff;
    background-color:purple !important
}
.btn-lime {
    color: #fff;
    background-color:limegreen !important
}
.text-green {
    color: #1CA788;
}
.text-purple {
    color: purple;
}
.text-pink {
    color: deeppink;
}

.cyan-text{color:#00bcd4 !important}
.blue-text {color: #2196f3 !important}
.red-text {color: #f44336 !important}
.indigo-text{color:#3f51b5 !important}
.orange-text{color:#ff9800 !important}
.purple-text{color:#9c27b0 !important}
.grey-text {color: #9e9e9e !important}
.blue-grey-text {color: #607d8b !important}
.pink-text {color: #e91e63 !important}
.deep-purple-text{color:#673ab7 !important}
.green-text{color:#4caf50 !important}
.teal-text{color:#009688 !important}
.brown-text{color:#795548 !important}



.modal {

    /* stuff we already covered */

    z-index: 10010;

}
.modal-overlay {

    /* recommendation:
       don't focus on the number "1000" here, but rather,
       you should have a documented system for z-index and
       follow that system. This number should be pretty
       high on the scale in that system.
    */
    z-index: 10020 !important;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

/*Form Switch Size*/
.form-check-input {
    clear: left;
}

.form-switch.form-switch-sm {
    margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}

.form-switch.form-switch-md {
    margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}

.form-switch.form-switch-lg {
    margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.form-switch.form-switch-xl {
    margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}
/*---------------*/

/*--用于手机，字体与图片大小--*/
@media only screen and (min-width: 360px) and (max-width: 767px){
    .for-mobile-font{
        font-size: 12px;
    }
    .for-mobile-image{
        width: 40px;
    }
    .for-mobile-hide{
        display: none;
    }
    .for-mobile-qty{
        width: 40px; color: red;
    }
    .for-mobile-qty-input{
        width: 60px;
    }
}

.fs-7{
    font-size: 11px;
}
.fs-8{
    font-size: 10px;
}

.disabled-link {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }

  mark {
    background-color: yellow;
    color: black;
}