@charset "utf-8";

/** Area-Specific, Customer **/

/** Header, Alpha **/

/** The alpha style header features top-left navigation title with links
    and is designed for user roles which have multiple feature pages. **/

.tas-pseudo-body > .tas-header.tas-alpha { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; font-family: "Raleway", sans-serif; font-weight: 300; padding: 30px 30px 20px 30px; }
.tas-pseudo-body > .tas-header.tas-alpha > .tas-header-left { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 0px 20px 10px 0px; }
.tas-pseudo-body > .tas-header.tas-alpha > .tas-header-right { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-title { flex: none; font-size: 24px; padding: 10px 0px 4px 0px; border-bottom: 1px solid rgba(196,196,196,1); white-space: nowrap; text-overflow: ellipsis; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-navigation-links { font-family: "Muli", sans-serif; font-size: 14px; padding: 8px 0px 0px 0px; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-navigation-links .tas-label { padding: 0px 8px 0px 0px; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-navigation-links .tas-link { padding: 0px 12px 0px 0px; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-navigation-links .tas-link:last-child { padding-right: 0px; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-greeting { }
.tas-pseudo-body > .tas-header.tas-alpha .tas-clock { flex: 1 0 auto; overflow: hidden; font-size: 14px; padding: 4px 0px 0px 0px; opacity: 0.5; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-clock .tas-timezone { font-size: 10px; }
.tas-pseudo-body > .tas-header.tas-alpha > .tas-header-left .tas-greeting { display: none; font-size: 16px; padding: 10px 20px 10px 0px; }
.tas-pseudo-body > .tas-header.tas-alpha > .tas-header-right .tas-greeting { display: block; font-size: 18px; text-align: right; padding: 38px 15px 0px 0px; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-logo { flex: none; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-logo a, 
.tas-pseudo-body > .tas-header.tas-alpha .tas-logo img { display: block; }
.tas-pseudo-body > .tas-header.tas-alpha .tas-logo img { width: 170px; }

@media all and (max-width: 1280px) {		
  .tas-pseudo-body > .tas-header.tas-alpha .tas-logo img { width: 140px; }
  .tas-pseudo-body > .tas-header.tas-alpha > .tas-header-right .tas-greeting { padding-top: 28px; }
}

@media all and (max-width: 1024px) {		
  .tas-pseudo-body > .tas-header.tas-alpha .tas-logo img { width: 130px; }
  .tas-pseudo-body > .tas-header.tas-alpha > .tas-header-right .tas-greeting { padding-top: 25px; }
}

@media all and (max-width: 768px) {		
  .tas-pseudo-body > .tas-header.tas-alpha { padding-top: 20px; }
  .tas-pseudo-body > .tas-header.tas-alpha .tas-title { font-size: 20px; }
  .tas-pseudo-body > .tas-header.tas-alpha .tas-navigation-links { display: none; }
  .tas-pseudo-body > .tas-header.tas-alpha > .tas-header-left { align-items: flex-start; }
  .tas-pseudo-body > .tas-header.tas-alpha > .tas-header-left .tas-greeting { display: block; }
  .tas-pseudo-body > .tas-header.tas-alpha > .tas-header-right .tas-greeting { display: none; }
  .tas-pseudo-body > .tas-header.tas-alpha .tas-logo img { width: 100px; }
}

@media all and (max-width: 480px) {		
  .tas-pseudo-body > .tas-header.tas-alpha .tas-greeting { font-size: 18px; }
  .tas-pseudo-body > .tas-header.tas-alpha .tas-clock { font-size: 12px; }
}

/** Header, Beta **/

/** The beta style header is designed for user roles which have a single
    primary feature page and thus the top region of the page is used for
    a prominent greeting or other information. **/

.tas-pseudo-body > .tas-header.tas-beta { display: flex; flex-wrap: nowrap; justify-content: space-between; font-family: "Raleway", sans-serif; font-weight: 300; padding: 20px 30px 30px 30px; }
.tas-pseudo-body > .tas-header.tas-beta .tas-greeting { font-size: 24px; padding: 10px 20px 0px 0px; }
.tas-pseudo-body > .tas-header.tas-beta .tas-clock { flex: 1 0 auto; overflow: hidden; font-size: 16px; padding: 2px 0px 0px 0px; opacity: 0.5; }
.tas-pseudo-body > .tas-header.tas-beta .tas-clock .tas-timezone { font-size: 10px; }
.tas-pseudo-body > .tas-header.tas-beta .tas-logo { flex: none; }
.tas-pseudo-body > .tas-header.tas-beta .tas-logo a, 
.tas-pseudo-body > .tas-header.tas-beta .tas-logo img { display: block; }
.tas-pseudo-body > .tas-header.tas-beta .tas-logo img { width: 170px; }

@media all and (max-width: 768px) {		
  .tas-pseudo-body > .tas-header.tas-beta .tas-logo img { width: 130px; }
}

@media all and (max-width: 480px) {		
  .tas-pseudo-body > .tas-header.tas-beta .tas-greeting { font-size: 18px; }
  .tas-pseudo-body > .tas-header.tas-beta .tas-clock { font-size: 12px; }
  .tas-pseudo-body > .tas-header.tas-beta .tas-logo img { width: 110px; }
}

/** Columns, Alpha **/

/** The alpha style series of columns is used to lay out page
    content on a number of customer paes and consists of series
    of columns which stack vertically as page size decreases. **/
    
.tas-columns-alpha { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; padding: 0px 0px 60px 0px; }
.tas-columns-alpha > .tas-column { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0px 30px 30px 30px; }
.tas-columns-alpha > .tas-column .tas-heading { display: flex; }
.tas-columns-alpha > .tas-column .tas-heading > h2 { flex: none; font-size: 20px; margin: 0px 0px 14px 0px; padding: 0px 0px 4px 0px; border-bottom: 1px solid rgba(196,196,196,1); }

/** Content **/

/** Establish styles of page content containers 
    which are fundamental to the page layout. **/
    
.tas-pseudo-body-content { padding: 0px 30px 60px 30px; }

/** Footer **/

/** Expresses the style of the footer elements
    used exclusively by the customer area pages. **/

.tas-pseudo-body > .tas-footer { position: fixed; left: 0px; bottom: 0px; height: 48px; width: 100%; background: rgba(152,27,31,1); filter: drop-shadow(0px -2px 4px rgba(0, 0, 0, 0.25)); color: rgba(255,255,255,1); display: flex; z-index: 10; font-size: 20px; font-family: "Muli", sans-serif; font-weight: bold; }
.tas-pseudo-body > .tas-footer > .tas-left { flex: 1 0 auto; text-align: left; display: flex; align-items: center; justify-content: flex-start; padding: 0px 20px 0px 20px; }
.tas-pseudo-body > .tas-footer > .tas-left > .tas-ddm { flex: none; }
.tas-pseudo-body > .tas-footer > .tas-right { flex: 1 0 auto; text-align: right; display: flex; align-items: center; justify-content: flex-end; padding: 0px 20px 0px 20px; }
.tas-pseudo-body > .tas-footer-above { display: none; }
.tas-pseudo-body > .tas-footer-above { position: fixed; left: 0px; bottom: 48px; width: 100%; height: 24px; font-size: 11px; font-weight: normal; color: rgba(130,130,130,1); text-align: center; z-index: 10; }
.tas-pseudo-body > .tas-footer-above a { color: rgba(130,130,130,1); }

body.tas-login .tas-pseudo-body > .tas-footer-above { display: block; }

.tas-network-active .tas-pseudo-body > .tas-footer .tas-network-activity-indicator { display: block; }
                    .tas-pseudo-body > .tas-footer .tas-network-activity-indicator { display: none; position: relative; top: -4px; width: 12px; height: 12px; z-index: 1; margin: 0px 26px 0px 0px; }
                    .tas-pseudo-body > .tas-footer .tas-network-activity-indicator::after { content: ''; display: block; position: relative; top: 0px; left: 0px; width: 12px; height: 12px; margin: 2px; border-radius: 50%; border: 4px solid rgba(255,255,255,1); border-color: rgba(255,255,255,1) rgba(255,255,255,0.3) rgba(255,255,255,0.3) rgba(255,255,255,0.3); animation: tas-double-spin 1.4s linear infinite; }

.tas-footer-menu.tas-ddm-panel { background: rgba(192,74,67,1); font-size: 18px; font-weight: normal; padding: 24px 0px 24px 0px; }
.tas-footer-menu.tas-ddm-panel .tas-ddm-panel-item { padding: 6px 30px 6px 30px; }
.tas-footer-menu.tas-ddm-panel .tas-ddm-panel-item:active,
.tas-footer-menu.tas-ddm-panel .tas-ddm-panel-item:hover { background: rgba(0,0,0,0.2); }

@media all and (max-width: 768px) {		
  .tas-pseudo-body > .tas-footer > .tas-left { padding-left: 12px; }
}

@media all and (max-width: 480px) {
  .tas-pseudo-body > .tas-footer-above { font-size: 10px; }
}