/** Import Compass */
/* Margins ========================================================================== */
/* Paddings ========================================================================== */
/* Directions ========================================================================== */
/* Floats ========================================================================== */
/* Text Alignment ========================================================================== */
/* Transforms ========================================================================== */
/* ========================================================================== Icon Library Mixin ========================================================================== */
/* ========================================================================== Shadows ========================================================================== */
/* ========================================================================== Content Block --- Used as a generic container for storing any type content. Modeled after the Bootstrap "Panel" and "Well" styles HTML: <div class="t-ContentBlock"> <div class="t-ContentBlock-header"> <div class="t-ContentBlock-headerItems t-ContentBlock-headerItems--title"> <span class="t-ContentBlock-headerIcon"><span class="t-Icon></span></span> <h1 class="t-ContentBlock-title"></h1> </div> <div class="t-ContentBlock-headerItems t-Region-ContentBlock--buttons"></div> </div> <div class="t-ContentBlock-body"></div> <div class="t-ContentBlock-buttons"></div> </div> ========================================================================== */
/* ========================================================================== Modifiers ========================================================================== */
/* Standard Content ========================================================================== */
.t-ContentBlock { margin-bottom: 32px; }

.t-ContentBlock .t-ContentBlock-body { font-size: 1.4rem; line-height: 2.0rem; }

@media (max-width: 640px) { .t-ContentBlock { margin-bottom: 16px; } }

/* Region Header ========================================================================== */
.t-ContentBlock-header { display: flex; align-items: center; }

.t-ContentBlock-headerItems--title { flex-grow: 1; text-align: left; display: flex; align-items: center; }

.u-RTL .t-ContentBlock-headerItems--title { text-align: right; }

.t-ContentBlock-headerItems--buttons { text-align: right; padding-left: 1.2rem; }

.u-RTL .t-ContentBlock-headerItems--buttons { text-align: left; }

.t-ContentBlock-headerItems--buttons:empty { display: none; }

.t-ContentBlock-headerIcon { /* Hidden by default unless template option is set */ display: none; }

.t-ContentBlock--showIcon > .t-ContentBlock-header .t-ContentBlock-headerIcon { display: flex; margin-right: 1.2rem; }

.u-RTL .t-ContentBlock--showIcon > .t-ContentBlock-header .t-ContentBlock-headerIcon { margin-right: 0; margin-left: 1.2rem; }

/* Heading Size ========================================================================== */
.t-ContentBlock-title { line-height: 1.5; font-weight: 500; margin: 0; margin-right: 1.2rem; }

.u-RTL .t-ContentBlock-title { margin-right: 0; margin-left: 1.2rem; }

.t-ContentBlock--h1 .t-ContentBlock-header { margin-bottom: 1.6rem; }

@media (max-width: 640px) { .t-ContentBlock--h1 .t-ContentBlock-header { margin-bottom: .8rem; } }

.t-ContentBlock--h1 .t-ContentBlock-title { font-size: 3.2rem; }

@media (max-width: 640px) { .t-ContentBlock--h1 .t-ContentBlock-title { font-size: 2.4rem; } }

.t-ContentBlock--h2 .t-ContentBlock-header { margin-bottom: 1.2rem; }

@media (max-width: 640px) { .t-ContentBlock--h2 .t-ContentBlock-header { margin-bottom: .4rem; } }

.t-ContentBlock--h2 .t-ContentBlock-title { font-size: 2.4rem; }

@media (max-width: 640px) { .t-ContentBlock--h2 .t-ContentBlock-title { font-size: 2.0rem; } }

.t-ContentBlock--h3 .t-ContentBlock-header { margin-bottom: 1.2rem; }

@media (max-width: 640px) { .t-ContentBlock--h3 .t-ContentBlock-header { margin-bottom: .4rem; } }

.t-ContentBlock--h3 .t-ContentBlock-title { font-size: 2.0rem; }

@media (max-width: 640px) { .t-ContentBlock--h3 .t-ContentBlock-title { font-size: 1.6rem; } }

/* Body Background -- Shadow ========================================================================== */
.t-ContentBlock--shadowBG .t-ContentBlock-body { background-color: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: auto; padding: 0; }

/* Body Background -- Light ========================================================================== */
.t-ContentBlock--lightBG .t-ContentBlock-body { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: auto; padding: 0; }

/* Body Padding ========================================================================== */
.t-ContentBlock--padded .t-ContentBlock-body { padding: 16px; }