﻿/* Cubic Bezier Transition */
/*filepond overrides*/
/*end filepond overrides*/
body:before {
  content: "";
  bottom: 55px;
  right: 0;
  position: fixed;
  background: #ccc;
  border: #999;
  font-size: 8px;
  padding: 5px;
  z-index: 100;
  display: inline-block;
}
@media (max-width: 575.98px) {
  body:before {
    content: "XS";
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  body:before {
    content: "SM";
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  body:before {
    content: "MD";
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  body:before {
    content: "LG";
  }
}
@media (min-width: 1200px) and (max-width: 1499.98px) {
  body:before {
    content: "XL";
  }
}
@media (min-width: 1500px) and (max-width: 1799.98px) {
  body:before {
    content: "XXL";
  }
}
@media (min-width: 1800px) {
  body:before {
    content: "XXXL";
  }
}

.settings {
  position: fixed;
  bottom: 20px;
  right: 40px;
  background: #fff;
  border: solid 1px #ccc;
  padding: 15px;
  font-size: 11px;
  z-index: 100;
}
.settings table {
  width: 400px;
}
.settings > a {
  position: absolute;
  right: 15px;
  text-align: center;
  padding: 5px 10px;
}
.settings > a .fa:before {
  content: "\f068";
}
.settings > a.collapsed {
  left: 50%;
  top: 50%;
  right: unset;
  padding: 5px 15px;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.settings > a.collapsed .fa:before {
  content: "\f067";
}
.settings > .collapse.in:after {
  content: "Media Size -    XL";
  display: block;
}
@media (max-width: 767.98px) {
  .settings > .collapse.in:after {
    content: "Media Size -    XS - 575.98px";
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .settings > .collapse.in:after {
    content: "Media Size -    SM - 767.98px";
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .settings > .collapse.in:after {
    content: "Media Size -    MD - 991.98px";
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .settings > .collapse.in:after {
    content: "Media Size -    LG - 1199.98px";
  }
}

.mp-popup {
  min-height: 200px !important;
}
