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

.t-BadgeList-item { display: block; position: relative; }

.t-BadgeList-wrap { display: block; text-decoration: none; }

.t-BadgeList-label { display: block; }

.t-BadgeList-value { display: block; text-align: center; }

.t-BadgeList-value a { display: block; }

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

/* ========================================================================== Animations ========================================================================== */
@-webkit-keyframes animateFill { from { -webkit-transform: translateX(-10%); }
  to { -webkit-transform: translateX(0); } }

@keyframes animateFill { from { -webkit-transform: translateX(-10%); transform: translateX(-10%); }
  to { -webkit-transform: translateX(0); transform: translateX(0); } }

/* ========================================================================== Circular Badges ========================================================================== */
.t-BadgeList--circular .t-BadgeList-item { display: block; position: relative; padding-right: 1.2rem; padding-left: 1.2rem; padding-top: 1.2rem; }

.t-BadgeList--circular a.t-BadgeList-wrap .t-BadgeList-value { transition: box-shadow; }

.t-BadgeList--circular a.t-BadgeList-wrap:hover .t-BadgeList-value { box-shadow: 0 0 0 0.4rem rgba(0, 0, 0, 0.1) inset; }

.t-BadgeList--circular .t-BadgeList-label { display: block; text-align: center; position: absolute; bottom: 0; left: 0.1rem; right: 0.1rem; font-size: 1.2rem; line-height: 1.5; padding: 1.6rem 0; }

.t-BadgeList--circular .t-BadgeList-value { display: block; text-align: center; border-radius: 100%; margin: 0 auto; transition: background-color .2s; }

.t-BadgeList--circular .t-BadgeList-value a { display: block; border-radius: 100%; text-decoration: none; transition: box-shadow .1s, color .1s, background-color .3s; }

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

.t-BadgeList--circular .t-BadgeList-value a:focus { outline: none; }

/* Mixin */
/* Default Size */
.t-BadgeList--circular .t-BadgeList-value { width: 48px; height: 48px; line-height: 48px; font-size: 16px; }

/* Multiple Sizes */
.t-BadgeList--circular.t-BadgeList--small .t-BadgeList-value { width: 32px; height: 32px; line-height: 32px; font-size: 12px; }

.t-BadgeList--circular.t-BadgeList--small .t-BadgeList-label { font-size: 12px; padding: 3px 8px; }

.t-BadgeList--circular.t-BadgeList--small .t-BadgeList-item { padding-bottom: 24px; }

.t-BadgeList--circular.t-BadgeList--medium .t-BadgeList-value { width: 48px; height: 48px; line-height: 48px; font-size: 16px; }

.t-BadgeList--circular.t-BadgeList--medium .t-BadgeList-label { font-size: 12px; padding: 7px 8px; }

.t-BadgeList--circular.t-BadgeList--medium .t-BadgeList-item { padding-bottom: 32px; }

.t-BadgeList--circular.t-BadgeList--large .t-BadgeList-value { width: 64px; height: 64px; line-height: 64px; font-size: 20px; }

.t-BadgeList--circular.t-BadgeList--large .t-BadgeList-label { font-size: 14px; padding: 9.5px 8px; }

.t-BadgeList--circular.t-BadgeList--large .t-BadgeList-item { padding-bottom: 40px; }

.t-BadgeList--circular.t-BadgeList--xlarge .t-BadgeList-value { width: 96px; height: 96px; line-height: 96px; font-size: 24px; }

.t-BadgeList--circular.t-BadgeList--xlarge .t-BadgeList-label { font-size: 16px; padding: 12px 8px; }

.t-BadgeList--circular.t-BadgeList--xlarge .t-BadgeList-item { padding-bottom: 48px; }

.t-BadgeList--circular.t-BadgeList--xxlarge .t-BadgeList-value { width: 128px; height: 128px; line-height: 128px; font-size: 32px; }

.t-BadgeList--circular.t-BadgeList--xxlarge .t-BadgeList-label { font-size: 20px; padding: 17px 8px; }

.t-BadgeList--circular.t-BadgeList--xxlarge .t-BadgeList-item { padding-bottom: 64px; }

/* Responsive */

/* ========================================================================== Dashboard ========================================================================== */
.t-BadgeList--dash .t-BadgeList-item { position: relative; }

.t-BadgeList--dash .t-BadgeList-label { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.4rem; line-height: 2.0rem; }

.t-BadgeList--dash .t-BadgeList-value { text-align: center; font-size: 3.6rem; line-height: 4.0rem; }

.t-BadgeList--dash .t-BadgeList-value a:hover { text-decoration: underline; }

.t-BadgeList--dash .t-BadgeList-wrap { padding: 2.4rem 1.2rem; overflow: hidden; position: relative; }

.t-BadgeList--dash a.t-BadgeList-wrap { transition: box-shadow .1s; text-decoration: none; }

.t-BadgeList--dash a.t-BadgeList-wrap:hover { box-shadow: 0 -8px 0 0 rgba(0, 0, 0, 0.075) inset; }

.t-BadgeList--dash .t-BadgeList-label, .t-BadgeList--dash .t-BadgeList-value { position: relative; z-index: 10; transition: all .2s; }

.t-BadgeList--dash .t-BadgeList-fill { display: block; position: absolute; z-index: 1; top: 0; left: 0; height: 100%; background-color: rgba(0, 0, 0, 0.05); -webkit-animation: animateFill linear 1; animation: animateFill linear 1; -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ animation-fill-mode: forwards; -webkit-animation-duration: .2s; animation-duration: .2s; }

.t-BadgeList--dash.t-BadgeList--coloredBG .t-BadgeList-fill { background-color: rgba(0, 0, 0, 0.15); }

/* ========================================================================== Layout Modifiers ========================================================================== */
.t-BadgeList--float .t-BadgeList-item:after, .t-BadgeList--flex .t-BadgeList-item:after, .t-BadgeList--cols .t-BadgeList-item:after, .t-BadgeList--fixed .t-BadgeList-item:after, .t-BadgeList--stacked .t-BadgeList-item:after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; right: -1px; z-index: 10; }

.t-BadgeList--float .t-BadgeList-item:before, .t-BadgeList--flex .t-BadgeList-item:before, .t-BadgeList--cols .t-BadgeList-item:before, .t-BadgeList--fixed .t-BadgeList-item:before, .t-BadgeList--stacked .t-BadgeList-item:before { content: ''; position: absolute; left: 0; right: 0; height: 1px; bottom: -1px; z-index: 11; }

.t-BadgeList--float .t-BadgeList-item:after, .t-BadgeList--float .t-BadgeList-item:before, .t-BadgeList--flex .t-BadgeList-item:after, .t-BadgeList--flex .t-BadgeList-item:before, .t-BadgeList--cols .t-BadgeList-item:after, .t-BadgeList--cols .t-BadgeList-item:before, .t-BadgeList--fixed .t-BadgeList-item:after, .t-BadgeList--fixed .t-BadgeList-item:before, .t-BadgeList--stacked .t-BadgeList-item:after, .t-BadgeList--stacked .t-BadgeList-item:before { background-color: rgba(0, 0, 0, 0.05); }

.t-BadgeList--bottomBorder { border-bottom: 1px solid; }

.t-Body-actions .t-BadgeList-item:after, .t-Body-actions .t-BadgeList-item:before { display: none; }

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

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

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

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

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

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

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

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

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

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

/* ========================================================================== Colored ========================================================================== */

@media only screen and (max-width: 480px) { .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--xxlarge .t-BadgeList-value, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--xlarge .t-BadgeList-value, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--large .t-BadgeList-value, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--medium .t-BadgeList-value { width: 48px; height: 48px; line-height: 48px; font-size: 16px; }
  .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--xxlarge .t-BadgeList-label, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--xlarge .t-BadgeList-label, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--large .t-BadgeList-label, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--medium .t-BadgeList-label { font-size: 14px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--xxlarge .t-BadgeList-item, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--xlarge .t-BadgeList-item, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--large .t-BadgeList-item, .t-BadgeList--circular.t-BadgeList--responsive.t-BadgeList--medium .t-BadgeList-item { padding-bottom: 28px; } .t-BadgeList--5cols .t-BadgeList-item, .t-BadgeList--4cols .t-BadgeList-item, .t-BadgeList--3cols .t-BadgeList-item { float: none; width: auto; } }

@media only screen and (max-width: 640px) { .t-BadgeList--5cols .t-BadgeList-item, .t-BadgeList--4cols .t-BadgeList-item, .t-BadgeList--3cols .t-BadgeList-item { width: 50%; } }