html body {
background: #ededed;
font-family: Myriad Pro, Roboto, arial, helvetica, sans-serif;
font-size: 100%;
line-height: 125%; }
body {
min-height: 100vh;
display: flex;
flex-direction: column; }
img {
border: none; }
label {
font-weight: bold;
margin-bottom: 2px;
font-size: 1rem;
line-height: normal;
color: #000000;
display: block;
cursor: auto; }
label:after {
content: ':'; }
a {
color: #1a1aff;
font-weight: 600;
text-decoration: underline;
cursor: pointer; }
a:hover {
color: #5353ff; }
hr {
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
width: auto; }
form {
margin: 0px; }
option {
width: auto; }
ul {
line-height: inherit; }
input[type='radio'] + label:after,
input[type='checkbox'] + label:after,
label.no-suffix:after {
content: ''; }
input[type='radio'] + label,
input[type='checkbox'] + label,
label.no-suffix {
font-weight: normal;
cursor: default;
display: inline; }
select {
margin-bottom: 0rem;
border: 1px solid #cccccc;
background-color: #ffffff;
font-size: 1rem;
padding: 0.4rem; }
select option {
background-color: #ededed;
border-bottom: 1px solid #666666; }
textarea {
font-size: 1rem;
border: 1px solid #cccccc;
padding: 0.4rem; }
textarea.inputlike {
min-height: auto;
resize: none;
overflow: hidden; }
textarea.noresize {
resize: none; }
input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='date'] {
padding: 0.4rem;
font-size: 1rem;
border: 1px solid #cccccc;
margin: 0rem;
display: inline-block; }
select,
input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='date'] {
width: 10rem; }
select.auto-width,
input[type='text'].auto-width,
input[type='password'].auto-width,
input[type='email'].auto-width,
input[type='tel'].auto-width,
input[type='number'].auto-width,
input[type='date'].auto-width {
width: auto;
min-width: 3rem; }
select.width-1rem,
input[type='text'].width-1rem,
input[type='password'].width-1rem,
input[type='email'].width-1rem,
input[type='tel'].width-1rem,
input[type='number'].width-1rem,
input[type='date'].width-1rem {
width: 1rem;
min-width: 1rem; }
select.width-2rem,
input[type='text'].width-2rem,
input[type='password'].width-2rem,
input[type='email'].width-2rem,
input[type='tel'].width-2rem,
input[type='number'].width-2rem,
input[type='date'].width-2rem {
width: 2rem;
min-width: 2rem; }
select.width-3rem,
input[type='text'].width-3rem,
input[type='password'].width-3rem,
input[type='email'].width-3rem,
input[type='tel'].width-3rem,
input[type='number'].width-3rem,
input[type='date'].width-3rem {
width: 3rem;
min-width: 3rem; }
select.width-4rem,
input[type='text'].width-4rem,
input[type='password'].width-4rem,
input[type='email'].width-4rem,
input[type='tel'].width-4rem,
input[type='number'].width-4rem,
input[type='date'].width-4rem {
width: 4rem;
min-width: 4rem; }
select.width-5rem,
input[type='text'].width-5rem,
input[type='password'].width-5rem,
input[type='email'].width-5rem,
input[type='tel'].width-5rem,
input[type='number'].width-5rem,
input[type='date'].width-5rem {
width: 5rem;
min-width: 5rem; }
select.width-6rem,
input[type='text'].width-6rem,
input[type='password'].width-6rem,
input[type='email'].width-6rem,
input[type='tel'].width-6rem,
input[type='number'].width-6rem,
input[type='date'].width-6rem {
width: 6rem;
min-width: 6rem; }
select.width-7rem,
input[type='text'].width-7rem,
input[type='password'].width-7rem,
input[type='email'].width-7rem,
input[type='tel'].width-7rem,
input[type='number'].width-7rem,
input[type='date'].width-7rem {
width: 7rem;
min-width: 7rem; }
select.width-8rem,
input[type='text'].width-8rem,
input[type='password'].width-8rem,
input[type='email'].width-8rem,
input[type='tel'].width-8rem,
input[type='number'].width-8rem,
input[type='date'].width-8rem {
width: 8rem;
min-width: 8rem; }
select.width-9rem,
input[type='text'].width-9rem,
input[type='password'].width-9rem,
input[type='email'].width-9rem,
input[type='tel'].width-9rem,
input[type='number'].width-9rem,
input[type='date'].width-9rem {
width: 9rem;
min-width: 9rem; }
select.width-10rem,
input[type='text'].width-10rem,
input[type='password'].width-10rem,
input[type='email'].width-10rem,
input[type='tel'].width-10rem,
input[type='number'].width-10rem,
input[type='date'].width-10rem {
width: 10rem;
min-width: 10rem; }
select.width-12rem,
input[type='text'].width-12rem,
input[type='password'].width-12rem,
input[type='email'].width-12rem,
input[type='tel'].width-12rem,
input[type='number'].width-12rem,
input[type='date'].width-12rem {
width: 12rem;
min-width: 12rem; }
select.width-15rem,
input[type='text'].width-15rem,
input[type='password'].width-15rem,
input[type='email'].width-15rem,
input[type='tel'].width-15rem,
input[type='number'].width-15rem,
input[type='date'].width-15rem {
width: 15rem;
min-width: 15rem; }
select.width-17rem,
input[type='text'].width-17rem,
input[type='password'].width-17rem,
input[type='email'].width-17rem,
input[type='tel'].width-17rem,
input[type='number'].width-17rem,
input[type='date'].width-17rem {
width: 17rem;
min-width: 17rem; }
select.width-20rem,
input[type='text'].width-20rem,
input[type='password'].width-20rem,
input[type='email'].width-20rem,
input[type='tel'].width-20rem,
input[type='number'].width-20rem,
input[type='date'].width-20rem {
width: 20rem;
min-width: 20rem; }
select.width-25rem,
input[type='text'].width-25rem,
input[type='password'].width-25rem,
input[type='email'].width-25rem,
input[type='tel'].width-25rem,
input[type='number'].width-25rem,
input[type='date'].width-25rem {
width: 25rem;
min-width: 25rem; }
select.width-30rem,
input[type='text'].width-30rem,
input[type='password'].width-30rem,
input[type='email'].width-30rem,
input[type='tel'].width-30rem,
input[type='number'].width-30rem,
input[type='date'].width-30rem {
width: 30rem;
min-width: 30rem; }
select.full-width,
input[type='text'].full-width,
input[type='password'].full-width,
input[type='email'].full-width,
input[type='tel'].full-width,
input[type='number'].full-width,
input[type='date'].full-width {
width: 100% !important; }
select.width-fit-content {
max-width: 100%;
width: fit-content; }
input.small[type='text'],
input.small[type='password'],
input.small[type='email'],
input.small[type='tel'],
input.small[type='number'],
input.small[type='date'] {
width: 3.5rem; }
input.medium-small[type='text'],
input.medium-small[type='password'],
input.medium-small[type='email'],
input.small[type='tel'],
input.medium-small[type='number'],
input.medium-small[type='date'] {
width: 6rem; }
textarea[disabled],
input[type='text'][disabled],
input[type='password'][disabled],
input[type='date'][disabled],
input[type='email'][disabled],
input[type='tel'][disabled],
input[type='number'][disabled],
select[disabled] {
background-color: #cccccc; }
input[type='radio'] ~ input[type='radio'] {
margin-left: 5px; }
input[type='radio'],
input[type='checkbox'] {
margin-right: 5px; }
input[type='radio'] {
border: 0px;
outline: none; }
input[type='radio'],
input[type='checkbox'] {
margin-top: 5px;
margin-left: 5px; }
.password-wrapper {
position: relative;
display: inline-block;
width: 12rem; }
.password-wrapper input[type='password'],
.password-wrapper input[type='text'] {
padding-right: 28px;
width: 12rem; }
.password-wrapper button {
position: absolute;
right: 2px;
top: 0px;
opacity: 0.55;
margin-top: 0; }
button,
input[type='submit'],
input[type='button'],
.t-button {
background: #2a4b7b;
border-radius: 3px;
border: 1px solid #2a4b7b;
color: #ffffff;
cursor: pointer;
font-size: 1rem;
font-weight: normal;
padding: 0.8rem 1rem; }
button:hover,
input[type='submit']:hover,
input[type='button']:hover,
.t-button:hover {
background: #1d3455; }
button .mat-mdc-progress-spinner circle,
input[type='submit'] .mat-mdc-progress-spinner circle,
input[type='button'] .mat-mdc-progress-spinner circle,
.t-button .mat-mdc-progress-spinner circle {
stroke: #ffffff; }
button.primary-btn,
input[type='submit'].primary-btn,
input[type='button'].primary-btn {
background-color: #2a4b7b;
border: 1px solid #1d3455; }
button.primary-btn:hover,
input[type='submit'].primary-btn:hover,
input[type='button'].primary-btn:hover {
background-color: #1d3455; }
button.secondary-btn,
input[type='submit'].secondary-btn,
input[type='button'].secondary-btn {
background-color: #4097db;
border: 1px solid #2682ca; }
button.secondary-btn:hover,
input[type='submit'].secondary-btn:hover,
input[type='button'].secondary-btn:hover {
background-color: #2682ca; }
button.inline-btn,
input[type='submit'].inline-btn,
input[type='button'].inline-btn {
background-color: #e8f3fb;
border: 1px solid #4097db;
color: #2f8ed8;
padding: 0.3rem 0.4rem; }
button.inline-btn:hover,
input[type='submit'].inline-btn:hover,
input[type='button'].inline-btn:hover {
background-color: #ffffff; }
button.success-btn,
input[type='submit'].success-btn,
input[type='button'].success-btn {
background-color: #7cbb5a;
border: 1px solid #67a745; }
button.success-btn:hover,
input[type='submit'].success-btn:hover,
input[type='button'].success-btn:hover {
background-color: #67a745; }
button.alert-btn,
input[type='submit'].alert-btn,
input[type='button'].alert-btn {
background-color: #ee5340;
border: 1px solid #ee5340; }
button.warning-btn,
input[type='submit'].warning-btn,
input[type='button'].warning-btn {
background-color: #f68d2e;
border: 1px solid #f68d2e; }
button.disabled-btn,
input[type='submit'].disabled-btn,
input[type='button'].disabled-btn,
input[type='button'][disabled],
input[type='button'][disabled]:hover,
input[type='button'][disabled]:focus,
button[disabled],
button[disabled]:hover,
button[disabled]:focus {
background-color: #dfdfdf;
border: 1px solid #cccccc;
color: #666666; }
button.disabled-btn .mat-mdc-progress-spinner circle,
input[type='submit'].disabled-btn .mat-mdc-progress-spinner circle,
input[type='button'].disabled-btn .mat-mdc-progress-spinner circle,
input[type='button'][disabled] .mat-mdc-progress-spinner circle,
input[type='button'][disabled]:hover .mat-mdc-progress-spinner circle,
input[type='button'][disabled]:focus .mat-mdc-progress-spinner circle,
button[disabled] .mat-mdc-progress-spinner circle,
button[disabled]:hover .mat-mdc-progress-spinner circle,
button[disabled]:focus .mat-mdc-progress-spinner circle {
stroke: #666666; }
button.spinner-btn {
padding: 0.675rem 1rem;
line-height: 1.25rem; }
button.spinner-btn .mat-mdc-progress-spinner {
float: left;
margin: 0;
margin-right: 10px; }
button.action-btn {
background-color: #7cbb5a;
border-radius: 3px;
border: 1px solid #67a745;
color: #ffffff;
cursor: pointer;
font-size: 0.8rem;
font-weight: normal;
padding: 0.5rem;
margin: 0.1rem; }
button.action-btn:hover {
background: #67a745; }
button.white-btn,
input[type='submit'].disabled-btn,
input[type='button'].disabled-btn {
background: #ffffff;
border: 1px solid #ffffff;
color: #2a4b7b; }
button.small-btn,
input[type='submit'].small-btn,
input[type='button'].small-btn {
padding: 0.3rem 0.4rem; }
button.tiny-btn,
input[type='submit'].tiny-btn,
input[type='button'].tiny-btn {
padding: 0.1rem 0.1rem; }
button.icon-btn,
input[type='submit'].icon-btn,
input[type='button'].icon-btn {
padding: 0.1rem 0.1rem;
background-color: transparent;
border: none; }
button.alt-color,
input[type='submit'].alt-color,
input[type='button'].alt-color {
background: #7cbb5a;
border: 1px solid #7cbb5a; }
button.wide,
input[type='submit'].wide,
input[type='button'].wide {
width: 15rem; }
button.round-btn,
input[type='submit'].round-btn,
input[type='button'].round-btn {
border-radius: 50%; }
input#ZipCode5,
input.zipCode5,
.content .confirmFamilySubText input[type='text'].zipCode5 {
width: 50px; }
input#ZipCode4,
input.zipCode4,
.content .confirmFamilySubText input[type='text'].zipCode4 {
width: 40px; }
input[type='text'].title {
width: 20rem;
height: 1.8rem;
font-size: 1rem; }
.h-layout hr {
color: #ededed;
border-style: solid;
border-width: 1px; }
.h-layout div {
padding-top: 3px;
padding-bottom: 3px; }
@media only screen and (min-width: 46em) {
.h-layout label {
text-align: right; }
.h-layout .h-layout.xl-pad .columns {
padding: 10px; } }
@media only screen and (max-width: 45.99875em) {
.h-layout .h-layout.xl-pad .columns {
padding: 5px; } }
.ng-invalid.ng-touched,
.input-validation-error,
.content .panel .panelContent .input-validation-error,
.panel .panelContent .input-validation-error {
border: 1px;
border-color: #cc0000 !important;
border-style: solid; }
div.ng-invalid.ng-touched,
form.ng-invalid.ng-touched {
border: 0; }
.content .panel .panelContent .validation-summary-valid {
display: none; }
.field-validation-error,
.validation-summary-errors,
.content .panel .panelContent .validation-summary-errors,
.content .panel .panelContent .field-validation-error {
color: #cc0000; }
input[type='radio'].input-validation-error {
border: 0px;
border-color: #ffffff !important;
background-color: #ffffff;
border-style: solid; }
.validation-summary-errors ul {
list-style-type: none;
padding: 0;
margin: 0px; }
/*Javascript created buttons by Telerik are already styled correctly so don't float*/
.t-button {
float: none; }
input[type='password'] {
margin-bottom: 0rem; }
iframe {
border: none; }
iframe.no-scrollbar {
overflow-y: hidden; }
.keyCell {
font-weight: bold;
font-size: 1rem; }
.panelContent.keyCell {
vertical-align: bottom; }
.doubleBold {
font-weight: 900; }
.bold {
font-weight: bold;
font-size: 1rem; }
.warning-text {
padding: 3px;
background-color: #ee5340; }
.tan {
color: #e0c89b; }
.medium-bottom-margin {
margin-bottom: 0.75em; }
.error-text {
color: #cc0000; }
.accentuate-text {
color: #ff0000; }
.readonly-text {
color: #666666; }
.large-text {
font-size: 2rem;
font-weight: bold; }
.medium-text {
font-size: 1.2rem; }
.small-text {
font-size: 0.8rem; }
.default-text {
font-size: 1rem; }
.instructionalText p:first-child,
.supportText p:first-child,
.subText p:first-child {
margin-top: 0px;
margin-bottom: 0px; }
.instructionalText p:not(:first-child),
.supportText p:not(:first-child),
.subText p:not(:first-child) {
margin-bottom: 0px;
margin-top: 5px; }
.instructionalText p {
padding-left: 0.25rem;
padding-top: 0.25rem; }
.instructionalText,
.supportText {
color: #333333;
font-size: 0.8rem;
margin-bottom: 0.7rem; }
.disclaimer-text {
font-style: italic;
font-size: 1rem; }
.form-help-text {
font-size: 0.8rem;
color: #333333; }
.subText {
font-size: 0.8rem;
margin-bottom: 0.7rem; }
.strike {
text-decoration: line-through; }
.text-decoration-none {
text-decoration: none !important; }
.disabled-text {
color: #cccccc; }
.noColon label:after,
label.noColon:after {
content: ''; }
.asterisk {
color: #cc0000;
float: left; }
.uppercase,
.uppercase a,
.uppercase input {
text-transform: uppercase; }
.alt-rows {
background-color: #ededed;
border-color: #ededed; }
.word-break {
word-wrap: break-word; }
.contentBox {
box-sizing: content-box; }
input.no-spin::-webkit-inner-spin-button,
input.no-spin::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
-moz-appearance: textfield !important; }
input[type='number'].no-spin {
-moz-appearance: textfield;
/* Firefox */ }
@media only screen and (max-width: 45.99875em) {
.small-alt-row {
background-color: #ededed; }
.text-align-right-for-small-only {
text-align: right; } }
@media only screen and (min-width: 46em) {
.large-alt-row {
background-color: #ededed;
border-color: #ededed; } }
.recommended-selection {
padding: 0.2rem; }
.recommended-selection.selected {
border: 1px solid #7cbb5a;
background: rgba(124, 187, 90, 0.1);
color: #7cbb5a; }
.cursor-pointer {
cursor: pointer; }
.overflow-visible {
overflow: visible !important; }
.overflow-x-visible {
overflow-x: visible !important; }
.overflow-y-visible {
overflow-y: visible !important; }
.overflow-hidden {
overflow: hidden !important; }
.overflow-x-hidden {
overflow-x: hidden !important; }
.overflow-y-hidden {
overflow-y: hidden !important; }
.overflow-scroll {
overflow: scroll !important;
-webkit-overflow-scrolling: touch; }
.overflow-x-scroll {
overflow-x: scroll !important;
-webkit-overflow-scrolling: touch; }
.overflow-y-scroll {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch; }
.section-heading,
.form-section-heading {
background-color: #e8f3fb;
border-radius: 5px;
font-size: 1.025rem;
font-weight: bold;
margin: 0;
padding: 0.5rem; }
html body .container {
margin: 0 auto;
clear: both;
width: 100%; }
.content {
overflow: hidden;
padding-top: 0.75rem; }
div.indent-half,
span.indent-half,
label.indent-half {
padding-left: 0.5rem; }
input.indent-half,
select.indent-half {
margin-left: 0.5rem; }
div.indent-1,
label.indent-1 {
padding-left: 1rem; }
span.indent-2,
div.indent-2 {
padding-left: 2rem; }
@media only screen and (min-width: 46em) {
.content {
padding-left: 0.25em;
padding-right: 0.25em; }
.content .panel {
width: 100%; }
html body .container {
max-width: 1100px;
padding: 0 1rem; } }
@media only screen and (min-width: 103em) {
.content .panel {
max-width: 1000px;
margin: 0 auto; }
.content .fullPanel {
width: 100%;
max-width: 2000px; }
html body .container {
max-width: 1600px; }
.row {
width: 100%;
max-width: 100%; }
div.content .row .columns.no-pad {
padding: 0px; }
div.content .row .columns {
padding-left: 0.25em;
padding-right: 0.25em; }
iframe.fullPage {
width: 110%; } }
.header {
background: #3e5878;
font-family: "Myriad Pro", Roboto, arial, helvetica, sans-serif;
background-image: url("./images/swoosh.png");
background-repeat: no-repeat;
background-color: #3e5878;
background-position: right;
height: 100%;
position: relative;
color: #ffffff;
border-bottom: 2px solid #477c8f;
margin: 0 !important;
max-width: 100% !important; }
@media only screen and (min-width: 46em) {
.header {
min-width: 1100px;
min-height: 85px; } }
.header.test-env {
background-color: #7cbb5a; }
.header .env-name {
text-align: center;
font-weight: bold;
font-size: 1.2rem;
position: absolute;
top: 2.3rem;
right: 5rem; }
.header a {
color: #ffffff; }
.header .logo-section {
display: flex;
flex-direction: row;
min-width: 17rem;
padding: 0.5rem 0 0 1rem; }
.header .logo-section .logo {
padding-right: 0.7rem;
width: 70px;
flex: 0 0 70px; }
.header .logo-section h1 {
font-size: 2rem;
font-weight: normal;
margin: 0.75rem 0; }
.header .logo-section h2 {
font-size: 0.85rem;
font-weight: normal;
margin: 0;
line-height: 1rem; }
.header .alerts-button {
margin-top: 1.6rem; }
.header .header-content-wrapper .header-content {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 0.85rem; }
.header .header-content-wrapper .header-content .user-context,
.header .header-content-wrapper .header-content .task-context {
display: flex;
flex-direction: row;
margin: 8px 4px;
padding: 3px 10px;
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid;
border-color: rgba(255, 255, 255, 0.2);
flex: 0 0 40%;
min-width: 20rem;
max-width: 25rem; }
.header .header-content-wrapper .header-content .user-context .context-data,
.header .header-content-wrapper .header-content .task-context .context-data {
padding: 0px;
flex-grow: 1;
align-self: baseline; }
.header .header-content-wrapper .header-content .user-context .context-data .context-data-item,
.header .header-content-wrapper .header-content .task-context .context-data .context-data-item {
display: flex; }
.header .header-content-wrapper .header-content .user-context .context-data .context-data-item .context-label,
.header .header-content-wrapper .header-content .task-context .context-data .context-data-item .context-label {
flex: 0 0 5rem;
text-align: right;
padding-right: 8px; }
.header .header-content-wrapper .header-content .user-context .context-data .context-data-item .context-value,
.header .header-content-wrapper .header-content .task-context .context-data .context-data-item .context-value {
font-weight: bold;
flex-grow: 1;
width: 13.8rem; }
.header .header-content-wrapper .header-content .user-context .context-data .context-data-item .context-value.small,
.header .header-content-wrapper .header-content .user-context .context-data .context-data-item .context-label.small,
.header .header-content-wrapper .header-content .task-context .context-data .context-data-item .context-value.small,
.header .header-content-wrapper .header-content .task-context .context-data .context-data-item .context-label.small {
font-size: 0.75rem; }
.header .header-content-wrapper .header-content .user-context .context-data .highlighted-value,
.header .header-content-wrapper .header-content .task-context .context-data .highlighted-value {
color: #ffeeba;
letter-spacing: 0.15rem;
font-weight: bold; }
.header .header-content-wrapper .header-content .user-context .context-data .highlighted-value.small,
.header .header-content-wrapper .header-content .task-context .context-data .highlighted-value.small {
letter-spacing: normal;
font-weight: normal; }
.header .header-content-wrapper .header-content .user-context.person-context .context-data-item .context-label,
.header .header-content-wrapper .header-content .task-context.person-context .context-data-item .context-label {
flex: 0 0 4rem; }
.header .header-content-wrapper .header-content .user-context.person-context .context-data-item .context-value,
.header .header-content-wrapper .header-content .task-context.person-context .context-data-item .context-value {
width: 14rem; }
.header .header-content-wrapper .header-content .user-context.employer-context .context-data-item .context-label,
.header .header-content-wrapper .header-content .task-context.employer-context .context-data-item .context-label {
flex: 0 0 6.5rem; }
.header .header-content-wrapper .header-content .user-context.employer-context .context-data-item .context-value,
.header .header-content-wrapper .header-content .task-context.employer-context .context-data-item .context-value {
width: 13rem; }
.header .header-content-wrapper .header-content .user-context.ext-person-context,
.header .header-content-wrapper .header-content .task-context.ext-person-context {
background-color: rgba(0, 0, 0, 0);
border: none; }
.header .header-content-wrapper .header-content .user-context.ext-person-context .context-data-item .context-label,
.header .header-content-wrapper .header-content .task-context.ext-person-context .context-data-item .context-label {
flex: 0 0 4.5rem; }
.header .header-content-wrapper .header-content .user-context.ext-person-context .context-data-item .context-value,
.header .header-content-wrapper .header-content .task-context.ext-person-context .context-data-item .context-value {
width: 14rem; }
.header .header-content-wrapper .header-content .user-context .context-icons,
.header .header-content-wrapper .header-content .task-context .context-icons {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 18px;
flex: 0 0 18px;
margin-left: 10px; }
.header .header-content-wrapper .header-content .user-context .copy-clipboard,
.header .header-content-wrapper .header-content .task-context .copy-clipboard {
position: relative;
padding-right: 16px;
cursor: pointer; }
.header .header-content-wrapper .header-content .user-context.person-context .copy-clipboard,
.header .header-content-wrapper .header-content .task-context.person-context .copy-clipboard {
width: 8.5rem; }
.header .header-content-wrapper .header-content .user-context.employer-context .copy-clipboard,
.header .header-content-wrapper .header-content .task-context.employer-context .copy-clipboard {
width: 5rem; }
.header .header-content-wrapper .header-content .user-context .copy-clipboard:hover:after,
.header .header-content-wrapper .header-content .task-context .copy-clipboard:hover:after {
content: '';
display: block;
height: 18px;
position: absolute;
right: 0px;
top: 0px;
width: 18px;
background: url("./images/copy_content_white_18dp.png") no-repeat; }
.header .header-content-wrapper .header-content .user-context:hover,
.header .header-content-wrapper .header-content .task-context:hover {
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid;
border-color: rgba(255, 255, 255, 0.4); }
.header .header-content-wrapper .header-content .user-context.ext-person-context:hover {
background-color: rgba(0, 0, 0, 0);
border: none; }
.header .header-content-wrapper .header-content .header-snack-message {
background-color: #4097db;
border-color: #ffffff;
border: 1px solid;
border-radius: 5px;
position: absolute;
top: 10px;
padding: 5px;
opacity: 0;
z-index: 99;
-webkit-transition: visibility 0s,
opacity 0.5s ease-out;
-moz-transition: visibility 0s,
opacity 0.5s ease-out;
-ms-transition: visibility 0s,
opacity 0.5s ease-out;
-o-transition: visibility 0s,
opacity 0.5s ease-out;
transition: visibility 0s,
opacity 0.5s ease-out; }
.header .header-content-wrapper .header-content .header-snack-message.show {
opacity: 1; }
.header .header-content-wrapper .header-content .header-snack-message.error {
background-color: #cc0000; }
.header .logout {
position: absolute;
right: 5em;
bottom: 0.5em;
font-size: 1rem; }
.header .logout a {
color: #ffffff;
text-decoration: none;
font-size: 1rem;
margin: 0 0.3em 0 0; }
.header .logout a:hover {
color: #ffffff;
text-decoration: underline; }
.footer {
margin-bottom: 0;
margin-top: auto;
background-color: #ffffff;
font-size: 0.8rem;
font-family: Roboto, arial, helvetica, sans-serif;
border-top: 1px solid #cccccc; }
.footer div {
color: #666666; }
.footer ul {
display: inline-block; }
.footer ul li {
color: #666666;
margin: 0 0.3rem; }
.footer a {
font-size: 0.8rem;
color: #aaaaaa; }
.footer a:hover {
color: #666666; }
.footer .separator-pipe {
color: #cccccc;
margin: 0 1rem; }
.section {
margin-bottom: 1.7em;
box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 2px 2px;
font-family: "Myriad Pro", Roboto, arial, helvetica, sans-serif; }
.section .section-header {
background: #2a4b7b;
color: #ffffff;
font-size: 1.2rem;
font-weight: normal;
margin: 0;
padding: 0.7rem;
border-radius: 2px 2px 0px 0px; }
.section .section-content {
background: #ffffff;
padding: 0.5rem 0.75rem; }
.subsection-header {
background-color: #6690c4;
color: #ffffff;
padding: 0.5rem; }
.panel h2,
.wizardContent .panel h2 {
background: #2a4b7b;
color: #ffffff;
cursor: pointer;
font-family: "Myriad Pro", Roboto, arial, helvetica, sans-serif;
font-size: 1.2rem;
font-weight: normal;
margin: 0;
padding: 0.7rem;
border-radius: 2px 2px 0px 0px; }
.panel h2:hover,
.wizardContent .panel h2:hover {
background: #1d3455; }
.panel h2 .panelArrow {
background: url("./images/panel-expander.png") no-repeat;
float: right;
height: 6px;
margin: 0.5em 0.3em;
width: 11px; }
.panel h2 .webpanelNotifier {
float: right;
height: 20px;
line-height: 20px;
text-align: center;
padding: 0 5px 0 5px;
min-width: 100px;
overflow: auto;
margin-right: 1em;
text-decoration: none;
font-size: 0.8rem;
border-radius: 2px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.75); }
.panel h2 .webpanelNotifierLabel {
float: right; }
.panel h2 .webpanelNotifier img {
height: 15px;
vertical-align: middle; }
.panel h2 .alertsIcon {
background: url("./images/alert-black.png") no-repeat;
float: left;
margin: -0.01em -1.7em;
height: 19px;
width: 21px; }
.panel h2 .webpanelNotifierSyncing {
background-color: #f68d2e;
color: #ffffff; }
.panel h2 .webpanelNotifierVerifying {
background-color: #ffffff;
color: #000000; }
.panel h2 .webpanelNotifierError {
background-color: #cc0000;
color: #ffffff; }
.panel h2 .webpanelNotifierSynced {
background-color: #f68d2e;
color: #ffffff; }
.panel h2 .webpanelNotifierVerified {
background-color: #007d8a;
color: #ffffff; }
.panel h2 .tiny-text {
font-weight: normal;
font-size: 1rem; }
.panel.hasAlerts h2 {
padding-left: 37px;
background: #ee5340; }
.panel.hasAlerts h2:hover {
background: #f16d5d; }
.content .panel {
margin-bottom: 1.7em;
box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 2px 2px; }
.content .panel .panelContent,
.wizardContent .panel .panelContent {
background: #ffffff;
padding: 0.5rem 0.75rem; }
.no-pad,
.content .panel .panelContent.no-pad,
.wizardContent .panel .panelContent.no-pad {
padding: 0px; }
.content .panel .panelFooter {
background: #ededed;
padding: 1em;
font-size: 1rem; }
@media only screen and (min-width: 46em) {
.content .panel .panelContent,
.wizardContent .panel .panelContent {
padding: 0.75em; }
.content .panel .panelContent.flex-rows div.row,
.wizardContent .panel .panelContent.flex-rows div.row {
display: flex; } }
.panelButtons {
display: block;
height: 2em;
padding-top: 0.7em; }
.panelButtons.empty {
height: 0px; }
.content .panel .panelContent.tabStrip {
padding: 0 0 0 0;
background-color: #cccccc; }
.content .panel .panelContent.tabStrip .panelButtons {
padding-right: 1.3em; }
.content .panel .panelContent {
font-size: 1rem;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.content .panel .panelContent .t-grid .t-status {
display: none; }
.content .panel .panelContent .checkboxlist {
background-color: #ffffff;
max-height: 15em;
/*
!important to fix an IE 9 issue with foundation
and the following style applied to the HTML element:
box-sizing: border-box;
*/
overflow: auto !important;
overflow-y: scroll;
box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.25); }
.content .panel .panelContent .checkboxlist input[type='checkbox'] {
padding: 1px;
margin-bottom: 2px; }
.content .panel .panelContent .checkboxlist span {
position: relative;
top: -2px; }
.content .panel .panelContent .checkboxlist ul {
margin: 0;
padding: 0; }
.content .panel .panelContent .checkboxlist ul li {
list-style: none outside;
padding: 2px 5px;
white-space: nowrap;
cursor: default; }
.content .panel .panelContent .checkboxlist ul li:hover {
background-color: #cccccc;
color: #ffffff; }
.content .panel .panelContent .dropdowncheckboxlist .checkboxlist {
max-height: 250px;
position: absolute;
background-color: #ffffff;
z-index: 990;
overflow-y: scroll; }
.content .panel .panelContent h5 {
color: #6690c4;
text-align: center;
font-size: 1.17em;
font-weight: 700; }
.common-panel {
display: block;
overflow: hidden;
margin-bottom: 1.7rem;
box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 2px 2px;
font-family: "Myriad Pro", Roboto, arial, helvetica, sans-serif; }
.common-panel h2.common-panel-header {
background: #2a4b7b;
color: #ffffff;
display: flex;
flex-flow: row;
font-size: 1.2rem;
font-weight: normal;
margin: 0;
padding: 0.7rem 1rem;
border-radius: 2px 2px 0px 0px; }
.common-panel h2.common-panel-header .title-wrapper {
display: flex;
flex-flow: row wrap;
flex: 1 1 auto; }
.common-panel h2.common-panel-header .title-wrapper .panel-title {
flex: 1 1 auto;
line-height: 1.6rem; }
.common-panel h2.common-panel-header .title-wrapper .panel-subtitle {
font-size: 1rem;
line-height: 1.6rem;
font-style: italic;
flex: 1 1 auto; }
.common-panel h2.common-panel-header .header-alt-icon {
flex: 0 0 16px; }
.common-panel h2.common-panel-header .header-arrow {
background: url("./images/panel-expander.png") no-repeat;
flex: 0 0 11px;
height: 6px;
margin: 0.4rem;
width: 11px; }
.common-panel h2.common-panel-header.collapsible:hover {
background: #1d3455;
cursor: pointer; }
.common-panel h2.common-panel-header.secondary-panel {
background: #4097db; }
.common-panel h2.common-panel-header.secondary-panel.collapsible:hover {
background: #2682ca !important; }
.common-panel h2.common-panel-header.success-panel {
background: #7cbb5a; }
.common-panel h2.common-panel-header.success-panel.collapsible:hover {
background: #67a745 !important; }
.common-panel h2.common-panel-header.warning-panel {
background: #f68d2e; }
.common-panel h2.common-panel-header.warning-panel.collapsible:hover {
background: #ee760a !important; }
.common-panel h2.common-panel-header.info-panel {
background: #d2ba92; }
.common-panel h2.common-panel-header.info-panel.collapsible:hover {
background: #c2a26c !important; }
.common-panel .common-panel-content {
background: #ffffff; }
@media only screen and (min-width: 46em) {
.common-panel {
width: 100%; }
.panel-subtitle {
text-align: right; } }
@media only screen and (min-width: 103em) {
.common-panel {
max-width: 1000px;
margin: 0 auto 1.7rem; }
.common-panel.full-width {
width: 100%;
max-width: 2000px; } }
.panel-card {
margin-bottom: 1rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.24), 0 2px 2px rgba(0, 0, 0, 0.4);
border-radius: 0 0 2px 2px; }
.panel-card .content {
padding: 2px 5px;
background-color: #f9f9f9; }
.panel-card h3 {
background: #4097db;
color: #ffffff;
font-size: 1.15rem;
font-weight: normal;
margin: 0;
padding: 2px 5px;
border-radius: 2px 2px 0 0; }
.smallModal {
width: 100%;
max-width: 30rem; }
.midModal {
width: 100%; }
.midModal select {
min-width: 7.5rem;
padding: 0rem;
height: initial; }
.fullModal {
width: 100%; }
@media only screen and (min-width: 46em) {
.smallModal {
width: 30rem; }
.midModal {
width: 40.06em; }
.fullModal {
width: 60.06em; } }
@media only screen and (min-width: 103em) {
.modalContent {
padding-left: 1.75rem;
padding-right: 1.75rem; } }
table {
background-color: #ffffff;
border-collapse: collapse;
border: 1px solid #666666; }
table tr th {
box-sizing: content-box; }
table tr th,
table tr td {
padding: 0.3rem; }
table tr th a {
color: #ffffff !important; }
table tr th a .filter {
background: url("./images/sprite.png") no-repeat -2px -244px;
display: inline-block;
height: 0.75rem;
margin: 0.2em 0 0 0.7em;
width: 0.8rem; }
table tr th,
table tr th.t-header a,
table tr th.t-header span,
table tr th span {
color: #ffffff;
background-color: #2a4b7b;
font-style: 1em;
font-weight: 600;
text-align: left; }
table tr td input[type='radio'],
table tr td input[type='checkbox'] {
min-width: 0; }
table tr td.center {
text-align: center; }
table tr td select {
width: 200px;
overflow-x: scroll; }
table tr td select.long {
width: 350px; }
table tr.border-group-start td {
border-top: 1px solid #666666; }
table tr.border-group-start:nth-child(odd) td[rowspan] {
background: transparent; }
table tr.border-group-start:nth-child(even) td[rowspan] {
background: #ededed; }
table.secondary-table th,
table.secondary-table th.t-header a,
table.secondary-table th.t-header span,
table.secondary-table th span {
background-color: #666666; }
table.full-width,
table.fullWidth {
width: 100%; }
table.datagrid tbody tr:nth-child(odd),
table.datagrid tr:nth-child(odd) {
background: transparent; }
table.datagrid tbody tr:nth-child(even),
table.datagrid tr:nth-child(even) {
background: #ededed; }
table.datagrid tbody tr.highlighted {
background: #007d8a;
color: #ffffff; }
table.datagrid tbody tr.highlighted a {
color: #ffffff; }
table.datagrid td {
border-style: solid;
border-width: 0 0 0 1px;
border-color: #cccccc;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis; }
table.datagrid.nowrap td {
white-space: nowrap; }
table.threeColumn td {
width: 33%; }
table.fourColumn td {
width: 25%; }
table.fiveColumn td {
width: 20%; }
table.clearTable {
background: transparent;
border: 0px solid;
table-layout: fixed; }
table.clearTable tr:nth-child(even) {
background: transparent; }
table.clearTable tr:nth-child(odd) {
background: transparent; }
table.clearTable tr th {
background: #ffffff;
font-weight: bold; }
table.clearTable tr td {
padding: 2px;
vertical-align: top; }
table.clearTable tr td select {
border-width: 1px; }
table.clearTable tr td.rightCell {
text-align: right; }
div.table-border {
border: 1px solid #666666; }
div.table-border > table {
width: 100%;
border: none; }
.table-scroll {
overflow-x: auto; }
@media only screen and (max-width: 45.99875em) {
table.stack {
border: none !important; }
table.stack thead {
display: none; }
table.stack tr {
display: block;
height: auto;
padding: 5px !important; }
table.stack td {
display: block;
height: auto;
border-left: none !important;
padding: 0px !important; }
table.stack td.bold-cell-for-small-only {
font-weight: 700; } }
#usersettings div.panel {
box-shadow: none; }
#usersettings #userSettingsNavigation div {
cursor: pointer; }
#userSettingsPanel {
border-left: none;
border-top: solid;
border-top-width: thin; }
@media only screen and (min-width: 46em) {
#userSettingsPanel {
border-left: solid;
border-left-width: thin;
border-top: none; } }
/* Legal Details Angular App */
.k-grid tbody .k-button,
.k-ie8 .k-grid tbody button.k-button {
min-width: 0; }
/* DC Angular App*/
input[name="trustZip"],
input[name="trustZip4"],
input[name="annuityPercentage"],
input[name="annuityAmount"],
input[name="rolloverPercentage"],
input[name="rolloverAmount"] {
width: 3.5rem; }
/* ISA Angular App*/
.questions {
padding: 0.5em; }
.isaEventTemplate {
font-size: 0.8rem; }
.isaEventTemplate:hover {
cursor: pointer;
opacity: 0.6; }
.isaSchedulerEventDetails {
padding-left: 5px;
font-size: 0.8rem; }
#isaForm {
background: #ffffff;
font-size: 1rem; }
#isaForm .row {
padding: 0; }
#isaForm input[type="text"],
#isaForm textarea {
border-radius: 2px; }
#isaForm input[type="text"].k-textbox {
height: 2.13em; }
#isaSelectTypePanel.panelContent {
padding: 0.25rem 0rem; }
#isaSelectTypePanel.panelContent div.row {
margin: 0rem; }
#interviewsGrid.k-grid td,
#seminarsGrid.k-grid td {
border: none; }
/* ISA Color Notification classes - Used heavily with Foundation icons */
.iconAlert {
color: #f68d2e !important; }
.iconRed {
color: #cc0000; }
.iconNormal {
color: #6690c4; }
.iconAlt {
color: #7cbb5a; }
/* ISA Foundation fonts */
a i.fi-info {
font-size: 1.75rem; }
@media only screen and (min-width: 46em) {
#isaSelectTypePanel.panelContent {
padding: 1.7rem 1.4rem; }
#isaSelectTypePanel.panelContent div.row {
margin: 0rem; }
a i.fi-info {
font-size: 1.75rem; } }
.flex-container {
display: flex;
flex-direction: column; }
.flex-container > * {
flex: 1 100%; }
.flex-column {
flex-direction: column; }
.flex-width-25 {
flex: 1 0 25%; }
.flex-width-30 {
flex: 1 0 30%; }
.flex-width-50 {
flex: 1 0 50%; }
.flex-width-70 {
flex: 1 0 70%; }
.flex-width-75 {
flex: 1 0 75%; }
.flex-row {
display: flex;
align-content: flex-start;
flex-direction: row; }
.callout {
padding: 12px 15px;
min-height: 22px;
border: 1px solid;
font-size: 0.875rem; }
.callout.callout-warning {
border-color: #ee5340;
background: rgba(238, 83, 64, 0.1);
color: #ee5340; }
.callout.callout-warning a,
.callout.callout-warning h3 {
color: #ee5340; }
.callout.callout-success {
border-color: #7cbb5a;
background: rgba(124, 187, 90, 0.1);
color: #7cbb5a; }
.callout.callout-success a,
.callout.callout-success h3 {
color: #7cbb5a; }
.callout.callout-info {
border-color: #e9d495;
background: #fff3cd;
color: #856404; }
.callout.callout-info a,
.callout.callout-info h3 {
color: #856404; }
.callout.callout-highlight {
border-color: #007d8a;
background: rgba(0, 125, 138, 0.1);
color: #007d8a; }
.callout.callout-highlight a,
.callout.callout-highlight h3 {
color: #007d8a; }
.icon {
vertical-align: middle; }
.icon.icon-tiny {
font-size: 0.8rem; }
.icon.icon-small {
font-size: 1rem; }
.icon.icon-medium {
font-size: 1.2rem; }
.icon.icon-xmedium {
font-size: 1.4rem; }
.icon.icon-large {
font-size: 1.6rem; }
.icon.icon-xlarge {
font-size: 2rem; }
.icon.icon-xxlarge {
font-size: 2.4rem; }
.padding-2px {
padding: 2px !important; }
.padding-top-2px {
padding-top: 2px !important; }
.padding-right-2px {
padding-right: 2px !important; }
.padding-bottom-2px {
padding-bottom: 2px !important; }
.padding-left-2px {
padding-left: 2px !important; }
.padding-horizontal-2px {
padding-right: 2px !important;
padding-left: 2px !important; }
.padding-vertical-2px {
padding-top: 2px !important;
padding-bottom: 2px !important; }
.padding-5px {
padding: 5px !important; }
.padding-top-5px {
padding-top: 5px !important; }
.padding-right-5px {
padding-right: 5px !important; }
.padding-bottom-5px {
padding-bottom: 5px !important; }
.padding-left-5px {
padding-left: 5px !important; }
.padding-horizontal-5px {
padding-right: 5px !important;
padding-left: 5px !important; }
.padding-vertical-5px {
padding-top: 5px !important;
padding-bottom: 5px !important; }
.padding-half {
padding: 0.5rem !important; }
.padding-top-half {
padding-top: 0.5rem !important; }
.padding-right-half {
padding-right: 0.5rem !important; }
.padding-bottom-half {
padding-bottom: 0.5rem !important; }
.padding-left-half {
padding-left: 0.5rem !important; }
.padding-horizontal-half {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important; }
.padding-vertical-half {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important; }
.margin-1px {
margin: 1px !important; }
.margin-top-1px {
margin-top: 1px !important; }
.margin-right-1px {
margin-right: 1px !important; }
.margin-bottom-1px {
margin-bottom: 1px !important; }
.margin-left-1px {
margin-left: 1px !important; }
.margin-horizontal-1px {
margin-right: 1px !important;
margin-left: 1px !important; }
.margin-vertical-1px {
margin-top: 1px !important;
margin-bottom: 1px !important; }
.margin-quarter {
margin: 0.25rem !important; }
.margin-top-quarter {
margin-top: 0.25rem !important; }
.margin-right-quarter {
margin-right: 0.25rem !important; }
.margin-bottom-quarter {
margin-bottom: 0.25rem !important; }
.margin-left-quarter {
margin-left: 0.25rem !important; }
.margin-horizontal-quarter {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important; }
.margin-vertical-quarter {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important; }
.margin-half {
margin: 0.5rem !important; }
.margin-top-half {
margin-top: 0.5rem !important; }
.margin-right-half {
margin-right: 0.5rem !important; }
.margin-bottom-half {
margin-bottom: 0.5rem !important; }
.margin-left-half {
margin-left: 0.5rem !important; }
.margin-horizontal-half {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important; }
.margin-vertical-half {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important; }
.margin-horizontal-auto {
margin-right: auto !important;
margin-left: auto !important; }
.margin-vertical-auto {
margin-top: auto !important;
margin-bottom: auto !important; }
ul.reset-list {
list-style: none;
padding: 0;
margin: 0; }
.primary-text-color {
color: #2a4b7b !important; }
.secondary-text-color {
color: #4097db !important; }
.success-text-color {
color: #7cbb5a !important; }
.alert-text-color {
color: #ee5340 !important; }
.warning-text-color {
color: #f68d2e !important; }
.disabled-text-color {
color: #cccccc !important; }
.white-text {
color: #ffffff !important; }
.grey-text {
color: #cccccc !important; }
.light-grey-text {
color: #ededed !important; }
.med-grey-text {
color: #aaaaaa !important; }
.dark-grey-text {
color: #666666 !important; }
.black-text {
color: #000000 !important; }
.off-white-text {
color: #f9f9f9 !important; }
.red-text {
color: #cc0000 !important; }
.green-text {
color: #7cbb5a !important; }
.primary-bgcolor {
background-color: #2a4b7b !important; }
.secondary-bgcolor {
background-color: #4097db !important; }
.success-bgcolor {
background-color: #7cbb5a !important; }
.alert-bgcolor {
background-color: #ee5340 !important; }
.warning-bgcolor {
background-color: #f68d2e !important; }
.disabled-bgcolor {
background-color: #cccccc !important; }
.transparent-bgcolor {
background-color: transparent !important; }
.background-none {
background: none !important; }
.white-bgcolor {
background-color: #ffffff !important; }
.black-bgcolor {
background-color: #000000 !important; }
.grey-bgcolor {
background-color: #cccccc !important; }
.light-grey-bgcolor {
background-color: #ededed !important; }
.med-grey-bgcolor {
background-color: #aaaaaa !important; }
.off-white-bgcolor {
background-color: #f9f9f9 !important; }
.off-white-bgcolor {
background-color: #f9f9f9 !important; }
.red-bgcolor {
background-color: #cc0000 !important; }
.green-bgcolor {
background-color: #7cbb5a !important; }
.primary-border {
border: 1px solid #2a4b7b !important; }
.secondary-border {
border: 1px solid #4097db !important; }
.success-border {
border: 1px solid #7cbb5a !important; }
.alert-border {
border: 1px solid #ee5340 !important; }
.warning-border {
border: 1px solid #f68d2e !important; }
.disabled-border {
border: 1px solid #cccccc !important; }
.black-border {
border: 1px solid #000000 !important; }
.grey-border {
border: 1px solid #cccccc !important; }
.light-grey-border {
border: 1px solid #ededed !important; }
.light-grey-alt-border {
border: 1px solid #dfdfdf; }
.alternate-item-bgcolor > div:nth-child(even),
.alternate-item-bgcolor > tr:nth-child(even),
.alternate-item-bgcolor > li:nth-child(even),
.alternate-item-bgcolor > ol:nth-child(even) {
background-color: #ededed; }
.alternate-bgcolor > div:nth-child(even),
.alternate-bgcolor > tr:nth-child(even),
.alternate-bgcolor > li:nth-child(even),
.alternate-bgcolor > ol:nth-child(even) {
background-color: #ededed; }
.list-item-spacing > div,
.list-item-spacing > tr,
.list-item-spacing > li,
.list-item-spacing > ol {
margin: 0.3rem;
padding: 0.3rem; }
.rightalign,
.right-align {
text-align: right; }
.leftalign,
.left-align {
text-align: left; }
.text-center,
.centeralign,
.center-align {
text-align: center; }
.vertical-align-top,
.valign-top {
vertical-align: top; }
.valign-text-top {
vertical-align: text-top; }
.valign-middle {
vertical-align: middle; }
.grey-bottom-border {
border-bottom: 1px solid #cccccc; }
.darkgrey-bottom-border {
border-bottom: 1px solid #666666; }
.line-height-120 {
line-height: 120%; }
.line-height-140 {
line-height: 140%; }
.line-height-160 {
line-height: 160%; }
.line-height-180 {
line-height: 180%; }
.line-height-200 {
line-height: 200%; }
.type-loading-shade {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.15);
z-index: 1;
display: flex;
align-items: center;
justify-content: center; }
.white-space-normal {
white-space: normal; }
.white-space-nowrap {
white-space: nowrap; }
.white-space-pre {
white-space: pre; }
.white-space-pre-wrap {
white-space: pre-wrap; }
.white-space-pre-line {
white-space: pre-line; }
.white-space-break-spaces {
white-space: break-spaces; }
.left-arrow-link {
display: inline-block;
padding: 0.5rem 0; }
.left-arrow-link .mat-icon {
color: #999999;
vertical-align: middle;
margin-top: -2px; }
.dropdown-menu {
position: relative; }
.dropdown-menu .dropdown-items {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
right: -10px;
border: 1px solid #2a4b7b; }
.dropdown-menu .dropdown-items a {
color: white;
font-weight: normal;
background-color: #3e5878;
padding: 6px;
text-decoration: none;
display: block; }
.dropdown-menu .dropdown-items a:hover {
background-color: #4097db; }
.dropdown-menu.show .dropdown-items {
display: block; }
div.multiLineTextWithPadding {
padding-bottom: 5px; }
div.scrollingBox {
max-height: 300px;
overflow: scroll;
border: 1px solid #cccccc;
width: auto;
margin-top: 10px;
margin-bottom: 10px; }
button.toggleOn,
button.toggleOn:hover {
background: #7cbb5a; }
button.toggleOff,
button.toggleOff:hover {
background: #cc0000; }
.ui-tooltip {
background: #ffffff;
font-size: 0.75em;
border: 2px solid #000000;
height: auto;
max-width: 300px;
padding: 10px 10px;
position: absolute;
border-radius: 2px;
text-align: center;
box-shadow: 0 0 7px #000000; }
.tooltip-link {
color: #6690c4;
border-bottom: 1px #1a1aff dotted;
text-decoration: none; }
.tooltip-link:hover {
color: #6690c4;
border-bottom: 1px #1a1aff dotted;
text-decoration: none; }
.tooltip-link:visited {
color: #6690c4;
font-style: italic;
border-bottom: 1px #1a1aff dotted;
text-decoration: none; }
.tooltip-link-dark {
color: #3e5878;
border-bottom: 1px #1a1aff dotted;
text-decoration: none; }
.tooltip-link-dark:hover {
color: #3e5878;
border-bottom: 1px #1a1aff dotted;
text-decoration: none; }
.tooltip-link-dark:visited {
color: #3e5878;
font-style: italic;
border-bottom: 1px #1a1aff dotted;
text-decoration: none; }
.breadcrumbs {
font-size: 1rem;
color: #3e5878;
padding-left: 1em;
padding-top: 1em; }
.shadow-1 {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.24); }
.shadow-2 {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.shadow-3 {
box-shadow: 14px 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
.shadow-4 {
box-shadow: 19px 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
.accordion {
margin-bottom: 0;
margin-left: 0; }
.accordion :before {
content: ' ';
display: table; }
.accordion :after {
content: ' ';
display: table;
clear: both; }
.accordion .accordion-navigation.row {
background: #ededed; }
.accordion .accordion-navigation.row .content {
background: #ffffff; }
.accordion .accordion-navigation > div a,
.accordion dd > div a {
color: #000000 !important;
display: block;
font-size: 1rem !important;
padding: 0.5rem 1rem;
text-decoration: none !important;
transition: all 0.3s ease 0s; }
.accordion .accordion-navigation > div.small-2 a {
margin: auto;
width: 30%; }
div.accordion-navigation div a.disabled {
color: #aaaaaa !important;
text-decoration: none !important; }
div.accordion-navigation div a.disabled:hover {
color: #aaaaaa !important;
text-decoration: none !important; }
div.loader {
border: 1.4375em solid #f9f9f9;
border-radius: 50%;
border-left: 1.4375em solid #477c8f;
border-right: 1.4375em solid #007d8a;
margin: auto;
margin-top: -5em;
width: 6.875em;
height: 6.875em;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite; }
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
div.loadBackground {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100vh;
background-color: #cccccc;
text-align: center;
vertical-align: text-bottom; }
div.loaderContainer {
position: absolute;
height: 0.625em;
top: 50%;
width: 100%;
margin: 0 auto;
margin-top: -0.3125em; }
span.loadMessage {
display: block;
padding-top: 1.5em;
font-size: 1.4em;
font-weight: bold;
font-family: "Myriad Pro", Roboto, arial, helvetica, sans-serif;
text-transform: uppercase; }
@media only screen and (min-width: 46em) {
.opers-stepper.fullPanel .panelContent {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important; } }
.calendar {
display: block;
width: 294px;
margin-top: 1rem; }
.calendar * {
box-sizing: border-box; }
.calendar .calendar-navs {
background-color: #f9f9f9; }
.calendar .month-nav {
padding: 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-between; }
.calendar .year-nav {
background-color: #4097db;
color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem;
display: flex;
flex-direction: row;
justify-content: space-between;
font-family: "Myriad Pro", Roboto, arial, helvetica, sans-serif; }
.calendar .year-nav .year-nav-display {
padding-top: 0.75rem;
font-weight: 700; }
.calendar .month-grid .day-names {
display: flex;
flex-direction: row;
background: #2a4b7b;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
color: #ffffff; }
.calendar .month-grid .weeks {
display: flex;
flex-direction: column; }
.calendar .month-grid .week {
display: flex;
flex-direction: row; }
.calendar .month-grid .week-date,
.calendar .month-grid .day-name {
text-align: center;
padding: 0.5rem;
display: block;
width: 42px;
display: flex;
justify-content: center;
align-items: center; }
.calendar .month-grid .week-date {
height: 42px;
position: relative; }
.calendar .month-grid .week-date .date-text {
z-index: 10;
font-size: 1rem;
font-family: "Myriad Pro", Roboto, arial, helvetica, sans-serif; }
.calendar .month-grid .week-date::after {
content: '';
height: 37.8px;
width: 37.8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: background-color 150ms linear, color 150ms linear;
z-index: 1; }
.calendar .month-grid .week-date.enabled {
cursor: pointer; }
.calendar .month-grid .week-date.enabled:hover:after {
background-color: #007d8a; }
.calendar .month-grid .week-date.selected {
color: #ffffff; }
.calendar .month-grid .week-date.selected:after {
background-color: #4097db; }
.calendar .month-grid .week-date.selected:hover:after {
background-color: #4097db; }
.calendar .month-grid .week-date.schedulable {
color: #000000; }
.calendar .month-grid .week-date.schedulable:after {
background-color: #cccccc; }
.calendar .month-grid .week-date.schedulable:hover:after {
color: #ffffff;
background-color: #aaaaaa; }
.calendar .month-grid .week-date.disabled {
color: #aaaaaa; }
.calendar .month-grid .today {
font-weight: bold; }
/**
* OPERS Custom Overrides
* Kendo
*/
span.k-dropdown {
max-width: 100%; }
.k-dropdown .k-input,
.k-list-container {
background-color: #ffffff; }
.k-webkit .k-dropdown {
width: 10rem; }
.k-checkbox {
box-shadow: #ededed inset; }
.k-tooltip.k-widget {
border: 1px solid #000000;
box-shadow: 0 0 3pt 2pt #f9f9f9;
border-radius: 3px;
background-color: #ffffff; }
.k-tooltip-validation.k-invalid-msg {
display: inline-block;
position: relative; }
span.k-picker-wrap .k-tooltip {
right: 150px;
top: 25px;
position: relative;
display: inline-block;
margin-bottom: 25px !important; }
table.k-scheduler-table th span.k-nav-day {
color: #ffffff;
font-weight: 600; }
div.k-scheduler-content {
overflow-x: hidden; }
.k-scheduler-monthview td[role="gridcell"] {
/* Makes the cells larger of the month view. */
height: 8.75rem !important; }
.k-scheduler-table tbody tr th {
color: #ffffff; }
.panelContent .k-tabstrip-wrapper .k-tabstrip.k-widget ul.k-tabstrip-items {
background: #ccc; }
.panelContent .k-tabstrip-wrapper .k-tabstrip.k-widget ul.k-tabstrip-items li {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border: 0;
border: none;
background: #525252;
margin: 0rem 0.2rem 0rem 0rem;
padding: 0rem 0.25rem 0rem; }
.panelContent .k-tabstrip-wrapper .k-tabstrip.k-widget ul.k-tabstrip-items li span {
border: 0;
color: #ffffff; }
.panelContent .k-tabstrip-wrapper .k-tabstrip.k-widget ul.k-tabstrip-items li.k-state-active,
.panelContent .k-tabstrip-wrapper .k-tabstrip.k-widget ul.k-tabstrip-items li.k-state-active span {
background-color: #fff;
color: #333; }
.panelContent .k-tabstrip-wrapper .k-tabstrip.k-widget .k-content {
margin: 0;
padding-left: 0;
padding-right: 0; }
.panelContent .k-tabstrip-wrapper .k-tabstrip.k-widget .k-content div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.panelContent .k-tabstrip-wrapper .k-tabstrip.k-widget .k-content.k-state-active {
border: 0; }
kendo-grid.k-grid thead.k-grid-header th.k-header,
kendo-grid.k-grid div.k-grid-header th.k-header,
div.k-grid thead.k-grid-header th.k-header,
div.k-grid div.k-grid-header th.k-header {
padding: 0.3em 0.3em;
background: #2a4b7b;
border-width: 0; }
kendo-grid.k-grid thead.k-grid-header a.k-link:hover,
kendo-grid.k-grid div.k-grid-header a.k-link:hover,
div.k-grid thead.k-grid-header a.k-link:hover,
div.k-grid div.k-grid-header a.k-link:hover {
text-decoration: underline; }
kendo-grid.k-grid table.k-grid-table td a,
div.k-grid table.k-grid-table td a {
text-decoration: underline;
color: #1a1aff;
font-weight: 600; }
kendo-grid.k-grid .k-filtercell-wrapper input.k-textbox,
div.k-grid .k-filtercell-wrapper input.k-textbox {
height: calc(8px + 1.42857em); }
kendo-grid.k-grid button.k-button,
div.k-grid button.k-button {
margin: 0; }
kendo-grid.k-grid .k-dropdown-operator .k-select,
div.k-grid .k-dropdown-operator .k-select {
height: calc(8px + 1.42857em); }
div.k-window {
border-radius: 3px;
border: 0px; }
div.k-window .k-header {
background: #2a4b7b;
color: #ffffff;
cursor: pointer;
font-size: 1.2rem;
border-radius: 2px 2px 0 0; }
div.k-window .k-content,
div.k-window .k-content .content {
background: #ffffff;
font-size: 1rem; }
.k-webkit .k-picker-wrap:before {
content: none;
display: inline-block;
width: 0;
height: 1em;
padding-bottom: 1em; }
.k-webkit .k-picker-wrap .k-select {
line-height: 1.75em; }
input:not([type]),
.k-dateinput-wrap .k-input,
.k-webkit .k-picker-wrap input {
padding: 1px 4px;
border: 0;
margin-bottom: 0;
line-height: 20px; }
input:not([type]) .ng-invalid.ng-touched,
.k-dateinput-wrap .k-input .ng-invalid.ng-touched,
.k-webkit .k-picker-wrap input .ng-invalid.ng-touched {
border-color: inherit; }
.k-widget.k-calendar table thead th {
background-color: #3e5878; }
.k-webkit .k-maskedtextbox,
.k-webkit .k-datepicker {
width: 10rem; }
.k-webkit .k-maskedtextbox h1,
.k-webkit .k-maskedtextbox h2,
.k-webkit .k-maskedtextbox h3,
.k-webkit .k-maskedtextbox h4,
.k-webkit .k-datepicker h1,
.k-webkit .k-datepicker h2,
.k-webkit .k-datepicker h3,
.k-webkit .k-datepicker h4 {
color: gray; }
kendo-numerictextbox span.k-numeric-wrap,
kendo-numerictextbox span.k-select {
border: 1px solid #cccccc; }
/**
* OPERS Custom Overrides
* Telerik
*/
.content .panelContent .t-tabstrip div.t-content {
padding: 0rem; }
.content .panel .panelContent .t-tabstrip div.t-content {
padding: 1rem 1rem; }
.content .panel .panelContent .t-tabstrip div.t-content .panelContent {
padding: 0rem 0rem; }
.panelContent .t-tabstrip {
/*specification for tabstrips within panels */
margin: 0;
padding: 0px;
border: 0px;
background: transparent; }
.panelContent .t-tabstrip .t-content {
border: none; }
.panelContent .t-tabstrip li {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background: #333333;
border: none;
display: table-cell;
margin: 0px 2px 0px 0px;
padding: 0rem 0.25rem 0rem;
vertical-align: middle;
margin-bottom: -1px;
height: 45px;
width: 50%;
word-wrap: normal;
text-align: center; }
.panelContent .t-tabstrip li :hover {
cursor: pointer; }
.panelContent .t-tabstrip li a,
.panelContent .t-tabstrip li a:hover {
color: white;
cursor: pointer;
font-weight: 400; }
.panelContent .t-tabstrip li.t-state-active {
cursor: default;
margin-top: 4px;
padding-top: 4px;
background: #ffffff;
border-bottom: none; }
.panelContent .t-tabstrip li.t-state-active a,
.panelContent .t-tabstrip li.t-state-active a:hover {
color: black; }
.panelContent .t-tabstrip li.t-state-default {
color: #ffffff; }
.panelContent .t-tabstrip .validation-summary-errors li,
.panelContent .t-tabstrip .validation-summary-errors li:hover {
background: #ffffff;
color: #cc0000;
border: none;
cursor: default; }
@media only screen and (min-width: 46em) {
.content .panelContent .t-tabstrip div.t-content {
padding: 1rem 1rem; }
.t-tabstrip-items, .t-tabstrip .t-tabstrip-items {
background: #cccccc;
color: white;
display: block;
list-style: none;
padding: 0.2em 0.2em 0; }
.tabStrip.no-pad .t-tabstrip .t-content {
padding: 3px 0 0 0; }
.content .t-tabstrip {
background: #cccccc;
display: block;
list-style: none;
margin: -1.3em -1.3em 1.3em;
padding: 0.2em 0.2em 0; }
.panelContent .t-tabstrip {
/*specification for tabstrips within panels */
margin: 0;
padding: 0px;
border: 0px; }
.panelContent .t-tabstrip li {
border-bottom: none;
display: inline-block;
padding: 0em 16px 1px;
vertical-align: bottom;
height: auto;
width: auto;
text-align: left;
display: inline-block; }
.panelContent .t-tabstrip li.t-state-active {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; }
.panelContent .t-tabstrip .t-content {
/*specification for tabstrips within panels */
margin: 0;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
background: #ffffff; } }
@media only screen and (min-width: 103em) {
.content .panelContent .t-tabstrip div.t-content {
padding: 0.5rem 0.5rem; } }
.t-window {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.t-window .t-content,
.t-window .t-content .content {
background: #ffffff; }
.t-widget .t-window-content {
font-size: 1rem; }
div.t-picker-wrap #EffectiveDate {
font-size: 0.9em; }
.t-animation-container .t-widget .t-content tbody {
font-size: 0.8rem; }
.t-widget .t-window-content .modal-content {
font-size: 0.8rem; }
.clearTable tbody tr td .t-widget .t-picker-wrap .t-input {
width: 15em; }
.t-widget .t-window-content .modal-content form div .modalButtons {
padding-top: 15px; }
.t-window .t-window-content {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
height: auto !important;
width: auto !important; }
div.t-window-content {
padding: 1em; }
.t-window .t-window-content.tabStrip .panelButtons {
padding-right: 1.3em; }
.t-window .t-window-content .t-grid table {
border: 0px; }
.t-window .t-window-content .t-grid .t-status {
display: none; }
/* VARIOUS HEADER STYLES */
.modalContent table tr th,
.t-header,
.t-grid-header {
background: #2a4b7b;
text-align: left; }
.modalContent table tr th a.t-link,
.t-header a.t-link,
.t-grid-header a.t-link {
text-decoration: none; }
table.modelTableTh tr td:last-child,
table.modelTableTh tr.Alternate td:last-child {
border-right: 0; }
table.modelTableTh {
background: transparent;
border: 1px solid #989898;
width: 100%;
word-wrap: break-word;
border-spacing: 0;
background: white;
overflow: auto;
position: relative; }
.modelTableTh table {
width: 100%; }
.modelTableTh tbody {
width: 100%; }
table.modelTableTh tr th {
font-weight: 600;
height: 1.5em;
margin-top: -1.5em;
border-right: #cccccc;
border-right: 0;
color: white; }
table.modelTableTh tr th:hover {
background: #2a4b7b; }
table.modelTableTh tr th:hover a.t-link:hover {
text-decoration: underline; }
table.modelTableTh tr th a {
color: white; }
table.modelTableTh tr th a:hover {
color: #b7d5f7;
text-decoration: underline; }
table.modelTableTh tr td {
border-right: solid 1px #cccccc;
background: transparent;
padding: 3px;
line-height: 13px; }
table.modelTableTh tr.Alternate td {
word-wrap: break-word;
border-right: solid 1px #cccccc;
background: #e6e6e6; }
.t-window-titlebar .t-window-actions {
background: transparent;
filter: none; }
.t-window .t-window-titlebar {
background: #2a4b7b;
color: #ffffff;
cursor: pointer;
font-size: 1.2rem;
font-weight: normal;
margin: 0;
padding: 5px 10px;
border-radius: 2px 2px 0px 0px; }
.t-window .t-window-content .rightCell {
text-align: right; }
.t-grid {
background: #eee;
overflow: auto;
min-height: 0%;
border-spacing: 0; }
.t-grid td {
padding: 3px;
line-height: 1em;
border-color: #AAA; }
.t-grid tr {
background: white; }
.t-grid .t-alt td {
background-color: #e6e6e6; }
.t-grid .t-alt .t-detail-cell td {
background-color: #ffffff; }
.t-grid-header .t-header {
padding: .3em .3em; }
.t-alt td {
background-color: #e6e6e6; }
tr.t-alt {
background-color: #e6e6e6; }
.t-grid-header .t-header {
border-width: 0; }
.content .t-detail-cell .panel {
width: 852px;
overflow: hidden; }
.t-grid-pager {
border-width: 0; }
table tr th.t-grid-header .t-state-hover,
table tr th.t-grid-header:hover,
table tr th.t-header .t-state-hover,
table tr th.t-header:hover {
background: #2a4b7b; }
table tr th.t-grid-header .t-state-hover a.t-link:hover,
table tr th.t-grid-header:hover a.t-link:hover,
table tr th.t-header .t-state-hover a.t-link:hover,
table tr th.t-header:hover a.t-link:hover {
text-decoration: underline; }
.t-widget .t-grid-pager .t-pager .t-page-size .t-dropdown .t-dropdown-wrap {
background: #fff; }
.t-window .t-tabstrip {
background: transparent;
border: 0px;
margin: 0 0 1.3em;
padding: 0; }
.t-window .t-tabstrip .t-tabstrip-items li {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background: #4d5b6d;
border-left: 1px solid #4d4d4d;
border-right: 1px solid #4d4d4d;
border-top: 1px solid #4d4d4d;
display: inline-block;
margin: 0.4em 0.1em 0;
padding: 0em 1.3em 0.2em; }
.t-window .t-tabstrip .t-tabstrip-items li a,
.t-window .t-tabstrip .t-tabstrip-items li a:hover {
color: white; }
.t-window .t-tabstrip .t-tabstrip-items li:hover {
background: #70849e;
cursor: pointer; }
.t-window .t-tabstrip .t-tabstrip-items li.t-state-active {
background: #ffffff;
cursor: default;
margin-top: 0; }
.t-window .t-tabstrip .t-tabstrip-items li.t-state-active :hover {
background: #ffffff; }
.t-window .t-tabstrip .t-tabstrip-items li.t-state-active a {
color: black;
cursor: default; }
.t-window .t-tabstrip .t-tabstrip-items li.t-state-active a:hover {
color: black; }
.t-window .t-tabstrip .t-content {
background: transparent;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
margin: -0.04em 0 0.3em; }
.t-tabstrip.t-header {
background: #cccccc; }
.content .panel .t-timepicker {
display: inline;
display: table-cell;
zoom: 1;
vertical-align: top;
width: auto; }
.content .panel .t-datepicker {
display: inline;
display: table-cell;
zoom: 1;
vertical-align: top;
width: auto; }
.content .panel .t-datetimepicker {
display: inline;
display: table-cell;
zoom: 1;
vertical-align: top;
width: auto; }
.content .panel .inLineDateTimePicker .t-timepicker {
display: inline-block; }
.t-timepicker,
.t-datetimepicker, .t-datepicker {
width: 216px; }
.t-animation-container .t-calendar .t-header {
background: #adadad;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#adadad', endColorstr='#adadad', GradientType=0); }
.t-animation-container .t-calendar th {
background: white;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='white', GradientType=0); }
.t-picker-wrap {
margin-left: -2px; }
.t-picker-wrap .t-input, .t-picker-wrap .t-combobox .t-input {
vertical-align: top;
width: 12.5em; }
.t-state-error,
.t-widget.input-validation-error,
.t-widget .input-validation-error {
border-style: solid;
border: 1px; }
.t-state-error,
.t-widget.t-state-error,
.t-widget .t-state-error,
.t-widget.input-validation-error,
.t-widget .input-validation-error,
.t-grid .input-validation-error {
border: 1px;
border-color: #cc0000;
background-color: #ffffff;
border-style: solid; }
.t-grid .field-validation-error {
display: block;
color: #cc0000; }
table tr th.t-header a,
table tr th.t-header a.t-link {
color: white;
font-style: 1em;
font-weight: 600; }
div.t-pager div.t-numeric a.t-link {
color: #1a1aff;
font-weight: 600; }
.t-content {
padding: 20px; }
.hasCustomTelerikDropdowns .t-dropdown .t-input {
background: white; }
.hasCustomTelerikDropdowns .t-dropdown {
width: 200px; }
.hasCustomTelerikDropdowns .t-arrow-down {
background-color: #f0f0f0;
height: 94%;
width: 19px;
border: 1px #828282; }
.hasCustomTelerikDropdowns .t-select {
margin-top: 0px;
border: 1px #828282; }
.t-animation-container .t-reset {
font-size: 0.8rem; }
.hasCustomTelerikDropdowns .t-dropdown-wrap {
padding-right: 0px; }
.hasCustomTelerikDropdowns .t-dropdown-wrap .t-icon {
margin-top: 0px; }
.t-autocomplete,
.t-input[type="text"],
.t-input[type="password"] {
padding: 1px 4px; }
#ServiceCredit .t-grouping-row td {
background-position-y: 0px;
border: 1px;
border-color: #aaa;
border-style: solid; }
#ServiceCredit .t-footer-template {
border: 1px;
border-style: solid; }
#ChallengeQuestionPopup t-window {
width: 900px; }
#MyWorkGrid .t-grid-header .t-header .t-link {
/*better formatting for Internal work WPs */
padding-right: .6em; }
#MyWorkGrid .t-grid-header .t-header,
#WorkListGrid .t-grid-header .t-header {
/*better formatting for Internal work WPs */
padding-right: 25px; }
#worklist .t-grid-header .t-header .t-link {
/*better formatting for Internal work WPs */
padding-right: .6em; }
.workGrid .t-grid-header .t-header .t-link {
height: 36px; }
input#DateOfBirth.t-input.valid {
border-color: #989898; }
#EffectiveDate {
width: 10rem; }
#EffectiveDate_wrapper {
width: 11.5rem; }
/*Account Summary depends on this*/
.t-tabstrip .t-content, .t-panelbar .t-tabstrip .t-content {
padding: 15px 20px; }
/* For use with any number column data entry forms, where conditional content is loaded */
.content .subSection {
margin: 10px 0px; }
.checkboxlist {
overflow-x: scroll;
font-size: 0.8rem; }
.rspnsvSlightPadding {
padding: 0.5rem 1rem 0rem; }
@media only screen and (min-width: 46em) {
.rspnsvSlightPadding {
padding: 0rem; } }
@media only screen and (min-width: 103em) {
.rspnsvSlightPadding {
padding: 0.5rem 1rem 0rem; } }
table.wideInputs tr td select {
width: 100%; }
table.wideInputs tr td input {
width: 100%; }
table.wideInputs tr td input[type="radio"],
table.wideInputs tr td input[type="checkbox"] {
width: auto; }
table.alt-rows {
border-collapse: collapse; }
table.alt-rows tr td:first-child {
padding-left: 0.75rem; }
table.alt-rows tr.row-alt {
background-color: #e6e6e6;
border-color: #e6e6e6; }
table.alt-rows tr.key td {
padding-top: 0.75rem; }
table.alt-rows tr.value td {
padding-bottom: 0.75rem; }
table.alt-rows tr.value td.no-pad {
padding-bottom: 0px; }
table.clearTableTh {
background: transparent;
border: 0px solid; }
table.clearTableTh tr.last td {
border-bottom: 0px solid; }
table.clearTableTh tr {
background: transparent; }
table.clearTableTh tr th {
font-weight: bold;
background: #f9f9f9;
border-bottom: 1px solid #4d4d4d; }
table.clearTableTh tr td {
background: transparent;
border-bottom: 1px solid #4d4d4d; }
table.clearTableTh tr td select {
min-width: 6em; }
table.bottomTable {
background: transparent;
border: none; }
table.bottomTable tr:nth-child(even) {
background: transparent; }
table.bottomTable tr:nth-child(odd) {
background: transparent; }
table.bottomTable tr th {
background: #f9f9f9;
font-weight: bold; }
table.bottomTable tr td {
vertical-align: bottom; }
table.bottomTable tr td select {
min-width: 11em; }
table.bottomTable tr td.rightCell {
padding-top: 0.8rem;
text-align: right; }
table.bottomTable tr td.leftCell {
text-align: left; }
.wizardContainer {
position: relative;
padding: 0rem;
margin-top: 10px; }
.wizardNavigation {
background: #ededed;
bottom: 0;
font-size: 14px;
left: 0;
overflow: hidden;
padding: 5px;
position: absolute;
top: 0;
width: 160px; }
.wizardNavigation .shadow {
box-shadow: inset 0 0 10px #262626;
bottom: -6px;
left: 0;
/*pointer-events: none;*/
position: absolute;
right: 0;
top: -6px;
z-index: 5; }
.wizardNavigation ul {
list-style: none;
margin: 0;
padding: 0; }
.wizardNavigation span {
padding-left: 17px; }
.wizardNavigation ul li {
margin: 0;
padding-left: 17px; }
.wizardNavigation ul li.complete {
padding-left: 0px; }
.wizardNavigation a {
text-decoration: none; }
.wizardNavigation ul li:not(:first-child) {
border-top: 1px solid #aaaaaa; }
.wizardNavigation ul li.active .icon {
font-weight: bold;
background-size: 12%; }
.wizardNavigation ul li.active.subActive .icon {
margin-bottom: 0.5em; }
.wizardNavigation ul li.incomplete .icon {
background: url("images/incomplete.png") no-repeat 0px center;
background-size: 15px;
background-position-x: 0px;
padding-left: 17px; }
.wizardNavigation ul li.complete .icon {
background: url("images/complete.png") no-repeat 0px center;
background-size: 15px;
background-position-x: 0px;
padding-left: 17px; }
.wizardNavigation ul li .icon {
color: black;
display: block;
padding: 5px 0px; }
.wizardNavigation ul li ul li {
font-weight: normal;
margin: 0 0.6em 0 0.6em;
padding: 0.1em 0 0.1em 0.5em; }
.wizardNavigation ul li ul li .subIcon {
color: #000000;
cursor: pointer;
display: block;
padding: 0.2em 0 0.2em 1.3em; }
.wizardNavigation ul li ul li .subIcon:hover {
color: #6690c4; }
.wizardNavigation ul li ul li .subIcon.inactive {
cursor: default; }
.wizardNavigation ul li ul li .subIcon.inactive:hover {
color: #000000;
text-decoration: none; }
.wizardNavigation ul li ul li.subActive .subIcon {
font-weight: bold;
background-size: 8%; }
.wizardNavigation ul li ul li.subIncomplete .subIcon {
background: url("images/incomplete-step.png") no-repeat 0px center;
background-size: 8%; }
.wizardNavigation ul li ul li.subComplete .subIcon {
background: url("images/complete-step.png") no-repeat 0px center;
background-size: 8%; }
.wizardContent {
background: #ffffff;
padding: 10px 0px 10px 0px;
font-size: 13px; }
.wizardContent .mobileSideMargins,
#InstructionTextPanel {
margin-left: 0.5rem;
margin-right: 0.5rem; }
@media only screen and (min-width: 46.0625em) {
.wizardContent {
background: #ffffff;
padding: 10px 15px 10px 175px;
font-size: 1rem;
max-width: 1100px; }
.wizardContent .mobileSideMargins,
#InstructionTextPanel {
margin-left: 0rem;
margin-right: 0rem; } }
.wizardContent .panel {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 1px solid #666666; }
.wizardContent .panel .panelContent {
padding-left: 1.25em; }
.wizardContent .panel .panelContent a {
color: #1a1aff;
font-weight: 600; }
.wizardContent .panel .panelContent a:hover {
color: #5353ff;
font-weight: 600;
text-decoration: underline; }
.wizardContent .panel .panelContent .reviewTable {
border: 0px solid;
width: 100%; }
.wizardContent .panel .panelContent .reviewTable tr td table {
border: 0px solid;
width: 100%; }
.wizardContent .panel .panelContent .reviewTable tr td table tr:nth-child(even) {
background: #f9f9f9; }
.wizardContent .panel .panelContent .reviewTable tr td table tr:nth-child(odd) {
background: transparent; }
.wizardContent .panel .panelContent .reviewTable tr td table tr td {
padding: 0.2em; }
.wizardContent .panel .panelContent .reviewTable tr td.keyCell {
padding-right: 6em !important; }
.wizardContent .panel .panelContent .reviewTable tr td.keyCell table tr th {
font-weight: bold; }
.wizardContent .panel .panelContent .reviewTable tr td.keyCell table tr td {
font-weight: normal; }
.wizardContent .panel .panelContent .reviewTable tr td.boldCell {
font-weight: bold; }
.wizardContent .panel .panelContent .reviewTable tr td.centeredCell {
text-align: center; }
.wizardContent .panel .panelContent .reviewTable tr td.rightCell {
text-align: right; }
.wizardContent .panel .panelContent .reviewTable tr td.editCell {
width: 5em;
text-align: center; }
.wizardContent .panelButtons {
display: block;
height: 30px; }
.wizardContent .panelButtons .continueButton {
background: #67a745;
margin-left: 5px; }
.wizardContent .panelButtons .continueButton:hover {
background: #7cbb5a; }
.wizardContent .panelButtons .continueButton[disabled]:hover {
background: #6db149; }
.wizardContent .panelButtons .previousButton {
float: left;
margin-left: 0; }
.wizardContent .twoCol td {
width: 379px; }
.wizardContent .threeCol td {
width: 252px; }
.wizardContent .fourCol td {
width: 189px; }
#currentWizardStep {
text-align: center;
font-weight: bold;
margin-bottom: 10px; }
#nextWizardStep {
text-align: right; }
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
filter: alpha(opacity=80); }
.gu-hide {
display: none !important; }
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important; }
.gu-transit {
opacity: 0.2;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
filter: alpha(opacity=20); }
html,
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background-color: #f5f7fa !important; }
body {
min-height: unset !important;
display: block !important;
flex-direction: unset !important; }
.opers-member .main-wrapper {
display: flex;
flex-direction: column;
height: 100%; }
.opers-member .main-wrapper .main-container {
flex: 1 0 auto; }
.opers-member .main-wrapper .main-container .container {
padding: 2rem 0; }
.opers-member .header {
display: flex;
justify-content: space-between;
align-items: center;
min-width: unset;
background-image: url("./images/swoosh.png");
background-repeat: no-repeat;
background-color: #2a4b7b;
background-position: right;
border-bottom: 1px solid #546e95;
height: 85px; }
.opers-member .header .logo-section {
display: flex;
align-items: center; }
.opers-member .header .header-content-wrapper {
position: relative;
flex-grow: 1; }
.opers-member .header .logout {
display: flex;
align-items: center;
position: absolute;
right: 1em;
bottom: 0.5em;
font-size: 1rem; }
.opers-member .header .logout button {
background-color: rgba(255, 255, 255, 0.15);
padding: 0.5rem; }
.opers-member .header .logout button:hover {
background-color: rgba(255, 255, 255, 0.3); }
.opers-member .header .env-name {
text-align: center;
font-weight: bold;
font-size: 0.95rem;
position: absolute;
top: 0;
right: 1rem;
width: 5.3rem;
background-color: #7cbb5a;
padding: 0.5rem;
border-radius: 0 0 3px 3px; }
.opers-member .sticky-container {
position: -webkit-sticky;
/* For Safari */
position: sticky;
top: 0;
left: 0;
max-width: 100% !important;
z-index: 20; }
.opers-member .top-bar.opers-nav a {
color: #ffffff;
font-weight: normal; }
.opers-member .top-bar.opers-nav .is-drilldown,
.opers-member .top-bar.opers-nav .top-bar-section {
width: 100%; }
.opers-member .top-bar.opers-nav .drilldown a {
background-color: #213c62; }
.opers-member .top-bar.opers-nav .drilldown a:hover {
background-color: #4097db; }
.opers-member .top-bar.opers-nav .drilldown .is-drilldown-submenu {
background-color: #213c62; }
.opers-member .top-bar.opers-nav .drilldown .is-drilldown-submenu-parent > a::after {
border-color: transparent transparent transparent #ffffff; }
.opers-member .top-bar.opers-nav .drilldown .js-drilldown-back > a::before {
border-color: transparent #ffffff transparent transparent; }
.opers-member .top-bar.opers-nav .is-drilldown li {
border-bottom: 1px solid #546e95; }
.opers-member .top-bar.opers-nav .is-drilldown li:last-child {
border: none; }
.opers-member .top-bar.opers-nav .dropdown.menu.medium-horizontal {
flex-wrap: inherit; }
.opers-member .top-bar.opers-nav .dropdown.menu.medium-horizontal .is-dropdown-submenu > li:hover {
background-color: #4097db; }
.opers-member .top-bar.opers-nav .dropdown.menu.medium-horizontal .is-dropdown-submenu-parent {
border-right: 1px solid #546e95; }
.opers-member .top-bar.opers-nav .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
display: flex;
align-items: center;
height: 100%;
padding-right: 2rem; }
.opers-member .top-bar.opers-nav .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
right: 10px; }
.opers-member .field-validation-error,
.opers-member .validation-summary-errors,
.opers-member .content .panel .panelContent .validation-summary-errors,
.opers-member .content .panel .panelContent .field-validation-error {
color: #cc0000;
font-size: 0.9rem; }
.opers-member .mat-mdc-tab-header {
position: unset; }
@media only screen and (max-width: 45.99875em) {
.opers-member .mat-mdc-card-header,
.opers-member .mat-mdc-card-content,
.opers-member .mdc-card__actions {
padding: 4px; } }
.opers-member .title-bar {
background: #2a4b7b;
border-bottom: 1px solid #546e95; }
.opers-member footer {
flex-shrink: 0;
margin-bottom: 0; }
.opers-member footer div {
margin-top: 0 !important; }