:root {
  --background-color: #242424f;
  --primary-color: #000;
  --secondary-color: #4a61df;
  --secondary-color-transparent: #4a61df1a;
  --accent-color: var(--secondary-color);
  --success-color: #28a745;
  --success-color-transparent: #28a74620;

  --danger-color: #dc3545;
  --danger-color-transparent: #dc354520;

  --warning-color: #ffc107;
  --warning-color-transparent: #ffc10720;

  --waiting-color: #d1d153;
  --waiting-color-transparent: #d1d15320;

  --express-color: #d0302d;
  --express-color-transparent: #d0302d1a;

  --encomenda-color: #3b4db2;
  --encomenda-color-transparent: #3b4db21a;

  --like-color: #d50000;
  --like-color-transparent: #d5000020;

  --white: #fff;
  --background-droper: #f5f5f7;

  --grey-1: #fefefe;
  --grey-2: #eeeeee;
  --grey-3: #e6e6e6;
  --grey-4: #bdbdbd;
  --grey-5: #9e9e9e;
  --grey-6: #757575;

  --star-1: #ff0000;
  --star-2: #ffa500;
  --star-3: #e7e035;
  --star-4: #4fd243;
  --star-5: #008000;
  --star-off: #ddd;

  --espelho-color: rgba(255, 255, 255, 0.5);
  --espelho-blur: blur(20px);
  --espelho-border: rgba(255, 255, 255, 0.3);

  --black: #000;
  --black-in-black: #000;
  --black-1: #111;
  --black-2: #333;
  --black-3: #555;
  --black-4: #777;
  --black-5: #999;
  --black-6: #bbb;
  --black-7: #ddd;
  --black-8: #eee;

  --xs-mw: 600px;

  --xs-max-width: 600px;
  --xs-min-width: 0px;
  /* layout-sm	600px <= width < 960px */

  --sm-min-width: 600px;
  --sm-max-width: 960px;

  /* layout-md	960px <= width < 1280px */
  --md-min-width: 960px;
  --md-max-width: 1280px;

  /* 1280px <= width < 1920px */
  --lg-min-width: 1280px;
  --lg-max-width: 1920px;

  /* 1920px <= width < 2560px */
  --xl-min-width: 1920px;
  --xl-max-width: 2560px;

  --drop-maxwidth: 1500px;

  /* Vendas Pro ⬇ */
  --pagando-color: #f9a825;
  --pago-color: var(--success-color);
  --enviado-color: #66bb6a;
  --entregue-color: #1976d2;
  --problematicas-color: #d32f2f;
  --liquidado-color: #4e342e;
  --historico-color: #9e9e9e;

  --info-icon-color: #888;
  --alert-icon-color: firebrick;

  /* Cor unica de todas as bordas (.border-top/-bottom/-left/-right/-all) */
  --border-color: var(--grey-4);

  --skeleton-bg1: #eee;
  --skeleton-bg2: #f5f5f5;


  --box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}