@font-face {
    font-family: 'FontAwesome';
    src: url('../../fonts/fontawesome-webfont.eot?v=4.0.3');
    src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
        url('../../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
        url('../../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
        url('../../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fa-icon-remove:before{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    text-align:center;
    padding-top: 15px;
    font-size: 24px;
    color: #bebebe;
    font-family:"FontAwesome";
    content:"\f00d"
}

.holiday {
    background: url(cal-holiday.png) no-repeat center !important;        /* Images must be stored in ./resources/css/ directory as referenced */
}
.dayOff {
    background: url(day-off.png) no-repeat center !important;
}
.halfHoliday {
    background: url(half-holiday.png) no-repeat center !important;
}
.halfWorkAndHoliday {
    background: url(cal-expiration.png) no-repeat center !important;
}

.extend_wcf .cal-grid .x-datepicker-cell div{
    line-height: 21px;
}

.calendar-matrix-legend{
    border: solid #3892D3;
    border-width: 0px;
}
.legend-span{
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    flex-direction: row;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
}
.legend-cls{
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    margin: 2px 5px;
    background-size: 80% !important;
}

/*********************  MatrixEx2:  Options Calendar *********************/

.matrix-ex2-cal .holiday .x-datepicker-date {
    font-weight: bold; 
}

.matrix-ex2-cal .matrix-cal-selected .x-datepicker-date:hover{
    background-color: #3892D3;
    color: white;
}
.matrix-ex2-cal .cal-grid .x-datepicker-prevday .x-datepicker-date{ 
    background-color: transparent;
    color: transparent; 
}

.matrix-ex2-cal .cal-grid .x-datepicker-prevday .x-datepicker-date:hover{
    background-color: white; 
    color: white;
    border: none;
    cursor: default;
}

.matrix-ex2-cal .legend-legend{
    font-weight: bold;
    margin-top: 7px;
    width: 189px;  /* 226 total per col less 27px legend-cls width+margins less 10px matrix margins */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matrix-ex2-cal .fa-icon-remove:before{
    padding-top: 10px;
    padding-bottom: 0px;
    color: #3892D3;
}

/*********************  Date Field Combination Example *********************/

.datefield-mixin-window .cal-grid  .x-datepicker-date:hover{
    /*  background-color: #0087f5;  
    color: #ffffff; */
    cursor: pointer;
}

.datefield-mixin-window .cal-grid .x-datepicker-disabled .x-datepicker-date,
.datefield-mixin-window .cal-grid .x-datepicker-disabled .x-datepicker-date:hover {
    background-color: #f6f6f6;
    color: #777777;
    cursor: default;
}

.datefield-mixin-window .cal-grid .x-datepicker-prevday .x-datepicker-date,
.datefield-mixin-window .cal-grid .x-datepicker-prevday .x-datepicker-date:hover{ 
    background-color: white;
    color: white; 
    cursor: default;
}

/* SELECTED COLORS MUST BE AFTER PRIOR COLOR CLS ... and have matching attribute defs */
.datefield-mixin-window .cal-grid .matrix-cal-selected .x-datepicker-date{
    background-color: #D1EAFF;
    color: #0065B8;
    font-weight: normal;
}
.datefield-mixin-window .cal-grid .matrix-cal-startdt .x-datepicker-date,
.datefield-mixin-window .cal-grid .matrix-cal-enddt .x-datepicker-date{
    background-color: #00355F;
    color: white;
}

.date-input-selected .x-form-trigger-wrap-default {
    border-width: 3px;
}

.datefield-mixin-window .cal-grid .priordate.x-datepicker-cell{  /* Custom class to highlight prior selected date when hovering new dates prior to new selection */
    border-color: #00355F;
    border-width: 2px;
}

.date-field-example .fa-icon-remove:before{
    padding-top: 20px;
}
.date-field-example .fa-icon-remove:hover:before{
    color: #2973B8;
}

.x-mask{  /* Proposed Mask opacity when modal windows used */
    opacity: .3;
}



/* Use Month-Picker arrows for main calendar matrix panel */
.cal-grid-prior-btn-datefieldmixin{
    margin-left: 13px;
    top: 8px !important;
}
.cal-grid-next-btn-datefieldmixin{
    margin-right: 23px;
    top: 8px !important;
}
.cal-grid-prior-btn-datefieldmixin:hover,
.cal-grid-next-btn-datefieldmixin:hover{
    opacity: 1;
}