html {
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
}
body {
    font-family: 'UniversLTStd', sans-serif;
    color: #555555;
    overflow-x: hidden;
    margin-bottom: 40px;
    min-height: 100vh;
}
table{
    color: #555555 !important; 
}
.container {
    max-width: 1024px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
dl, ol, ul {
    margin: 0;
}
.fm-bold {
    font-family: 'UniversLTStd-Bold', sans-serif;
}
/*background color css*/
.bg-white {
    background-color: white !important;
}
.bg-black {
    background-color: #555555 !important;
}
.bg-grey {
    background-color: #f9f9f9 !important;
}
.bg {
    background-color: #f1f1f1 !important;
    min-height: 474px;
}
.text-red {
    color: #b4003d !important;
}
.table-bg {
    background-color: #67a2bb;
}
.text-dec-underline {
    text-decoration: underline !important;
}
.text-dec-none {
    text-decoration: none !important;
}
.no-cursor{
    cursor: default !important;
}
.listType {
    display: list-item;
    margin-left: 30px;
}

.cookiePolicy th, .cookiePolicy td {
    border: 1px solid #dee2e6 !important;
}
/*font weight css*/
.fw-600 {
    font-weight: 600;
}
.fw-800 {
    font-weight: 800;
}
.fw-bold {
    font-weight: bold;
}
/*font-size css*/
.font10 {
    font-size: 10px !important;
}
.font11 {
    font-size: 11px !important;
}
.font12 {
    font-size: 12px !important;
}
.font14 {
    font-size: 14px !important;
}
.font16 {
    font-size: 16px !important;
}
.font18 {
    font-size: 18px !important;
}
.font24 {
    font-size: 24px !important;
}
.font30 {
    font-size: 30px !important;
}
.font27 {
    font-size: 27px !important;
    line-height:30px !important;
}
.font36 {
    font-size: 36px !important;
}
/*custom class stop set margin from top*/
.mt-8 {
    margin-top: 8px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-12 {
    margin-top: 12px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-18 {
    margin-top: 18px !important;
}
.mt-20{
    margin-top: 20px !important;
}
.mt-25 {
    margin-top: 25px !important;
}
.mt-28 {
    margin-top: 28px !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-22 {
    margin-bottom: 22px !important;
}
.mb-25 {
    margin-bottom: 25px !important;
}
.mb-28 {
    margin-bottom: 28px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.linehgt24{
    line-height: 24px !important;
}
.linehgt {
    line-height: 1.3;
}
.lh-2{
    line-height: 2 !important;
}
.lh-3{
    line-height: 3 !important;
}
.disp-none {
    display: none;
}
/*css form memorable word custom field*/
.col-cstm{
    padding-left: 10px !important;
    padding-right:10px !important;
}
.pl-cs {
    padding-left:0.26rem;
}
.pr-cs {
    padding-right: 0.29rem;
}
/*end css*/

/*css class to change dropdown icon position*/
.flip {
    transform: rotateZ(180deg);
}
/*header navbar css*/
.header-nav .nav-link {
    display: block;
    padding: 0.5rem 1rem;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/down-arrow.png);
    background-repeat: no-repeat;
    background-position: 98% center;
    outline: 0;

}
#mySelect {
    border: 1px solid #cccccc;
    height: 35px;
    width: 160px;
    padding: 0px 45px 0px 15px;
    font-size: 14px;
    color: #555555;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#mySelect:focus {
    background-color: #fff;
    border-color: #880d54;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(136, 13, 84, 0.38);
}
.selectdiv {
    position: relative;
}
.selectdiv:after {
    content: '';
    background-image: url(../images/purple-down-arrow.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    top: 0px;
    left: 236px;
    font-weight: normal;
    height: 35px;
    padding: 5px 25px 10px 10px;
    border-left: 1px solid #cccccc;
    position: absolute;
    pointer-events: none;
}
#mySelect:focus {
    outline: none !important;
}
select::-ms-expand {
    display: none;
}
/*css stop manage tooltip message*/
.jBox-content {
    padding: 8px 12px;
    overflow-x: hidden;
    background: #555555;
    font-size: 14px;
    overflow-y: auto;
    transition: opacity .2s;
}
.jBox-TooltipDark .jBox-pointer:after {
    background: #555555 !important;
}
.accordion_main {
    display: none;
}

.accordion_body p {
    background-color: #555555;
    padding: 10px;
    color: #FFF;
    font-size: 15px;
}

.accordion_head {
    margin-top: -45px;
    float: right;
    margin-right: -20px;
    cursor: pointer;
}
/*date picker css*/
.ui-datepicker-trigger {
    position: absolute;
    right: 25px;
    margin-top: -28px;
}
.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}
.ui-widget-header {
    border: 1px solid #dddddd;
    background: #e9e9e9;
    color: #333333;
    font-weight: bold;
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
}
.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}
.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 1px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}
.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 45%;
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0;
}
/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    left: .5em;
    top: .3em;
}
/*P60 preview css*/
.payslip-p60-inner-page-width {
    width: 70%;
    margin: 0;
}
.row.no-gutter {
    margin-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
}
.pl-c {
    padding-left: 2.5px !important;
}
.pr-c {
    padding-right: 2.5px !important;
}
.Hgt-35 {
    height: 35px !important;
}
.left-arrow {
    position: absolute;
    left: 5px;
    top: 8px;
    width: 24px;
}
.right-arrow {
    position: absolute;
    right: 5px;
    top: 8px;
    width: 24px;
}
.pensioner-box-1 {
    height: 160px;
}
.pensioner-box-2 {
    height: 105px;
}
.blkHdr {
    padding: 5px;
    width: 64.5%;
    background-color: black;
}
.border1 {
    border: 1px solid #ccc;
}
.border-box-1 {
    border: 1px solid #fff;
}
.pensioner-heading {
    border: 1px solid #880d54;
}
.lft-rgt-padd {
    padding-right: 5px;
    padding-left: 5px;
}
.rgt-padd {
    padding-right: 8px;
}
.lft-padd {
    padding-left: 5px;
}
.text-blk {
    padding: 15px 5px 15px 15px;
}
.bottom-left-box {
    border: 1px solid #ccc;
    min-height: 100px;
}
.bottom-rgt-box {
    border: 1px solid #ccc;
    min-height: 100px;
}
.tax-code-table td {
    background: white;
    padding: 7px 5px 7px 15px;
    text-align: left !important;
    font-size: 11px;
}
.pension-fund-text-blk {
    padding: 5px 25px 5px 25px;
    word-spacing: -1px;
}
.pensioner-table td {
    padding: 7px 5px 7px 15px;
    text-align: left !important;
    font-size: 11px;
    background: white;
}
.pensioner-table td:nth-child(1) {
    border-right: 1px solid white;
}
.tax-code-tb th {
    padding: 0px 5px 0px 15px;
    border: 1px solid #ccc;
    font-size: 12px;
    width: 50%;
    font-weight: normal;
}
.tax-code-tb td {
    padding: 10px 5px 10px 15px;
    border: 1px solid #ccc;
    text-align: left;
    font-size: 11px;
}
.tax-code-tb tr td:nth-child(1) {
    border-right-color: white;
}
.tax-code-tb tr td:nth-child(2) {
    text-align: left;
    border-left: 0;
}
.total-for-year-tb {
    margin-top: -8px;
    width: 100%;
}
.total-for-year-tb td {
    padding-right: 5px;
    padding-left: 10px;
    height: 34px;
    width: 50%;
    font-size: 12px;
    background: white;
}
.total-for-year-tb td:nth-child(1) {
    border-right: 2px solid #ccc;
}
.Previous-employment-tb {
    margin-top: -8px;
    border: 1px solid #ccc;
    width: 100%;
}
.Previous-employment-tb td {
    padding-right: 5px;
    padding-left: 10px;
    width: 50%;
    font-size: 11px;
}
.Previous-employment-tb td:nth-child(1) {
    border-right: 1px solid #ccc;
}
.pension-fund-tb {
    margin-top: -8px;
    border: 2px solid #880d54;
    width: 100%;
}
.pension-fund-tb td {
    padding-right: 5px;
    padding-left: 10px;
    width: 50%;
    font-size: 12px;
    background: white;
}
.pension-fund-tb td:nth-child(1) {
    border-right: 2px solid #880d54;
}
.pad11 {
    padding: 11px !important;
}
.cust-top-pad {
    padding-top: 10px;
    padding-bottom: 5px;
}

.cust-bott-pad {
    padding-top: 10px;
    padding-bottom: 15px;
}
.P60_background {
    background: #e8e9ea;
    padding: .5rem;
    padding-right: 1.5rem;
}
    
/*payslip preview css*/
.right-align-box {
    width: 50%;
    float: right;
}
.payslip-view {
    font-size: 11px;
    width: 100%;
}
.payment-section, .deduction-section, .total-to-date-section {
    padding: 10px;
    color: #ffffff;
    text-align: center;
    font-weight: normal;
    border: 1px solid #880d54;
}
.payment-table td, .deduction-table td, .total-to-date-table td {
    padding: 10px;
}
.total-pension-table td, .total-deduction-table td, .net-pension-table {
    padding: 10px;
}
.payment-table tr td:nth-child(2), .deduction-table tr td:nth-child(2), .net-pension-table tr td:nth-child(2), .total-to-date-table tr td:nth-child(2) {
    text-align: right;
}
.total-pension-table tr td:nth-child(2), .total-deduction-table tr td:nth-child(2), .net-pension-table tr td:nth-child(2) {
    /*padding-right: 5px;*/
    text-align: right;
}
.net-pension-td {
    padding-left: 10px;
    height: 40px;
    width: 135px;
}
.payment-border {
    border: 1px solid #ccc;
    border-top: 0px;
    height: 100%;
    background-position: 49%;
    background-image: url(/images/bgcell1.png);
}
.deduction-border {
    border: 1px solid #ccc;
    border-top: 0px;
    height: 100%;
    background-position: 49%;
    background-image: url(/images/bgcell1.png);
}
.total-date-border {
    border: 1px solid #ccc;
    border-top: 0px;
    height: 100%;
    background-position: 38%;
    background-image: url(/images/bgcell1.png);
}
.pb-cmnt-textarea {
    resize: none;
    padding: 10px;
    height: 70px;
    width: 100%;
    border-radius: 0;
    font-size: 11px;
    border: 1px solid #ccc;
}
.msg-heading {
    color: #880d54 !important;
}
.pb-cmnt-textarea p {
    color: #555555;
    margin-bottom: 0px;
}
.bottom-card-deck .card-body {
    padding: 15px !important;
    border: 1px solid #ccc;
    min-height: 0px !important;
}
.first-card-deck {
    margin-left: -1px !important;
    margin-right: -2px !important;
}
.first-card-deck .card {
    border-radius: 0;
    margin-left: 1px !important;
    margin-right: 1px !important;
    font-size: 11px;
}
.middle-card-deck {
    margin-left: -5px;
    margin-right: -5px;
}
.middle-card-deck .card-body {
    border: 1px solid #f1f1f1;
}
.middle-card-deck .card {
    margin-left: 5px !important;
    margin-right: 5px !important;
    font-size: 11px;
    border: 1px solid #f1f1f1;
}
.first-card-deck .card-header {
    border-radius: 0 !important;
    padding: 10px 0px 10px 10px !important;
    font-size: 11px !important;
    height: auto !important;
    font-family: 'UniversLTStd', sans-serif !important;
}
.first-card-deck .card-body {
    border-radius: 0 !important;
    padding: 15px 0px 10px 10px !important;
    min-height: 0px !important;
    font-size: 11px;
    border: 1px solid #ccc !important;
}
.inner-page-contanier .card {
    border-radius: 0 !important;
}
/*start progrees bar css*/
.circle {
    position: relative;
    text-align: center;
    line-height: 1.2;
    transform-origin: center left;
    margin-left: 25px;
    margin-right: 25px;
}
.circle canvas {
    vertical-align: top;
    width: 100% !important;
}
#Home-tile2 .circle p.amount {
    position: absolute;
    top: 34%;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
}
#Home-tile2 .circle p.secoundParagraph {
    position: absolute;
    top: 46%;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
}
#Home-tile2 .circle p.thirdParagraph {
    top: 55%;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
}
#Home-tile3 .circle p.amount {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
}

#Home-tile3 .circle p.secoundParagraph {
    position: absolute;
    top: 34%;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
}

#Home-tile3 .circle p.thirdParagraph {
    top: 42%;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
}
    /*end progress css*/
.home-head {
    font-weight: 600;
    font-size: 1.9rem;
}
.bg-img {
    background-image: url('/images/house-left-2x.png'), url('/images/house-and-bird-2x.png'), url('/images/plane-clouds-2x.png'), url('/images/cloud-right-2x.png'),url('/images/city-2x.png');
    background-position: 3% bottom, right bottom, -25% 30px, 99% 130px, bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 10%,14%,30%,12%,100%;
    min-height: 100vh;
}
.br-0 {
    border-radius: 0;
}
.custmPad {
    padding-right: 4rem;
}
.pl-custom{
    padding-left: 3rem !important;
}
.Edit-Icon-cls .btn:focus, .btn.focus {
    outline: 0;
    box-shadow: none;
}
.inner-page-width{
    width:75%;
    margin:0;
}
.char-lbl{
    white-space: nowrap;
}
/* Footer CSS ...................... */
footer {
    background: #555555;
    font-size: 14px;
    margin-bottom: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    min-height: 40px;
}
/*css form payslip page*/
.sub-head {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-52%);
    font-weight: normal;
}
.payslip-head {
    left: 57%;
}
.doc-head {
    left: 50%;
}

.tab-content > .active {
    display: flex !important;
}

.payslip-tab .nav-link, .document-tab .nav-link{
    padding: 0rem 0rem 0.25rem 0rem;
    color: #555555;
}
/*css stop remove border from nav tabs*/
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #880d54;
    font-weight: bold;
    background-color: #fff;
    border: none;
    border-bottom: 5px solid #880d54 !important;
    border-color: white;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: white;
}
/*custom form input*/
.form-control {
    font-size: 14px;
    color: #555555;
    background-color: #fff;
    border-radius: 0;
    border-color: #cccccc;
    padding: 0px !important;
    text-indent: 10px;
}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #880d54;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(136, 13, 84, 0.38);
}
.memorable-wrd .form-control{
    text-indent: 45%;
}
select.custom-dropdown {
    padding: 0px 8px !important;
    border-radius: 0;
    text-indent: 0px !important;
}
select.custom-dropdown:focus {
    color: #495057;
    background-color: #fff;
    border-color: #880d54;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(136, 13, 84, 0.38);
}
select.form-control:not([size]):not([multiple]) {
    padding: 4px 7px !important;
    border-radius: 0;
    text-indent: 0px !important;
}
.control-label, .label {
    font-family: 'UniversLTStd-Bold', sans-serif;
}
.position-rel {
    position: relative;
}
.submit-btn {
    height: 40px;
    padding: 0.75rem;
    line-height: 1;
    border: none;
    background-color: #b4003d;
}
.find-btn{
    min-height:35px;
    line-height:1.4;
    position:relative;
    top:-1px;
}
.cancel-btn{
    min-height: 40px;
}
.cancel-btn:focus, .cancel-btn.focus {
    outline: 0;
    box-shadow: none !important;
}
.cont-btn-w {
    width: 30% !important;
}
.error-summary {
    color: #721c24;
    background: #f8d7da;
    padding: 10px 3px;
    margin: 16px auto;
}
.alert{
    border-radius:0;
}
.alert-info {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}
/* Start Custom Modals Area ...................................... */
.modal-dialog-scrollable ::-webkit-scrollbar {
    width: 15px;
}

.modal-dialog-scrollable ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

.modal-dialog-scrollable .close {
    color: #323241;
}

.modal-dialog-scrollable .close:hover, .modal-dialog-scrollable .close:focus {
    color: #555555;
    text-decoration: none;
    opacity: 1;
}

.modal-dialog-scrollable .modal-content {
    background-color: #fff;
    color: #555555;
}

.modal-dialog-scrollable {
    display: -ms-flexbox;
    display: flex;
    max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}

.modal-dialog-scrollable .modal-footer, .modal-dialog-scrollable .modal-header {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-dialog-scrollable header {
    display: none;
}

.modal-dialog-scrollable footer {
    display: none;
}

.modal-dialog-scrollable .page-header {
    display: none;
}

.modal-dialog-scrollable .page-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.modal-dialog-scrollable .container {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

/* Information amend modal forms .. */
.modal-content {
    width: 100%;
    background-color: #555555;
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 1rem;
}

.modal-content .form-control {
    border: none;
}

.modal-content a:hover {
    text-decoration: none;
}

.modal-header {
    display: none;
    border: 0;
    margin: 0;
    padding-bottom: 12px;
}

.modal-title {
    font-size: 30px;
    font-weight: 600;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 16px;
}

.modal-header .close:hover, .modal-header .close:focus {
    color: #fff;
    text-decoration: none;
    opacity: 1;
}

.modal-confirm {
    color: #555555;
    max-width: 610px;
    box-shadow: 0 10px 6px -5px #323241;
}

.modal-confirm .modal-title {
    border-bottom: 0;
    padding-bottom: 0;
}
.modal-confirm .modal-content {
    background-color: #fff;
    color: #323241;
    border-top: 3px solid #880d54;
}
.close {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    opacity: 1;
}
.alert-dismissible .close {
    padding: 0.5rem 1.25rem !important;
}
button:focus {
    outline: 0 !important;
}
/* End Custom Modals Area ........................................................... */

/*inner pages css*/
.inner-page-contanier .card-header {
    border-radius: 0 !important;
    font-size: 24px;
    padding-left: 50px;
    height: 56px;
    line-height: 1.4;
}
.inner-page-contanier .card-body {
    border-radius: 0 !important;
    padding: 25px 50px 25px 50px;
    padding-bottom: 0px;
    min-height: 500px;
}
.inner-page-contanier .card {
    border-radius: 0 !important;
    border:0;
}
.before-login .card-body {
    border-radius: 0 !important;
    padding: 25px 50px 25px 50px;
    padding-bottom: 0px;
    min-height: 500px;
}
.before-login .card-header {
    border-radius: 0 !important;
    font-size: 24px;
    padding-left: 50px;
    height: 56px;
    line-height: 1.4;
    font-family: 'UniversLTStd-Bold', sans-serif;
}
.section-header{
    margin: auto;
    padding: 10px;
    font-size: 17px;
}
/*card css*/
.collapse-content .fa.fa-heart:hover {
    color: #f44336 !important;
}
.collapse-content .fa.fa-share-alt:hover {
    color: #0d47a1 !important;
}
.card-deck {
    margin-left: -5px;
    margin-right: -5px;
}
.card-deck .card {
    border-radius: 0;
    margin-left: 5px;
    margin-right: 5px;
    border: 0;
}
.home-content .card-header {
    background-color: transparent;
    border-radius: 0;
    border: none;
    padding-bottom: 0px;
}
.home-content .card-footer {
    border: none;
    background-color: transparent;
    padding-top: 0px;
}
.home-content .card-body {
    padding-top: 0px;
}
.table-bordered td, .table-bordered th {
    border: none;
    font-size: 14px;
    border-bottom: 1px solid lightgray
}
.payslip-table tr td:nth-child(2) {
    text-align: right;
    padding-right: 10px;
}
/*css for membership table*/
.membership-table td {
    padding: 0.50rem;
}

/*payslip table css*/
.payslip-table td, .payslip-table th {
    padding: 0.40rem 0.75rem 0.40rem 0.75rem;
}
.payslip-table th {
    font-family: 'UniversLTStd-Bold', sans-serif;
    font-weight:normal;
}
.payslip-table tr:nth-child(even) {
    background-color: #f0f0f0;
}
.payslip-table tr:nth-child(odd) {
    background-color: #f9f9f9;
}
.spouse-details-tab tr td {
    border-bottom: none;
    padding: 0 .50rem;
    border-right: 1px solid lightgray;
}
.spouse-prgrs-details-tab tr td {
    border-bottom: none;
    padding: 0 .35rem;
    border-right: 1px solid lightgray;
}
.your-limit-tab {
    border-bottom: none;
    width: 60%;
    display: inline-table;
}

.your-limit-tab tr td {
    padding: 0 .50rem;
}

.your-limit-tab tr:first-child td:nth-child(1) {
    border-bottom: none;
}

.details-sections {
    line-height: 20px;
}

.details-txt {
    min-height: 35px;
}

.below-prgrs-txt {
    min-height: 35px;
}

.Account-dropdown{
    top: 4px;
    width: 25px;
    position: relative;
    z-index: 10000;
}

.dropdown-menu li a {
    color: #880d54 !important;
    text-decoration: none;
}

.dropdown-menu li a:after {
    display: none;
}
/*dropdown menu*/
.dropdown-menu {
    left: -173px;
    top: -3px;
    width: 13rem;
    line-height: 2.2;
    padding: 15px 15px 5px 15px;
    border-radius: 0;
}

/*Before Login page css */
.login-form-container, .forgot-pwd-container, .reg-form-container {
    max-width: 512px;
    margin: 0 auto;
    padding: 16px 32px;
}
.Form-title {
    font-size: 1.57rem;
}
.field-loginform-username, .field-loginform-password {
    margin: 0 25px;
}
.icon-input{
    position: relative;
}
.usericon {
    display: inline-block;
    background: url(/images/username.svg) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 7px;
}
.pwdicon {
    display: inline-block;
    background: url(/images/password.svg) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: left;
}
/*end login css*/
.tabVW{
    display: none;
}
.desktopVW {
    display: block;
}
.navbar-toggler {
    background: white;
}
.bank-ChkBox-Text {
    position: relative;
    padding-left: 5px;
}
/*end css*/
/*media query css for tablet and mobile width*/
/*Footer css to align footer in center*/
@media only screen and (max-width: 991px) {
    .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    .navbar {
        padding: 0.55rem 0.55rem 0.75rem 0.55rem !important;
    }
    .Account-dropdown {
        top: -43px;
        right: 15px;
        width: auto;
        position: absolute;
        z-index: 10000;
    }
    .dropdown-menu {
        left: 0px;
        top: -3px;
        width: 100%;
        position: relative !important;
    }
    .header-nav .nav-link {
        display: block;
        padding: 1rem;
    }
    .header-nav .navbar-nav {
        padding: 10px 0px 20px 0px;
    }
    .mobile-nav.navbar-nav li.nav-item {
        border-bottom: 1px solid #cccccc;
    }
    .border-top-m{
        border-top: 2px solid #cccccc;
    }
    .navbar-brand {
        padding-left: 1rem;
    }
    .logout-btn {
        width: 100%;
        margin-top: 1rem;
    }
    .desktopVW {
        display: none;
    }
    .tabVW {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    body {
        margin-bottom: 263px;
    }
    footer {
        text-align: center;
    }
    .position {
        float: left !important;
        margin: 13px -13px !important;
    }
    .below-prgrs-txt {
        text-align: center;
    }
    .pl-custom {
        padding-left: 0 !important;
    }
    .inner-page-width {
        width: 100%;
    }
    .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    .accordion_main {
        display: block;
    }
    #jBox1, #jBox2, #jBox3, #jBox4, #jBox5, #jBox6, #jBox7, #jBox8, #jBox9, #jBox10 {
        display: none !important;
    }
    #register-form .fa-caret-up:before {
        position: absolute;
        left: 48%;
        top: 36px;
        color: #323241;
        font-size: 23px;
    }
    .forgot-pwd-container .fa-caret-up:before {
        position: absolute;
        left: 48%;
        top: 36px;
        color: #323241;
        font-size: 23px;
    }
    .login-form-container .fa-caret-up:before {
        position: absolute;
        left: 48%;
        top: 36px;
        color: #323241;
        font-size: 23px;
    }
    .sub-head {
        left: 50%;
    }
    .field-loginform-username, .field-loginform-password, .field-otp-password {
        margin-right: 0px !important;
    }
}
/* Strat Media Query ...................... */
@media (min-width:576px) {
    .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem);
    }
    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 3.5rem);
    }
    .modal-dialog {
        max-width: 570px;
        margin: 1.75rem auto;
    }
}

@media only screen and (max-width: 575px) {
    body {
        margin-bottom: 263px;
    }
    footer {
        text-align: center;
    }
    .Edit-Icon-cls {
        position: absolute;
        right: 5px;
    }
    .pl-custom {
        padding-left: 0 !important;
    }
    .inner-page-width {
        width: 100%;
    }
    .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    .sub-head {
        left: 50%;
    }
    .inner-page-contanier .card-header {
        height: auto;
    }
    .inner-page-contanier .card-header {
        padding-left: 32px;
    }
    .inner-page-contanier .card-body {
        padding: 25px 32px 25px 32px;
    }
    .cont-btn-w {
        width: 50% !important;
    }
}
/*css form only mobs*/
@media all and (min-width:0px) and (max-width: 320px) {
    .selectdiv:after {
        top: 25px;
        left: 120px;
    }
    .mb-fnt-size {
        font-size: 23px !important;
    }
    #Home-tile2 .circle p.amount {
        font-size: 24px;
    }
    #Home-tile2 .circle p.secoundParagraph {
        font-size: 12px;
    }
    #Home-tile2 .circle p.thirdParagraph {
        font-size: 12px;
    }
    #Home-tile3 .circle p.amount {
        font-size: 24px;
    }
    #Home-tile3 .circle p.secoundParagraph {
        font-size: 12px;
    }
    #Home-tile3 .circle p.thirdParagraph {
        font-size: 12px;
    }
    .Primary-brannd-clr {
        color: #880d54 !important;
    }
}
/*css for only ipad pro device (Portrait and Landscape )*/
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
    .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
}
/*css for only ipad pro 10.5 device (Portrait )*/
@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .card-deck {
        display: -ms-flexbox;
        display: flex !important;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    .card-deck .card {
        margin-bottom: 0px !important;
    }
    .circle canvas {
        height: unset !important;
    }
    #Home-tile2 .circle p.amount {
        font-size: 20px;
    }
    #Home-tile2 .circle p.secoundParagraph {
        font-size: 10px;
    }
    #Home-tile2 .circle p.thirdParagraph {
        font-size: 10px;
    }
    #Home-tile3 .circle p.amount {
        font-size: 20px;
    }
    #Home-tile3 .circle p.secoundParagraph {
        font-size: 10px;
    }
    #Home-tile3 .circle p.thirdParagraph {
        font-size: 10px;
    }
    .tb-fnt-size {
        font-size: 20px !important;
    }
    .details-txt {
        min-height: 56px;
    }
    .mb-fnt-size {
        font-size: 20px !important;
    }
}
/*iPad in portrait*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .mb-fnt-size {
        font-size: 18px !important;
    }
    .tb-fnt-size {
        font-size: 20px !important;
    }
    .details-txt {
        min-height: 56px;
    }
    .circle canvas {
        height: unset !important;
    }
    #Home-tile2 .circle p.amount {
        font-size: 18px;
    }
    #Home-tile2 .circle p.secoundParagraph {
        font-size: 9px;
    }
    #Home-tile2 .circle p.thirdParagraph {
        font-size: 9px;
    }
    #Home-tile3 .circle p.amount {
        font-size: 18px;
    }
    #Home-tile3 .circle p.secoundParagraph {
        font-size: 9px;
    }
    #Home-tile3 .circle p.thirdParagraph {
        font-size: 9px;
    }
    .payslip-table td, .payslip-table th {
        font-size: 11px;
    }
    .card-deck {
        display: -ms-flexbox;
        display: flex  !important;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    .card-deck .card {
        margin-bottom: 0px !important;
    }
}
.navbar-toggler > .close {
    display: inline;
}
.navbar-toggler.collapsed > .close, .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
    display: none;
}
.navbar-light .navbar-toggler-icon {
    background-image: none;
}
.navbar-light .navbar-toggler {
    color: #555555;
    border-color: white;
}
.menu-caption {
    font-size: 12px;
    font-weight: bold;
    position: relative;
    top: -5px;
}
.menu-icon{
    width: 35px;
    height:30px;
}
.close-caption {
    font-size: 12px;
    top: 2px;
    font-weight: bold;
    display: block;
    position: relative;
    color:#555555;
}
.close-icon {
    width: 35px;
    height: 30px;
}
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
     opacity: 1 !important;
}
/*css stop show cards vertically*/ 
@media only screen and (max-width: 991px) {
    .card-deck {
        display: -ms-flexbox;
        display: block;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap; 
    }
    .card-deck .card {  
        margin-bottom: 15px;     
    }
}