﻿
/*
# Moveable base form styles v1.0
*/
/*
[//]: # (Form)
[//]: # (****)
*/

/*
# Form for 'stack' layout
  This is our default layout, or mobile layout.
```
    <fieldset>
        <legend>Form</legend>
        <div class="form-row">
            <label>Field 1</label>
            <input type="text" />
            <span class="validation">Please enter valid</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <span id="list" class="list-control">
                <input id="rbList1" type="radio" name="list" value="Item 1"><label for="rbList1">Item 1</label>
                <input id="rbList2" type="radio" name="list" value="Item 1"><label for="rbList2">Item 2</label>
            </span>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <select>
				<option value="Please Select">Please Select</option>
			</select>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">
            <label for="chkList">Field 1</label>
            <span id="chkList" class="list-control">
                <input id="chkList_0" type="checkbox" value="0">
                <label for="chkList_0">Item 1</label>
                <input id="chkList_1" type="checkbox" value="1">
                <label for="chkList_1">Item 2</label>
            </span>
            <span class="validation">Rquired field</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <textarea rows="2" cols="20"></textarea>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">			        
            <input type="submit" value="Please Submit" >    
        </div>
    </fieldset>

    <div class="row-fluid">
        <fieldset>
            <legend>Form in Grid Layout</legend>
                
            <div class="form-row span-6">
                <label>Field 1</label>
                <input type="text" />
                <span class="validation">Please enter valid</span>
            </div>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <span id="listb" class="list-control">
                    <input id="rbList1b" type="radio" name="listb" value="Item 1"><label for="rbList1b">Item 1</label>
                    <input id="rbList2b" type="radio" name="listb" value="Item 1"><label for="rbList2b">Item 2</label>
                </span>
                <span class="validation">Please select valid</span>
            </div>
       
            <div class="form-row span-6">
                <label>Field 1</label>
                <select>
				    <option value="Please Select">Please Select</option>
			    </select>
                <span class="validation">Please select valid</span>
            </div>
        
            <div class="form-row span-6">
                <label for="chkList">Field 1</label>
                <span id="chkList" class="list-control">
                    <input id="chkList_0" type="checkbox" value="0">
                    <label for="chkList_0">Item 1</label>
                    <input id="chkList_1" type="checkbox" value="1">
                    <label for="chkList_1">Item 2</label>
                </span>
                <span class="validation">Rquired field</span>
            </div>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <textarea rows="2" cols="20"></textarea>
                <span class="validation">Please select valid</span>
            </div>
        
            <div class="form-row span-6">			        
                <input type="submit" value="Please Submit" >    
		    </div>        
        </fieldset>
    </div>

```
*/
fieldset { margin: 0 0 .5em 0; padding: 1em 0 0 0; border: none; }
fieldset legend { display: none; }

fieldset .form-row { margin-bottom: 1.7em; }

fieldset .row-fluid { margin-bottom: 0; }

.form-row label, .form-row span.validation, .form-row input, .form-row input[type=text], .form-row textarea, .form-row keygen, .form-row select, .form-row button {
    font-size: 1.4em;
}

/*
[//]: # (Default/Common Form Styles)
[//]: # (**************************)
*/

.form-row input[type=text],
.form-row input[type=password],
.form-row select,
.form-row .list-control,
.form-row textarea { /* margin-right: 1em; */ }

/*
[//]: # (Label)
*/
fieldset .form-row label,
fieldset .form-row .label-area { margin: 0 0 .3em 0; display: block; }


/*
[//]: # (Controls - input)
*/
.form-row input[type=text], .form-row input[type=password], .form-row select { width: 100%; height: 2em; padding: 0 0.6rem; }
.form-row .list-control { width: 100%; height: 2.12em; margin-bottom: 1.1em; /*margin-right: 1.5em;*/ margin-top: -2px; display: block; }
.form-row table.list-control { height:auto; }

textarea { width: 100%; height: 4em; }
/* todo */

/*
[//]: # (Default: Controls - input)
*/
.form-row input[type=text],
.form-row input[type=password],
.form-row select,
.form-row textarea { border: 1px solid #999; border-radius: 0.35em; -moz-box-shadow: inset 0 0 5px #DDDDDD; -webkit-box-shadow: inset 0 0 5px #DDDDDD; box-shadow: inset 0 0 5px #DDDDDD; /*Inner Shadow*/ color: rgb(68, 68, 68); }

.form-row input[type=text]:hover,
.form-row input[type=password]:hover,
.form-row select:hover,
.form-row .list-control:hover,
.form-row textarea:hover { border-color: #676464; }

.form-row input[type=text]:focus,
.form-row input[type=password]:focus,
.form-row select:focus,
.form-row textarea:focus { border-color: #38495A; }


/*
[//]: # (Controls - select)
*/
.form-row input[type=checkbox], .form-row input[type=radio] { float: left; margin: 0.6em 0 0 0; }
.form-row input[type=checkbox] + label, .form-row input[type=radio] + label { float: left; text-align: left !important; margin: 0em 1em 0 0.5em !important; line-height:1.5em}

/*
[//]: # (Controls - Date Picker)
*/
.form-row .RadPicker,
.form-row .RadPicker .RadInput { width: 100%; font: initial; }

/*
[//]: # (Button)
*/
.form-row input[type=submit],
.form-row input[type=button] { height: 1.8em !important; padding: 0 1em; float: none; }
.form-row input[type=submit]:hover,
.form-row input[type=button]:hover { }

/*
[//]: # (Validation)
*/
.form-row .validation { display: inline-block; color: red; padding-top: .2em; }

/*
[//]: # (Browser stuff)
*/
.form-row input:focus,
.form-row input:focus { outline: none; }

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }




/*
# Form for 'flow' layout.
  This is an override layout to force elements to stack on desktop.
```
    <fieldset class="flow">
        <legend>Form</legend>
        <div class="form-row">
            <label>Field 1</label>
            <input type="text" />
            <span class="validation">Please enter valid</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <span id="list" class="list-control">
                <input id="rbList1" type="radio" name="list" value="Item 1"><label for="rbList1">Item 1</label>
                <input id="rbList2" type="radio" name="list" value="Item 1"><label for="rbList2">Item 2</label>
            </span>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <select>
				<option value="Please Select">Please Select</option>
			</select>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">
            <label for="chkList">Field 1</label>
            <span id="chkList" class="list-control">
                <input id="chkList_0" type="checkbox" value="0">
                <label for="chkList_0">Item 1</label>
                <input id="chkList_1" type="checkbox" value="1">
                <label for="chkList_1">Item 2</label>
            </span>
            <span class="validation">Rquired field</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <textarea rows="2" cols="20"></textarea>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">			        
            <input type="submit" value="Please Submit" >    
		</div>
    </fieldset>

    <div class="row-fluid">
        <fieldset class="flow">
            <legend>Form in Grid Layout</legend>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <input type="text" />
                <span class="validation">Please enter valid</span>
            </div>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <span id="listb" class="list-control">
                    <input id="rbList1b" type="radio" name="listb" value="Item 1"><label for="rbList1b">Item 1</label>
                    <input id="rbList2b" type="radio" name="listb" value="Item 1"><label for="rbList2b">Item 2</label>
                </span>
                <span class="validation">Please select valid</span>
            </div>
       
            <div class="form-row span-6">
                <label>Field 1</label>
                <select>
				    <option value="Please Select">Please Select</option>
			    </select>
                <span class="validation">Please select valid</span>
            </div>
  
            <div class="form-row span-6">
                <label for="chkList">Field 1</label>
                <span id="chkList" class="list-control">
                    <input id="chkList_0" type="checkbox" value="0">
                    <label for="chkList_0">Item 1</label>
                    <input id="chkList_1" type="checkbox" value="1">
                    <label for="chkList_1">Item 2</label>
                </span>
                <span class="validation">Rquired field</span>
            </div>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <textarea rows="2" cols="20"></textarea>
                <span class="validation">Please select valid</span>
            </div>
        
            <div class="form-row span-6">			        
                <input type="submit" value="Please Submit" >    
		    </div>        
        </fieldset>
    </div>

```
*/

/*
[//]: # (Flow Layout)
*/
@media (min-width:768px) {
        
    fieldset.flow .form-row { overflow: auto; margin: 0 0 1em 0; }

    fieldset.flow .form-row label,
    fieldset.flow .form-row input,
    fieldset.flow .form-row select,
    fieldset.flow .form-row textarea,
    fieldset.flow .form-row .label-area,
    fieldset.flow .form-row .list-control { float: left; }
    
    /*
    [//]: # (Label)
    */
    /* span-12 */
    fieldset.flow .form-row label,
    fieldset.flow .form-row .label-area { width: 13%; text-align: right; margin: .4rem 1rem 0 0; }

    fieldset.flow .form-row .no-label { margin-left: 14%; }
    
    /* span-6 */
    fieldset.flow .span-6 label,
    fieldset.flow .span-6 .label-area { width: 27%; }

    fieldset.flow .span-6 .no-label { margin-left: 29%; }

    /*
    [//]: # (Controls)
    */
    /* span-12 */
    fieldset.flow .form-row input[type=text],
    fieldset.flow .form-row input[type=password],
    fieldset.flow .form-row select,
    fieldset.flow .form-row .list-control,
    fieldset.flow .form-row textarea { width: 85%; }
       
    /* span-6 */
    fieldset.flow .span-6 input[type=text],
    fieldset.flow .span-6 input[type=password],
    fieldset.flow .span-6 select,
    fieldset.flow .span-6 .list-control,
    fieldset.flow .span-6 textarea { width: 69%; }


    /*
    [//]: # (Controls - Date Picker)
    */

    fieldset.flow .form-row .RadPicker { float: left; }

    fieldset.flow .form-row .RadPicker .RadInput,
    fieldset.flow .form-row .RadPicker .RadInput input[type=text] { width: 100% !important; font: initial; }

    /* span-12 */
    fieldset.flow .form-row .RadPicker { width: 85%; }

    /* span-6 */
    fieldset.flow .span-6 .RadPicker { width: 69%; }


    /*
    [//]: # (Button)
    */

    fieldset.flow .form-row input[type=submit],
    fieldset.flow .form-row input[type=button] { margin: 0 0 0 14%; }

    /*
    [//]: # (Validation)
    */
    fieldset.flow .form-row .validation { float: left; margin-left:14%; }
    fieldset.flow .span-6 .validation { float: left; margin-left:29%; }
}


/*
# jQuery Timepicker  
  You can pair timepicker with datepicker if needed
```
    <input id="timePicker" type="text" class="time" />

    <script src="/js/base/plugins/jquery.timepicker.min.js"></script>
    <script>
        $(function () {
            $('#timePicker').timepicker();
        });
    </script>
```
*/
.ui-timepicker-wrapper { overflow-y: auto; height: 150px; width: 100px; background: #fff; border: 1px solid #ddd; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2); box-shadow: 0 5px 10px rgba(0,0,0,0.2); outline: none; z-index: 10001; margin: 0; }

.ui-timepicker-wrapper.ui-timepicker-with-duration { width: 13em; }

.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 { width: 11em; }

.ui-timepicker-list { margin: 0; padding: 0; list-style: none; }

.ui-timepicker-duration { margin-left: 5px; color: #888; }

.ui-timepicker-list:hover .ui-timepicker-duration { color: #888; }

.ui-timepicker-list li { padding: 3px 0 3px 5px; cursor: pointer; white-space: nowrap; color: #000; list-style: none; margin: 0; }

.ui-timepicker-list:hover .ui-timepicker-selected { background: #fff; color: #000; }

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover { background: #1980EC; color: #fff; }

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration { color: #ccc; }

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { color: #888; cursor: default; }

.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { background: #f2f2f2; }


/*
# jQuery Datepicker  
```
    <input id="datePicker" type="text" class="date" />

    <script src="/js/base/plugins/bootstrap-datepicker.min.js"></script>
    <script>
        $(function () {
            $('#datePicker').datepicker({
                'format': 'yyyy-m-d',
                'autoclose': true
            });
        });
    </script>
```
*/
/*
    [//]: # (Datepicker for Bootstrap)
    [//]: # (Copyright 2012 Stefan Petre)
    [//]: # (Improvements by Andrew Rowls)
    [//]: # (Licensed under the Apache License v2.0)
    [//]: # (http://www.apache.org/licenses/LICENSE-2.0)
*/
.datepicker { padding: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; direction: ltr; }
.datepicker-inline { width: 220px; }
.datepicker.datepicker-rtl { direction: rtl; }
.datepicker.datepicker-rtl table tr td span { float: right; }
.datepicker-dropdown { top: 0; left: 0; }
.datepicker-dropdown:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-top: 0; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; }
.datepicker-dropdown:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-top: 0; position: absolute; }
.datepicker-dropdown.datepicker-orient-left:before { left: 6px; }
.datepicker-dropdown.datepicker-orient-left:after { left: 7px; }
.datepicker-dropdown.datepicker-orient-right:before { right: 6px; }
.datepicker-dropdown.datepicker-orient-right:after { right: 7px; }
.datepicker-dropdown.datepicker-orient-top:before { top: -7px; }
.datepicker-dropdown.datepicker-orient-top:after { top: -6px; }
.datepicker-dropdown.datepicker-orient-bottom:before { bottom: -7px; border-bottom: 0; border-top: 7px solid #999; }
.datepicker-dropdown.datepicker-orient-bottom:after { bottom: -6px; border-bottom: 0; border-top: 6px solid #ffffff; }
.datepicker > div { display: none; }
.datepicker.days div.datepicker-days { display: block; }
.datepicker.months div.datepicker-months { display: block; }
.datepicker.years div.datepicker-years { display: block; }
.datepicker table { margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.datepicker td,
.datepicker th { text-align: center; width: 20px; height: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: none; }
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th { background-color: transparent; }
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused { background: #eeeeee; cursor: pointer; }
.datepicker table tr td.old,
.datepicker table tr td.new { color: #999999; }
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover { background: none; color: #999999; cursor: default; }
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover { background-color: #fde19a; background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a); background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a)); background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a); background-image: -o-linear-gradient(top, #fdd49a, #fdf59a); background-image: linear-gradient(top, #fdd49a, #fdf59a); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0); border-color: #fdf59a #fdf59a #fbed50; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); color: #000; }
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] { background-color: #fdf59a; }
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active { background-color: #fbf069 \9; }
.datepicker table tr td.today:hover:hover { color: #000; }
.datepicker table tr td.today.active:hover { color: #fff; }
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover { background: #eeeeee; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover { background-color: #f3d17a; background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a); background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a)); background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a); background-image: -o-linear-gradient(top, #f3c17a, #f3e97a); background-image: linear-gradient(top, #f3c17a, #f3e97a); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0); border-color: #f3e97a #f3e97a #edde34; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] { background-color: #f3e97a; }
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active { background-color: #efe24b \9; }
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover { background-color: #9e9e9e; background-image: -moz-linear-gradient(top, #b3b3b3, #808080); background-image: -ms-linear-gradient(top, #b3b3b3, #808080); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080)); background-image: -webkit-linear-gradient(top, #b3b3b3, #808080); background-image: -o-linear-gradient(top, #b3b3b3, #808080); background-image: linear-gradient(top, #b3b3b3, #808080); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0); border-color: #808080 #808080 #595959; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] { background-color: #808080; }
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active { background-color: #666666 \9; }
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover { background-color: #006dcc; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -ms-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(top, #0088cc, #0044cc); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); border-color: #0044cc #0044cc #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] { background-color: #0044cc; }
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active { background-color: #003399 \9; }
.datepicker table tr td span { display: block; width: 23%; height: 54px; line-height: 54px; float: left; margin: 1%; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.datepicker table tr td span:hover { background: #eeeeee; }
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover { background: none; color: #999999; cursor: default; }
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover { background-color: #006dcc; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -ms-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(top, #0088cc, #0044cc); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); border-color: #0044cc #0044cc #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] { background-color: #0044cc; }
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active { background-color: #003399 \9; }
.datepicker table tr td span.old,
.datepicker table tr td span.new { color: #999999; }
.datepicker th.datepicker-switch { width: 145px; }
.datepicker thead tr:first-child th,
.datepicker tfoot tr th { cursor: pointer; }
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover { background: #eeeeee; }
.datepicker .cw { font-size: 10px; width: 12px; padding: 0 2px 0 5px; vertical-align: middle; }
.datepicker thead tr:first-child th.cw { cursor: default; background-color: transparent; }
.input-append.date .add-on i,
.input-prepend.date .add-on i { cursor: pointer; width: 16px; height: 16px; }
.input-daterange input { text-align: center; }
.input-daterange input:first-child { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; }
.input-daterange input:last-child { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; }
.input-daterange .add-on { display: inline-block; width: auto; min-width: 16px; height: 20px; padding: 4px 5px; font-weight: normal; line-height: 20px; text-align: center; text-shadow: 0 1px 0 #ffffff; vertical-align: middle; background-color: #eeeeee; border: 1px solid #ccc; margin-left: -5px; margin-right: -5px; }
.datepicker.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; display: none; min-width: 160px; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 20px; }
.datepicker.dropdown-menu th,
.datepicker.dropdown-menu td { padding: 4px 5px; }

