/* Bootstrap 4 seems to cause some sitefinity backend design modals to malfunction.
 * The following are the fixes that I can find. Feel free to add in or report any
 * other malfunctions that bootstrap 4 cause.
 */
.sfPageEditor a.sfCancel {
  color: #f00;
}
.sfPageEditor.modal-open .sf-backend-wrp .modal-body .k-editor-widget .k-editor-toolbar > li:nth-last-child(2) {
  top: 0;
  right: 50px;
}
.sfPageEditor.modal-open .sf-backend-wrp.modal.fade {
  opacity: 1;
}
.sfPageEditor.modal-open .sf-backend-wrp .modal-dialog select.form-control {
  height: 34px;
}
.sfPageEditor.modal-open .sf-backend-wrp .modal-dialog .sf-widget-header.modal-header {
  display: block;
}
.sfPageEditor.modal-open .sf-backend-wrp .modal-dialog .ng-scope.modal-header {
  display: block;
}
.sfPageEditor.modal-open .sf-backend-wrp .modal-dialog .modal-footer {
  display: block;
}
.sfPageEditor.modal-open .sf-backend-wrp .nav {
  flex-direction: column;
}
.sfPageEditor.modal-open .sf-backend-wrp .nav.nav-tabs {
  flex-direction: row;
}
.sfPageEditor.modal-open .modal-dialog {
  max-width: unset;
}
.sfPageEditor.modal-open .modal-dialog .modal-content {
  width: unset;
}
.sfPageEditor .landing-banner .landing-banner__content {
  width: 50%;
}
.sfPageEditor .landing-banner .landing-banner__content .container {
  padding-right: unset;
}
.sfPageEditor .landing-banner .landing-banner__img {
  width: 50%;
  margin-left: 50%;
}
.sfPageEditor .landing-banner .landing-banner__img > div {
  width: 100%;
}
.sfPageEditor .sf_colsIn {
  width: 100%;
}
.sfPageEditor table td {
  background: transparent;
}
.sfPageEditor .nav-tabs .nav-item .nav-link {
  color: #105CB6;
  border-radius: 4px 4px 0 0;
  border-bottom-color: #ddd;
  background: white;
}
.sfPageEditor .nav-tabs .nav-item.active .nav-link {
  border-bottom-color: transparent;
}
.sfPageEditor .tab-content {
  background: white;
  padding: 0;
  /* open tab content on edit */
}
.sfPageEditor .tab-content > .tab-pane {
  display: block;
}
.sfPageEditor button, .sfPageEditor .btn {
  min-width: unset;
}
.sf_cols .sf_colsOut {
  margin-bottom: 1rem !important;
}
@media (min-width: 768px) {
  .sf_colsIn.container .sf_cols {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
  }
  .sf_colsIn.container .sf_cols .sf_colsIn {
    margin-left: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .sf_colsIn.container .sf_cols .sf_colsOut.sf_3cols_2_34, .sf_colsIn.container .sf_cols .sf_colsOut.sf_3cols_1_33, .sf_colsIn.container .sf_cols .sf_colsOut.sf_3cols_3_33 {
    width: 33.333%;
  }
}
[id*=MainContent] .sfimageWrp {
  width: 100%;
  max-width: 100%;
}
[id*=MainContent] .sfimageWrp img, [id*=MainContent] .sfContentBlock img, [id*=MainContent] .sf_colsIn img {
  max-width: 100%;
}
[id*=MainContent] .landing-banner .sfimageWrp {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .sf_colsOut[class^=sf_2cols_],
.sf_colsOut[class*=" sf_2cols_"],
.sf_colsOut[class^=sf_3cols_],
.sf_colsOut[class*=" sf_3cols_"],
.sf_colsOut[class^=sf_4cols_],
.sf_colsOut[class*=" sf_4cols_"],
.sf_colsOut[class^=sf_5cols_],
.sf_colsOut[class*=" sf_5cols_"] {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .sf_colsIn[class^=sf_1cols_],
.sf_colsIn[class^=" sf_1cols_"],
.sf_colsIn[class^=sf_2cols_],
.sf_colsIn[class*=" sf_2cols_"],
.sf_colsIn[class^=sf_3cols_],
.sf_colsIn[class*=" sf_3cols_"],
.sf_colsIn[class^=sf_4cols_],
.sf_colsIn[class*=" sf_4cols_"],
.sf_colsIn[class^=sf_5cols_],
.sf_colsIn[class*=" sf_5cols_"] {
    margin-left: 0 !important;
    padding-right: 0 !important;
  }
}