/*  overriding jQuery mobile style */
div.datepicker
{
    font-size: 12px !important;
    font-family: Arial,Helvetica,sans-serif !important;
}

/*  Background of control */
div.datepickerContainer
{
    font-size: inherit !important;
    font-family: Arial,Helvetica,sans-serif !important;
    background-color: #ffffff;
}

div.datepicker table 
{
    background: inherit !important;
    border: inherit !important;    
    border-radius: 0 0 0 0;
}

div.datepicker table tbody td 
{
    border-color: inherit;
    border-collapse: collapse;
    border-width: inherit;
}

div.datepicker table tbody tr 
{
    background: inherit !important;
}

div.datepicker table thead th
{
    font-size: inherit !important;
    padding: inherit !important;
    border-bottom: inherit !important;
    text-shadow: none !important;
    border-radius: 0 0 0 0;
}

div.datepicker td.datepickerSpace
{
    background-color: rgba(0, 0, 0, 0.3);
}
div.datepicker td.datepickerSpace div
{
    width: 0px;
}

div.datepickerContainer:focus
{
    font-size: inherit !important;
    font-family: Arial,Helvetica,sans-serif !important;
    background-color: Aqua;
}

/* hide the week column */
div.datepicker tbody.datepickerDays th.datepickerWeek, div.datepicker tr.datepickerDoW th.datepicker-weekheader
{
    display: none;
}

/* hide the inner border */
div.datepicker div.datepickerBorderT, div.datepicker div.datepickerBorderB, div.datepicker div.datepickerBorderL, div.datepicker div.datepickerBorderR, 
div.datepicker div.datepickerBorderTL, div.datepicker div.datepickerBorderTR, div.datepicker div.datepickerBorderBL, div.datepicker div.datepickerBorderBR
{
    display: none;
}

/* Header style */
div.datepicker table.datepickerViewDays thead th.datepickerGoPrev, div.datepicker table.datepickerViewDays thead th.datepickerMonth, div.datepicker table.datepickerViewDays thead th.datepickerGoNext,
div.datepicker table.datepickerViewMonths thead th.datepickerGoPrev, div.datepicker table.datepickerViewMonths thead th.datepickerMonth, div.datepicker table.datepickerViewMonths thead th.datepickerGoNext
{
    background-image: linear-gradient(rgb(34,87,130) 50%, rgb(72,140,212) 85%);
    background-image: -o-linear-gradient(bottom, rgb(34,87,130) 50%, rgb(72,140,212) 85%);
    background-image: -moz-linear-gradient(bottom, rgb(34,87,130) 50%, rgb(72,140,212) 85%);
    background-image: -webkit-linear-gradient(bottom, rgb(34,87,130) 50%, rgb(72,140,212) 85%);
    background-image: -ms-linear-gradient(bottom, rgb(34,87,130) 50%, rgb(72,140,212) 85%);

    background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.5, rgb(34,87,130)),
	    color-stop(0.85, rgb(72,140,212))
    );
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#225782', endColorstr='#488CD4');
}
div.datepicker table.datepickerViewDays thead th.datepickerGoPrev
{
    border-left: 1px solid #888888;
}
div.datepicker table.datepickerViewDays thead tr.datepickerDoW th
{
    background-color: #dddddd;
    font-weight: bold;
    color: #000000;
    border: 1px solid #888888;
}

div.datepicker table.datepickerViewDays thead tr.datepickerDoW th:last-child
{
    border-top-right-radius: 0px;
}

/* Day styles */
div.datepicker table.datepickerViewDays tbody a 
{
    color: #000000;
    padding: 2px 6px 0px 2px;
}


div.datepicker table.datepickerViewDays tbody a:hover, div.datepicker table.datepickerViewDays tbody td.datepickerSelected a:hover  
{
    background-color: rgb(72,140,212);
    color: #ffffff;
}

div.datepicker table.datepickerViewDays tbody td.datepickerNotInMonth a 
{
    color: #888888;
}

div.datepicker table.datepickerViewDays tbody td.datepickerSelected a
{
    background-color: #e8e8e8;
    color: #000000;
    
}
div.datepicker table.datepickerViewDays tbody td.datepickerDisabled a 
{
    color: #dddddd;
}

div.datepicker table.datepickerViewDays tbody td
{
    border: 1px solid #888888;
}

/* Month View styles */
div.datepicker table.datepickerViewMonths tbody.datepickerMonths a 
{
    color: #000000;
}
div.datepicker table.datepickerViewMonths tbody.datepickerMonths a:hover
{
    background-color: rgb(72,140,212);
    color: #ffffff;
}
div.datepicker table.datepickerViewMonths tbody td
{
    border-right: 8px solid #ffffff;
    border-bottom: 7px solid #ffffff;
}
div.datepicker table.datepickerViewMonths tbody tr:last-child td
{
    border-bottom: 8px solid #ffffff;
}
/* calendar icon */
div.dateselector-calicon
{
    background-image: url("/scripts/plugins/date-selector/images/calendar-icon-32.png"); 
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 0.9);
    display: inline-block;
    height: 32px;
    margin: -1px 2px auto 5px;
    max-height: 32px;
    max-width: 32px;
    min-height: 32px;
    min-width: 32px;
    overflow: hidden;
    padding: 0;
    position: static;
    text-shadow: none;
    vertical-align: top;
    width: 32px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) 
{
    div.dateselector-calicon
    {
        background-image: url("/scripts/plugins/date-selector/images/calendar-icon-64.png");
        background-size:auto 32px;
    }
}

/* input style */
input.ui-input-text[data-role="daterange"], input.ui-input-text[data-role="date"], input.ui-input-text[data-role="daterange-transactionsearch"], input.ui-input-text[data-role="date-PnPDocumentDetails"]
{
    width: 45%;
}

/* Close button */
button.datepicker-close-button
{
    height:24px !important;
    max-height:24px !important;
    min-height:24px !important;
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    font-size:12px !important;
    border-radius: 6px !important;
    text-shadow:none !important;
}
div.datepicker td.datepicker-close
{
    text-align: center;
    padding: 5px 0 5px 0;
}