#wrap, .content-wrap {
    overflow-x: hidden;
    min-height: calc(100vh - 40px);
}

body {
    font-family: 'Open Sans', sans-serif;
}

hr {
    margin-bottom: 0;
    margin-top: 0
}

.wauto {
    width: auto
}
#salary_current,#salary_start{ display:none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#show_salary,#show_salary2{
    font-size:15px;
    text-decoration: underline;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.select-tick{ min-width: 80px;background-color:inherit ;width: 80px;}
.wselect{ min-width: 80px;background-color:inherit ;width: 100px !important;}
.select-tick + .ui-selectmenu-button.ui-button{min-width: 80px;background-color:inherit ;width: 100px !important; }
.select-tick option:hover{ background-color:inherit; cursor:pointer;}
.slip > input[type=file]{width: 100px; background-color:#F15A24; color:white;}
#lading-data{ display:none;}
.hd-sick{position: relative}
select.company_select_notice {
    min-height:125px ;
}
select.company_select_notice option{
    padding: 5px 2px;
}
.hd-sick > .tmp_form_message{
    bottom: 31px;
    top: auto;
    width: 121%;
}
.tabs ul li sup{
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px;
    background: red;
}
#task-list { position: relative}
.saperator-list > * {
    padding-right: 10px;
    border-right: 1px solid;
    padding-left: 10px;
}

.saperator-list > *:last-child {
    border-right: none;
}
.ab-error{ color: darkred; font-size: 12px; text-align: right}
#logo {
    margin-bottom: 1em
}

header {
    padding-top: 1em
}
.hide{ display:none;}

p {
    line-height: 18px;
}
.halday-hidden{display:none !important;  transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;}
.halfday{ }
.align-center {
    align-items: center;
}

.tabs {
    padding: 0 10px;
    background-color: #F6F6F6;
}

.tabs li {
    display: inline-grid;
    padding-top: 25px;
    margin-right: 10px;
}

.tabs li a {
    padding: 6px 14px;
    font-size: 12px;
    background-color: #808080;
    color: #fff;
}

.tabs li a:hover {
    background-color: #008CC6;
    color: #ffffff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.tabs li.is-active a {
    background-color: #008CC6;
    color: #ffffff
}

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

.table td, .table th {
    font-size: 14px;
}

.table thead {
    background-color: #E6E6E6;
}

.table tbody tr:hover {
    background-color: #d4d4d433
}
.lt-six{line-height: 18px !important;}
.table thead td, .table thead th {
    font-size: 12px;
    color: #000;
    padding: 6px 10px;
}
.notice{padding: 20px;

    background: #008cc6;
    color: white;
    margin-top: 12px;


}

.notice p {font-size: 18px; line-height: 25px;}

.notice-scroll{overflow-y: scroll;

    height: 505px;}

.table tbody td {
    color: #616161;
    font-size: 11px;
    padding: 2px 12px;
    border-bottom: 1px solid #CCCCCC;
    word-break: break-all;
}
.white >td{color: #fff !important;}
table tbody a {
    padding: 4px 2px;
    margin: 0px 2px;
    color: #fff !important;
}
table tbody a.fc-more{color:black !important;}
table tbody a:hover {
    opacity: 0.9
}

div.button.is-loading {
    padding: 30px !important;
    border-radius: 100px;
    display: table;
    margin: auto;
    margin-top: 2em;
}

.table .row > .tr {
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    padding: 8px 10px;
}

.table .thead {
    font-weight: 600
}

.table .tbody .tr {
    padding: 10px;
    min-height: 40px;
}

.table .tbody {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.thead > div {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    padding: 0 14px;
}

.table .row > .tr > div {
    padding: 0 10px;
    display: flex;
    align-items: center;
    color: #808080;
    font-weight: 400;
}

.absence-table {
    border-top: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.absence-table .thead {
    background-color: #F3F9F7;
    padding: 0 10px;
}

.absence-table .row > .tr > div span {
    padding-right: 2px;
    font-size: 12px;
}

.absence-table .row > .tr > div span + input {
    width: 90%
}

#absence-body {
    border: 1px solid #393637;
    padding: 15px 0px !important;
}

#absence-body p {
    font-size: 12px;
}

#absence-body label {
    font-size: 14px;
    padding-bottom: 10px;
}

#absence-body textarea {
    border: 1px solid #E6E6E6;
}

#invoice-total p {
    font-size: 16px;
}

div.pagination {

    padding:10px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

div.pagination a {
    margin: 2px;
    padding: 0.5em 0.64em 0.43em 0.64em;
    background-color: #DAC681 !important;
    text-decoration: none; /* no underline */
    color: #000;
    border-radius:0px !important;
    font-size: 15px;
    border:none !important;
}

#tablePagination,.paginationNew{
    margin: 0 auto;
    width: auto;
    display: block;
    text-align: center;
}
.paginationNew li{
    width: auto;
    display: inline-block;
}

#tablePagination a,.paginationNew li a{
    font-size: 13px;
    border: 1px solid #AAAEAE;
    padding: 3px 7px;
    background: #D3D3D4;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin-bottom: 0.5em;
    display: inline-block;
    color: #000;
    margin-right: 0.5em;
        margin-top: 0.5em;
}
#tablePagination a:hover,#tablePagination a.active,.paginationNew li a.active,.paginationNew li a:hover{
    color: red !important;
    font-weight: 600;
}
.row .tr {
    padding: 12px 0px;
    display: table;
    width: 100%;
}

.new_row {
    background-color: #f8f6f6;
}

.light-redbg {
    background-color: #FFB3B3 !important;
}

.light-bluebg {
    background-color: #BFE5F6 !important;
}
.blue-bg{ background-color: #008CC6 !important;}

.custm-btn {
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: #808080;
    color: #fff;
    padding: 6px 11px;
    display: inline-block !important;
    min-width: 55px;
    text-align: center;
    line-height: normal;
    border: none;
    font-size: 12px;
}

.button-s {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: #f4f4f4;
    color: #666;
    padding: 7px 20px;
    display: inline-block;
    min-width: 84px;
    text-align: center;
    line-height: normal;
    border: none;
    font-size: 12px;
}

.button-s:hover, .button-s.active {
    background-color: #008CC6;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.button {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: #808080;
    color: #fff;
    padding: 7px 20px;
    display: inline-block;
    min-width: 84px;
    text-align: center;
    line-height: normal;
    border: 1px solid;
    font-size: 12px;
}

.button:hover {
    color: #fff;
    opacity: 0.9;
}

.button.is-active {
    background-color: #008CC6;
    color: #fff;
}

.bor-none {
    border: none !important;
}

form input {
    font-family: inherit;
    border: 1px solid #E6E6E6;
}

form input, form button, form select {
    width: 100%;
    font-family: inherit;
    padding: 7px;
    font-size: 12px;
}

form select {
    width: auto;
    min-width: 150px;
}

form button {
    color: #fff;
    cursor: pointer;
}

form label {
    font-size: 13px;
    padding-bottom: 4px;
    display: block;
}

form input[readonly] {
    background-color: #F3F9F7
}

label {
    color: #000
}

h3 {
    font-weight: 200;
}

.blue {
    color: #2FCAF1
}

.white {
    color: #fff;
}

.green-bg {
    background-color: #22B573
}

.silver-bg {
    background-color: #F6F6F6
}

.orange-bg {
    background-color: #F15A24
}

.purple-bg {
    background-color: #662D91
}

.gray-bg {
    background-color: #808080
}
.light-gray-bg {
    background-color: #F6F6F6
}
.light-black {
    color: #8c7c7c
}

.err, .tmp_form_message {
    font-size: 12px;
    color: red;
    padding-top: 0px;
    position: absolute;
    margin-top: -1px;
}
.bg-green{ background-color:#22B573 !important;}
.bg-red{ background-color: #E22E2F !important;}
.bg-orange{ background-color: orange !important;}

.bt-bg {
    background-color: #F6F6F6;
    color: #333;
    border: 1px solid #C5C5C5;
}

.bt-bg:hover, .bt-bg.active {
    background-color: #008cc6;
    color: white;
}

.columns {
    display: flex;
}

.columns .column {
    flex: 2;
}

.inline-block {
    display: inline-block;
}

.inline-list {
    margin-top: -1px;
}

.inline-list > * {
    margin: 0 5px;
}

.inline-list > *:first-child {
    margin-left: 0;
}

.inline-list > *:last-child {
    margin-right: 0;
}

.box {
    width: 100%;
    display: table;
    padding: 1em;
    border: 1px solid #F0F0F0;
}

.dataTables_length, .dataTables_filter {
    display: none;
}

#dataTable:not(.dataTable) {
    display: none !important;
}

.ui-widget.ui-widget-content[class] {
    border: none;
    padding: 0;
    border: 1px solid #ccc;
}

.ui-datepicker[class] .ui-datepicker-header {
    background-color: #393637;
    border-radius: 0;
    color: #fff;
    font-weight: 200;
}

.ui-widget-content[class] .ui-state-default {
    background-color: #393637;
    border-width: 0;
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    background-image: url('../images/arrow-white.png');
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.ui-datepicker .ui-datepicker-prev {
    background-image: url('../images/arrow-white-2.png');
}

.saperator-list {
    line-height: 34px;
}

footer p {
    font-size: 12px;
    margin: 6px 0;
}

#searchResults .block-12 > .button {
    width: 100%;
    font-size: 12px;
    border: 1px solid #E6E6E6;
}

#searchResults .block-12 > .button.bg-transparent:hover, #searchResults .block-12 > .button.active {
    color: #fff;
    cursor: pointer;
    background-color: #008CC6 !important;
}

.is-loading {
    width: 45px;
    height: 45px;
    display: table;
    margin: auto;
    margin: 2em auto;
    background-image: url('../images/loading.png');
    background-size: cover;
    animation: spinAround 1s ease infinite;
    -webkit-animation: spinAround 1s ease infinite;
}
.selectContentBoxTwo{

    position: relative;
    left: 0;
    min-width: 290px;
    padding: 11px;
    z-index: 1000;

}
.selectContentBoxTwo p {
    vertical-align: middle;
    font-size: 12px;
}
.selectContentBox {
    position: absolute;
    left: -20%;
    top: 106%;
    min-width: 290px;
    background-color: #fff;
    border: 1px solid #C5C5C5;
    padding: 11px;
    z-index: 1000;
}

.selectContentBox * {
    vertical-align: middle;
    font-size: 12px;
}

.contentDropdown {
    background-color: #F6F6F6;
    padding: 7px 20px;
    border: 1px solid #C5C5C5;
    cursor: pointer;
    color: #333;
    display: inline-block;
}

.contentDropdown:hover, .contentDropdown.active {
    background-color: #008cc6;
    color: white;
}

.delete {
    width: 12px;
    height: 12px;
    background-image: url(../images/cross.png) !important;
    background-size: cover !important;
    background: no-repeat;
    display: inline-block !important;
    background-position: center;
}

.bg-red {
    background-color: #E22E2F;
}

.w100 {
    width: 100%;
}
.color-light-blue{color: #008CC6}
.color-green{color: #22B573}
.color-red{color: #E22E2F}
.pointer{ cursor: pointer}
.pr2{ padding-right: 2em}
#dialog {
    display: none
}

.salary-input,.salary-input-hour{
    width:58%;
    margin: 0 5px;}
.salary,.salary-hour{
    text-align: center;
}
div.salary::before,div.salary-hour::before {
    padding: 8px;
    content: 'GBP';
    color: #fff;
    background: gray;
    display: block;
    position: relative;
    float: left;
    font-size: 12px;
}
/*div.salary::after {
    padding: 8px;
    content: '/Annum';
    color: #fff;
    background: gray;
    display: block;
    position: relative;
    float: right;
    font-size: 12px;
}
div.salary-hour::after {
    padding: 8px;
    content: '/HOUR';
    color: #fff;
    background: gray;
    display: block;
    position: relative;
    float: right;
    font-size: 12px;
    width: 65px;
}*/
.salary-pk{text-align: center;}

form select.current_salary_type {
    width: 80px;
    min-width: 80px;
    color: white;
    background: gray;
}
form select.start_salary_type {
    width: 80px;
    min-width: 80px;
    color: white;
    background: gray;
}
div.salary-pk::before {
    padding: 8px;
    content: 'PKR';
    color: #fff;
    background: gray;
    display: block;
    position: relative;
    float: left;
    font-size: 12px;
}
div.salary-pk::after {
    padding: 8px;
    content: '/Month';
    color: #fff;
    background: gray;
    display: block;
    position: relative;
    float: right;
    font-size: 12px;
}

.salary-inr{text-align: center;}
div.salary-inr::before {
    padding: 8px;
    content: 'INR';
    color: #fff;
    background: gray;
    display: block;
    position: relative;
    float: left;
    font-size: 12px;
}
div.salary-inr::after {
    padding: 8px;
    content: '/Month';
    color: #fff;
    background: gray;
    display: block;
    position: relative;
    float: right;
    font-size: 12px;
}

input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none;
}



input[type=radio]:checked + label{
    color: #fff;
    background: #008CC7;
}

label + input[type=radio] + label {
    color: #e9e9e9;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    padding: 5px 20px;
    border: 1px solid;
    font-weight: 200;
}

.kin > div{ float: left; padding-right: 16px;}


.clearfix{ clear: both}

.squaredFour input[type="checkbox"] {
    opacity: 0;
    position: relative;
    top: 7px;
}

.squaredFour label {
    position: relative;
    display: inline-block;
    top: -19px;
    z-index: -1;
    /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
    padding-left: 22px;
}

.squaredFour label::before,
.squaredFour label::after {
    position: absolute;
    content: "";

    /*Needed for the line-height to take effect*/
    display: inline-block;
}

/*Outer box of the fake checkbox*/
.squaredFour label::before{
    height: 16px;
    width: 16px;

    border: 1px solid;
    left: 0px;

    /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
     *to vertically center it.
     */
    top: 3px;
}

/*Checkmark of the fake checkbox*/
.squaredFour label::after {
    height: 5px;
    width: 9px;
    border-left: 2px solid;
    border-bottom: 2px solid;

    transform: rotate(-45deg);

    left: 4px;
    top: 7px;
}

/*Hide the checkmark by default*/
.squaredFour input[type="checkbox"] + label::after {
    content: none;
}

/*Unhide on the checked state*/
.squaredFour input[type="checkbox"]:checked + label::after {
    content: "";
}

/*Adding focus styles on the outer-box of the fake checkbox*/
.squaredFour input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}




@media (max-width: 1280px) {
    .container {
        width: 96%;
    }

    #absence-body {
        width: 80%;
    }
}

@media (max-width: 980px) {
    .container {
        width: 96%;
    }

    #absence-body {
        width: 80%;
    }
}

@media (max-width: 810px) {
    #absence-body {
        width: 95%;
    }
}
@media (max-width: 590px) {
    #absence-body {
        width: 95%;
    }
    .table {
    table-layout: unset;
    width: 100%;
}
.table[class] {
     display: table ; 
}
#content .columns {
    display: block;
}
.fr.text-right.flexbox.f12.inline-list {
    display: block;
    text-align: left;
    margin-top: 1em;
}
#inactive-emp {
    margin: 0px 5px 0px 0px;
}
#active-emp {
   margin: 0px 5px 7px 0px;
}
}