/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 8, 2017, 11:23:45 AM
    Author     : Jin
*/

.marginLRAuto{
    margin-left: auto;
    margin-right: auto;
}

.square-widget{
    border-radius: 0;
}

.pad-top-10{
    padding-top: 10px;
}

.no-pad{
    padding: 0 !important;
}

.custom-login-box{
    background: rgba( 255, 255, 255, .8);
    padding: 40px;
    padding-bottom: 20px;
}

.user-photo{
    margin-bottom: 15px;
    max-width: 250px;
    max-height: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);
}

.custom-image-size{
    max-width: 320px;
}

.custom-image-size > img {
    width: 100%;
    height: auto;
}

.mapBox{
    height: 400px;
}

#map{
    height: 100%;
}

/* always show spinner for input type number */
input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

.btn-whatsapp{
    background-color: #25D366;
    color: #FFFFFF;
}

.btn-whatsapp:hover,
.btn-whatsapp:active,
.btn-whatsapp:focus
{
    background-color: #075E54;
    color: #FFFFFF;
}

.sidebar-userDetails{
    padding: 20px 10px 0px 10px;
}

#calendar {
    max-width: 1200px;
    margin: 0 auto;
}

.calendar-status-box{
    padding: 20px 0;
}

.color-pending{
    color: orange;
}

.color-approve{
    color: green;
}

.color-reject{
    color: red;
}

/* override appui th font size */
.table thead > tr > th{
    font-size: 14px;
}

.table tbody > tr > td {
    font-size: 12px;
}

table.dataTable.customTable thead > tr > th{
    background-color: #f3f3f3;
    font-size: 14px;
    text-transform: uppercase;
}
.table.customTable>thead>tr>th, 
.table.customTable>tbody>tr>th, 
.table.customTable>tfoot>tr>th, 
.table.customTable>thead>tr>td, 
.table.customTable>tbody>tr>td, 
.table.customTable>tfoot>tr>td{
    padding: 20px 8px 20px 30px;
    font-size: 14px;
    color: #777777;
    /*text-align: center;*/
    border-top: 0.5px solid #f2f2f2;
}

.table.customTable>tbody>tr:hover, .table.customTable>tfoot>tr:hover{
    -webkit-box-shadow: 0px 0px 15px 1px rgba(153,153,153,0.12);
    -moz-box-shadow: 0px 0px 15px 1px rgba(153,153,153,0.12);
    box-shadow: 0px 0px 15px 1px rgba(153,153,153,0.12);
}

.dataTables_wrapper > div,
.dataTables_wrapper > div:first-child{
    border: none;
}

.table.dataTable.customTable{
    margin-bottom: 20px !important;
}

/* Change modal header font to uppercase */
.modal-header,
.modal-body h3{
    text-transform: uppercase;
}

/*
    Drawer v3 close save and upload bg
*/

.wPaint-menu-icon-name-save,
.wPaint-menu-icon-group-loadImg{
    display: none !important;
}

/*Custom css for datatable processing bar */
/*.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 40px;
    margin-left: -50%;
    margin-top: -25px;
    padding-top: 20px;
    text-align: center;
    font-size: 1.2em;
    background-color: white;
    background-color: rgba(0, 0, 0, 0.3); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
}*/

.dataTables_processing {
    position: absolute;
    left: 45%;
    top: 35%;
    color: #1d76bb;
}

.employeeSubtotal{
    font-size: 22px;
    font-weight: bold;
}

@media screen and (max-width: 1150px){
    .table-responsive{
        min-width: 100%;
        max-width: 100%;
        overflow-x: auto;
        border: 1px solid #ddd;
    }
}


@media screen and (min-width: 1200px){
    .modal-lg{
        width: 1124px;
    }
}

.paper-cut:after{
    content: " ";
    display: block;
    position: relative;
    top: -20px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 36px;
    background: -webkit-linear-gradient(#FFFFFF 0%, transparent 0%), -webkit-linear-gradient(135deg, #e8ebf1 33.33%, transparent 33.33%) 0 0%, #e8ebf1 -webkit-linear-gradient(45deg, #e8ebf1 33.33%, #FFFFFF 33.33%) 0 0%;
    background: -o-linear-gradient(#FFFFFF 0%, transparent 0%), -o-linear-gradient(135deg, #e8ebf1 33.33%, transparent 33.33%) 0 0%, #e8ebf1 -o-linear-gradient(45deg, #e8ebf1 33.33%, #FFFFFF 33.33%) 0 0%;
    background: -moz-linear-gradient(#FFFFFF 0%, transparent 0%), -moz-linear-gradient(135deg, #e8ebf1 33.33%, transparent 33.33%) 0 0%, #e8ebf1 -moz-linear-gradient(45deg, #e8ebf1 33.33%, #FFFFFF 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 14px 27px, 14px 27px;
}

.dataTables_wrapper > div{
    background-color: #ffffff;
}