.wrap-2 {
    max-width: 640px;
}

.smart-forms .form-header {
    padding: 15px 15px;
}

.smart-forms .form-header h4 {
    text-align: center;
    font-size: 22px;
    font-weight:bold;
    /*text-transform:uppercase;*/

}

.smart-forms .input-hint {
    padding: 3px;
    padding-left:8px;
}

.switch span {
    vertical-align: middle;
    width: 200px;
    display: inline-block;
}

.ui-datepicker:before {
    top: 0px;
}

#monthListContainer {
    float: left;
}

#oldPayContainer {
    float: left;
}

#newPayContainer {
    /*float: left;*/
}

#arrearsContainer{
    float: left;
}

#oldPayTable, #newPayTable, #monthListTable, #inputTables {
    border-collapse: collapse;

}#oldPayTable, #newPayTable, #monthListTable, #diffTable {
     margin-top: 10px;
     /*border-top:2px solid #8b9fc2;*/
     /*border-bottom:2px solid #8b9fc2;*/
     /*margin-bottom: 20px;*/
 }

#oldPayTable td, #newPayTable td, #diffTable td, #monthListTable td {
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;

    padding:6px 3px 6px 3px;
    text-align: right;
    font-size: 12px;
    font-family: verdana, Arial, sans-serif;
}

#worksheetContainer {
    margin-bottom:30px;
}

#singletable{
    margin-top: 10px;
    margin:auto;
    border-collapse: collapse;
    width:90%;

}

#singletable th{
    font-size:14px;
    font-family: verdana, Arial, sans-serif;
    padding:6px 3px 6px 3px;
    border: 1px solid #ffffff;
    text-align:center;
}

#singletable td{
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    padding:6px 3px 6px 3px;
    text-align: right;
    font-size: 10px;
    font-family: verdana, Arial, sans-serif;
}

.footable>thead>tr>th, .footable>thead>tr>td {
    background-color: #1ABC9C;
    border: 1px solid #1ABC9C;
}
.footable {
    border: 2px solid #1ABC9C;
}
.footable.breakpoint>tbody>tr>td>span.footable-toggle {
    color: #4D5D6D;
}
.woodbg {
    background: #E6CCA6 !important;
}

th.paydrawn-header {
    background: #83AEC1;
}
th.paydue-header {
    background: #69C3B2;
}
tr.columnheadings{
    font-weight:bold;
}

#oldPayTable {
    background: #c4c4c4;
    margin-left: 1px;
    text-align:center;
}

#newPayTable {
    background: #dbdbdb;
    margin-left: 1px;
    text-align:center;
}

#newPayTable .headerRow, #oldPayTable .headerRow{
    font-weight: bold;
    text-align: center;
}

#diffTable {
    border-collapse: collapse;
    font-weight: bold;
    background: #C6E746;
    margin-left: 1px;
}

#monthListTable{
    font-weight: bold;
    background: #ff00ff;
}

#monthListTable td{
    padding:6px 4px 6px 8px;
    border-top: 1px solid #ffffff;
    text-align: right;
}

.totalColumn {
    font-weight: bold;
}

.headerRow {
    font-weight: bold;
}

.footerRow{
    font-weight: bold;
    border-top:2px solid #8b9fc2;
}

#displayArrearsText, #displayArrearsAmt{
    font-size: 20px;
    font-weight: bold;
    color: #0d3349;
    font-family: arial, verdana;
}
#matrixTable{
   /* display:none;*/
}

#summaryTable {
    border-collapse: collapse;
    margin:0 auto;
}

.rowDeduction{
    font-size:12px;
}

div#arrearsSummary {
    background: #1ABC9C;
    color: #ffffff;
    font-family: arial;
    max-width:650px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
    display:none;
}

table#summaryTable td {
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    padding:5px 2px 5px 2px;
}

#outputArrearsWithHRA, #outputArrearsWithoutHRA, #output257Pay, #outputMatrixPay{
    font-weight:bold;
    margin-left:10px;
}

#matrixTable {
    font-size: 10px;
    width: 800px;
    margin: auto;
}
#matrixTable1 {
    font-size: 10px;
    width: 800px;
    margin: auto;
}
table#matrixTable td {
    padding: 2px;
    text-align: center;
}
table#matrixTable1 td {
    padding: 2px;
    text-align: center;
}
#matrixTableContainer{
    margin-bottom:20px;
    display:none;
}
tr#MTGradePayRow {
    background-color: rgba(83, 169, 210, 0.42);
}
tr#MTEntryPayRow {
    background-color: rgba(237, 156, 40, 0.33);
}
tr#MTLevelRow {
    background-color: rgba(173, 234, 236, 0.68);
}
tr#MTIndexRow {
    background-color: rgba(179, 76, 193, 0.33);
}
div#backtotop {
    text-align: right;
    margin-right: 30px;
}
#personalDetails {
    display:none;
}

@media only screen and (max-width: 1025px) {
    #personalDetails {
        display:none;
    }
    #arrearsSummary {
        /*width:90%;*/
    }
    #matrixTableContainer{
        /*visibility: hidden;*/
        display:none !important;
    }

    .smart-wrap {
        padding: 0 0px;
    }

    #singletable {
        width:100%;
    }

}