﻿        body {
        }

        #menu, #menuContainer
        {
            font-family: Arial, Helvetica, sans-serif;
            font: normal;
            background-color: #F2F7FC;
        }

        #MainOfMainContent {
            margin-left:20px;
            margin-right:20px;
        }

        .WebHRButton, [type~="button"] {
            font-family: Arial, Helvetica, sans-serif;
            width: 100pt;
            color: #000000;
            text-align: center;
            font-size: 10pt;
            text-transform: capitalize;
            background-color: #D6E3BC;
            border-style: solid;
            border-width: 1px;
            border-color: #cccccc;
        }

        .WebHRButton:hover, #btnSave:hover, .tabCells td:hover {
            background: #FF9900;/*#74A599;*/
        }

        .WebHRButton:active, #btnSave:active {
            background: #F6A953;
        }

        [type~="button"][disabled="disabled"], [type~="button"]:disabled {
            background-color: #D3D3D3; /*lightgray;*/
        }

        /*#btnSave 
        {
            background-color: #B9DCFF; /*#99CCFF;#C6D9F1;*/       
        /*}*/

        /*input, select{
            width: 100%;
        }*/

        /*.dateControl {      
            width: 90%;
        }*/  

        /*textarea 
        {
            width: 100%;
        }*/

        table
        {   
            table-layout: fixed;
            width: 100%;
            font-family: Arial;
            font-size: 9pt;
            border-collapse: collapse;  
            border-style: solid; 
            border-width: 1px;
            /*font-weight: bold;*/
            border: none;
        }

        table td, table th
        {
            min-width: 17px;
        }

        div table 
        {
            table-layout:auto;   
        }

        /*div input, div select, div textarea {
            width:auto;
            font-weight:normal;
        }*/

        table.WebList tr:nth-child(even) {
            background-color: #F2F7FC; /*#DDEBF7;*/
        }

        table.WebList td, table.WebList th
        {   
            border-style: solid; 
            border-width: 1px; 
            border-color: #E4E4E4;
            border-left-color: #305b75;
            padding-left:2px;
        }

        table.WebList td:last-child 
        {
            border-right-color: #305b75;
        }

        table.WebList tr:first-child td
        {
            border-bottom-color: #305b75;
        }

        table.WebList tr:last-child td
        {
            border-bottom-color: #305b75;
        }

        table.WebList tr:hover 
        {
            background-color: #D7DADB; /*#ffff00;*/
        }

        table.WebList th
        {
            background-color: #305b75;
            /*border:none;*/
            border-color: #305b75;
            color:white;
            font-weight:normal;
        }

        table.WebList img, table img 
        {
            cursor: pointer;
            width: 15px;
            height: 15px;
        }

        .pageRow {
            background-color: #305b75;
            color: white;
        }

        .pageRow a {
            color: white;
        }

        .pageRow select{
            color:black;
        }

        .pageRow.pageRow a:hover {
            color:white;
            text-decoration:none; 
            cursor:pointer;  
        }

        table.WebList td:last-child 
        {
            border-right-color: #305b75;
        }

        .pageRow.pageRow:hover {
            background-color:#305b75;
        }

        .selectedTab.selectedTab{
            background-color: #718c3f; /*a #F2F7FC;*/
            color: white;
        }

        table.tabCells td 
        {
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: white;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: normal;
            background-color: #305b75;
            color: white;
            text-align: center;
            cursor: pointer;
            height: 40px;
        }

        table.tabCells 
        {
            table-layout: fixed;
            border: none;
        }

        table.tabCells td:first-child 
        {
            border-radius: 10px 0 0 10px;
        }

        table.tabCells td:last-child 
        {
            border-radius:  0 10px 10px 0;
        }
    
        .formDivider td
        {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: normal;
            background-color: #305b75;
            color: white;
            height: 45px;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: white;
            padding-left: 2em;
            padding-right: 2em;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;   
            vertical-align:middle;     
        }

        .expanders 
        {
            cursor: pointer;
            width: 35px;
            height: 35px;
            float: right;
            vertical-align: bottom;
        }

        /*.formDivider td 
        {
            background: #F8F8F8; #F7F7F7;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: #000000;
        }*/

        .subTitles 
        {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 14pt;
           color: white; /*brown;*/
           background-color: #305b75; /*#E9E9E9;*/
           font-weight: normal;
           height: 40px;
           padding-left: 2em;
           /*border-top-left-radius: 10px;
           border-top-right-radius: 10px;*/
        }

        .setupForm 
        {
            border-style: none;
            border-color: inherit;
            border-width: medium;
            font-weight: normal;
            /*height: 311px;*/
        }

        .setupForm table 
        {
            border-color: #888888;
            margin: auto;
        }

        .setupForm#staffBioData
        {
            table-layout: fixed;
            border: none;
            width: 100%;
            margin: auto;
        }

        .StaffData tr td#lblFormHeading, .ModalMainTitles
        {
           font-size: 14pt;
           background-color: white;
           height: 100px;
           font-family: Arial, Helvetica, sans-serif;
           font-weight: bold;
           color: black;
           text-align: left;
           padding-left: 0.5em;
        }
    
        .StaffData table
        {
            table-layout: fixed;
        }

        .notify {
            color:red;       
        }

        .formSection {
            display:none;
        }

        .formSection table td:first-child 
        {
            padding-left: 2em;
        }

        .formSection table td:nth-child(3n+1)
        {        
            /*background-color: aqua;*/
            padding-left: 2em;
        }

        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto; /* 15% from the top and centered */
            padding: 5px;
            border: 1px solid #888;
            white-space: nowrap;
            overflow: auto; /* Enable scroll if needed */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /*.modal-content table {
            table-layout: fixed;
        }*/

        #plus, #filter, #setup, .plus, #lblTreatmentData {
            font-size: 18px;
            font-weight: 900;
            color: white;
            vertical-align: middle;
        }

        #lblAddNewRecordButton, .lblAddNewRecordButton {
            text-align: right;
            font-size: small;
            vertical-align: central;
            padding-right: 0.5em;
            cursor: pointer;
        }

        #plus:hover, #lblCloseModalForm:hover, .cursorFocus:hover, /*span:hover,*/ #lblCloseModalTmtForm:hover, #filter:hover, #setup:hover, .lblCloseModalForm:hover, .plus:hover {
            cursor: pointer;
            background: #FFFFEC; /*#F2F7FC;*/ /*lightblue; */ /*yellow;*/ /*#FF9900;*/ /*#74A599;*/
            color: black;
        }

        #lblCloseModalForm, #lblCloseModalTmtForm, .lblCloseModalForm {
            text-align: right;
            font-weight: 900;
            color: white;
            font-family: Calibri;
            font-size: 20px;
            padding-right: 0.5em;
            cursor: pointer;
    }

        #lblModalFormHeading {
           text-align: left;
           font-size: 16px;
           font-weight: bold;
        }

        #txtSearchBox {
            width:500px;
        }

        #cntSearchGuidelines {
            width: 100%; 
            text-align:left; 
            font-style:italic; 
            font-size:small; 
            color:dodgerblue;
        }

        table.WebList 
        {
            table-layout: auto;
        }

        #payslip table {
            border-collapse: collapse;
            border-style: solid; 
            border-width: 1px;
        }    
    
        table.taxTable td {
             border: 1px; 
             border-style: dashed;
             border-color: grey;
             border-left-style: none;
             color: #228b22;        
        }

        #payslip table.taxTable {
            border-left: none;
        }


        table.taxTable tr:nth-child(even) 
        {
            background-color: #F2F7FC;
        }

        table.payslips td {
            padding-left: 0.5em;
        }

        table.internalTable td, table.internalTable th {
            border-style: solid;
            border-width: 0px;
        }

        .pageRowTop.pageRow td {
            border-left: none;
            border-right: none;
            padding-top: 0px;
        }

        .pageRowTop {
            border-bottom: solid;
            border-bottom-color: #ffffff;
        }

        .pageRow.pageRow td {
            border-left: none;
            border-right: none;       
        }
