.fade-in {
    animation: fadeInAnimation 0.5s ease-in forwards;
}

.fade-out {
    animation: fadeOutAnimation 0.5s ease-out forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOutAnimation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.circle {
    width: 20px;
    height: 20px;
    background-color: #198754;
    border-radius: 50%;
    display: inline-block; 
    vertical-align: middle;
    margin-right: 5px;
}

@media (max-width: 650px) {
    .size-text-order-detail-mobile{
        font-size: 14px !important;
    }
    .sidebar{
        min-width: 100%;
    }
}

.hidden-button-menu {
    display: none !important;
}

.button-document-size-mobile{
    width: unset !important;
}

@media (max-width: 368px) {
    .size-text-order-detail-mobile{
        font-size: 13px !important;
    }
}

@media (max-width: 355px) {
    .size-text-order-detail-mobile{
        font-size: 12px !important;
    }
}

@media (max-width: 343px) {
    .size-text-order-detail-mobile{
        font-size: 11px !important;
    }
}


@media (max-width: 768px) {
    .th-route-carrier-mobile{
        padding: 5px !important;
        font-size: 13px !important;
    }
    
    .td-route-carrier-mobile{
        padding: 2px !important;
        font-size: 12px !important;
    }
    .button-route-carrier-mobile{
        padding: 5px !important;
        font-size: 12px !important;
    }
    .button-document-size-mobile{
        width: 100% !important;
    }
}