.page-content {
    padding-top: 96px;
    padding-bottom: 48px;
}

.line-secondary {
    opacity: 0.25;
    border: 1px solid #6984CF;
}

.image-product {
    width: 100%;
    height: 539px;
    border-radius: 8px;
    object-fit: cover;
}

.nav-link-custom {
    background: transparent !important;
    color: var(--grey) !important;
    opacity: 0.25;
    padding: 0px !important;
}

.nav-link-custom.active {
    color: var(--primary) !important;
    opacity: 1 !important;
}

.form-control-custom {
    border-radius: 8px;
}

.form-control-number {
    width: 144px !important;
    border-radius: 8px;
}

.border-grey {
    border: 1px solid var(--grey);
}

.button-grey {
    background: var(--grey);
}

.button-primary {
    background: var(--primary);
}

.form-check-color {
    width: 31px;
    height: 31px;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    position: relative;
}

.form-check-color:focus {
    outline: 0;
}

.form-check-color.selected:after {
    content: "●";
    color: #fff;
    position: absolute;
    left: 50%;
    top: 40%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.custom-width-p {
    width: 160px !important;
}

.desc-product {
    white-space: pre-wrap;
}

.image-table {
    width: 461px;
    height: 521px;
}

.select-size {
    width: 61px;
    height: 35px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: transparent;
    border: 1px solid var(--grey) !important;
}

.select-size.selected {
    background: var(--grey) !important;
    color: #fff !important;
}

#kaos-depan {
    border: 1px solid transparent;
}

#kaos-belakang {
    border: 1px solid transparent;
}

#kaos-depan.active {
    border: 1px solid var(--grey);
}

#kaos-belakang.active {
    border: 1px solid var(--grey);
}

.br8px {
    border-radius: 8px;
}

.mb-32px {
    margin-bottom: 32px;
}

.carousel-mini-image {
    width: 54px;
    height: 74px;
    object-fit: fill;
}

.error {
    font-size: 12px;
    position: relative;
    line-height: 1;
    width: 100%;
    color: red;
}

@media (max-width: 767.98px) {

    .page-content {
        padding-top: 120px;
    }

    .image-product {
        height: 366px;
    }

    .add-cart {
        width: 100%;
        display: block;
    }

    .image-table {
        width: 100%;
        height: auto;
    }

    .custom-width-p {
        width: auto !important;
    }

}

@media (min-width: 768px) and (max-width: 967.98px) {

    .image-product {
        height: 357px;
    }

    .page-content {
        padding-top: 140px;
    }

}