/** Import Compass */
/* Margins ========================================================================== */
/* Paddings ========================================================================== */
/* Directions ========================================================================== */
/* Floats ========================================================================== */
/* Text Alignment ========================================================================== */
/* Transforms ========================================================================== */
/* ========================================================================== Icon Library Mixin ========================================================================== */
/* ========================================================================== Shadows ========================================================================== */
/* ========================================================================== Buttons ========================================================================== */
/** Core Button Component This is a core button component.  This only contains the relevant structural styles necessary to render a button.  This class can be applied to buttons, links, or input buttons. Example HTML: <button class="t-Button [modifiers]" type="submit">Button Label</button> <a class="t-Button [modifiers]" href="#" role="button">Button Label</a> <input class="t-Button [modifiers]" type="submit" value="Button Label"> */
/** Button 1. Use proper box-model for button sizing across all browsers 2. Reset webkit based browser appearance 4. Inherit font from ancestor 5. Normalize line-height 6. Prevent text selection on buttons 7. Prevent wrapping of text in buttons */
.t-Button { box-sizing: border-box; -webkit-appearance: none; background: transparent; background-clip: padding-box; border: .1rem solid; cursor: pointer; display: inline-block; font: inherit; line-height: normal; margin: 0; padding: .4rem 1.2rem; position: relative; text-align: center; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; }

.t-Button .t-Icon { vertical-align: top; }

.apex-icons-fontawesome .t-Button .t-Icon { padding: .1rem 0; }

/** Hover, Focus and Click States */
.t-Button:hover, .t-Button:focus, .t-Button:active { text-decoration: none; }

/** Disabled States */
.t-Button.is-disabled, .t-Button[disabled], .a-Button.is-disabled, .a-Button[disabled] { opacity: .5; pointer-events: none; cursor: not-allowed; }

/** Firefox padding / border issue */
.t-Button::-moz-focus-inner { border: 0; padding: 0; }

/** Spacing between buttons */
.t-Button + .t-Button { margin-left: .4rem; }

.u-RTL .t-Button + .t-Button { margin-right: .4rem; margin-left: 0; }

.t-Button + .t-Button.t-Button--pill, .t-Button + .t-Button.t-Button--pillEnd { margin-left: -.1rem !important; }

.u-RTL .t-Button + .t-Button.t-Button--pill, .u-RTL .t-Button + .t-Button.t-Button--pillEnd { margin-right: -.1rem !important; margin-left: 0 !important; }

.t-Button + .t-Button.t-Button--stretch { margin-left: 0 !important; }

.u-RTL .t-Button + .t-Button.t-Button--stretch { margin-right: 0 !important; }

/** Pill Buttons */
.t-Button--pill:not(.t-Button--pillStart):not(.t-Button--pillEnd) { border-radius: 0 !important; margin-right: -.1rem !important; }

.t-Button--pillStart { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-right: 0 !important; }

.t-Button--pillEnd { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: 0 !important; }

.t-Button--pillStart + .t-Button--pillEnd { margin-left: -.1rem !important; }

.t-Button--padLeft { margin-left: .4rem !important; }

.t-Button--padRight { margin-right: .4rem !important; }

.t-Button--gapLeft { margin-left: 1.2rem !important; }

.u-RTL .t-Button--gapLeft { margin-left: inherit !important; margin-right: 1.2rem !important; }

.t-Button--gapRight { margin-right: 1.2rem !important; }

.u-RTL .t-Button--gapRight { margin-right: inherit !important; margin-left: 1.2rem !important; }

.t-Button--gapTop { margin-top: 1.2rem !important; }

.t-Button--gapBottom { margin-bottom: 1.2rem !important; }

.t-Button--padTop { margin-top: 0.8rem !important; }

.t-Button--padBottom { margin-bottom: 0.8rem !important; }

.t-Button-badge { padding: 0 .6rem; display: inline-block; margin-left: .4rem; }

.t-Button-badge:empty { display: none; }

/** Stretch Button */
.t-Button--stretch { width: 100%; display: block; margin-bottom: .8rem; }

.t-Button--stretch:last-child { margin-bottom: 0; }

/** Buttons with Icons or Icon and Text */
.t-Button--icon { line-height: 1.6rem; text-align: center; min-width: 4.0rem; }

.t-Button--icon.t-Button--slim { padding-right: .8rem; padding-left: .8rem; min-width: 3.2rem; }

/** Buttons with Icons or Icon and Text */
.t-Button--iconLeft .t-Icon { margin-right: .4rem; }

.u-RTL .t-Button--iconLeft .t-Icon { margin-right: 0; margin-left: .4rem; }

.t-Button--iconLeft .t-Icon.t-Icon--right { display: none; }

.t-Button--iconRight .t-Icon { margin-left: .4rem; }

.u-RTL .t-Button--iconRight .t-Icon { margin-left: 0; margin-right: .4rem; }

.t-Button--iconRight .t-Icon.t-Icon--left { display: none; }

.t-Button { font-size: 1.2rem; line-height: 1.6rem; padding: .8rem 1.2rem; font-weight: 400; }

.t-Button--hot { font-weight: bold; }

/** Button Label */
/** Tiny Button */
.t-Button--tiny { font-size: 1.0rem; line-height: 1.2rem; padding: 0.4rem 0.6rem; }

.t-Button--tiny .t-Icon { font-size: 1.2rem; line-height: 1; }

/** Small Button */
.t-Button--small { font-size: 1.1rem; line-height: 1.6rem; padding: .4rem .8rem; }

.t-Button--small .t-Icon { font-size: 1.2rem; line-height: inherit; }

.t-Button--tiny, .t-Button--small { min-width: 0; }

/** Hide Show Icon */
.t-Button--hideShow { font-size: 1.1rem; line-height: 1.4rem; min-width: 2.4rem; }

.t-Button--hideShow.t-Button { padding: .4rem; }

/** Large Button */
.t-Button--large { padding: 1.2rem 1.6rem; line-height: 1.6rem; font-size: 1.4rem; }

.t-Button--large.t-Button--withIcon { line-height: 1.6rem; padding: 1.2rem 1.4rem; }

/** Nav Control Button */
.t-Button.t-Button--header { padding: 0.8rem; vertical-align: top; box-shadow: none; text-align: center; }

.t-Button.t-Button--header + .t-Button.t-Button--header { margin: 0; }

.t-Button.t-Button--header.t-Button--headerRight { border-radius: 0; }

.u-RTL .t-Button.t-Button--header.t-Button--headerRight { right: 0; }

.apex-icons-fontawesome .t-Button.t-Button--header .t-Icon.fa { font-size: 1.4rem; }

.t-Button--navBar { min-width: 40px; }

.t-Button--navBar .t-Button-badge { margin-left: 4px; font-size: 11px; }

.t-Button--navBar .t-Icon { line-height: 16px; }

.t-Button--navBar .t-Icon.fa, .t-Button--navBar .t-Icon.a-Icon { margin-right: 4px; }

.u-RTL .t-Button--navBar .t-Icon.fa, .u-RTL .t-Button--navBar .t-Icon.a-Icon { margin-right: 0; margin-left: 4px; }

@media (max-width: 640px) { .t-Button--navBar .t-Button-badge { position: absolute; margin-left: 0; top: 4px; right: 4px; font-size: 10px; line-height: 1.4rem; padding: 0 0.4rem; }
  .t-Button--navBar .t-Button-label { display: none; }
  .t-Button--navBar .a-Icon.icon-down-arrow { margin-right: -4px; } }

.t-Button--headerUser { text-transform: lowercase; cursor: default; }

/******************************************************************************
Button in Region Header
******************************************************************************/
.t-Region-headerItems--buttons .t-Button + .js-maximizeButtonContainer { margin-left: 1.2rem; }

.u-RTL .t-Region-headerItems--buttons .t-Button + .js-maximizeButtonContainer { margin-left: 0; margin-right: 1.2rem; }

.t-Region-headerItems--buttons .t-Button + .js-maximizeButtonContainer:empty { display: none; }

.t-Region-headerItems--buttons .t-Button--icon + .t-Button--icon { margin-left: 0; }

.t-Region--hideShow .t-Region-headerItems--buttons .t-Button:last-child { margin-right: 1.1rem; }

.t-Button--noUI:not(.t-Button--simple), .t-Button--noUI:not(.t-Button--simple):hover, .t-Button--noUI:not(.t-Button--simple):active { text-shadow: none; background-color: transparent; box-shadow: none; }

@media screen and (-ms-high-contrast: active) { .t-Button, .a-Button { border: 1px solid; } }

/* Radio Button Pills ========================================================================== */
.apex-button-group label, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc label { min-width: 48px; padding: 4px 8px; }

.apex-button-group .apex-item-option, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option { padding: 0; }

.apex-button-group input + label, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label { width: 100%; text-align: center; outline: none !important; }

.apex-button-group input + label, .u-RTL .apex-button-group input + label, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label, .u-RTL .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label { padding: 4px 8px; }

.apex-button-group input + label:before, .apex-button-group input + label:after, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label:before, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label:after { display: none; }

.apex-button-group .apex-item-option label, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option label { margin: 0; display: block; }

.apex-button-group .apex-item-option:not(:last-of-type):not(:first-of-type) label, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc .apex-item-option:not(:last-of-type):not(:first-of-type) label { border-radius: 0; }

.apex-button-group input + label .t-Icon, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label .t-Icon { vertical-align: top; }

@media (max-width: 640px) { .apex-item-group--rc { /* .apex-item-option:first-child:nth-last-child(1) { width: 100%; } */ }
  .apex-item-group--rc .apex-item-grid { overflow: hidden; display: block; }
  .apex-item-group--rc .apex-item-grid-row { display: inline; }
  .apex-item-group--rc .apex-item-option { float: left; display: block; }
  .apex-item-group--rc .apex-item-option:first-child:nth-last-child(2), .apex-item-group--rc .apex-item-option:first-child:nth-last-child(2) ~ .apex-item-option { width: 50%; }
  .apex-item-group--rc .apex-item-option:first-child:nth-last-child(3), .apex-item-group--rc .apex-item-option:first-child:nth-last-child(3) ~ .apex-item-option { width: 33.3333%; }
  .apex-item-group--rc .apex-item-option:first-child:nth-last-child(4), .apex-item-group--rc .apex-item-option:first-child:nth-last-child(4) ~ .apex-item-option { width: 50%; }
  .apex-item-group--rc .apex-item-option:first-child:nth-last-child(5), .apex-item-group--rc .apex-item-option:first-child:nth-last-child(5) ~ .apex-item-option { width: 50%; }
  .apex-item-group--rc .apex-item-option:first-child:nth-last-child(6), .apex-item-group--rc .apex-item-option:first-child:nth-last-child(6) ~ .apex-item-option { width: 33.3333%; }
  .apex-item-group--rc .apex-item-option:first-child:nth-last-child(7), .apex-item-group--rc .apex-item-option:first-child:nth-last-child(7) ~ .apex-item-option { width: 50%; }
  .apex-item-group--rc .apex-item-option:first-child:nth-last-child(8), .apex-item-group--rc .apex-item-option:first-child:nth-last-child(8) ~ .apex-item-option { width: 50%; } }

/* Radio Button Pills with Radio/Check ========================================================================== */
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc.apex-item-checkbox input + label { text-align: left; padding-left: 24px; }

.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc.apex-item-checkbox input + label:before, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc.apex-item-checkbox input + label:after { display: block; top: 4px; left: 4px; }

.u-RTL .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc.apex-item-checkbox input + label { padding-right: 24px; padding-left: 8px; text-align: right; }

.u-RTL .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc.apex-item-checkbox input + label:before, .u-RTL .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc.apex-item-checkbox input + label:after { left: auto; right: 4px; }

/** Hide Labe on Buttons with Icons and Text for Mobile */
@media (max-width: 640px) { .t-Button--mobileHideLabel .t-Icon { margin-right: 0 !important; margin-left: 0 !important; }
  .t-Button--mobileHideLabel .t-Button-label { display: none; } }

/* Button Icon Hover Animations ========================================================================== */
.t-Button--hoverIconSpin .t-Icon { -webkit-animation: anim-spin 2s infinite linear; animation: anim-spin 2s infinite linear; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: .2s; animation-delay: .2s; }

.t-Button--hoverIconSpin:hover .t-Icon, .t-Button--hoverIconSpin:focus .t-Icon { -webkit-animation-play-state: running; animation-play-state: running; }

.t-Button.t-Button--hoverIconPush .t-Icon { transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, -webkit-transform .2s ease; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease, -webkit-transform .2s ease; }

.t-Button.t-Button--hoverIconPush.t-Button--iconLeft:hover .t-Icon--left, .t-Button.t-Button--hoverIconPush.t-Button--iconLeft:focus .t-Icon--left { -webkit-transform: translateX(-4px); transform: translateX(-4px); }

.u-RTL .t-Button.t-Button--hoverIconPush.t-Button--iconLeft:hover .t-Icon--left, .u-RTL .t-Button.t-Button--hoverIconPush.t-Button--iconLeft:focus .t-Icon--left { -webkit-transform: translateX(4px); transform: translateX(4px); }

.t-Button.t-Button--hoverIconPush.t-Button--iconLeft:active .t-Icon--left { -webkit-transform: translateX(0); transform: translateX(0); }

.t-Button.t-Button--hoverIconPush.t-Button--iconRight:hover .t-Icon--right, .t-Button.t-Button--hoverIconPush.t-Button--iconRight:focus .t-Icon--right { -webkit-transform: translateX(4px); transform: translateX(4px); }

.u-RTL .t-Button.t-Button--hoverIconPush.t-Button--iconRight:hover .t-Icon--right, .u-RTL .t-Button.t-Button--hoverIconPush.t-Button--iconRight:focus .t-Icon--right { -webkit-transform: translateX(-4px); transform: translateX(-4px); }

.t-Button.t-Button--hoverIconPush.t-Button--iconRight:active .t-Icon--right { -webkit-transform: translateX(0); transform: translateX(0); }
