/*  Import Compass */
/* ========================================================================== Badge List --- Core Button Component used in APEX 5 Builder ========================================================================== */
.a-BadgeList { padding: 0; margin: 0; list-style: none; overflow: hidden; }

.a-BadgeList-item { display: block; position: relative; padding: 16px 16px 32px 16px; }

.a-BadgeList-label { display: block; text-align: center; position: absolute; bottom: 0; left: 1px; right: 1px; font-size: 12px; line-height: 1.333; padding: 0 0 12px 0; background-image: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.75) 0.15); }

.a-Side .a-BadgeList-label { background-image: linear-gradient(rgba(244, 244, 244, 0) 0, rgba(244, 244, 244, 0.75) 0.15); }

.a-BadgeList-value { display: block; text-align: center; margin: 0 auto; font-weight: 400; }

.a-BadgeList-value a { display: block; line-height: 62px; text-decoration: none; }

.a-BadgeList-value a:hover { text-decoration: none; }

.a-BadgeList-value > a { margin-top: -1px; margin-left: -1px; }

/* ========================================================================== BadgeList Sizes ========================================================================== */
/*  Mixin */
/*  Default Size */
.a-BadgeList-value, .a-BadgeList-value > a { height: 48px; line-height: 48px; font-size: 16px; }

/*  Multiple Sizes */
.a-BadgeList--small .a-BadgeList-value, .a-BadgeList--small .a-BadgeList-value > a { height: 32px; line-height: 32px; font-size: 12px; }

.a-BadgeList--medium .a-BadgeList-value, .a-BadgeList--medium .a-BadgeList-value > a { height: 48px; line-height: 48px; font-size: 16px; }

.a-BadgeList--large .a-BadgeList-value, .a-BadgeList--large .a-BadgeList-value > a { height: 64px; line-height: 64px; font-size: 24px; }

.a-BadgeList--xlarge .a-BadgeList-value, .a-BadgeList--xlarge .a-BadgeList-value > a { height: 96px; line-height: 96px; font-size: 30px; }

.a-BadgeList--xxlarge .a-BadgeList-value, .a-BadgeList--xxlarge .a-BadgeList-value > a { height: 128px; line-height: 128px; font-size: 36px; }

/* ========================================================================== Responsive ========================================================================== */

/* ========================================================================== Layout Modifiers ========================================================================== */
.a-BadgeList--float .a-BadgeList-item:after, .a-BadgeList--flex .a-BadgeList-item:after, .a-BadgeList--cols .a-BadgeList-item:after, .a-BadgeList--fixed .a-BadgeList-item:after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; right: -1px; background: #F8F8F8; }

.a-BadgeList--float .a-BadgeList-item:before, .a-BadgeList--flex .a-BadgeList-item:before, .a-BadgeList--cols .a-BadgeList-item:before, .a-BadgeList--fixed .a-BadgeList-item:before { content: ''; position: absolute; left: 0; right: 0; height: 1px; bottom: -1px; background: #F8F8F8; }

.a-BadgeList--bottomBorder { border-bottom: 1px solid #F8F8F8; }

/* ========================================================================== Floated ========================================================================== */
.a-BadgeList--float .a-BadgeList-item { float: left; }

/* ========================================================================== Stacked ========================================================================== */
.a-BadgeList--stacked .a-BadgeList-item:after { content: ''; position: absolute; left: 0; right: 0; height: 1px; bottom: -1px; background: #F8F8F8; }

/* ========================================================================== Flexed ========================================================================== */
.a-BadgeList--flex { display: flex; align-items: stretch; align-content: stretch; flex-wrap: wrap; }

.a-BadgeList--flex .a-BadgeList-item { flex: 1, 0, auto; }

@supports not (flex-wrap: wrap) { .a-BadgeList.a-BadgeList--flex { display: inline; }
  .a-BadgeList--flex .a-BadgeList-item { display: block; } }

/* ========================================================================== Columns ========================================================================== */
.a-BadgeList--cols .a-BadgeList-item { float: left; width: 50%; }

.a-BadgeList--3cols .a-BadgeList-item { width: 33.33%; }

.a-BadgeList--4cols .a-BadgeList-item { width: 25%; }

.a-BadgeList--5cols .a-BadgeList-item { width: 20%; }

/* ========================================================================== Fluid ========================================================================== */
.a-BadgeList--fixed { display: table; table-layout: fixed; width: 100%; }

.a-BadgeList--fixed .a-BadgeList-item { display: table-cell; }

/* ========================================================================== Positioned on Side of Page ========================================================================== */
.a-Side .a-BadgeList .a-BadgeList-item:after, .a-Side .a-BadgeList .a-BadgeList-item:before { background-color: #E0E0E0; }

.a-Side .a-BadgeList--bottomBorder { border-bottom-color: #E0E0E0; }

@media only screen and (max-width: 1280px) { .a-BadgeList--responsive.a-BadgeList--xxlarge .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--xxlarge .a-BadgeList-value > a, .a-BadgeList--responsive.a-BadgeList--xlarge .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--xlarge .a-BadgeList-value > a { height: 64px; line-height: 64px; font-size: 24px; } }

@media only screen and (max-width: 1024px) { .a-BadgeList--responsive.a-BadgeList--xxlarge .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--xxlarge .a-BadgeList-value > a, .a-BadgeList--responsive.a-BadgeList--xlarge .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--xlarge .a-BadgeList-value > a, .a-BadgeList--responsive.a-BadgeList--large .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--large .a-BadgeList-value > a { height: 48px; line-height: 48px; font-size: 16px; } }

@media only screen and (max-width: 800px) { .a-BadgeList--responsive.a-BadgeList--xxlarge .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--xxlarge .a-BadgeList-value > a, .a-BadgeList--responsive.a-BadgeList--xlarge .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--xlarge .a-BadgeList-value > a, .a-BadgeList--responsive.a-BadgeList--large .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--large .a-BadgeList-value > a, .a-BadgeList--responsive.a-BadgeList--medium .a-BadgeList-value, .a-BadgeList--responsive.a-BadgeList--medium .a-BadgeList-value > a { height: 32px; line-height: 32px; font-size: 12px; } }