/*  */
/* // Extra small devices (portrait phones, less than 576px) */
#user-collection {
    margin-bottom: 100px;
}

@media (max-width: 575.98px) {

    .big-title{
        font-size: 20px;
    }

    .result-heard > button {
        font-size: 10px;
        width: 130px;
        padding: 2px;
    }
    .box-list-card > div {
        width: 100%;
    }
    .card-info > span {
        font-size: 20px;
    }

    .address-separator{
        display: none;
    }
    .title-shipping-card > p {
        font-size: 12px;
    }

    .tab-navbar li{
        font-size: 12px;
        width: 30%;
    }
    .point-item{
        flex-wrap: wrap;
        gap: 20px;
    }
    .hide-is-mobile{
        display: none;
    }
    .point-actions .mobile-hide{
        display: inline-block;
    }
    .point-amount{
        flex-direction: row;
        justify-content: center;
        margin-bottom: 10px;
    }
    .box-storage {
        font-size: 12px;
        padding: 5px;
    }

    .point-amount .coin-img-wp{
        flex: 0 0 25%;
    }

    .point-amount .point-title{
        flex: 0 0 auto;
    }

    .point-option>p:first-child{
        font-size: 20px;
    }

    .old-email-preview{
        font-size: 5vw;
    }

    .alert-text{
        font-size: 6.5vw;
    }

    #confirmShipRequestModal .modal-header h5,
    #confirmSellingRequestModal .modal-header h5,
    #shipNotificationModal .modal-header h5{
        font-size: 6.5vw;
    }
     /* card in view collection  */
     .box-list-card  {
        width:  100%;
    }
    .title-shipping-card {
        flex-wrap: wrap;
        gap: 10px;
        margin: 5px;
    }
    .table-mobile {
        font-size: 8px;
    }
    .title-mobile {
        font-size: 12px;
    }

 }

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* card in view collection  */
    .title-shipping-card {
        flex-wrap: wrap;
        gap: 10px;
        margin: 5px;
    }
    .box-list-card > div {
        width: calc(50% - 20px);
    }
    .box-list-card > div > span {
        font-size: 8px;
    }

    .responsive-container{
        min-width: 546px;
    }
    .point-wp{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .point-item{
        flex-wrap: wrap;
    }

    .point-amount{
        flex-direction: column;
        flex: 1 1 100%;
        padding: 0px 1vw;
    }

    .point-amount .coin-img-wp{
        flex: 1 1 auto;
    }

    .point-amount .point-title{
        flex: 1 1 auto;
    }

    .point-actions{
        flex: 1 1 auto;
    }

    .point-actions .mobile-hide{
        display: inline-block;
    }
    .hide-is-mobile{
        display: none;
    }

    .point-actions .error-message{
        display: none;
    }

    .point-options{
        flex-direction: column !important;
    }



    .point-option>p:first-child{
        font-size: 4vw;
    }

    .point-option:not(.point-options .point-option:last-child){
        margin-bottom: 10px;
    }

    .point-input{
        flex-direction: column;
    }

    .point-input input{
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .user-card-info .preview-card-body{
        display: none;
    }

    .user-card-info .preview-card-body.mobile-flex{
        display: flex !important;
    }

    .user-card-info .preview-card-wp .card-info.card-title{
        width: 100%;
        flex: 1 1 100%;
        text-align: center;
        margin: 0px auto;
    }

    .user-card-info .preview-card-body .card-image{
        display: flex;
        justify-content: center;
        flex: 0 0 100%;
    }

    .user-card-info .preview-card-body .card-info.other-info{
        margin: 0px auto;
    }

    .user-card-info .preview-card-body .card-info>p:first-child{
        margin-top: 8px;
    }

    .user-card-info.with-border .preview-card-body>div,
    .user-card-info .preview-card-body .card-rarity+div{
        margin-top: 38px;
    }

    .point-option p:last-child{
        font-size: 2.2vw;
    }

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .responsive-container{
        min-width: 738px;
    }
 }

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .responsive-container{
        min-width: 962px;
    }

 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .responsive-container{
        min-width: 1170px;
    }

    #user-collection .card-images .card-image{
        flex: 1 1 20%;
    }

    /* css top admin  */
    .card-pack-list {
       width: 90%;
       margin: auto;
       display: flex;
       gap: 30px;
    }


    .pack-detail-item-img {

    }
    .pack-detail-item-img-action {

    }
 }