.flex-table {
    margin-top: 20px
}

.flex-table .flex-table-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 4px
}

.flex-table .flex-table-header span {
    font-family: Montserrat;
    font-size: .7rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    padding-bottom: 10px
}

.flex-table .flex-table-header span.product {
    width: 40%
}

.flex-table .flex-table-header span.client {
    width: 30%;
    text-align: center
}
.flex-table .flex-table-header span.td-default {
    width: 10%;
    text-align: center
}
.flex-table .flex-table-header span.td-ini-default {
    width: 10%;
    text-align: center
}

.flex-table .flex-table-header span.price {
    width: 10%;
    text-align: center
}

.flex-table .flex-table-header span.discount {
    width: 10%;
    text-align: center
}

.flex-table .flex-table-header span.total {
    width: 10%;
    text-align: center
}

.flex-table .flex-table-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    background: WhiteSmoke;
    border-radius: 8px;
    border: 1px solid lightGray;
    padding: 8px;
    margin-bottom: 10px
}

.flex-table .flex-table-item .product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40%
}

.flex-table .flex-table-item .product img {
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
    width: 50px;
    height: 50px;
    min-width: 50px
}

.flex-table .flex-table-item .product .product-name {
    display: block;
    margin-left: 12px;
    max-width: 360px;
    font-family: Montserrat;
    font-weight: 600;
    font-size: .8rem;
    color: #4a4a4a
}

.flex-table .flex-table-item .client span,
.flex-table .flex-table-item .price span {
    display: block;
    font-family: Montserrat;
    font-weight: 600;
    font-size: .9rem;
    color: #999
}
.flex-table .flex-table-item .td-default span,
.flex-table .flex-table-item .price span {
    display: block;
    font-family: Montserrat;
    font-weight: 600;
    font-size: .9rem;
    color: #999
}
.flex-table .flex-table-item .td-ini-default span,
.flex-table .flex-table-item .price span {
    display: block;
    font-family: Montserrat;
    font-weight: 600;
    font-size: .9rem;
    color: #999
}

.flex-table .flex-table-item .discount span,
.flex-table .flex-table-item .total span {
    display: block;
    font-family: Montserrat;
    font-weight: 600;
    font-size: .9rem;
    color: #4a4a4a
}

.flex-table .flex-table-item .client {
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left: 1px solid gray
}
.flex-table .flex-table-item .td-default {
    width: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left: 1px solid gray
}
.flex-table .flex-table-item .td-ini-default {
    width: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-table .flex-table-item .price {
    width: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left: 1px solid gray
}

.flex-table .flex-table-item .price span:before {
    content: "$"
}

.flex-table .flex-table-item .discount {
    width: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left: 1px solid gray
}

.flex-table .flex-table-item .total {
    width: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left: 1px solid gray
}

.flex-table .flex-table-item .total span:before {
    content: "$"
}

.bg-dark {
    height: 2.8rem !important;
    color: white !important;
    margin-bottom: 12px !important;
    font-weight: 300 !important;
    font-size: .86em !important;
    background: #363657;
    background: linear-gradient(0deg, rgba(54, 54, 87, 1) 1%, rgba(41, 51, 82, 1) 41%, rgba(16, 16, 56, 1) 79%, rgba(0, 0, 0, 1) 100%) !important;
}

.bg-gray {
    height: 4.2rem !important;
    color: black !important;
    font-size: .86em !important;
    /*background: WhiteSmoke !important;*/
    background: #f2ebeb;
    background: linear-gradient(0deg, rgba(242, 235, 235, 1) 0%, rgba(247, 247, 247, 1) 50%, rgba(235, 232, 232, 1) 100%) !important;
}

.separator-white {
    border-left: 1px solid white !important;
}
.separator-black {
    border-left: 1px solid darkgray !important;
}

.overflow-transparent {
  overflow-y: scroll;         /* barra sempre presente, mas invisível */
  background: transparent;
}

.overflow-transparent::-webkit-scrollbar {
  background: transparent;
}