/*
 * Main stylesheet for the Train 2 applications.
 */

body, input, select, textarea {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {
    color: #000000;
    background-color: #C9D5E5;
    font-size: 8pt;
    margin: 0;
}

p {
    color: #000000;
    font-size: 8pt;
}

th {
    color: #000000;
    font-size: 7pt;
    font-weight: bold;
    text-align: center;
}

td {
    color: #000000;
    font-size: 8pt;
    vertical-align: top;
}

h3 {
    font-size: 11pt;
}

label {
    cursor: pointer;
    line-height: 30px;
}

h1.error, h2.error, h3.error, h4.error, h5.error, h6.error {
    text-align: center;
    color: red;
}

div.loading {
    z-index: 501;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layout-table {
    width: 100%;
}

.layout-table th {
    line-height: 30px;
    vertical-align: middle;
}

.layout-table td {
    line-height: 26px; /* this is the size of the calendar widget */
    vertical-align: middle;
}

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

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

td.cm {
    text-align: center;
    vertical-align: middle;
}

td.text-center-middle {
    text-align: center;
    vertical-align: middle;
}

td.text-left-middle {
    text-align: left;
    vertical-align: middle;
}

td.text-right-middle {
    text-align: right;
    vertical-align: middle;
}

td.text-right-top {
    text-align: right;
    vertical-align: top;
}

td.rmb {
    text-align: right;
    vertical-align: middle;
    font-weight: bold;
}

select {
    color: #2B2D37;
    font-size: 8pt;
    background-color: #B1C7E4;
}

input {
    color: #2B2D37;
    font-size: 8pt;
    background-color: #B1C7E4;
}

.inline {
    display: inline;
}
div.outlined {
    color: #000000;
    font-size: 8pt;
    text-align: center;
    border: #2B69A2 2px solid;
    padding: 3px;
}

div.processing {
    color: #FF0000;
    font-size: 8pt;
    text-align: center;
    padding: 3px;
    display: none;
}

.visfield {
    color: #2B2D37;
    font-size: 8pt;
}

fieldset {
    color: #000000;
    background-color: #C9D5E5;
    border: #2B69A2 1px solid;
    font-size: 8pt;
    text-align: center;
    width: auto;
    padding: 10px;
    margin: auto;
}

fieldset.parent {
    border: #2B69A2 2px solid;
}

legend {
    color: #000000;
    font-size: 8pt;
    font-weight: bold;
    padding-bottom:5px;
    text-align: left;
}

.hidfield {
    border: none; /* #2B69A2 1px solid; */
    background-color: transparent;
    font-size: 8pt;
    font-weight: bold;
    padding-bottom: 3px;
}

textarea {
    color: #2B2D37;
    font-size: 8pt;
    background-color: #B1C7E4;
}

.phone_field {
    color: #2B2D37;
    font-size: 8pt;
    width: 136px;
    background-color: #B1C7E4;
}

.hidden_content {
    visibility: hidden;
    display: none;
}

.visible_content {
    visibility: visible;
    display: block;
}

a:link {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

a:visited {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

a:active {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

a:hover {
    color: #434e59;
    font-weight: bold;
    text-decoration: underline overline;
}

.small-label {
    font-size: 7pt;
    font-weight: bold;
}

.inactiveListLink {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}

.text-link {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

.text-hover {
    color: #434e59;
    font-weight: bold;
    text-decoration: underline overline;
    cursor: pointer;
}

.copyright {
    color: #000000;
    font-size: 8pt;
    text-align: center;
    text-decoration: none;
}

.h1 {
    color: #000000;
    font-size: 8pt;
    font-weight: bold;
}

.text {
    color: #FFFFFF;
    font-size: 7pt;
    font-weight: bold;
}

.checkbox {
     vertical-align: middle;
}

.text1 {
    color: #daa520;
    font-size: 8pt;
    font-weight: bold;
}

.table-text {
    color: #000000;
    font-size: 8pt;
    font-weight: bold;
}

.td-text {
    font-weight: bold;
    vertical-align: middle;
}

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

.td-text-right-top{
    font-weight: bold;
    vertical-align: top;
    text-align: right;
}
.footer {
    color: #000000;
    font-size: 7pt;
    font-weight: bold;
    text-align: center;
}

.theading {
    color: #FFFFFF;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    background-color: #2B69A2;
    height: 22px;
    vertical-align: middle;
}

.theading2 {
    color: #FFFFFF;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    background-color: #2B69A2;
    height: 17px;
    vertical-align: middle;
}


.theading-small {
    color: #FFFFFF;
    font-size: 7pt;
    font-weight: bold;
    text-align: center;
    background-color: #2B69A2;
    height: 17px;
    vertical-align: middle;
}

.theading2-selected {
    color: #FFFFFF;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    background-color: blue;
    height: 17px;
    vertical-align: middle;
}

.theading3 {
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    background-color: #2B69A2;
    height: 17px;
    vertical-align: middle;
}

.search-divider {
    background-color: #2B69A2;
    height: 2px;
    vertical-align: middle;
}



.outlined {
    color: #000000;
    font-size: 11pt;
    border-top: #2B69A2 2px solid;
    border-right: #2B69A2 2px solid;
    border-left: #2B69A2 2px solid;
    border-bottom: #2B69A2 2px solid;
    background-color: #C9D5E5;
}

.maintable {
    color: #000000;
    font-size: 11pt;
    border-right: #0366C3 2px solid;
    border-left: #0366C3 2px solid;
    border-bottom: #0366C3 2px solid;
    border-top: #0366C3 2px solid;
    margin-left: auto;
    margin-right: auto;
}

.bordered {
    color: #000000;
    font-size: 11pt;
    border-top: #2B69A2 1px solid;
    border-right: #2B69A2 1px solid;
    border-left: #2B69A2 1px solid;
    border-bottom: #2B69A2 1px solid;
}

.tbackground {
    color: #000000;
    font-size: 11pt;
    border-right: #2B69A2 2px solid;
    border-left: #2B69A2 2px solid;
    border-bottom: #2B69A2 2px solid;
    background-color: #C9D5E5;
}

.tbackground table {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.trow {
    color: #000000;
    font-size: 8pt;
    background-color: #F0F0FF;
}

.trow2 {
    color: #000000;
    font-size: 8pt;
    background-color: #cff;
}

.trow-darker {
    color: #000;
    font-size: 8pt;
    background-color: #E0E0EE;
}

.trow2-darker {
    color: #000;
    font-size: 8pt;
    background-color: #BEE;
}

.trowExpired {
    color: #000000;
    font-size: 8pt;
    background-color: #fbe26f;
}

.trowSelected {
    color: #000000;
    font-size: 8pt;
    background-color: #ffe;
}

tr.space-under > td {
    padding: 5px;
}

.section-heading {
    color: #000000;
    font-size: 10.5pt;
    font-weight: bold;
    text-align: center;
}

.section-background {
    color: #000000;
    font-size: 11pt;
    border-right: #A0B1C2 2px solid;
    border-left: #A0B1C2 2px solid;
    border-bottom: #A0B1C2 2px solid;
}

.section-top-left {
    border-bottom: solid #A0B1C2 2px;
}

.section-top-right {
    border-bottom: solid #A0B1C2 2px;
}

.section-top-leftB {
    border-left: solid #A0B1C2 2px;
}

.section-top-rightB {
    border-right: solid #A0B1C2 2px;
}

.twarning {
    color: #FFF004;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    background-color: #2B69A2;
}

DIV.topdate {
    background-color: #000062;
    color: #FFFFFF;
    font-size: 7pt;
    font-weight: bold;
    padding: 3px;
}

.citfClass {
    font-weight: bold;
    color: blue;
    font-style: italic;
    display: inline;
}
/* BEGIN: DHTML Styles */


.toggle {
    color: #FFF004;
    font-size: 8pt;
    font-weight: bold;
    text-align: left;
    background-color: #2B69A2;
    padding-left: 5px;
}

.toggle-text {
    color: #FFFFFF;
    font-size: 10pt;
    font-weight: bold;
    text-align: left;
    background-color: #2B69A2;
}

.minitoggle {
    color: #FFF004;
    font-size: 7pt;
    font-weight: bold;
    text-align: left;
    background-color: #2B69A2;
    padding-left: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.minitoggle-text {
    color: #FFFFFF;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    background-color: #2B69A2;
}
/* END: DHTML Styles */






/* TAB STYLES */
.ontab {
    color: white;
    font-size: 8pt;
    font-weight: bold;
    background-color: #0366C3;
    cursor: default;
    border-right: #C9D5E5 solid 3px;
    padding-left: 5px;
    padding-right: 5px;
}

.offtab {
    color: white;
    font-size: 8pt;
    font-weight: bold;
    background-color: #3F5C77;
    cursor: pointer;
    border-right: #C9D5E5 solid 3px;
    padding-left: 5px;
    padding-right: 5px;
}

.overtab {
    color: white;
    font-size: 8pt;
    font-weight: bold;
    background-color: #3F5CCC;
    cursor: pointer;
    border-right: #C9D5E5 solid 3px;
    padding-left: 5px;
    padding-right: 5px;
}

/* END TAB STYLES */

#footer {
    font-size: 6pt;
    text-align: center;
    width: 100%;
    clear: both;
}

.small-blue-link A:link {
    color: #2B69A2;
    font-size: 6pt;
    text-decoration: none;
}
.small-blue-link A:visited {
    color: #2B69A2;
    font-size: 6pt;
    text-decoration: none;
}
.small-blue-link A:active {
    color: #2B69A2;
    font-size: 6pt;
    text-decoration: none;
}
.small-blue-link A:hover {
    color: #2B69A2;
    font-size: 6pt;
    text-decoration: underline overline;
}

span {
    display: inline-block;
}
.message {
    color: red;
    font-size: 7pt;
}

.cal-date {
    float: right;
    border-left: solid 1px;
    border-bottom: solid 1px;
    font-weight: bold
}

.requiredField {
    font-weight: bold;
    color: red;
    font-size: 11px;
    vertical-align: top;
}
.prog-warning {
    background-color: yellow;
}
.status-warning {
    background-color: yellow;
}
.ind-date-error {
    background-color: yellow;
}
.comp-date-error {
    background-color: yellow;
}
.ui-dialog-title {
    font-size: 10pt;
    font-weight: bold;
    color: white;
}
.ui-dialog-content {
    text-align: left;
    margin: 20px;
}
input.wage-rate-level {
    width: 50px;
    border: none;
    background-color: transparent;
    font-weight: bold;
    text-align: right;
}
input.jqDateField {
    width: 100px;
}

.mainDiv{
    margin-right: auto;
    margin-left: auto;
}

.table-center {
    margin-right: auto;
    margin-left: auto;
}
.table-right {
    margin-left: auto;
}
.table-left {
    margin-right: auto;
}

.click-image{
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.list-loading-indicator {
    background-color: yellow;
}

.rowError {
    background-color: #FF7171;
}


/* class filter modal dialog */
#class-filter-dialog {
    display: none;
}
#class-filter-dialog fieldset {
    border: 1px solid black;
    text-align: left;
    margin-bottom: 20px;
}
#class-filter-dialog label {
    width: 120px;
    text-align: right;
    display: inline-block; /* not fully supported in IE7 */
    margin-bottom: 5px;
}
#class-filter-dialog select {
    width: 450px;
}



/* new container div - to replace mainDiv */
#containerDiv {
    margin: 0 auto;
    width: 980px;
}
#containerDiv h1,
#containerDiv h2,
#containerDiv h3,
#containerDiv h4,
#containerDiv h5,
#containerDiv h6 {
    text-align: center;
}
#containerDiv fieldset {
    margin-bottom: 20px;
    text-align: left;
}

/* table styles for Journeyman Application and Certification screens */
/* .journeymanCertTable { -none- } */
.journeymanCertTable td {
  text-align: center;
  vertical-align: middle;
  padding: 3px;
  font-size: 7pt;
  white-space: nowrap;
}
/* style for the jQuery generated date pickers images */
img.ui-datepicker-trigger {
    vertical-align: top;
}


/* Table filters. */
tr.table-filter-tr {
    background-color: white;
}
tr.table-filter-tr td {
    position: relative;
}
input.table-filter-input {
    background: white;
    width: 100%;
    border: 0px none;
    text-overflow: ellipsis;
}
input.table-filter-input:focus {
    outline: none;
}
.table-filter-dropdown {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #BFBFBF;
    margin-left: 3px;
}
.table-filter-dropdown:hover {
    cursor: pointer;
}
.table-filter-dropdown-list {
    position: absolute;
    top: 22px;
    left: 0px;
    margin: 0px;
    border: 1px solid #0366C3;
    width: 100%;
    min-width: 75px;
    background: white;
    display: none;
}
.table-filter-dropdown-list-item {
    padding: 5px 0px 5px 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-filter-dropdown-list-item:hover {
    cursor: pointer;
    background: #BFBFBF;
}

.table-filter-clear {
    height: 11px;
    width: 11px;
    background-color: #BFBFBF;
    border-radius: 12px;
    position: relative;
    display: none;
    margin-left: 3px;
}

.table-filter-clear:after {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    content: "\274c";
    font-size: 7px;
    color: #FFF;
    text-align: center;
}
.table-filter-clear:hover {
    cursor: pointer;
}
.rowValueChanged {
    background-color: #FFFFB6;
}

#sessionTimeoutBox {
    width: 300px;
    position: fixed;
    background: #e8ecf1;
    top: 50%;
    left: 50%;
    border: 3px solid #2b69a2;
    border-radius: 5px;
    margin-left: -150px;
    margin-top: -50px;
    box-shadow: 0px 0px 60px #000;
    padding: 20px;
    text-align: center;
}

.classListInfoLabel {
    font-size: 10pt;
    text-align: left;
    margin: auto;
}

.reportSelect {
    width: 450px;
    height: 72px;
}

.prefSelect {
    width: 350px;
    height: 72px;
}
.sortDataDesc::after {
    content:'\25BC';
}
.sortDataAsc::after {
    content:'\25B2';
}

.my-table {
    color: #000000;
    border-top: #2B69A2 1px solid;
    border-right: #2B69A2 1px solid;
    border-left: #2B69A2 1px solid;
    border-bottom: #2B69A2 1px solid;
}
.my-table thead tr td {
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    background-color: #2B69A2;
    height: 17px;
    vertical-align: middle;
}
.my-table tbody tr:nth-child(even) {
    background-color: #F0F0FF;
}
.my-table tbody tr:nth-child(odd) {
    background-color: #cff;
}
.my-table tbody tr td {
    font-size: 8pt;
}