.table-bordered th, .table-bordered td {
    border: 1px solid #ddd !important
} 

.field-required {
    color: red;
}

/*Generic*/

.ff-roboto {
    font-family: "Roboto", sans-serif !important;
}

.ff-helvetica {
    font-family: "Helvetica",sans-serif !important;
}

.ff-montserrat {
    font-family: "Montserrat",sans-serif !important;
}

.ff-gillsansmt {
    font-family: "Gill Sans MT",Helvetica,Arial,sans-serif !important;
}

.ff-monospace {
    font-family: "Andale Mono",monospace !important;
}

.fontsize-10 { font-size: 10px !important; }
.fontsize-11 { font-size: 11px !important; }
.fontsize-12 { font-size: 12px !important; }
.fontsize-13 { font-size: 13px !important; }
.fontsize-14 { font-size: 14px !important; }
.fontsize-15 { font-size: 15px !important; }
.fontsize-16 { font-size: 16px !important; }
.fontsize-17 { font-size: 17px !important; }
.fontsize-18 { font-size: 18px !important; }
.fontsize-19 { font-size: 19px !important; }
.fontsize-20 { font-size: 20px !important; }
.fontsize-22 { font-size: 22px !important; }
.fontsize-24 { font-size: 24px !important; }
.fontsize-26 { font-size: 26px !important; }
.fontsize-28 { font-size: 28px !important; }
.fontsize-30 { font-size: 30px !important; }
.fontsize-35 { font-size: 35px !important; }
.fontsize-40 { font-size: 40px !important; }
.fontsize-45 { font-size: 45px !important; }
.fontsize-50 { font-size: 50px !important; }

.lineheight-12 { line-height: 12px !important; }
.lineheight-13 { line-height: 13px !important; }
.lineheight-14 { line-height: 14px !important; }
.lineheight-15 { line-height: 15px !important; }
.lineheight-16 { line-height: 16px !important; }
.lineheight-17 { line-height: 17px !important; }
.lineheight-18 { line-height: 18px !important; }
.lineheight-19 { line-height: 19px !important; }
.lineheight-20 { line-height: 20px !important; }
.lineheight-21 { line-height: 21px !important; }
.lineheight-22 { line-height: 22px !important; }
.lineheight-23 { line-height: 23px !important; }
.lineheight-24 { line-height: 24px !important; }
.lineheight-25 { line-height: 25px !important; }
.lineheight-26 { line-height: 26px !important; }
.lineheight-28 { line-height: 28px !important; }
.lineheight-30 { line-height: 30px !important; }
.lineheight-32 { line-height: 32px !important; }
.lineheight-34 { line-height: 34px !important; }
.lineheight-36 { line-height: 36px !important; }
.lineheight-38 { line-height: 38px !important; }
.lineheight-40 { line-height: 40px !important; }
.lineheight-42 { line-height: 42px !important; }
.lineheight-44 { line-height: 44px !important; }
.lineheight-46 { line-height: 46px !important; }
.lineheight-48 { line-height: 48px !important; }
.lineheight-normal { line-height: normal !important; }

.textcolor-normal {
    color: rgb(37, 37, 41) !important;
}


.margin-0 { margin: 0 !important; }
.margin-1 { margin: 1px !important; }
.margin-2 { margin: 2px !important; }
.margin-3 { margin: 3px !important; }

.padding-0 { padding: 0 !important; }
.padding-1 { padding: 1px !important; }
.padding-2 { padding: 2px !important; }
.padding-3 { padding: 3px !important; }


.spanwidth-100 {
    display: inline-block; vertical-align: top; width: 100px; 
}

.spanwidth-150 {
    display: inline-block; vertical-align: top; width: 150px;
}

.spanwidth-180 {
    display: inline-block;
    vertical-align: top;
    width: 180px;
}

.spanwidth-200 {
    display: inline-block; vertical-align: top; width: 200px;
}

.spanwidth-225 {
    display: inline-block; vertical-align: top; width: 225px; 
}

.spanwidth-250 {
    display: inline-block; vertical-align: top; width: 250px; 
}

.spanwidth-300 {
    display: inline-block; vertical-align: top; width: 300px;
}

.spanwidth-350 {
    display: inline-block; vertical-align: top; width: 350px;
}

.spanwidth-400 {
    display: inline-block; vertical-align: top; width: 400px;
}

.spanwidth-450 {
    display: inline-block; vertical-align: top; width: 450px;
}

.spanwidth-500 {
    display: inline-block; vertical-align: top; width: 500px;
}



.flex-fixed-width-item {
    flex: 0 0 100px;
}

.flex-item-20 {
    flex: 1 0 20%;
}

.flex-item-40 {
    flex: 1 0 40%;
}


.border-alpha125 {
    border: rgba(0,0,0,.125) !important;
}

.my-card-body {
    /*Enable `flex-grow: 1` for decks and groups so that card blocks take up // as much space as possible, ensuring footers are aligned to the bottom.*/
    flex: 1 1 auto;
    padding: 0.4rem 1rem 0.4rem 1rem;
}

/* default flex is 0 1 auto */
/* default flex is grow shrink basis */

.flex-product-detail-photo {
    flex: 0 1 590px;
}

.flex-product-detail-data {
    flex: 0 1 auto;
}
.product-detail-container {
    max-width: 1200px;
}

.bgc-light {
    background-color: #f8f9fa !important;
}

.bgc-light2 {
    background-color: #e9ecef !important;
}

.bgc-light3 {
    background-color: #f7f7f7 !important;
}

div.news-item img {
    padding: 10px 0 10px 0;
}


.table-header-bgcolor {
    background-color: #f8f9fa !important;
}

/*from bootstrap 5.1 docs*/
.btn-clipboard {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 10;
    display: block;
    padding: .25rem .5rem;
    font-size: .65em;
    color: #0d6efd;
    background-color: #fff;
    border: 1px solid;
    border-radius: .25rem
}

.btn-clipboard:hover,.btn-clipboard:focus {
    color: #fff;
    background-color: #0d6efd
}

/* from autocomplete begin */
.autocomplete {
    position: relative;
}

    .autocomplete .options {
        position: absolute;
        top: 40px;
        left: 0;
        background: white;
        width: 100%;
        padding: 0;
        z-index: 10;
        border: 1px solid #ced4da;
        border-radius: 0.5rem;
        /*box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);*/
    }

    .autocomplete .option {
        display: block;
        padding: 0.25rem;
    }

        .autocomplete .option .option-text {
            padding: 0.25rem 0.5rem;
        }

        .autocomplete .option:hover {
            background: #1E90FF;
            color: #fff;
        }

        .autocomplete .option.disabled {
            background-color: lightgrey;
            cursor: not-allowed;
        }

            .autocomplete .option.disabled:hover {
                background: lightgrey;
                color: var(--bs-body);
            }
/* from autocomplete end */