/* This is the file that is used for global application styles*/
:root {
  --primary-color: #243A5E;
  --secondary-color: #008575;
  --warn-color: #C43E1C;
  --error-color: #A80000;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}

.body-font {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: left;
}

app-root {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  background-color: white;
}

.subheading {
  /* font-family: Roboto; */
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
}

.scc-prog-acc-complete:hover {
  font-weight: bold;
  color: #0091EA;
}

.scc-prog-acc-active {
  font-weight: bold;
  background: #e1e5ed;
  color: #43535d;
}

.scc-prog-acc-active .mat-expansion-indicator::after {
  color: white;
}

.scc-prog-acc-inactive {
  color: #6B6B6B;
}

h1 {
  font-weight: 200;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
}

[hidden] {
  display: none !important;
}

#pre-bootstrap {
  background-color: #0091ea;
  opacity: .5;
  bottom: 0px;
  left: 0px;
  position: fixed;
  right: 0px;
  top: 0px;
  z-index: 99999;
}

#pre-bootstrap div.messaging {
  color: #fff;
  font-family:"Segoe UI", "Helvetica Neue", sans-serif;
  left: 0px;
  margin-top: -37px;
  position: absolute;
  right: 0px;
  text-align: center;
  top: 50%;
}

#pre-bootstrap h1 {
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 26px;
  line-height: 35px;
  margin: 0px 0px 20px 0px;
}

#pre-bootstrap p {
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 18px;
  line-height: 14px;
  margin: 0px 0px 0px 0px;
}

.hide-message {
  display:none;
}

#ie-error {
   position: absolute;
  top:0px;
  left:0px;
  background-color: red;
  width: 100%;
  padding:20px;
  z-index: 999999;

}

.ie-message {
  color:white;
  font-size: 18px;
  font-weight: bold;
}

.loading-icon {
  width: 120px;
  height: 80px;
  margin-bottom: 20px;
}

/*
  Overrides for mat-autocomplete styles used in
  common-controls\ag-grid-extensions\cell-editors\autocomplete-editor.component.ts
*/
.ag-cell-autocomplete {
  display: inline-block;
}

.ag-cell-autocomplete .mat-option {
  line-height: 22px;
  height: 22px;
  padding: 0 8px;
  font-size: 11px
}

.ag-cell-autocomplete .mat-option .mat-option-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.ag-cell-autocomplete .ag-cell-autocomplete-option-text {
  margin-left: 8px;
  font-weight: bold;
}

/* ##################################################################################################################################
 This is where we can provide new classes for common overrides of Material controls when there are multiple options we want to support.
 ####################################################################################################################################*/

/* New class on mat-radio-group to arrange radios in a stack instead of inline default. */
.mat-radio-group.mat-radio-group-stacked {
  display: inline-flex;
  flex-direction: column;
}

/* New classes for resizing a material icon. Can be used on mat-icon or with the .material-icons class. */
.material-icons.mat-16 { font-size: 16px; height: auto; width: auto; }
.material-icons.mat-18 { font-size: 18px; height: auto; width: auto; }
.material-icons.mat-20 { font-size: 20px; height: auto; width: auto; }
.material-icons.mat-22 { font-size: 22px; height: auto; width: auto; }
.material-icons.mat-24 { font-size: 24px; height: auto; width: auto; }
.material-icons.mat-36 { font-size: 36px; height: auto; width: auto; }
.material-icons.mat-48 { font-size: 48px; height: auto; width: auto; }


 /* ##################################################################################################################################
 This is where we override Material styles at the global level. Do not Edit this until you check w/ the platform team first.
 We will eventually remove this once we roll our own theme in the future.
 ####################################################################################################################################*/

 /* mat-button overrides */

.mat-button.mat-primary {
  border: 1px solid #3f51b5;
}

.mat-button.mat-primary[disabled] {
  border: none;
  background-color: rgba(0,0,0,.12);
}


/* ################################################################################################################################# */
/* mat-expansion-panel overrides */

/* TODO - determine if this style should still exist and/or if it should be moved elsewhere */
mat-expansion-panel-header.scc-prog-acc-inactive:hover,
mat-expansion-panel-header.scc-prog-acc-inactive:focus {
  background: #FFF;
  cursor: default;
}

/* There needs to be a visual indicator of focus/hover regardless of whether the panel is open or closed.
 * Material only made the color change on a closed panel which is why these selectors are so long
 */
.mat-expansion-panel:not(.mat-expanded) mat-expansion-panel-header.mat-expansion-panel-header:not([aria-disabled=true]):focus,
.mat-expansion-panel:not(.mat-expanded) mat-expansion-panel-header.mat-expansion-panel-header:not([aria-disabled=true]):hover,
mat-expansion-panel-header.mat-expansion-panel-header:not([aria-disabled=true]).mat-expanded:focus,
mat-expansion-panel-header.mat-expansion-panel-header:not([aria-disabled=true]).mat-expanded:hover {
  background-color: #BDE2E5;
}

.mat-expansion-panel-header,
mat-expansion-panel-header .mat-expansion-panel-header-title,
mat-expansion-panel-header .mat-expansion-panel-header-description,
mat-expansion-panel-header .mat-expansion-indicator::after {
  color: #000000;
}

mat-expansion-panel-header .mat-expansion-panel-header-title {
  font-size: 16px;
  font-family: 'Segoe UI Semibold', Arial, sans-serif;
}

/* TODO - This style override does not take effect, but changing it so that it does throws off spacing. Determine correct padding with UX and then fix override. */
.mat-expansion-panel-body {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ################################################################################################################################# */
/* mat-card overrides */

.mat-card {
  margin-bottom: 12px;
}

.mat-card .mat-card-title {
  color: #43535d;
  font-size: 14px;
  line-height: 36px;
}

.mat-card .mat-card-content {
  font-size: 12px;
}


/* ################################################################################################################################# */
/* mat-menu overrides */

.mat-menu-panel .mat-menu-content {
  padding: 4px;
}

.mat-menu-panel {
  max-height: calc(100vh - 268px)!important;
}


/* ################################################################################################################################# */
/* mat-menu and mat-select list item overrides */

.mat-menu-panel .mat-menu-item,
.mat-select-panel .mat-option {
  font-size: 12px;
  line-height: 34px;
  height: auto;
}

.mat-select-arrow {
  border-bottom: 2px solid rgba(0,0,0,.54) ;
  border-right: 2px solid rgba(0,0,0,.54) !important;
  border-left: 0 !important;
  border-top: 0px !important;
  height: .5em !important;
  right: .75em ;
  transform-origin: center right ;
  transform: rotate(45deg) ;
  width: .5em !important;
  z-index: 2 ;
  margin: 0px !important;
}


/* ################################################################################################################################# */
/* mat-progress-spinner overrides */

.mat-progress-spinner {
  stroke-dashoffset: 56.487px;
}


/* ################################################################################################################################# */
/* mat-radio-button overrides */

.mat-radio-button {
  margin: 0px 10px 8px 0px;
}

.mat-radio-button .mat-radio-container,
.mat-radio-button .mat-radio-inner-circle,
.mat-radio-button .mat-radio-outer-circle {
  height: 16px; /* reduce size of radios */
  width: 16px;
}

.mat-radio-group {
  line-height: 30px; /* push up to align with labels that have placeholders */
  margin-top: 3px;
  margin-bottom: 7px; /* make radio group vertically aligned with mat-form-field controls (.mat-form-field-appearance-legacy .mat-form-field-wrapper) */
}


/* ################################################################################################################################# */
/* mat-checkbox overrides */

.mat-checkbox .mat-checkbox-inner-container {
  width: 16px; /* reduce size of checkboxes */
  height: 16px;
}

.mat-checkbox {
  line-height: 34px; /* push up to align with labels that have placeholders */
  margin-bottom: 1.25em; /* make checkbox vertically aligned with mat-form-field controls (.mat-form-field-appearance-legacy .mat-form-field-wrapper) */
}


/* ################################################################################################################################# */
/* mat-form-field overrides */

mat-form-field .mat-form-field-wrapper {
  font-size: 12px; /* font-size: inherit results in inconsistencies, not just in font-size, but in form field padding too. We should address font size as part of retheming. */
  color: #333333; /* apply theme color Slate; color: currentColor on .mat-input-element results in inconsistencies since there was no color set on a common parent element. Address in retheming. */
}

mat-form-field:not(.mat-form-field-can-float) .mat-form-field-infix {
  border-top: 0px; /* when floatLabel=never, reduce excess top spacing reserved for floating label */
}

mat-form-field .mat-form-field-prefix {
  padding-right: 2px; /* add padding so that input text has breathing room with prefix/suffix */
}

mat-form-field .mat-form-field-suffix {
  padding-left: 2px; /* add padding so that input text has breathing room with prefix/suffix */
}

mat-form-field .mat-form-field-prefix .mat-icon,
mat-form-field .mat-form-field-suffix .mat-icon {
  line-height: inherit; /* override extra height which throws off field alignment */
  vertical-align: sub; /* add vertical alignment so that icon doesn't appear above text line */
}

.mat-datepicker-toggle-default-icon,
mat-form-field .mat-form-field-prefix .mat-icon-button .mat-button-wrapper .mat-icon,
mat-form-field .mat-form-field-suffix .mat-icon-button .mat-button-wrapper .mat-icon {
  font-size: 150%; /* override font size inherit of 12px causing small datepicker and other tiny icon buttons in mat form field */
}

mat-form-field .mat-ripple {
  overflow: visible; /* override overflow hidden for icon button in mat form field so animation ripple isn't tiny on click */
}

mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
  margin: 0; /* reset style so that outline form field vertically aligns with other controls (the outline appearance mode used margin: .25em 0) */
}

mat-form-field.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .5em 0; /* reset style to material's default value for mat-form-field-infix padding (the outline appearance mode used 1em) */
}

/* .mat-form-field-appearance-legacy .mat-form-field-label {
  color: var(--primary-color)!important;
} */

/* .mat-form-field.mat-form-field-invalid .mat-form-field-label {
  color: #A4262C!important;
}

.mat-error {
  color: #A4262C!important;
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent, .mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {
  color: #A4262C!important;
}

.mat-error {
  color: #A4262C!important;
} */
/* ################################################################################################################################# */
/* mat-select not contained in mat-form-field
 * Several mat-selects in apps are not properly placed in mat-form-field as recommended by material.
 * Make their styles match close enough until all selects are wrapped in mat-form-field */

 div:not(.mat-form-field-infix) > mat-select {
  padding-top: 3px;
  margin-bottom: 1.25em;
  border-bottom: 1px solid rgba(0,0,0,.42);
  line-height: 30px; /* push up to align with labels that have placeholders */
}

/* ################################################################################################################################# */


/* ################################################################################################################################ */
/* Overriding accent colors for button */

/* .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {
  background-color: #008272!important;
  color:white!important;
} */


/* ################################################################################################################################ */
/* Overriding accent colors for button */

/* .mat-fab.mat-primary, .mat-flat-button.mat-primary, .mat-mini-fab.mat-primary, .mat-raised-button.mat-primary {
  background-color: #32526E!important;
  color:white!important;
} */

/* ################################################################################################################################ */
/* Overriding focus colors for button */

/* .mat-fab.mat-primary:focus, .mat-flat-button.mat-primary:focus, .mat-mini-fab.mat-primary:focus, .mat-raised-button.mat-primary:focus {
  background-color: #607E9C!important;
  color:white!important;
}

.mat-fab.mat-accent[disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-flat-button.mat-accent[disabled], .mat-flat-button.mat-primary[disabled], .mat-flat-button.mat-warn[disabled], .mat-flat-button[disabled][disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled] {
  color: rgba(0,0,0,.26)!important;
  background-color: rgba(0,0,0,.12)!important;
} */

/* ################################################################################################################################ */
/* Mat calendar color overrides */
/* .mat-calendar-table-header {
  color: rgba(107,107,107,1)!important;
} */

/* ################################################################################################################################ */
/* Overriding mat tab styles  */
/* .mat-tab-label-active {
  font-weight: bold!important;
  color: #666666!important;
}

.mat-tab-label:hover {
  background-color: #bde2e5;
}

.mat-tab-label:focus {
  border: 1px solid;
}

.cdk-overlay-container .cdk-overlay-backdrop {
  background: rgba(238,238,238,.7);
} */

/* ################################################################################################################################ */
/* Placeholders - override/standardize to new theme color Charcoal (#6B6B6B) - Hint Text/Paginator Text */

/* Note: We should wait to update the placeholder color for mat-form-field-appearance-legacy when we re-theme.
 * The .mat-form-field-appearance-legacy .mat-form-field  color: rgba(0,0,0,.54) passes contrast (barely) at 4.6:1 so it's ok.
 * Overriding this color is too complex because Material treated the placeholder and label as the same thing in legacy.
 * This placeholder+label fusion has multiple floating states and changes color on states like focused/invalid/disabled,
 * so we would need to carefully avoid overriding those.
*/

/* When mat-form-field appearance is anything besides legacy: */
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #6B6B6B !important;
  opacity: 1;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #6B6B6B !important;
}
::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #6B6B6B !important;
}
/* ################################################################################################################################ */

.styleTab {
  color: rgb(0, 0, 0);
  font-size: 15px;
}
