@tailwind base;
@tailwind components;
@tailwind utilities;

.max-mobile {
    max-width: 540px;
}

.black-color {
    color: #1F1F1F;
}

.black-color2 {
    color: #333333;
}

.border-black-color {
    border-color: #1F1F1F;
}

.products-top {
    color: #ffffff;
}

.products-tab>div {
    border-radius: 2rem;
    color        : #30383B;
    border       : 1px solid #7C8E9C;
    font-size    : 0.8125rem;
    user-select  : none;
    cursor       : pointer;
    padding:0 0.75rem;
}

.products-tab>.active-tab {
    background-color: #20BED3;
    border-color    : #20BED3;
    color           : #ffffff;
}

.product-item-out {
    animation: fadeOut 1s forwards;
}

.product-item-in {
    animation: fadeIn 1s forwards;
}


.relative-item {
    position: relative;
}

.product-item .product-name {
    color: #302F2F;
}

.product-item .product-label {
    color: #101010;
}


.product-reverse-pic {
    height : 30%;
    z-index: -1;
}

.product-reverse-pic>div {
    transform: translateY(-70%);
    opacity  : 0.4;
}

.product-reverse-pic>div::before {
    content   : " ";
    position  : absolute;
    top       : 100%;
    left      : 0;
    width     : 100%;
    height    : 30%;
    z-index   : 1;
    transform : translateY(-100%);
    background: linear-gradient(0deg, transparent, #ffffff);
}

.detail-pop {
    background-color: rgba(11, 21, 27, 0.5);
}

.detail-pop .pop-body {
    width : 18.75rem;
    height: 62%;
    border-radius: 1.25rem;
    background-color: #ffffff;
}
.detail-pop .pop-body .circle-close{
    bottom: -3.75rem;
    left:50%;
    width:2.5rem;
    margin-left: -1.25rem;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}