/* This styling enables md-button components to contain md based icons tightly without borders. */
.md-button.md-icon-button {
    margin: 0 0.0rem;
    height: 3rem;
    min-width: 0;
    line-height: 3rem;
    padding-left: 0;
    padding-right: 0;
    width: 3rem;
}
.md-button.md-icon-button-with-text {
    margin: 0 0rem;
    height: 3rem;
    min-width: 0;
    line-height: 0.0rem;
    padding-left: 0;
    padding-right: 0;
    width: 2rem;
}

/*
 * A cross-browser attempt at scrollable content that hides the (vertical) scrollbar.
 * Loosely based on https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll, (using answer from Richrd Mar 14, 2018)
 * but width uses calc function because of the change with CSS (below) box-sizing: border-box
 */
.scrollable-content {
    height: 100%;
    overflow: hidden;
}
.scrollable-content-child {
    height: 100%;
    width: calc(100% + 17px);
    overflow-y: scroll;
}

/*
 * === === === === ===
 * The following is based on the guidelines described in the document EPRI Web and Mobile Guide v4.1 (circa November 2017).
 *
 * NOTE: As of April 9, 2018, AngularJS Material (v1.1.8) theme colors, as specified with so-called intention classes, only work with certain of its own components,
 * e.g. "md-button", and do not seem to work on standard HTML elements, so let's define some that seem to follow the SWS guideline themes.
 * === === === === ===
 */

/*
 * Blue color codes palette from the SWS light theme
 */
.sws-theme-blue-50-color {
    color: #E3F2FD
}
.sws-theme-blue-50-background-color {
    background-color: #E3F2FD
}
.sws-theme-blue-100-color {
    color: #BBDEFB
}
.sws-theme-blue-100-background-color {
    background-color: #BBDEFB
}
.sws-theme-blue-200-color {
    color: #90CAF9
}
.sws-theme-blue-200-background-color {
    background-color: #90CAF9
}
.sws-theme-blue-300-color {
    color: #64B5F6
}
.sws-theme-blue-300-background-color {
    background-color: #64B5F6
}
.sws-theme-blue-400-color {
    color: #42A5F5
}
.sws-theme-blue-400-background-color {
    background-color: #42A5F5
}
.sws-theme-blue-500-color
{
    color: #2196F3
}
.sws-theme-blue-500-background-color
{
    background-color: #2196F3
}
.sws-theme-blue-600-color {
    color: #1E88E5
}
.sws-theme-blue-600-background-color {
    background-color: #1E88E5
}
.sws-theme-blue-700-color
, a:hover
, .sws-content-heading-color
{
    color: #1976D2
}
.sws-theme-blue-700-background-color
, .sws-primary-background-color
{
    background-color: #1976D2
}
.sws-theme-blue-800-color {
    color: #1565C0
}
.sws-theme-blue-800-background-color {
    background-color: #1565C0
}
.sws-theme-blue-900-color {
    color: #0D47A1
}
.sws-theme-blue-900-background-color {
    background-color: #0D47A1
}

/*
 * Grey color codes palette from the SWS light theme
 */
.sws-theme-grey-50-color {
    color: #FAFAFA
}
.sws-theme-grey-50-background-color {
    background-color: #FAFAFA
}
.sws-theme-grey-100-color
, .sws-primary-text-color
, .sws-sidenav-level-one-item-text-color
{
    color: #F5F5F5
}
.sws-theme-grey-100-background-color {
    background-color: #F5F5F5
}
.sws-theme-grey-200-color {
    color: #EEEEEE
}
.sws-theme-grey-200-background-color {
    background-color: #EEEEEE
}
.sws-theme-grey-300-color {
    color: #E0E0E0
}
.sws-theme-grey-300-background-color {
    background-color: #E0E0E0
}
.sws-theme-grey-400-color
, .sws-sidenav-caption-text-color
, .sws-sidenav-level-two-item-text-color
, .sws-sidenav-level-three-item-text-color
, .sws-sidenav-level-four-item-text-color
, .sws-sidenav-level-five-item-text-color
{
    color: #BDBDBD 
}
.sws-theme-grey-400-background-color {
    background-color: #BDBDBD
}
.sws-theme-grey-500-color {
    color: #9E9E9E
}
.sws-theme-grey-500-background-color 
{
    background-color: #9E9E9E
}
.sws-theme-grey-600-color {
    color: #757575
}
.sws-theme-grey-600-background-color 
, .sws-sidenav-level-three-item:hover
, .sws-sidenav-level-four-item:hover
, .sws-sidenav-level-five-item:hover
{
    background-color: #757575
}
.sws-theme-grey-700-color {
    color: #616161
}
.sws-theme-grey-700-background-color
, .sws-sidenav-level-two-item:hover
{
    background-color: #616161
}
.sws-theme-grey-800-color {
    color: #424242
}
.sws-theme-grey-800-background-color
, .sws-sidenav-level-one-item:hover
{
    background-color: #424242
}
.sws-theme-grey-900-color {
    color: #212121
}
.sws-theme-grey-900-background-color
, .sws-sidenav-background-color
{
    background-color: #212121
}

.roboto-normal {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
/* This uses the explicit italic form of Roboto font, rather than letting browser fabricate italic from a normal font. */
.roboto-italic {
    font-family: 'RobotoItalic', Arial, Helvetica, sans-serif;
}

.roboto-thin {
    font-family: 'RobotoThin', Arial, Helvetica, sans-serif;
}
.roboto-light {
    font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
}
.roboto-medium {
    font-family: 'RobotoMedium', Arial, Helvetica, sans-serif;
}
.roboto-bold {
    font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
}
.roboto-black {
    font-family: 'RobotoBlack', Arial, Helvetica, sans-serif;
}

.roboto-thinitalic {
    font-family: 'RobotoThinItalic', Arial, Helvetica, sans-serif;
}
.roboto-lightitalic {
    font-family: 'RobotoLightItalic', Arial, Helvetica, sans-serif;
}
.roboto-mediumitalic {
    font-family: 'RobotoMediumItalic', Arial, Helvetica, sans-serif;
}
.roboto-bolditalic {
    font-family: 'RobotoBoldItalic', Arial, Helvetica, sans-serif;
}
.roboto-blackitalic {
    font-family: 'RobotoBlackItalic', Arial, Helvetica, sans-serif;
}

* {
    /*
     * Roboto specified as primary font, then fallback to Arial, Helvetica and sans-serif fonts.
     */
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    
    /*
     * Let sizing of elements include content, padding and border.
     */
    box-sizing: border-box;
}

/*
 * Hyperlink text should not display (default) underline or blue color.
 */
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.sws-headline {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 24px;
}
.sws-title {
    font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
    font-size: 18px;
}
.sws-subheader {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 16px;
}
.sws-body2, .sws-menu {
    font-family: 'RobotoMedium', Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.sws-body1 {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.sws-caption {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.sws-button {
    font-family: 'RobotoMedium', Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
}
.sws-sidenav-level-one-item {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 18px;
    cursor: pointer;
    padding: 16px;

    /*
     * This CSS gets rid of text highlighting and element outline.  See the following for more info:
     * https://www.w3schools.com/cssref/css3_pr_user-select.asp
     * https://www.w3schools.com/cssref/pr_outline-style.asp
     */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none;
}
.sws-sidenav-level-two-item {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
    cursor: pointer;
    padding: 12px;
    padding-left: 24px;
    
    /*
     * This CSS gets rid of text highlighting and element outline.  See the following for more info:
     * https://www.w3schools.com/cssref/css3_pr_user-select.asp
     * https://www.w3schools.com/cssref/pr_outline-style.asp
     */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none;
}
.sws-sidenav-level-three-item {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
    cursor: pointer;
    padding: 12px;
    padding-left: 36px;
    
    /*
     * This CSS gets rid of text highlighting and element outline.  See the following for more info:
     * https://www.w3schools.com/cssref/css3_pr_user-select.asp
     * https://www.w3schools.com/cssref/pr_outline-style.asp
     */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none;
}
.sws-sidenav-level-four-item {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
    cursor: pointer;
    padding: 12px;
    padding-left: 48px;
    
    /*
     * This CSS gets rid of text highlighting and element outline.  See the following for more info:
     * https://www.w3schools.com/cssref/css3_pr_user-select.asp
     * https://www.w3schools.com/cssref/pr_outline-style.asp
     */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none;
}
.sws-sidenav-level-five-item {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
    cursor: pointer;
    padding: 12px;
    padding-left: 60px;
    
    /*
     * This CSS gets rid of text highlighting and element outline.  See the following for more info:
     * https://www.w3schools.com/cssref/css3_pr_user-select.asp
     * https://www.w3schools.com/cssref/pr_outline-style.asp
     */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none;
}
.sws-content-heading {
    font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    
    padding: 0px;
    margin: 0px;
}

/*
 * In support of expansion panel
 */
.expansion-panel {
    cursor: pointer;

    /*
     * This CSS gets rid of text highlighting and element outline.  See the following for more info:
     * https://www.w3schools.com/cssref/css3_pr_user-select.asp
     * https://www.w3schools.com/cssref/pr_outline-style.asp
     */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none;
}

/*
 * In support of buttons
 */
.buttondemoBasicUsage section {
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  margin: 1em;
  position: relative !important;
  padding-bottom: 10px; }

.buttondemoBasicUsage md-content {
  margin-right: 7px; }

.buttondemoBasicUsage section .md-button {
  margin-top: 16px;
  margin-bottom: 16px; }

.buttondemoBasicUsage section .label {
  position: absolute;
  bottom: 5px;
  left: 7px;
  font-size: 14px;
  opacity: 0.54; }

/*
 * In support of button toggle
 */
.buttontoggleContainer {
    border-width: 1px;
    border-style: outset;
    padding: 0px;
    margin: 0px;
}


/*
 * CSS in support of the angular-material-data-table implementation.
 */
md-toolbar.md-table-toolbar.alternate {
  color: #1E88E5;
  background-color: #E3F2FD;
}

md-toolbar.md-table-toolbar.alternate .md-toolbar-tools {
  font-size: 16px;
}

md-card:first-child {
  padding: 8px 8px 8px 24px;
}

/*

.checkboxes > md-checkbox {
  margin: 0;
  padding: 16px;
  min-width: 300px;
  flex: 0 0 auto;
}
*/

/*
 * It seems the angular-material-data-table defaults to "dark" icons, so provide this
 * CSS in order to conform other icons to the SWS guidelines, e.g. header icons.
 */
.md-icon-default-color {
    color: white;
}