/* Show on specific size or larger */
.show-on-xs-up {
    display: none !important;
}

.show-on-sm-up {
    display: none !important;
}

.show-on-md-up {
    display: none !important;
}

.show-on-lg-up {
    display: none !important;
}

.show-on-xl-up {
    display: none !important;
}

.show-on-xxl-up {
    display: none !important;
}

@media (max-width: 575.98px) {
    .show-on-xs-up {
        display: block !important;
    }
}

@media (min-width: 576px) {
    .show-on-sm-up {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .show-on-md-up {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .show-on-lg-up {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    .show-on-xl-up {
        display: block !important;
    }
}

@media (min-width: 1400px) {
    .show-on-xxl-up {
        display: block !important;
    }
}

/*----------------------------------------------------------------------*/
/* Show only on specific size */
/*----------------------------------------------------------------------*/

.show-on-xs {
    display: none !important;
}

.show-on-sm {
    display: none !important;
}

.show-on-md {
    display: none !important;
}

.show-on-lg {
    display: none !important;
}

.show-on-xl {
    display: none !important;
}

.show-on-xxl {
    display: none !important;
}

@media (max-width: 575.98px) {
    .show-on-xs {
        display: block !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .show-on-sm {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .show-on-md {
        display: block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .show-on-lg {
        display: block !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .show-on-xl {
        display: block !important;
    }
}

@media (min-width: 1400px) {
    .show-on-xxl {
        display: block !important;
    }
}

/*----------------------------------------------------------------------*/
/* Specific for display flex */
/*----------------------------------------------------------------------*/

.show-flex-on-xs-up {
    display: none !important;
}

@media (max-width: 575.98px) {
    .show-flex-on-xs-up {
        display: flex !important;
    }
}

/* Show flex on sm and up */
.show-flex-on-sm-up {
    display: none !important;
}

@media (min-width: 576px) {
    .show-flex-on-sm-up {
        display: flex !important;
    }
}

/* Show flex on md and up */
.show-flex-on-md-up {
    display: none !important;
}

@media (min-width: 768px) {
    .show-flex-on-md-up {
        display: flex !important;
    }
}

/* Show flex on lg and up */
.show-flex-on-lg-up {
    display: none !important;
}

@media (min-width: 992px) {
    .show-flex-on-lg-up {
        display: flex !important;
    }
}

/* Show flex on xl and up */
.show-flex-on-xl-up {
    display: none !important;
}

@media (min-width: 1200px) {
    .show-flex-on-xl-up {
        display: flex !important;
    }
}

/* Show flex on xxl and up */
.show-flex-on-xxl-up {
    display: none !important;
}

@media (min-width: 1400px) {
    .show-flex-on-xxl-up {
        display: flex !important;
    }
}

/*----------------------------------------------------------------------*/
/* Show only on specific size */
/*----------------------------------------------------------------------*/

.show-flex-on-xs {
    display: none !important;
}

.show-flex-on-sm {
    display: none !important;
}

.show-flex-on-md {
    display: none !important;
}

.show-flex-on-lg {
    display: none !important;
}

.show-flex-on-xl {
    display: none !important;
}

.show-flex-on-xxl {
    display: none !important;
}

@media (max-width: 575.98px) {
    .show-flex-on-xs {
        display: flex !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .show-flex-on-sm {
        display: flex !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .show-flex-on-md {
        display: flex !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .show-flex-on-lg {
        display: flex !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .show-flex-on-xl {
        display: flex !important;
    }
}

@media (min-width: 1400px) {
    .show-flex-on-xxl {
        display: flex !important;
    }
}