/* ====================== *
 * ## Extra Small (XS) ##
 *
 * @min-width: 0px;
 * @max-width: 576px;
 * ====================== */

@media (max-width: 575px)
{
   /* =========== *
    * ## Popup ##
    * =========== */

   .ui-popup {
      max-width: none;
      width: 80vw;
   }
}

/* ================== *
 * ## Small (SM) ##
 *
 * @min-width: 576px;
 * @max-width: 768px;
 * ================== */

@media (min-width: 576px) and (max-width: 768px)
{
   /* =========== *
    * ## Popup ##
    * =========== */

   .ui-popup {
      max-width: none;
      width: 60vw;
   }
}

/* ================== *
 * ## Medium (MD) ##
 *
 * @min-width: 769px;
 * @max-width: 992px;
 * ================== */

@media (min-width: 768px) and (max-width: 992px)
{
   /* =========== *
    * ## Popup ##
    * =========== */

   .ui-popup {
      max-width: none;
      width: 40vw;
   }
}

/* ====================== *
 * ## Extra Large (XL) ##
 *
 * @min-width: 1200px;
 * ====================== */

@media (min-width: 992px) and (max-width: 1200px)
{
   /* =========== *
    * ## Popup ##
    * =========== */

   .ui-popup {
      max-width: none;
      width: 40vw;
   }
}

@media (min-width: 1200px) and (max-width: 1600px)
{
   /* =========== *
    * ## Popup ##
    * =========== */

   .ui-popup {
      max-width: none;
      width: 30vw;
   }
}