/*
    DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


.offcanvas {
    position: absolute;
}

    .offcanvas.fullScreen {
        transition: none !important;
    }

    .offcanvas.forceShow {
        transform: none !important;
        visibility: visible !important;
        width: calc(90% - 300px) !important;
        height: fit-content;
        background-color: inherit;
    }

    .offcanvas.offcanvas-end {
        border-left: 0px;
    }

    .offcanvas .offcanvas-body {
        overflow-y: visible;
    }

.cards {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: unset;
    border: 0px;
}

.main_content > .card {
    height: calc(100vh - 26vh);
    overflow-y: auto;
    padding-bottom: 0.5rem;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #dee2e6;
}

.seal_content .card {
    flex: 0 1 14%;
    min-width: 7.5em;
    max-width: 7.5em;
    margin-right: 0.5em;
    margin-left: 0.5em;
    margin-top: 0.5em;
}

@media screen and (max-width: 90%) {
    .seal_content .card {
        flex: 0 1 calc(25% - 1em);
    }
}

@media screen and (max-width: 80%) {
    .seal_content .card {
        flex: 0 1 calc(30% - 1em);
    }
}

@media screen and (max-width: 1000px) {
    .seal_content .card {
        flex: 0 1 calc(50% - 1em);
    }
}

@media screen and (max-width: 900px) {
    .seal_content .card {
        flex: 0 1 100%;
    }
}

@media screen and (min-width: 70em) {
    .seal_content .card {
        flex: 0 1 11%;
        min-width: 7.5em;
        max-width: 9em;
    }
}

.card::-webkit-scrollbar {
    width: 7px;
}

.card::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.4);
    border-radius: 10rem;
    border: 1px solid #fff;
}


.card::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

.card::-webkit-scrollbar-track-piece:end {
    background: transparent;
}


.choiceasset {
    min-height: 6em;
    max-height: 6em;
    margin-top: 0.5em;
}

.card.seal {
    overflow: hidden;
    text-align: center;
    position: relative;
    height: 10.5em;
    cursor: pointer;
}

.jc-center {
    margin-left: -1.6em;
    justify-content: center;
}

.seal .info {
    padding: 0;
    position: absolute;
    height: 10.5em;
    background-color: #6995be;
    top: 7.5em;
    color: #fff;
    width: calc(100% + 1.6em);
    margin-left: -0.8em;
}


    .seal .info .color {
        font: 12px/18px "Segoe UI",Arial,sans-serif;
    }

    .seal .info .desc {
        width: calc(100% - 2.5em);
        margin: 10px 3px 0px 2px;
        white-space: normal;
        font: 12px/18px "Segoe UI",Arial,sans-serif;
    }

    .seal .info .size {
        position: absolute;
        bottom: 0px;
        left: 0px;
        margin: 0px 0px 5px 3px;
        font: 12px/18px "Segoe UI",Arial,sans-serif;
    }

    .seal .info .price {
        position: absolute;
        bottom: 0px;
        right: 0px;
        margin: 0px 2.5em 5px 0px;
        font: 12px/18px "Segoe UI",Arial,sans-serif;
    }


#optionContent.offcanvas.offcanvas-end.show {
    opacity: 0.9 !important;
}

#choiceContent {
    height: fit-content;
}

span.divExpand {
    margin-left: -7rem;    
}

.productcontainer {
    width: 10rem;
    height: 15rem;
    position: relative;
    float: left;
    padding: 5px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 0px;
    border: 1px solid #d9d9d9;
    flex-grow: 1;
    cursor: pointer;
}