/* 
---------------------------------------------------------------------------------
Layout
---------------------------------------------------------------------------------
*/

html {
    overflow-x: hidden;
    -ms-overflow-style: scrollbar;
}

input.autoWidth,
select.autoWidth {
    width: auto !important;
}

.datepicker {
    display: inline-block !important;
    width: auto !important;
}

div.checkbox label,
div.radio label {
    display: inline-block !important;
    width: auto !important;
}

@media (min-width: 768px) {
    .weekSelectionChoice {
        width: 75%;
    }
    /*
#IICContainer {
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 10px;
   margin-right: 10px;
}
*/
    .erSummaryButtons {
        min-width: 75px !important;
        max-width: 200px !important;
    }

    /*
#MainContent
{
   border-top: none;
   border-bottom: none;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
}
*/

    .add-validation-space {
        margin-bottom: 10px;
    }
}

@media (min-width: 991px) {
    .weekSelectionChoice {
        width: 100%;
    }
}

#FraudStatement {
    border: 1px solid #58ACFA;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.redOutline {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border: 2px solid #EB0000;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.redOutlineSmall {
    padding: 10px 10px 10px 10px;
    margin: 20px 0 20px 0;
    border: 2px solid #EB0000;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.blueOutline {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border: 2px double #107fc9;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

div#LogonContent {
    display: inline-block;
    white-space: nowrap;
    clear: both;
}

div#BenefitsHome {
    display: block;
    float: left;
    padding-left: 15px;
}

#homeLink {
    padding-left: 15px;
    text-decoration: underline;
}

#infoLink, #infoLinkSmall {
    padding-right: 15px;
}

#landingheading {
    font-weight: bold;
}

div.Logout {
    padding-top: .5em;
    padding-right: 15px;
    text-decoration: underline;
}

div.Logout2 {
    padding-right: 25px;
}

#nocookies, #nojavascript {
    font-size: large;
    font-weight: bold;
}

#LogonContainer {
    padding-left: 15px;
    padding-right: 15px;
}

.leftMenuItem {
    padding-left: 15px;
}

.leftMenuItem {
    padding-left: 15px;
}

#LogonRightContent {
    border: 2px solid #F29022;
    border-radius: 5px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

div#footer {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
    background-color: #0078BD;
    margin-top: 5px;
}

    div#footer a {
        text-decoration: underline !important;
    }

div#breadcrumb {
    border-bottom: none;
    border-top: none;
    background-color: #08108C;
    min-height: 2em;
    width: 100%;
}

    div#breadcrumb a {
        vertical-align: middle;
    }

#container {
    min-width: 320px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

div.WelcomeText {
    padding: 10px 10px 10px 10px;
}

div.IndentedParagraph {
    padding: 0px 0px 10px 50px;
    font-size: smaller;
}

div.ClarifyingText,
span.ClarifyingText {
    font-size: smaller;
    font-weight: normal;
}

.optionalText {
    font-size: smaller;
    font-weight: normal;
}

.lessTopMargin {
    margin-top: -8px;
}

div#FraudStatement {
    padding: 10px 10px 10px 10px;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    outline: 2px dashed #EB0000;
    padding-right: 10px;
    background-color: #ffeeee;
    outline-offset: 5px;
}

    .input-validation-error:focus {
        outline-offset: 5px;
        outline-offset: 3px;
        outline-width: 3px;
        outline-style: solid;
        outline-color: black;
        border-radius: 5px;
    }

.LogonBox {
    padding: 10px;
}

.BlockRadioButton {
    display: inline;
    position: relative;
    margin-left: 0.2em;
    width: auto;
}

.SelectedSection a {
    font-size: small;
    margin-left: 20px;
    font-style: italic;
    font-weight: bold;
}

.ui-dialog-titlebar-close {
    display: none;
}

/* 
---------------------------------------------------------------------------------
Color Scheme / Borders
---------------------------------------------------------------------------------
*/
.CenteredContainer {
    background-color: White;
    border: 1px solid black;
}

.WhiteBackground {
    background-color: White;
}

/*
body
{
   background-image: url('../images/dwdbackground.jpg');
   background-color: #EEEEE0 !important;
}
*/

div.SaveMessage {
    color: Red;
    font-size: medium;
    font-weight: bold;
}

div#header {
    background-color: #107fc9;
    /*background-image: url('../images/blue_grad.jpg');*/
    background-position: left top;
    /* background-repeat: repeat-x;*/
    border-bottom: thin solid black;
    color: #fff;
}

div#header-xs {
    background-color: #107fc9;
    border-bottom: thin solid black;
    color: #fff;
}

div#header #dwd, #dwd-xs, #landingheading, .Logout A {
    color: #fff;
    padding-bottom: 5px;
}

#footer hr, #footer a {
    color: #fff;
}


div#LogonHeader {
    color: Navy;
}

.ReadonlyLabel {
    background-color: #B7C3D0;
    /*width: 20%;*/
}

.emphasisText {
    color: #0E4EAD;
}

.field-validation-error {
    color: #EB0000;
}

.validation-summary-errors {
    color: #EB0000;
    /*margin-left:14px;*/
    margin-top: 10px;
    margin-bottom: 20px;
}

div#CurrentUsers {
    background-color: #f0f8ff;
    color: #000000;
    border-radius: 5px 5px 5px 5px;
    /*border-radius: 5px;*/
    /*padding-top:10px;*/
    /*width: 800px;
    padding: 3px 10px 10px 10px;*/
    padding: 20px 10px 20px 10px;
    margin: 15px;
}

div#InputMain {
    background-color: #F29022;
    color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    /*border-radius: 5px;*/
    /*padding-top:10px;*/
    /*width: 800px;*/
    padding: 3px 10px 10px 10px;
    margin: 15px;
}

div#HoursBoxMediumAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 190px;
}

div#HoursBoxMediumESAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 50px;
}

div#HoursBoxLargeAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 30px;
    margin-top: -5px;
}

div#HoursBoxLargeESAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 30px;
    margin-top: -25px;
}

div#HoursBoxSmallAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 8px;
    margin-right: 36px;
}

div#HoursBoxXSmallAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 8px;
    margin-right: 20px;
}

div#HoursBoxMedium {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 190px;
}

div#HoursBoxMediumES {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 50px;
}

div#HoursBoxLargeAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 30px;
    margin-top: -5px;
}

div#HoursBoxLargeESAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 30px;
    margin-top: -25px;
}

div#HoursBoxSmallAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 8px;
    margin-right: 36px;
}

div#HoursBoxXSmallAlt {
    padding: 20px 10px 20px 20px;
    margin-left: 8px;
    margin-right: 20px;
}

div#HoursBoxMedium {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 190px;
}

div#HoursBoxMediumES {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 50px;
}

div#HoursBoxLarge {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 30px;
    margin-top: -5px;
}

div#HoursBoxLargeES {
    padding: 20px 10px 20px 20px;
    margin-left: 10px;
    margin-right: 30px;
    margin-top: -25px;
}

div#HoursBoxSmall {
    padding: 20px 10px 20px 20px;
    margin-left: 8px;
    margin-right: 36px;
}

div#HoursBoxXSmall {
    padding: 20px 10px 20px 20px;
    margin-left: 8px;
    margin-right: 20px;
}

.spacer5 {
    height: 5px;
}

.spacer10 {
    height: 10px;
}

.spacer20 {
    height: 20px;
}
/*@media (max-width: 480px) {
    div#CurrentUsers {
        width: 90%;
    }
}*/

.displayInline {
    display: inline-block;
}

#nocookies {
    display: none;
}

.InnerContentSingleColumn {
    padding: 0px 15px 0px 15px;
}

.TableLabelColumn label {
    text-align: right;
    width: 225px;
}

#nocookies, #nojavascript, #nextstep, #passwordChanged, #divCompletionWarning,
.boldWarning {
    color: Red;
    font-weight: bold;
}

#DashboardWelcomeContent {
    /*margin: 5px 10px 0px 5px;*/
    margin: -2em 1em -1em 1.5em;
    padding: 10px 20px 10px 10px;
}

#DashboardOpenMessages /* small box upper right of dashboard */ {
    display: block;
    white-space: normal;
    border: 3px solid #003F87;
    margin: 5px 0px 0px 0px;
    background-color: #E0EEE0;
    padding: 10px 10px 10px 10px;
}

#DashboardBenefitSummary, #DashboardPaymentSummary, #DashboardDeterminationSummary, #DashboardAppealSummary, #DashboardDeterminationAppealSummary {
    display: block;
    white-space: normal;
    margin: 0px 10px 0px 20px;
    padding: 10px 20px 10px 10px;
}
/*
#DashboardWeeksClaimableMessage
{
   display:block; 
   white-space:normal;
   margin: 0px 10px -5px 20px;
   padding: 0px 20px 0px 10px;
}
*/

#DashboardMessageContent {
    white-space: normal;
}

#DashboardQuickLinks {
    /*width:100%; if make 100% goes too far right */
    display: block;
    white-space: normal;
    padding: 05px 10px 05px 37px;
}

#DirectDepositCheckImage {
    width: 250px;
}

.DashboardQuickLinkBoxes {
    /*height:60px;*/
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    margin: 5px 0px 5px 0px; /* OUTSIDE margin */
    padding: 5px 0px 5px 0px; /* INNER padding */
    border: 3px solid #003F87;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    text-align: center;
}

.DashboardQuickLinkStyle1 {
    background-color: #C3D9E6; /* blue */
}

.DashboardQuickLinkStyle2 {
    background-color: #E0EEE0; /* green*/
}

.DashboardQuickLinkStyle3 {
    background-color: #F5D7B5; /* orange*/
}

.DashboardCaption {
    font-weight: bold;
    white-space: nowrap;
}

    .DashboardCaption a {
        font-weight: bold;
    }

.DashBoardTitle {
    font-size: 1.25em;
    /* color: #333333;*/
    font-weight: 700;
}

.AdobeButtonPadding {
    padding: .4em 1em;
}

.DashboardLink {
    text-align: right;
    font-size: small;
    white-space: nowrap;
}

    .DashboardLink a {
        color: #214D73;
    }

.DashboardMoreRowsLink {
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
}

.DashboardPrintLink {
    font-size: smaller;
    font-weight: bold;
    border: 1px solid #000;
    text-align: center;
    background-color: #E0EEE0;
    padding: 3px 0px 3px 0px;
}

.DashboardReturnLink {
    font-size: 14px;
    border: 1px solid #000;
    text-align: center;
    background-color: #F5D7B5;
    padding: 3px 0px 3px 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.HeaderContent {
    display: block;
    white-space: normal;
    margin: 5px 10px 0px 5px;
    padding: 10px 20px 5px 20px;
}

.InnerBorderedBlock {
    padding: 0px 30px 0px 30px;
    border: #d0cdcd solid 1px;
    margin-bottom: 0px;
}

.BorderedBlock {
    margin-left: 15px;
    margin-right: 15px;
    padding: 0px 25px 0px 25px;
    border: #000000 solid 2px;
}

.ReportedEarningsheadingnote {
    font-size: x-small;
    text-align: right;
    color: #000080;
}

.ReportedEarningscolumnheader {
    color: #000080;
    font-size: x-small;
}

#PWCalculatorInstructions {
    line-height: 1.42857143;
}

.SectionNote {
    font-size: x-small;
}

/*
---------------------------------------------------------------------------------
webgrid 
---------------------------------------------------------------------------------    
*/
.gridTable {
    font-size: 12px;
    margin: 10px;
    padding: 10px;
    border: 1px #c8c8c8 solid;
    border-collapse: collapse;
    min-width: 550px;
    width: 98%;
    background-color: #fff;
    color: #fff;
}

.gridHead th {
    vertical-align: bottom;
    text-align: left;
    font-weight: bold;
    background-color: #E0EEE0;
    color: #000;
    padding: 2px;
    border: solid;
    border-color: #000;
    border-width: 1px;
}

.gridHead a:link, .gridHead a:visited, .gridHead a:active, .gridHead a:hover {
    color: #fff;
}

.gridTable tr.gridAltRow {
    background-color: #efefef;
}

.gridAltRow td {
    padding: 2px;
    margin: 5px;
    color: #333;
    border: solid;
    border-color: #ccc;
    border-width: 1px;
}

.gridRow td {
    padding: 2px;
    color: #333;
    border: solid;
    border-color: #ccc;
    border-width: 1px;
    white-space: nowrap;
}

.gridFooter td {
    padding: 2px;
    background-color: #c7d1d6;
    color: #999;
    font-size: 12pt;
    text-align: center;
}

.gridFooter a {
    font-weight: bold;
    color: #333;
    border: 1px #333 solid;
}

.font-12px {
    font-size: 12px;
}

/*
---------------------------------------------------------------------------------
datatables.net
---------------------------------------------------------------------------------    
*/

.paging_full_numbers {
    text-align: center;
}

    .paging_full_numbers .ui-button {
        padding: 2px 6px;
        margin: 0 !important;
        cursor: pointer;
    }

        /* This makes text stay white and background turquiose on hover */
        .paging_full_numbers .ui-button:hover {
            color: #000000;
            background-color: #01A2F9;
            /*background: #0198e7 url(../themes/dwdVI/images/ui-bg_highlight-hard_75_0198e7_1x100.png) 50% 50% repeat-x !important;*/
        }

    .paging_full_numbers .ui-state-default {
        color: #FFFFFF;
        background-color: #337ab7;
    }

    .paging_full_numbers .ui-state-disabled {
        background-color: #337ab7;
        background-color: #CCCCCC;
        color: #000000;
        opacity: .9;
    }


.even {
    background-color: #E7F2FA;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
    margin: 0 auto;
    clear: both;
    width: 100%;
}

    table.display thead th {
        padding: 3px 3px 3px 3px;
        border: 1px solid black;
        font-weight: bold;
        font-size: 12px;
        cursor: pointer;
        text-align: left;
        color: #000;
        background: none;
        background-color: #9FCCE9;
    }

    table.display tfoot th {
        padding: 3px 10px;
        border: 1px solid black;
        font-weight: bold;
        font-size: 12px;
        text-align: right;
        color: #000;
        background: none;
        background-color: #9FCCE9;
    }

    table.display td {
        padding: 3px 10px;
        font-size: 12px; /* ok for employer ? */
        border: 1px solid #aaa;
    }

        table.display td.center {
            text-align: center;
        }

.datatable-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

table.display td.is-breakable {
    word-break: break-all;
}
/* End datatables styles */

@media (min-width: 991px) {
    .labelAlignCenter {
        text-align: center;
    }
}

@media (min-width: 992px) {
    .labelAlign {
        text-align: right;
        padding-left: 0;
    }
}

@media (min-width: 768px) {
    .pull-right-md {
        float: right !important;
    }
}

@media (min-width: 768px) {
    .iicMenuButton {
        white-space: normal !important;
        max-width: 100px;
    }

    .iicMenuText {
        white-space: normal !important;
    }
}

@media (min-width: 768px) {
    .iicMenuButton3 {
        white-space: normal !important;
        min-width: 100px;
    }

    .iicMenuText {
        white-space: normal !important;
    }
}

/*
---------------------------------------------------------------------------------
Forms
---------------------------------------------------------------------------------
*/
div.CheckboxContainer {
    padding-bottom: 10px;
}

    div.CheckboxContainer label {
        display: inline !important;
        vertical-align: -3px;
    }

label {
    font-weight: bold !important;
    color: black;
}

h1, h2, h3, .validation-summary-errors, div.Heading, div.SubHeading {
    font-weight: bold;
}

legend {
    font-weight: 900;
}

#footer, div#breadcrumb, div#header {
    /*font-size: small;*/
    font-size: .90em;
}

.field-validation-valid, .validation-summary-valid {
    display: none;
}

Span.Format {
    font-style: italic;
    font-size: smaller;
    padding: 0px 0px 0px 10px;
}

div.Heading {
    font-size: larger;
}

div.SubHeading {
    font-size: large;
}
/*
---------------------------------------------------------------------------------
Logon page fields - /Claimant/Account/Logon
---------------------------------------------------------------------------------
*/
#FraudStatementLabel {
    text-align: left;
    padding-right: 10px;
    display: inline !important;
}

div#Terms {
    text-align: center;
    font-weight: bold;
    font-size: medium;
}

#imgLogon, #btnAccept {
    margin: 0px 0px 0px 0px;
}

#RecoverPassword, #ChangePassword, #ChangeProfile, #NewPassword {
    line-height: 25px;
    color: #000000;
}

#AppealsHeader {
    margin: 15px 15px 15px 15px;
}

.iiqHeader {
    background-color: #D5EDFF;
    margin: 15px 0px 15px 0px;
    padding: 0px 20px 0px 15px;
}

.iiqHeader2 {
    background-color: #D5EDFF;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-right: 5px;
}

/*
---------------------------------------------------------------------------------
User Profile page fields - /Claimant/Account/GetUIPortalInformation
---------------------------------------------------------------------------------
*/
#EmailAddressLabel {
    width: 400px;
}

.ProfileButtons {
    width: 80px;
    margin-right: 15px;
}

.ProfileButtons2 {
    width: 120px;
    margin-right: 15px;
}
/*
---------------------------------------------------------------------------------
Authorization
---------------------------------------------------------------------------------
*/
.week-highlight {
    background-color: red;
    color: green;
    font-weight: bold;
}
/*
---------------------------------------------------------------------------------
Horizontal layout
---------------------------------------------------------------------------------
*/
.mainHorizontalRow {
    padding-bottom: 5px;
}

.factFindingQuestionRadio {
    padding-top: 10px;
    font-weight: bold;
}

.factFindingQuestion {
    font-weight: bold;
}

.question {
    text-align: left;
    padding-top: 5px;
    font-weight: bold;
}

.questionRadio {
    text-align: left;
    padding-top: 10px;
    font-weight: bold;
}

div.question label {
    font-weight: bold;
    font-size: medium;
}

div.questionRadio label {
    font-weight: bold;
    font-size: medium;
}

.displayRight {
    text-align: right;
    padding-top: 10px;
    font-weight: bold;
}

.answer {
    padding-left: 15px;
    padding-top: 10px;
    font-weight: normal;
}

.answerRadio {
    padding-left: 15px;
    font-weight: normal !important;
}

.noWrap {
    white-space: nowrap;
}

.horizontalButton {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

hr.style-one {
    border: 0;
    height: 1px;
    background: #58ACFA;
    background-image: -webkit-linear-gradient(left, #ccc, #58ACFA, #ccc);
    background-image: -moz-linear-gradient(left, #ccc, #58ACFA, #ccc);
    background-image: -ms-linear-gradient(left, #ccc, #58ACFA, #ccc);
    background-image: -o-linear-gradient(left, #ccc, #58ACFA, #ccc);
}

hr.print-style {
    display: block;
    height: 1px;
    background: transparent;
    width: 100%;
    border: none;
    border-top: solid 1px #aaa;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (min-width:768px) {
    .text-right-responsive {
        text-align: right;
    }

    .text-left-responsive {
        text-align: left;
    }
}

div.content-one {
    display: none;
}

.noDisplay {
    display: none;
}

span.inlineIcon {
    display: inline-block;
    margin-right: .5em;
    top: 2px;
}

span.display {
    font-weight: 900;
}

#buttonBar, #buttonBarMain, #paymentMethodButtonBar {
    padding-bottom: 20px;
    padding-top: 20px;
    /*text-align:center;*/
}



/* VISUAL INTEGRATION START */
html, body, select {
    font-family: Verdana, Arial;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.25em;
}

.iiq-header {
    margin-top: 4px;
    margin-bottom: 4px;
}

h3 {
    font-size: 1.0em;
}
/* this underlines the links in the progress menu */
.underlineLink a {
    text-decoration: underline !important;
}

.ui-shadow {
    -webkit-box-shadow: 7px 7px 5px #aaa9a6;
    -moz-box-shadow: 7px 7px 5px #aaa9a6;
    box-shadow: 7px 7px 5px #aaa9a6;
    /*-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);*/
}

#FAQ a,
#BenefitsHome a, #UIHearing a, #ClaimantHandbook a {
    color: white;
    text-decoration: underline;
}

#CurrentUsers a {
    color: #000000;
    max-width: 50%;
}

/* VISUAL INTEGRATION END */
#dwdLogo {
    padding-left: 0px;
}

#spnSelectedWeek, .boldLink {
    font-weight: bold;
}

.logonInput {
    color: black;
}

/*
.inputFormat
{
   width: 100%;
   margin-top: 10px;
   min-height: 26px;
}
   */

.inputFormatSmaller {
    width: 90%;
    margin-top: 10px;
    min-height: 26px;
}

.right-justified-number {
    padding-right: 0;
}

.calendar-textbox {
    width: 100px;
}

.calendar-textbox-wide {
    width: 145px;
}

/* This is for testing layout. Uncomment style below to see red borders for testing */

/*div.col-md-1, div.col-md-2, div.col-md-3, div.col-md-4, div.col-md-5, div.col-md-6, div.col-md-7, 
div.col-md-8, div.col-md-9, div.col-md-10, div.col-md-11, div.col-md-12,
div.col-sm-1, div.col-sm-2, div.col-sm-3, div.col-sm-4, div.col-sm-5, div.col-sm-6, div.col-sm-7, 
div.col-sm-8, div.col-sm-9, div.col-sm-10, div.col-sm-11, div.col-sm-12
{
   border: 1px solid red;
}*/


.weekSelectionLabel {
    float: right;
    width: auto;
    text-align: right;
    line-height: normal;
}

#tblWorkHistory {
    padding: 2px 2px 2px 2px;
    border: 0px solid navy;
    width: 100%;
    margin-bottom: 30px;
}

    #tblWorkHistory tr {
        line-height: 30px;
    }

/*
#OutOfStateMessage
{
   border: 1px solid red; 
   padding: 20px 20px 20px 20px;   
}
*/

.questionText {
    font-weight: bold;
}

.inputQuestion {
    margin-top: 10px;
    padding-top: 5px;
}

#btnSelectEmployer {
    font-weight: bold;
}

select {
    margin-bottom: 10px;
}

.liNoImage {
    list-style: none;
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 991px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

    .row-offcanvas-right .sidebar-offcanvas {
        right: -80%; /* 6 columns */
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -50%; /* 6 columns */
    }

    .row-offcanvas-right.active {
        right: 80%; /* 6 columns */
    }

    .row-offcanvas-left.active {
        left: 50%; /* 3 columns */
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 75%; /* 6 columns */
    }
}

/* Supress URLs from printing */
@media print {
    a:link:after, a:visited:after {
        content: "";
    }
}

/* Used to make spans of text look like links. */
.spanlink {
    cursor: pointer;
    color: #0359a5;
    text-decoration: underline;
}

    .spanlink:hover {
        text-decoration: underline;
    }

/* to identify popovers */
.myDataToggle {
}


.evenRow {
    background-color: #E7F2FA;
}

.oddRow {
    background-color: white;
}

    .evenRow TD, .oddRow TD {
        padding-left: 10px;
        padding-right: 10px;
    }

/*
---------------------------------------------------------------------------------
Bootstrap Overrides
---------------------------------------------------------------------------------
*/
a {
    text-decoration: none;
    color: #1C588D;
}

    a:hover,
    a:focus {
        text-decoration: underline;
    }


legend.title {
    font-size: 15px;
    color: #333333;
    border-bottom: none;
}

#Loading {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Change the background color for table striping*/
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #E7F2FA;
}

.popover-title {
    background-color: #428bca;
    color: #ffffff;
    font-weight: bold;
}

.popover {
    max-width: 750px;
    width: auto;
    border: 1px solid #58ACFA;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.close {
    color: #fff;
    opacity: 0.5;
}

.top-buffer {
    margin-top: 15px;
}

input, textarea {
    font-size: initial;
}
/* end override bootstrap styles */

::-webkit-scrollbar {
    -webkit-appearance: none;
}

    ::-webkit-scrollbar:vertical {
        width: 12px;
    }

    ::-webkit-scrollbar:horizontal {
        height: 12px;
    }

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

.textOverride {
    color: #000000;
}

.alertNarrowBox {
    margin-bottom: 3px;
    height: 33px;
    line-height: 33px;
    padding: 0px 15px;
    font-size: smaller;
}

.alertBox {
    margin-bottom: 3px;
    font-size: smaller;
}

input::-webkit-datetime-edit-ampm-field:focus,
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-hour-field:focus,
input::-webkit-datetime-edit-millisecond-field:focus,
input::-webkit-datetime-edit-minute-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-second-field:focus,
input::-webkit-datetime-edit-week-field:focus,
input::-webkit-datetime-edit-year-field:focus {
    background-color: highlight;
    color: highlighttext;
    outline: none;
    cursor: text;
}

#MenuButton:focus,
.toggleLanguageButton:focus {
    outline-offset: 2px;
    outline-width: 3px;
    outline-style: solid;
    outline-color: white;
    color: white;
    background: #003663;
}

#MenuButton:hover,
.toggleLanguageButton:hover {
    color: white;
    background: #003663;
}

a:focus {
    outline-offset: 5px;
    outline-width: 3px;
    outline-style: solid;
    outline-color: black;
    border-radius: 10px;
}

#footer a:focus {
    outline-offset: 2px;
    outline-width: 2px;
    outline-style: solid;
    outline-color: white;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus,
#MenuButton:focus {
    outline-offset: 8px;
    outline-width: 3px;
    outline-style: solid;
    outline-color: black;
}

.navLink a:focus {
    outline-offset: 5px;
    outline-width: 3px;
    outline-style: solid;
    outline-color: red;
    border-radius: 10px;
}

#BenefitsHome a:focus {
    outline-offset: 5px;
    outline-width: 2px;
    outline-style: solid;
    outline-color: white !important;
}

#breadcrumb a:focus {
    outline-offset: 5px;
    outline-width: 2px;
    outline-style: solid;
    outline-color: white !important;
}

add border-radius for consistant style
.icon-pic {
    display: inline-flex;
    vertical-align: baseline;
    max-width: 100px;
    min-width: 100px;
    padding-left: 10px;
    padding-right: 10px;
    background: white;
    opacity: 1;
    border-radius: 25px;
}

@media (min-width: 576px) {
    .icon-pic {
        max-width: 125px;
        min-width: 125px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        padding-bottom: 5px;
        border-radius: 25px;
    }
}

a:focus,
input[type="text"]:focus,
input[type="textarea"]:focus,
input[type="password"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="select"]:focus,
input[type="date"]:focus,
select:focus {
    outline-offset: 3px !important;
    outline-width: 3px !important;
    outline-style: solid !important;
    outline-color: black !important;
    border-radius: 5px !important;
}

.li-spacer10 {
    margin-bottom: 10px;
}

.panel-info > .panel-heading {
    color: #0C374D;
}

#WarningIcon {
    color: red;
}

.skip-link {
    background: #319795;
    color: #fff;
    font-weight: 700;
    left: 85%;
    padding: 4px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
    z-index: 100;
}

    .skip-link:focus {
        transform: translateY(0%);
    }

.required-fields-header {
    background: #319795;
    color: #fff;
    font-weight: 700;
    left: 85%;
    padding: 5px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
    z-index: 100;
}

    .required-fields-header:focus {
        transform: translateY(80%);
    }

div#wisUnempIns {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.1;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0.67em 0;
}

div#wisUnempInsSmall {
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.1;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0.67em 0;
}

h1#PageTitle {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    font-size: 2.0rem;
}

legend.formatLikeLabel {
    font-weight: bold;
    font-size: 14px;
    color: black;
    margin-bottom: 0;
    border-bottom: none;
}

div#debitCardRates {
    font-size: 1.5em;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.1;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0.67em 0;
}

input[type="checkbox"],
input[type="radio"] {
    border: 1px solid #333333;
}

div #titleLarge {
    font-size: 1.24em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.1;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0.67em 0;
}

h1.pageTitle {
    font-size: 2.0rem;
}

h1.icpageTitle {
    font-size: 1.6rem;
}

h1.icpageTitleSmall {
    font-size: 1.4rem;
}

h1.icpageTitleLarge {
    font-size: 1.24em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.1;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0.67em 0;
}

h2.summaryHeading {
    font-size: 1.6rem;
    font-weight: bold;
}

h2.viewProgressHeading {
    font-size: 1.4rem;
    font-weight: bold;
}

#TranslationQuestionsMessage {
    color: #0054AD !important;
}

.hiddenFocusRing:focus {
    outline-offset: 0px;
    outline-offset: 0px;
    outline-width: 0px;
    outline-style: none;
    outline-color: Background;
}

#ImportantMessage {
    /* border: 2px double #107fc9;*/
    margin: 15px;
    /*   padding: 20px 10px 20px 10px;
*/ border-radius: 5px;
}

.warningText {
    color: #EB0000;
}

.separationClarifyHelp {
    display: block;
    margin-top: -10px;
    margin-bottom: 15px;
    margin-left: 20px;
    color: #737373;
}

.separationHelp {
    border: 3px solid #107fc9;
    color: #107fc9;
    font-weight: bold;
    vertical-align: middle;
    padding: 1em;
}

.helpColumn1 {
    float: left;
    width: 10%;
    height: 100%;
    text-align: center;
    padding-top: 1em;
}

.helpColumn2 {
    float: left;
    width: 85%;
    height: 100%;
    padding-left: 1em;
}

.uiicremovedefault {
    list-style-type: none;
}

.uilicbeforedefault {
    background-repeat: no-repeat;
    padding-left: 55px;
    /*padding-top: 10px !important;*/
    font-weight: bold;
    background-size: 40px 40px;
}

.li-spacer25 {
    margin-bottom: 25px;
}

.liimage {
    margin-bottom: 48px;
    margin-top: 28px;
}

.uiicbegindefaultli {
    font-weight: normal;
    list-style-type: disc;
}

.uiicbeforebeginliWH {
    background-image: url('../images/Document.png');
}

.uiicbeforebeginliAR {
    background-image: url('../images/Globe.png');
    height: 50px;
}

.uiicbeforebeginliML {
    background-image: url('../images/Shield 2.png');
    height: 50px;
}

.uiicbeforebeginliFC {
    background-image: url('../images/Government.png');
    height: 50px;
}

.jobPopupBtn {
    background-color: #48ccf7 !important;
    color: #ffffff;
    border: 0;
    width: 350px;
    white-space: inherit;
    text-overflow: inherit;
}

#JobNotificationDialog .ui-dialog-content {
    padding-top: 3em !important;
}

#JobNotificationDialog .container .row .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

#OOSJobNotificationDialog .container .row .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

    #OOSJobNotificationDialog .container .row .col ul {
        padding-left: 0 !important;
    }

#OOSJobNotificationDialog .jobPopupBtn {
    width: 350px !important;
}

.claimSummary {
    margin-bottom: 5px;
    padding: 10px;
}

input.right {
    float: right;
}

.dialogBoxNotification {
    max-width: 300px;
}

.needHelpQuestionIcon {
    height: 19px;
    margin-top: -2px;
    margin-left: -7px;
    margin-right: 5px;
}

.indentText {
    text-indent: 1rem;
}

.indentText2 {
    text-indent: 2.5rem;
}

.spacer18 {
    margin-bottom: 18px;
}

.btnwrap {
    white-space: pre-wrap;
}

u {
    color: #337ab7;
}

.box {
    background: white;
    border: 1px solid;
    border-radius: 5px;
}

div.actions {
    padding-top: 67px;
    margin-top: -90px;
}

.boxcolor {
    color: #337ab7
}

.actionsul ul {
    padding-left: 16px;
}

/* if you change this padding be sure to test with mobile device - used for Required Actions message*/
.actionsmain {
    padding-left: 20px;
    padding-right: 5px;
}

.actions hr {
    border-top-color: #eea236 !important;
}

.indent-Text {
    text-indent: 0rem;
}


.separationClarifyHelp {
    display: block;
    margin-top: -10px;
    margin-bottom: 15px;
    margin-left: 20px;
    color: #737373;
}

.separationHelp {
    border: 3px solid #107fc9;
    color: #107fc9;
    font-weight: bold;
    vertical-align: middle;
    padding: 1em;
}

.infoHelp {
    border: 3px solid #107fc9;
    color: black;
    font-weight: normal;
    vertical-align: middle;
    padding: 1em;
}

input[type="checkbox"],
input[type="radio"] {
    border: 1px solid #333333;
}

.helpColumn1 {
    float: left;
    width: 10%;
    height: 100%;
    text-align: center;
    /*padding-top: 1em;*/
}

.helpColumn2 {
    float: left;
    width: 85%;
    height: 100%;
    padding-left: 1em;
}

.uiicremovedefault {
    list-style-type: none;
}

.uilicbeforedefault {
    background-repeat: no-repeat;
    padding-left: 55px;
    /*padding-top: 10px !important;*/
    font-weight: bold;
    background-size: 40px 40px;
}

.li-spacer25 {
    margin-bottom: 25px;
}

.liimage {
    margin-bottom: 48px;
    margin-top: 28px;
}

.uiicbegindefaultli {
    font-weight: normal;
    list-style-type: disc;
}

.uiicbeforebeginliWH {
    background-image: url('../images/Document.png');
}

.uiicbeforebeginliAR {
    background-image: url('../images/Globe.png');
    height: 50px;
}

.uiicbeforebeginliML {
    background-image: url('../images/Shield 2.png');
    height: 50px;
}

.uiicbeforebeginliFC {
    background-image: url('../images/Government.png');
    height: 50px;
}

.jobPopupBtn {
    background-color: #48ccf7 !important;
    color: #ffffff;
    border: 0;
    width: 350px;
    white-space: inherit;
    text-overflow: inherit;
}

#JobNotificationDialog .ui-dialog-content {
    padding-top: 3em !important;
}

#JobNotificationDialog .container .row .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

#OOSJobNotificationDialog .container .row .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

    #OOSJobNotificationDialog .container .row .col ul {
        padding-left: 0 !important;
    }

#OOSJobNotificationDialog .jobPopupBtn {
    width: 350px !important;
}

.jcwRegisterDialogBtn {
    margin-right: .5em;
}

.claimSummary {
    margin-bottom: 5px;
    padding: 10px;
}

input.right {
    float: right;
}

.dialogBoxNotification {
    max-width: 300px;
}

.dialogBoxNotificationDWD {
    max-width: 400px;
}

.needHelpQuestionIcon {
    height: 19px;
    margin-top: -2px;
    margin-left: -7px;
    margin-right: 5px;
}

#TranslationQuestionsMessage {
    color: #0054AD !important;
}

.scroll-divList {
    min-width: 220px;
    max-height: 240px;
    overflow: auto;
}

.totalTableRow {
    border-top: 1px;
    font-weight: bold;
    font-size: 1.75em;
}

.mr-1,
.mx-1 {
    margin-right: 0.25rem;
}

.mr-2,
.mx-2 {
    margin-right: 0.5rem;
}

.mr-3,
.mx-3 {
    margin-right: 1rem;
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important;
}

.mt-5,
.my-5 {
    margin-top: 3rem !important;
}

.media-icon {
    width: 48px;
    height: 48px;
}
/*
---------------------------------------------------------------------------------
Accessibility (WCAG AA Contrast) - shared, loads in BOTH claimant and worker modes
---------------------------------------------------------------------------------
*/

/* WCAG 1.4.3 - Link-style button contrast: btn-link #337ab7 on #e7f2fa row bg
   (4:1, fails) -> #2663AC (5.34:1). Placed here (not claimant-accessibility.css)
   so the fix applies when the page renders in worker-portal mode too. */
.btn-link {
    color: #2663AC;
}

    .btn-link:hover,
    .btn-link:focus {
        color: #1E4F8A;
    }

/* WCAG 2.1.1 / 4.1.2 - Clickable text/icons must be native <button> for keyboard s
upport.
   `.spanlink-btn` resets native button chrome so a <button class="spanlink spanlin
k-btn">
   renders inline exactly like the old <span class="spanlink"> link. */
button.spanlink-btn {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    display: inline !important;
    text-align: inherit !important;
}

    button.spanlink-btn:hover,
    button.spanlink-btn:focus,
    button.spanlink-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

/* ==========================================================================
   Responsive jQuery UI Dialog
   Ensures all .ui-dialog popups stay within the viewport on phones, tablets,
   and iPad Split View.  Bootstrap modals already handle this natively.
   ========================================================================== */

/* --- Base safety net (all viewports) ---
   Constrains dialog SIZE and enables scrolling, but does NOT override
   position (top/left) so centered dialogs like loading spinners stay centered. */
.ui-dialog {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

    .ui-dialog .ui-dialog-content {
        max-height: calc(100vh - 130px) !important;
        max-height: calc(100dvh - 130px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

/* --- Phones & iPad Split View (up to 576px wide) --- */
@media (max-width: 576px) {
    .ui-dialog {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }

        .ui-dialog .ui-dialog-content {
            max-height: calc(100vh - 90px) !important;
            max-height: calc(100dvh - 90px) !important;
        }

        .ui-dialog .ui-dialog-buttonpane {
            padding: 8px !important;
        }

            .ui-dialog .ui-dialog-buttonpane button {
                width: auto !important;
                min-width: 0 !important;
                padding: 6px 14px !important;
            }
}

/* --- Tablets portrait / iPad (577px – 1024px wide) --- */
@media (min-width: 577px) and (max-width: 1024px) {
    .ui-dialog {
        max-width: min(calc(100vw - 40px), 600px) !important;
        max-height: calc(100vh - 100px) !important;
        max-height: calc(100dvh - 100px) !important;
    }

        .ui-dialog .ui-dialog-content {
            max-height: calc(100vh - 170px) !important;
            max-height: calc(100dvh - 170px) !important;
        }
}

/* --- Short / landscape screens (any width, height 500px or less) --- */
@media (max-height: 500px) {
    .ui-dialog {
        max-height: calc(100vh - 10px) !important;
        max-height: calc(100dvh - 10px) !important;
    }

        .ui-dialog .ui-dialog-content {
            max-height: calc(100vh - 80px) !important;
            max-height: calc(100dvh - 80px) !important;
        }
}