/**
 * Bootstrap 3 to Bootstrap 4 Compatibility Layer
 *
 * This file provides backward compatibility for Bootstrap 3 classes
 * still used in the admin bundle when using Bootstrap 4.6.2
 *
 * Reference: https://getbootstrap.com/docs/4.6/migration/
 *
 * Classes still in use:
 * - col-xs-* (admin bundle)
 * - hidden-*, visible-* (admin bundle)
 * - btn-default (admin bundle)
 * - img-responsive (admin bundle)
 */

/* ==========================================================================
   Grid System - col-xs-* becomes col-*
   In Bootstrap 4, col-xs-* is replaced by col-*
   ========================================================================== */

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 575.98px) {
    .col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xs-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xs-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
}

.col-xs-offset-0 { margin-left: 0; }
.col-xs-offset-1 { margin-left: 8.333333%; }
.col-xs-offset-2 { margin-left: 16.666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.333333%; }
.col-xs-offset-5 { margin-left: 41.666667%; }
.col-xs-offset-6 { margin-left: 50%; }

/* ==========================================================================
   Visibility Classes - hidden-* and visible-* replaced by d-*
   ========================================================================== */

.hidden-xs {
    display: none !important;
}
@media (min-width: 576px) {
    .hidden-xs {
        display: block !important;
    }
}

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

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

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

.visible-xs {
    display: block !important;
}
@media (min-width: 576px) {
    .visible-xs {
        display: none !important;
    }
}

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

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

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

/* ==========================================================================
   Buttons - btn-default becomes btn-secondary
   ========================================================================== */
.btn-default {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-default:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}
.btn-default:focus,
.btn-default.focus {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
    box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}
.btn-default.disabled,
.btn-default:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

/* ==========================================================================
   Images - img-responsive becomes img-fluid
   ========================================================================== */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}