/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: 'FranklinGothic-Book';
    src: url("../fonts/FranklinGothic-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/FranklinGothic-Book.woff") format("woff"), url("../fonts/FranklinGothic-Book.ttf") format("truetype"), url("../fonts/FranklinGothic-Book.svg#FranklinGothic-Book") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinGothic-Demi';
    src: url("../fonts/FranklinGothic-Demi.eot?#iefix") format("embedded-opentype"), url("../fonts/FranklinGothic-Demi.woff") format("woff"), url("../fonts/FranklinGothic-Demi.ttf") format("truetype"), url("../fonts/FranklinGothic-Demi.svg#FranklinGothic-Demi") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinGothic-Heavy';
    src: url("../fonts/FranklinGothic-Heavy.eot?#iefix") format("embedded-opentype"), url("../fonts/FranklinGothic-Heavy.woff") format("woff"), url("../fonts/FranklinGothic-Heavy.ttf") format("truetype"), url("../fonts/FranklinGothic-Heavy.svg#FranklinGothic-Heavy") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinGothic-MediumCond';
    src: url("../fonts/FranklinGothic-MediumCond.eot?#iefix") format("embedded-opentype"), url("../fonts/FranklinGothic-MediumCond.woff") format("woff"), url("../fonts/FranklinGothic-MediumCond.ttf") format("truetype"), url("../fonts/FranklinGothic-MediumCond.svg#FranklinGothic-MediumCond") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'FranklinGothic-Book', sans-serif;
    height: 100%;
    background-color: #35617b;
}

img {
    max-width: 100%;
}

.menu, .menu>li {
    list-style: none;
    padding: 0;
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
    line-height: 1em;
    padding: 0;
}

p {
    line-height: 1.2em;
    font-size: 20px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

input {
    outline: none;
    border: 0;
}

input[type="text"],
input[type="email"] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

strong,
b {
    font-family: 'FranklinGothic-Demi', sans-serif;
}

.eligibility-row {
    background-color: #dfdfe0;
    color: black;
    font-size: 16px;
}

.eligibility-headers {
    padding: 3px 6px 4px 15px !important;
}

.required {
    color: #b2111d;
}

caption {

    font-size: 20px;
    padding: 4px 15px;
    font-weight: normal;
    font-family: inherit;
}

/* ==========================================================================
   Homepage
   ========================================================================== */

.row-0 {
    margin: 0;
}

.row-0 > div {
    padding: 0;
}

.row-10 {
    margin: 0 -10px;
}

.row-10 > div {
    padding: 0 10px;
}

.row-25 {
    margin: 0 -25px;
}

.row-25 > div {
    padding: 0 25px;
}

.row-30 {
    margin: 0 -30px;
}

.row-30 > div {
    padding: 0 30px;
}

.wrapper {
    position: relative;
    background-color: white;
}

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

/*---header---*/

header {
    background-color: #35617b;
}

header .logo {
    display: inline-block;
    padding: 12px 75px;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
}

header .language-group > a {
    font-size: 18px;
    text-decoration: underline;
    text-align: right;
    display: block;
    color: #ffa537;
}

header .language-group {
    padding-top: 70px;
}

header .language-group .languages li {
    display: block;
    float: left;
}

header .language-group .languages li a {
    font-size: 16px;
    color: #ffa537;
}

header .language-group .languages li a:after {
    content: "|";
    padding: 0 4px;
}

header .language-group .languages li:last-child a:after {
    content: "";
}

/*---main----*/

.main {
    height: 100%;
    position: relative;
    min-height: 100%;
}

.main-content {
    margin: 0 auto;
    margin-top: 50px;
    padding-bottom: 50px;
    padding-left: 70px;
    min-height: 740px;
}

.pos-absolute {
    position: absolute;
}

.heading-title {
    margin-bottom: 20px;
    border-bottom: 1px solid #003B71;
    width: 100%;
    color: #003B71;
}

.current-trust {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

select {
    outline: none;
    background-color: #f6f6f6;
    margin-bottom: 15px;
    color: rgba(80, 80, 80, 0.6);
}

select option {
    font-size: 14px;
}

.main-content p {
    font-size: 18px;
    color: #5f6062;
    margin-bottom: 25px;
}

.sidebar {
    position: absolute;
    height: 100%;
    width: 360px;
    background-color: #1a2f3c;
    z-index: 2000;
    overflow-y: auto;
}

.menu-group {
    padding-bottom: 40px;
    padding-left: 85px;
}

.menu-title {
    font-family: 'FranklinGothic-MediumCond', sans-serif;
    font-size: 24px;
    color: #a8acb0;
    margin: 30px 0;
    /*background: url("../images/menu-toggle.png") no-repeat;
    background-position: 20px;*/
    padding-left: 20px !important;
    cursor: pointer;
}

.sidebar ul li {
    display: block;
    padding: 7px 15px;
    font-size: 14px;
    /*margin-bottom: 15px;*/
}

.sidebar ul li a {
    font-size: 18px !important;
    color: #a8acb0;
}

.sidebar ul li .active {
    color: #ffa537;
}

.line-small {
    width: 80px;
    height: 1px;
    margin: 25px 0;
}

.background-lightgrey {
    background-color: #a8acb0;
}

.color-lightgrey {
    color: #a8acb0;
}

.signout {
    display: block;
    width: 155px;
    line-height: 30px;
    color: #fff !important;
    background-color: #ffa537;
    margin-top: 25px;
    font-size: 16px;
    text-align: center;
    border-radius: 25px;
}

.sidebar .arrow {
    position: absolute;
    right: 10px;
    top: 36px;
    margin-top: -12px;
    font-size: 25px;
}

/*---footer----*/

footer {
    background-color: #35617b;
    width: 100%;
}

footer .footer-group {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

footer .footer-group .footer-logo {
    padding: 25px 0;
    float: none !important;
}

footer .footer-group > p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    float: none !important;
}

/* ==========================================================================
   Generic Form
   ========================================================================== */

.generic-form {
    width: auto;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.generic-form label {
    display: block;
    font-size: 16px;
    font-weight: normal;
}

.generic-form input {
    width: 100%;
    border: 1px solid #d5cfc0;
    line-height: 30px;
    margin-bottom: 25px;
    font-size: 16px;
}

.generic-form .btn-form-dynamic:hover,
.btn-form-dynamic:hover,
.signout:hover {
    background-color: #d4892f;
    color: #fff !important;
}

.generic-form .text-underline {
    line-height: 30px;
    font-size: 14px;
    color: #000;
}

.generic-form .btn-form-dynamic {
    text-align: center;
    width: auto;
    line-height: 30px;
    font-size: 18px;
    color: #fff;
    background-color: #ffa537;
    border-radius: 25px;
    border: 0;
    padding: 0px 16px;
}

.datepicker>*>.table-condensed { 
    border: none !important;
}

/* ==========================================================================
   Login
   ========================================================================== */

.login-form {
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.login-form label {
    display: block;
    font-size: 16px;
    font-weight: normal;
}

.login-form input {
    width: 100%;
    border: 1px solid #d5cfc0;
    min-height: 34px;
    line-height: 30px;
    margin-bottom: 25px;
    font-size: 16px;
}

.login-form .btn-form,
.btn-form {
    display: block;
    text-align: center;
    /* 20190702 - aroark - Adjusting width of "Login" button to fit the Spanish translation */
    width: 100%;
    max-width: 295px;
    line-height: 30px;
    font-size: 18px;
    color: #fff;
    background-color: #ffa537;
    border-radius: 25px;
    border: 0;
}

.login-form .btn-form:hover,
.btn-form:hover,
.signout:hover {
    background-color: #d4892f;
    color: #fff !important;
}

.login-form .text-underline {
    line-height: 30px;
    font-size: 14px;
    color: #000;
}

.register-group {
    padding:8px;
}

.register-group p {
    font-size: 14px;
}

.btn-form:hover {
    text-decoration: none;
    outline: none;
    color: #fff;
}

.btn-form:focus {
    text-decoration: none;
    outline: none;
    color: #fff;
}

/* ==========================================================================
  Pension
   ========================================================================== */

table {
    width: 100%;
    border: 2px solid #5f6062 !important;
}

table thead {}

.pension-table td {
    width: 20%;
    padding: 3px 4px 0 !important;
    font-size: 15px;
}

.pension-table th {
    text-align: center;
    font-weight: normal;
    font-size: 15px;
    padding: 3px 4px 0!important;
    font-family: 'FranklinGothic-Demi', sans-serif;
}

.pension-table tr td:first-child {
    border-right: 3px solid #dfdfe0;
}

/* ==========================================================================
  Benserco Contribution History Tables
   ========================================================================== */

.benserco-table td {
    padding: 5px 0px;
    font-size: 14px;
    width: auto;
}

.benserco-table th {
    text-align: center;
    font-weight: normal;
    font-size: 15px;
    /* 18px; */
    padding: 5px 0;
    font-family: 'FranklinGothic-Demi', sans-serif;
}

.benserco-table tr td:first-child {
    border-right: 3px solid #dfdfe0;
    max-width: 300px;

}

.benserco-table tfoot {
    border-top: 2px solid #CCCCCC;
}

/* ========================================================================== */

table .table-footer {
    background-color: #dfdfe0;
}

table .table-footer td {
    border-right: none !important;
    font-family: 'FranklinGothic-Demi', sans-serif;
}

table .table-footer .text-heavy {
    font-family: 'FranklinGothic-Heavy', sans-serif;
    text-align: right;
}

.text-heavy {
    font-family: 'FranklinGothic-Heavy', sans-serif;
}

table .text-heavy td {
    font-family: 'FranklinGothic-Heavy', sans-serif;
    font-weight: normal;
    opacity: 0.8;
}

table .active-green {
    color: #15a302;
}

table .active-red {
    color: #ff0202;
}

/* ==========================================================================
  Claim-details
   ========================================================================== */

.back-to {
    font-size: 16px;
    display: block;
    margin-bottom: 30px;
    color: #5f6062;
}

.claim-table1 {
    border: 2px solid #5f6062;
    margin-bottom: 35px;
}

.claim-table1 .heading-title {
    font-size: 16px;
    font-family: 'FranklinGothic-MediumCond', sans-serif;
    padding: 5px 15px;
}

.claim-table1 h5 {
    font-family: 'FranklinGothic-MediumCond', sans-serif;
    font-size: 16px;
    padding-left: 16px;
}

.claim-table1 p {
    padding-right: 10px;
    font-size: 16px;
    margin-bottom: 15px;
}

.claim-table2 th {
    font-weight: normal;
    font-size: 14px;
    padding: 7px 10px;
    text-align: center;
    font-family: 'FranklinGothic-Demi', sans-serif;
}

.claim-table2 td {
    padding: 7px 10px;
    font-size: 12px;
}

table .width-100 {
    width: 100%;
}

.claim-table2 tr:nth-child(even) {
    background-color: #dfdfe0;
}

.span-table {
    display: block;
    text-align: right;
    margin-bottom: 50px;
    font-size: 12px;
    margin-top: 5px;
}

.claim-table3 {
    border: none !important;
}

.claim-table3 th {
    font-weight: normal;
    font-size: 14px;
    padding: 7px 10px;
    text-align: center;
    font-family: 'FranklinGothic-Demi', sans-serif;
}

.claim-table3 td {
    padding: 15px 10px;
    font-size: 14px;
}

/* ==========================================================================
  Error-placement
   ========================================================================== */

.error-placement {
    background-color: #ecc3c6;
    margin: 20px 0;
}

.error-placement h3 {
    font-family: 'FranklinGothic-Demi', sans-serif;
    font-size: 16px;
    color: #b2111d;
    padding: 25px 35px;
    border-right: 1px solid #eccccf;
}

.error-placement p {
    font-size: 16px;
    color: #b2111d;
    padding: 25px 15px;
    margin-bottom: 0;
}

.welcome-msg h3 {
    font-family: 'FranklinGothic-Demi', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
}

.welcome-msg p {
    font-size: 16px;
}

.text-medium {
    font-family: 'FranklinGothic-MediumCond', sans-serif;
}

.text-demi {
    font-family: 'FranklinGothic-Demi', sans-serif;
}

.text-demi td {
    font-family: 'FranklinGothic-Demi', sans-serif;
}

.claim-table4 {
    margin-bottom: 50px;
}

.claim-table4 th {
    font-weight: normal;
    padding: 5px 15px;
    font-size: 16px;
    font-family: 'FranklinGothic-Demi', sans-serif;
    text-align: center;
}

.claim-table4 td {
    font-size: 16px;
    padding: 5px 2px;
}

.background-lightgrey-tr {
    background-color: #dfdfe0;
}

.claim-table4 tr td:nth-child(1) {
    padding-left: 5px;
}

/* ==========================================================================
  Resources
   ========================================================================== */

.group-page-title {
    margin-top: 25px;
}

.group-page-title .btn-form {
    width: 100px;
    margin-top: -7px;
    float: right;
}

.table-right tr td:nth-last-child(1) {
    float: right;
    padding-right: 40px;
}

.list-items-group {
    padding-left: 20px;
}

.list-items-group li {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

.list-items-group li:before {
    content: '';
    width: 14px;
    position: relative;
    top: 2px;
    height: 14px;
    border: 3px solid #3a657e;
    border-radius: 100%;
    display: inline-block;
    margin-right: 15px;
}

.list-items-group .no-text-border {
    line-height: 0;
}

.list-items-group .no-text-border:before {
    content: '';
    width: 0;
    height: 0;
    border: none;
}

/* ==========================================================================
  Eligiblity
   ========================================================================== */

.btn-expanded {
    width: 230px;
    margin: 50px auto;
    border-radius: 50px;
    font-size: 16px;
}

.sublist-items {
    display: none;
}

.sublist-items li {
    line-height: 20px;
}

.table-inside {
    border: none !important;
}

.claim-table4 .table-inside tr td:nth-child(1) {
    padding-left: 0;
}

.claim-table4 .table-inside tr td {
    font-size: 16px;
}

.table-inside .table-inside-td1 {
    text-align: right;
}

.table-inside .table-inside-td2 {
    text-align: center;
}

.claim-table-expanded tr td:nth-child(1) {
    width: 15%;
}

.claim-table-expanded tr td:nth-child(2) {
    width: 25%;
}

.claim-table-expanded tr td:nth-child(3) {
    width: 30%;
}

.claim-table-expanded tr .table-inside td:nth-child(1) {
    width: 30%;
    padding-right: 25px;
}

.claim-table-expanded tr .table-inside td:nth-child(2) {
    width: 40%;
    padding-right: 80px;
}

.claim-table-expanded tr .table-inside td:nth-child(3) {
    width: 30%;
}

.claim-table-expanded .hidden-td {
    opacity: 0;
}

.claim-table-expanded .active-row .hidden-td {
    opacity: 1;
}

.claim-table-expanded .tr-hidden {
    display: none;
}

.claim-table-expanded .text-center {
    text-align: center;
}

.expand-row,
.expand-all {
    color: #5f6062;
    text-decoration: underline;
}

.expand-all {
    text-decoration: none;
}

.expand-row:focus,
.expand-all:focus {
    color: #5f6062;
    text-decoration: underline;
}

.expand-all:focus {
    text-decoration: none;
}

/*-----tables----*/

.tablefix {
    position: relative;
    float: right;
    width: 100%;
}

/* Structure */

.tablesaw {
    border: 0;
    padding: 0;
}

.tablesaw-enhanced .tablesaw-bar .btn {
    border: 1px solid #ccc;
    background: none;
    background-color: #fafafa;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    color: #4a4a4a;
    clear: both;
    cursor: pointer;
    display: block;
    font: bold 20px/1 sans-serif;
    margin: 0;
    padding: .5em .85em .4em .85em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    text-shadow: 0 1px 0 #fff;
    width: 100%;
    /* Theming */
    background-image: -webkit-linear-gradient(top, rgba( 255, 255, 255, .1) 0%, rgba( 255, 255, 255, .1) 50%, rgba( 170, 170, 170, .1) 55%, rgba( 120, 120, 120, .15) 100%);
    background-image: linear-gradient( top, rgba( 255, 255, 255, .1) 0%, rgba( 255, 255, 255, .1) 50%, rgba( 170, 170, 170, .1) 55%, rgba( 120, 120, 120, .15) 100%);
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    border-radius: .25em;
}

.tablesaw-advance {
    float: right;
    margin-bottom: 5px;
}

.tablesaw-advance.minimap {
    margin-right: .4em;
}

.tablesaw-advance-dots {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tablesaw-advance-dots li {
    display: table-cell;
    margin: 0;
    padding: 0 7px;
}

.tablesaw-advance-dots li i {
    width: 10px;
    height: 10px;
    background: #dfdfe0;
    border-radius: 100%;
    display: inline-block;
}

.tablesaw-advance-dots-hide {
    cursor: default;
    pointer-events: none;
}

.tablesaw-advance-dots-hide i {
    background: #fff !important;
    border: 1px solid #5f6062;
}

/* Column navigation buttons for swipe and columntoggle tables */

.tablesaw-advance .btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    text-shadow: 0 1px 0 #fff;
    border-radius: .25em;
}

.tablesaw-advance .btn.btn-micro {
    font-size: .8125em;
    padding: .3em .7em .25em .7em;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn {
    display: inline-block;
    overflow: hidden;
    background-position: 50% 50%;
    margin-left: .5em;
    position: relative;
    width: 32px !important;
    height: 32px !important;
    background-color: transparent;
    border: none;
    padding: 0;
    text-indent: -9999999px;
    font-size: 0 !important;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before,
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before,
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.down:before,
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.up:before {
    content: "\0020";
    overflow: hidden;
    width: 0;
    height: 0;
    position: absolute;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.down:before {
    left: .5em;
    top: .65em;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #808080;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.up:before {
    left: .5em;
    top: .65em;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before {}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left {
    position: relative;
    /* 20190617 - aroark - Relocating the left navigation arrow to the right side of the table map next to the right navigation arrow */
    /*left: -270px;*/
    left: -5px !important;
    top: -5px;
    background: none;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right {
    position: relative;
    /* 20190617 - aroark - Relocating the left navigation arrow to the right side of the table map next to the right navigation arrow */
    /*right: 20px;*/
    right: 0px !important;
    top: -5px;
    background: none;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before {
    left: .6em;
    background: url('../images/arrow-left-light.png') no-repeat;
    width: 32px;
    height: 32px;
}

.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before {
    left: .7em;
    background: url('../images/arrow-right-light.png') no-repeat;
    width: 32px;
    height: 32px;
}

.tablesaw-advance a.tablesaw-nav-btn.disabled {
    opacity: .25;
    filter: alpha(opacity=25);
    cursor: default;
    pointer-events: none;
}

/* Mobile first styles: Begin with the stacked presentation at narrow widths */

@media only all {
    /* Show the table cells as a block level element */
    .tablesaw-stack td,
    .tablesaw-stack th {
        text-align: left;
        display: block;
    }

    .tablesaw-stack tr {
        clear: both;
        display: table-row;
    }

    /* Make the label elements a percentage width */
    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: block;
        padding: 0 .6em 0 0;
        width: 30%;
        display: inline-block;
    }

    /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
    .tablesaw-stack th .tablesaw-cell-label-top,
    .tablesaw-stack td .tablesaw-cell-label-top {
        display: block;
        padding: .4em 0;
        margin: .4em 0;
    }

    .tablesaw-cell-label {
        display: block;
    }

    /* Avoid double strokes when stacked */
    .tablesaw-stack tbody th.group {
        margin-top: -1px;
    }

    /* Avoid double strokes when stacked */
    .tablesaw-stack th.group b.tablesaw-cell-label {
        display: none !important;
    }
}

@media (max-width: 39.9375em) {
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: none;
    }

    .tablesaw-stack tbody td,
    .tablesaw-stack tbody th {
        clear: left;
        float: left;
        width: 100%;
    }

    .tablesaw-cell-label {
        vertical-align: top;
    }

    .tablesaw-cell-content {
        max-width: 67%;
        display: inline-block;
    }

    .tablesaw-stack td:empty,
    .tablesaw-stack th:empty {
        display: none;
    }
}

/* Media query to show as a standard table at 560px (35em x 16px) or wider */

@media (min-width: 40em) {
    .tablesaw-stack tr {
        display: table-row;
    }

    /* Show the table header rows */
    .tablesaw-stack td,
    .tablesaw-stack th,
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: table-cell;
        margin: 0;
    }

    /* Hide the labels in each cell */
    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: none !important;
    }
}

.tablesaw-fix-persist {
    /* 20190619 - aroark - Removing this as it causes some longer column headings/content to become cut-off (also not sure what this was supposed to be fixing?) */
    /*table-layout: fixed;*/
}

@media only all {
    /* Unchecked manually: Always hide */
    .tablesaw-swipe th.tablesaw-cell-hidden,
    .tablesaw-swipe td.tablesaw-cell-hidden {
        display: none;
    }
}

.btn.tablesaw-columntoggle-btn span {
    text-indent: -9999px;
    display: inline-block;
}

.tablesaw-columntoggle-btnwrap {
    position: relative;
    /* for dialog positioning */
}

.tablesaw-columntoggle-btnwrap .dialog-content {
    padding: .5em;
}

.tablesaw-columntoggle tbody td {
    line-height: 1.5;
}

/* Remove top/bottom margins around the fieldcontain on check list */

.tablesaw-columntoggle-popup {
    display: none;
}

.tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup {
    display: block;
    position: absolute;
    top: 2em;
    right: 0;
    background-color: #fff;
    padding: .5em .8em;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px #ccc;
    border-radius: .2em;
    z-index: 1;
}

.tablesaw-columntoggle-popup fieldset {
    margin: 0;
}


.main .main-transition-padding-left {
    transition: padding-left 0.2s linear;
    -moz-transition: padding-left 0.2s linear;
    transition: margin-left 0.2s linear;
    -moz-transition: margin-left 0.2s linear;
}

.main .main-transition-max-height {
    transition: max-height 0.2s linear;
    -moz-transition: max-height 0.2s linear;
}

/* Hide all prioritized columns by default */

@media only all {
    .tablesaw-columntoggle th.tablesaw-priority-6,
    .tablesaw-columntoggle td.tablesaw-priority-6,
    .tablesaw-columntoggle th.tablesaw-priority-5,
    .tablesaw-columntoggle td.tablesaw-priority-5,
    .tablesaw-columntoggle th.tablesaw-priority-4,
    .tablesaw-columntoggle td.tablesaw-priority-4,
    .tablesaw-columntoggle th.tablesaw-priority-3,
    .tablesaw-columntoggle td.tablesaw-priority-3,
    .tablesaw-columntoggle th.tablesaw-priority-2,
    .tablesaw-columntoggle td.tablesaw-priority-2,
    .tablesaw-columntoggle th.tablesaw-priority-1,
    .tablesaw-columntoggle td.tablesaw-priority-1 {
        display: none;
    }
}

.tablesaw-columntoggle-btnwrap .dialog-content {
    top: 0 !important;
    right: 1em;
    left: auto !important;
    width: 12em;
    max-width: 18em;
    margin: -.5em auto 0;
}

.tablesaw-columntoggle-btnwrap .dialog-content:focus {
    outline-style: none;
}

/* Preset breakpoints if "" class added to table */

/* Show priority 1 at 320px (20em x 16px) */

@media (min-width: 20em) {
    .tablesaw-columntoggle th.tablesaw-priority-1,
    .tablesaw-columntoggle td.tablesaw-priority-1 {
        display: table-cell;
    }
}

/* Show priority 2 at 480px (30em x 16px) */

@media (min-width: 30em) {
    .tablesaw-columntoggle th.tablesaw-priority-2,
    .tablesaw-columntoggle td.tablesaw-priority-2 {
        display: table-cell;
    }
}

/* Show priority 3 at 640px (40em x 16px) */

@media (min-width: 40em) {
    .tablesaw-columntoggle th.tablesaw-priority-3,
    .tablesaw-columntoggle td.tablesaw-priority-3 {
        display: table-cell;
    }

    .tablesaw-columntoggle tbody td {
        line-height: 2;
    }
}

/* Show priority 4 at 800px (50em x 16px) */

@media (min-width: 50em) {
    .tablesaw-columntoggle th.tablesaw-priority-4,
    .tablesaw-columntoggle td.tablesaw-priority-4 {
        display: table-cell;
    }
}

/* Show priority 5 at 960px (60em x 16px) */

@media (min-width: 60em) {
    .tablesaw-columntoggle th.tablesaw-priority-5,
    .tablesaw-columntoggle td.tablesaw-priority-5 {
        display: table-cell;
    }
}

/* Show priority 6 at 1,120px (70em x 16px) */

@media (min-width: 70em) {
    .tablesaw-columntoggle th.tablesaw-priority-6,
    .tablesaw-columntoggle td.tablesaw-priority-6 {
        display: table-cell;
    }
}



/* ==========================================================================
  Responsive
   ========================================================================== */

/*@media only screen and (max-width: 300px) {

    a.tablesaw-nav-btn.btn.btn-micro.left {
        left:-195px;
    }

    .tablesaw-advance.minimap {
        margin-right: -1.6em;
    }

    a.tablesaw-nav-btn.btn.btn-micro.right{
        right:-1px;
    }
}*/

@media only screen and (min-width: 768px) {

    .main .main-content {}

    .main .sidebar {}

    .main .sidebar .arrow {
        cursor: pointer;
    }

    .main.menu-open .main-content {
        padding-left: 300px;
    }

    .main.menu-closed .main-content {
        padding-left: 40px;
    }

    .main.menu-open .sidebar {
        width: 300px;
        margin-left: 0;
    }

    .main.menu-closed .sidebar {
        margin-left: -260px;
        overflow: hidden;
    }

    .main.menu-open .sidebar .arrow {
        transform: rotate(0deg);
    }

    .main.menu-closed .sidebar .arrow {
        transform: rotate(180deg);
    }

    footer .footer-group {
        width: 100%;
        text-align: left;
    }

    footer .footer-group .footer-logo {
        float: left !important;
    }

    footer .footer-group p {
        float: right !important;
        width: 300px;
        text-align: right;
        padding-top: 115px;
    }
}

@media only screen and (min-width: 992px) {
    .main.menu-open .main-content {
        padding-left: 360px;
    }

    .main.menu-open .sidebar {
        width: 360px;
        margin-left: 0;
    }

    .main.menu-closed .sidebar {
        margin-left: -320px;
    }

    footer .footer-group p {
        float: right !important;
        width: unset;
        text-align: right;
        padding-top: 125px;
    }
}

@media (min-width: 1400px) {
    /*.container {
        width: 1200px;
    }*/
}


@media only screen and (max-width: 1600px) {
    .main-content {
        padding-left: 0;
    }
}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 992px) {
    .row {
        margin: 0;
    }

    .row > div {
        padding: 0;
    }

    .sidebar {
        width: 300px;
    }

    .menu-group {
        padding-left: 60px;
    }

    .menu-title {
        padding-left: 60px;
    }

    .sublist-items {}

    table {
        font-size: 14px;
    }

    .claim-table1-mobile {
        margin-bottom: 0;
    }

    .claim-table1 p {
        font-size: 14px;
    }

    .claim-table1-mobile p {
        padding-right: 15px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 767px) {
    .row {
        margin: 0;
    }

    .row > div {
        padding: 0;
    }

    header .logo {
        padding-right: 30px;
        padding-left: 15px;
    }

    header .logo img {
        margin-left: 0px !important;
        width: 60px;
    }

    header .language-group > a {
        font-size: 14px;
    }

    header .language-group .languages li a {
        font-size: 10px;
    }

    header .language-group {
        padding-top: 20px;
    }

    header .language-group .languages li a:after {
        padding: 0 2px;
    }

    .sidebar {
        position: relative;
        /* 20190618 - aroark - Adding !important parameter to ensure the menu width is always 100% when the screen width is below the set max */
        width: 100% !important;
        padding-bottom: 0;
        overflow: hidden;
    }

    .sidebar .arrow {
        display: none !important;
    }

    .sidebar .menu-group {}

    .main.menu-open .sidebar .menu-group {
        padding-bottom: 20px;
        /* 20190618 - aroark - Removing max-height attribute so the entirety of long menus can be seen when the screen width is below the set max */
        /*max-height: 700px;*/
    }

    .main.menu-closed .sidebar .menu-group {
        padding-bottom: 0;
        max-height: 0;
    }

    .menu-group {
        padding-bottom: 20px;
        padding-left: 15px;
    }

    .menu-title {
        margin-top: 15px;
        margin-bottom: 20px;
        padding-left: 35px;
        font-size: 18px;
        background-position: 10px !important;
        background-size: 14px 14px;
    }
    
    /*
    .signout {
        width: 110px;
        line-height: 22px;
        border-radius: 15px;
        margin-left: 0;
    }
    */
    
    .line-small {
        margin: 15px 0;
    }

    .main-content {
        width: 100%;
        margin-left: 0;
        margin-top: 25px;
    }

    .main-content p {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .heading-title {
        font-size: 16px;
        color: #003B71;
    }

    .current-trust {
        font-size: 16px;
    }

    select option {
        font-size: 16px;
    }

    select {
        font-size: 16px;
    }

    .login-form {
        width: 100%;
        padding: 0 15px;
    }

    .group-page-title .btn-form {
        float: none;
        margin: 30px 0;
    }

    .tablesaw-advance-dots li i {
        width: 8px;
        height: 8px;
        background: #dfdfe0;
    }

    .group-page-title .text-center {
        text-align: left;
    }
    /*
    footer{ position: relative; height: 100%; float:left!important; }
    footer .footer-group{padding-left: 0;  width: 100%; float:none;}
    footer .footer-group .footer-logo{width: 40%; padding-left: 0;}
    footer .footer-group >p {margin-left: 0; padding-left: 40px;  padding-top: 50px; width: 60%;}
    */
    .error-placement h3,
    .error-placement p {
        padding: 15px;
    }

    /*---Claim details---*/
    table {
        font-size: 14px;
    }

    .claim-table1-mobile {
        margin-bottom: 0;
    }

    .claim-table1 p {
        font-size: 14px;
        padding-right: 15px;
    }

    .claim-table1-mobile p {
        padding-right: 15px;
        font-size: 14px;
    }
}

.menu li a:active {
    color: white;
}

.btnSubmitFromPending {
    background-color: #710000;
    color: #FFF;
}

.btnSubmitFromPending:hover {
    background-color: #ccc;
}

.alert > .error-message {
    margin-bottom: 20px;
}

.alert > .error-message:last-child {
    margin-bottom: 0px;
}

.collapse.in > li {
    padding: 4px 5px 0 35px;    
}

.dropdown-toggle:focus {
    outline: none !important;
}

/* 20190719 - aroark - Adding custom Bootstrap classes to give Bootstrap 3 some Bootstrap 4-like functionalities */

.visible-block {
    display: block !important;
}

.visible-inline {
    display: inline !important;
}

.visible-inline-block {
    display: inline-block !important;
}

.visible-table-cell {
    display: table-cell !important;
}

@media (max-width: 767px) {
    .visible-xs-table-cell {
        display: table-cell !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-table-cell {
        display: table-cell !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-table-cell {
        display: table-cell !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-table-cell {
        display: table-cell !important;
    }
}

/* 20190719 - aroark - Making tables with the zeusenroll-table class mobile-friendly */

@media (max-width: 1199px) {
    .zeusenroll-table > tbody > tr:not(:first-child) {
        border-top: 2px solid #5f6062;
    }
    
    .zeusenroll-table > tbody > tr:not(:first-child) > td:first-child {
        border-top: none;
    }
}

.zeusenroll-page-header {
    padding: 4px 15px;
    font-family: inherit;
    font-weight: normal; 
    font-size: 20px;
    background-color: #5f6062;
    color: white;
}

.zeusenroll-form-row {
    margin-bottom: 10px;
}

/* 20190826 - aroark - Fixing date textbox heights for Internet Explorer */
input[type="text"][placeholder="MM/DD/YYYY"] {
    min-height: 34px;
    height: 34px;
}

.shadow {
	-webkit-box-shadow: 0px 6px 14px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 6px 14px 2px rgba(0,0,0,0.1);
	box-shadow: 0px 6px 14px 2px rgba(0,0,0,0.1);
}

.card-wrapper .card .card-top {
    padding-top:8px;
    padding-bottom: 8px;
}

.card-top {
	border-bottom: 2px solid #003B71;
    position: relative;
}

.card-top * {
	color: #003B71;
    vertical-align: middle;
    display: inline-block;
}

.card-top>.zenicon,
.card-top>.glyphicon {
    font-size: 35px;
    background-color: #003B71;
    color: white;
    padding: 5px;
    border-radius: 25%;
    margin: 10px 0 10px 10px;
}

.card-title {
	padding: 10px;
    width:79%;
}

.card-title h2,
.card-title h3 {
    font-size: 30px !important;
	font-weight: bold;
    text-transform: uppercase;
}

.card-bottom * h3 {
    text-transform: uppercase;
    font-weight: bold;
}

.card-bottom {
	display: flex;
    flex-wrap: wrap;
    padding: 8px;
    overflow-x: auto;
}

.card-bottom>* {
    width: 100%;
}

.card-link {
    position: absolute;
    bottom: 0;
    right: 8px;
    display: flex;
    align-items: center;
}

.dragscroll {
    cursor: grab;
}
.dragscroll:active {
    cursor:grabbing;
}
.dragscroll { 
    overflow-y: auto; 
    height: 100px; 
}
.dragscroll table {
    border-collapse: separate;
}
.dragscroll thead th { 
    position: sticky; 
    top: 0;
    background:white;
}

.disclaimer {
    padding: 8px;
}

.table-borderless, 
.table-borderless *:not(input):not(hr) {
	border: none !important;
}

.ui-sortable {
    cursor:grab;
}

.ui-sortable:active {
    cursor: grabbing;
}

.table-mostly-borderless, 
.table-mostly-borderless>*:not(hr),
.table-mostly-borderless>tbody>tr>td,
.table-mostly-borderless>tr>td {
	border: none !important;
}

.table-mostly-borderless thead tr th{
    border-bottom: 1px solid black !important;
}

.card {
    margin-right: 4%;
    margin-left: 4%;
}

/* mimics .form-control minus the width:100% since I couldn't find a good way to have bootstraps col-x to have higher precidence */
.form-field {
	display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-field::placeholder{
	opacity: 70%;
}

.form-field[type="radio"],
.form-field[type="checkbox"] {
    border: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0 5px 0 5px;
}

.form-field[type="checkbox"] {
    height: 20px;
}

.page-header-title .glyphicon,
.page-header-title .zenicon {
    color: white;
    background-color: #003B71;
    border-radius: 50%;
    font-size: .75em;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right: 2%;
    margin-left: 2%;
    padding: 1.3%;
}

.page-header-title .zenicon {
    font-size: 1em;
}

.page-header-title {
    font-weight: bold;
    text-shadow: 	-.5px 0 #003B71, 0 .5px #003B71, .5px 0 #003B71, 0 -.5px #003B71, 
                    -.5px -.5px #003B71, .5px .5px #003B71, -.5px .5px #003B71, .5px -.5px #003B71;
    /* letter-spacing: 4px; */
    color: #003B71;
    display: flex;
    vertical-align: middle;
    align-items: center;
    text-transform: uppercase;
    font-size: 26pt;
    margin-top: 0;
    margin-bottom: 0;
}

.page-header-container {
    border: none;
    padding-bottom: 1%;
    padding-top: 1%;
    margin-bottom: 1%;
    background-color: #F3F8FE;
}

.main-content .page-header-container {
    padding-left:5px;
}

.container .main-content {
    margin-top: 50px;
}

.formContainer {
  display: grid;
  grid-template-columns: 1fr;gap:10px;
}

.formContainer div {
  padding:15px;
}

.formContainer h3 {
  font-size:20px !important;
}

.appContainer {
  display: grid;
  grid-template-columns: 1fr;
  margin-top:-25px;
  padding:15px 15px 15px 0px !important;
}

.appBlock {
  display: grid;
  grid-template-columns: .5fr .5fr 4.5fr;
  width:100%;
  vertical-align: middle;
  padding: 0px !important;
}

.dashBlock {
  text-align: right;
  max-width: 100px !important;
  width:100px !important;
  display : flex;
  align-items : center;
  max-height: 1200px;
  padding: 0px !important;
}

.dashStart {
  width:100px;
  height:100px;
  display : flex;
  align-items : center;
  background-image: url('../images/start.png');
  background-position: center;
}

.dashInside {
  width:100px;
  height:auto;
  background-image: url('../images/inside.png');
  background-position: center;
  overflow: hidden;
  display : flex;
  align-items : center;
}

.dashEnd {
  width:100px;
  height:100px;
  background-image: url('../images/end.png');
  background-position: center;
  display : flex;
  align-items : center;
  
}

.dashBlock img {
  width:120px !important;
  height:100px !important;
}

.appHeader {
  font-weight: 600;
  font-size: 16px;
  display: block !important;
  text-transform: uppercase;
}

.appBody {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  margin-top:4px;
  display: block !important;
  padding: 0px !important;
}

.appIcon {
  text-align: center;
  max-width:100px !important;
  display : flex;
  vertical-align: middle;
  justify-content: center;
  position: relative;
  align-items : center;
  padding: 0px !important;
}

.appBlockText {
  padding: 0px !important;
  display : flex;
  align-items : center;
}

.appBlockText div {
  width:fit-content;
}

.appIcon img {
  vertical-align: middle;
  text-align: center;
  width:50px;
  position: absolute;
  margin:auto 0px auto 0px;
}

.otherAppTitle {
  font-weight: bold;
  font-size: 16px;
  color:#383838;
  display: block;
  text-decoration: underline;
}

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

.otherAppDate {
  color:#ccc;
  font-size: 14px;
  line-height: 20px;
  display: block;
}

@media(min-width:1200px) {
    .page-header-title .glyphicon {
        padding: 1%;
        font-size: 1.1em;
    }
}


.tagify {
    height: unset !important;
}

/************************************
	BEGIN ZENICON FONT STYLES
************************************/

@font-face {
  font-family: 'zenicons';
  src:  url('../fonts/zenicons.eot?chzogb');
  src:  url('../fonts/zenicons.eot?chzogb#iefix') format('embedded-opentype'),
    url('../fonts/zenicons.ttf?chzogb') format('truetype'),
    url('../fonts/zenicons.woff?chzogb') format('woff'),
    url('../fonts/zenicons.svg?chzogb#zenicons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="zenicon-"], [class*=" zenicon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'zenicons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.zenicon-Claims:before {
  content: "\e90c";
}
.zenicon-Current_Enrollment_Choice:before {
  content: "\e90f";
}
.zenicon-1095:before {
  content: "\e900";
}
.zenicon-1099:before {
  content: "\e901";
}
.zenicon-ABS:before {
  content: "\e902";
}
.zenicon-Add_Edit_Username:before {
  content: "\e903";
}
.zenicon-Address_Change:before {
  content: "\e904";
}
.zenicon-Annuity:before {
  content: "\e905";
}
.zenicon-Annuity_Fund:before {
  content: "\e906";
}
.zenicon-Back_btn:before {
  content: "\e907";
}
.zenicon-Balance:before {
  content: "\e908";
}
.zenicon-Blank-Transparent:before {
  content: "\e909";
}
.zenicon-Calendar:before {
  content: "\e90a";
}
.zenicon-Change_password:before {
  content: "\e90b";
}
.zenicon-Contact_Us:before {
  content: "\e90d";
}
.zenicon-Current-Trust:before {
  content: "\e90e";
}
.zenicon-Customer_Service:before {
  content: "\e919";
}
.zenicon-Dashboard:before {
  content: "\e91a";
}
.zenicon-Demographics:before {
  content: "\e91b";
}
.zenicon-Dependent:before {
  content: "\e91c";
}
.zenicon-Directions:before {
  content: "\e91d";
}
.zenicon-Disability:before {
  content: "\e91e";
}
.zenicon-Document_Upload:before {
  content: "\e91f";
}
.zenicon-Documents:before {
  content: "\e920";
}
.zenicon-Eligibilty:before {
  content: "\e921";
}
.zenicon-Family_eligibility:before {
  content: "\e922";
}
.zenicon-Forms:before {
  content: "\e923";
}
.zenicon-General_information_participant:before {
  content: "\e925";
}
.zenicon-HRA:before {
  content: "\e928";
}
.zenicon-HW_eligibility:before {
  content: "\e929";
}
.zenicon-Home:before {
  content: "\e926";
}
.zenicon-Hours_bank:before {
  content: "\e927";
}
.zenicon-ID_card:before {
  content: "\e92a";
}
.zenicon-Links:before {
  content: "\e92b";
}
.zenicon-Login:before {
  content: "\e92c";
}
.zenicon-Mail_Request:before {
  content: "\e92d";
}
.zenicon-Participant_Info:before {
  content: "\e92e";
}
.zenicon-Password:before {
  content: "\e92f";
}
.zenicon-Password_Hint:before {
  content: "\e930";
}
.zenicon-Pension:before {
  content: "\e931";
}
.zenicon-Pension_calculator:before {
  content: "\e932";
}
.zenicon-QBS:before {
  content: "\e933";
}
.zenicon-Register:before {
  content: "\e934";
}
.zenicon-Register_online:before {
  content: "\e935";
}
.zenicon-SSO:before {
  content: "\e936";
}
.zenicon-Username:before {
  content: "\e937";
}
.zenicon-Vacation:before {
  content: "\e938";
}
.zenicon-Work_hours:before {
  content: "\e939";
}
.zenicon-general_info:before {
  content: "\e924";
}


/************************************
	END ZENICON FONT STYLES
************************************/