/**
 * Bootstrap 3 class compatibility for Bootstrap 4 frontend views (CI3 legacy markup).
 * col-xs-* widths apply only below md so col-sm/col-md/col-lg from BS4 can take over.
 */

[class*="col-xs-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 767.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-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%; }
    .col-xs-offset-7  { margin-left: 58.333333%; }
    .col-xs-offset-8  { margin-left: 66.666667%; }
    .col-xs-offset-9  { margin-left: 75%; }
    .col-xs-offset-10 { margin-left: 83.333333%; }
    .col-xs-offset-11 { margin-left: 91.666667%; }
}

@media (max-width: 767.98px) {
    .hidden-xs {
        display: none !important;
    }
}

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

@media (max-width: 991.98px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .visible-sm {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .visible-md {
        display: none !important;
    }
}

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

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}