/* Compatibility fixes for Bootstrap-style grid classes used by the existing templates. */

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.row > [class*="col-"] {
  min-width: 0;
  box-sizing: border-box;
}

.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1400px) {
  .col-xxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Keep form controls within custom-layout containers. */
.form-control,
textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"] {
  box-sizing: border-box;
  max-width: 100%;
}

/* Prevent flex children from forcing horizontal overflow. */
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.timeline-container,
.timeline-container-inner,
.main-content-container-inner,
.sidebar {
  min-width: 0;
}

img,
video,
iframe {
  max-width: 100%;
}