﻿
@font-face
{
    font-family: 'icons';
    font-style: normal;
    font-weight: normal;
    src: url('../../Styles/icons.eot');
    src: local('icons'),
         url('Styles/icons.eot?') format('eot'),
         url('../../Styles/icons.eot#iefix') format('embedded-opentype'),
         url('../../Styles/icons.woff') format('woff'),
         url('../../Styles/icons.ttf') format('truetype'),
         url('../../Styles/icons.svg#icons') format('svg');
}

date-input-polyfill
{
    background: #fff;
    border-radius: 3px;
    border: 2px solid #bdc3c7;
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12);
    color: #000;
    cursor: default;
    font-family: sans-serif;
    font-size: 14px;
    height: auto;
    line-height: normal;
    padding: 0;
    position: absolute !important;
    text-align: center;
    text-shadow: none;
    width: auto;
    z-index: 100;
}

date-input-polyfill[data-open="false"]
{
    display: none;
}

date-input-polyfill[data-open="true"]
{
    display: block;
}

date-input-polyfill select,
date-input-polyfill table,
date-input-polyfill th,
date-input-polyfill td
{
    background: #fff;
    border: 0;
    border-radius: 0;
    
    /*border-radius: 3px;
    border: 2px solid #bdc3c7;*/
    box-shadow: none;
    color: #000;
    font-family: sans-serif;
    font-size: 14px;
    height: auto;
    line-height: normal;
    padding: 0;
    text-shadow: none;
    width: auto;
}

date-input-polyfill table
{
    border: 1px solid gray;
}


date-input-polyfill select,
date-input-polyfill button
{
    border: 0;
    border-bottom: 1px solid #E0E0E0;
    height: 30px;
    vertical-align: top;
}

date-input-polyfill select
{
    padding-left: 20px;
}


date-input-polyfill select::before
{
    content: "";
}

date-input-polyfill select
{
    width: 50%;
}

date-input-polyfill select:first-of-type
{
    border-right: 1px solid #E0E0E0;
    width: 30%;
}

date-input-polyfill button
{
    background: #E0E0E0;
    padding: 0;
    width: 20%;
}

date-input-polyfill table
{
    border-collapse: collapse;
}

date-input-polyfill th,
date-input-polyfill td
{
    padding: 4px;
    text-align: center;
    width: 32px;
}

date-input-polyfill td[data-day]
{
    cursor: pointer;
}

date-input-polyfill td[data-day]:hover
{
    background: #E0E0E0;
}

date-input-polyfill [data-selected]
{
    background: #D8EAF6;
    font-weight: bold;
}

input[data-has-picker]::-ms-clear
{
    display: none;
}


date-input-polyfill th
{
    background-color: lightgrey;
}

.calendar
{
    padding: 10px;
}

date-input-polyfill  span
{
    display: inline-block;
}

.icon
{
    position: relative;
}

select
{
    display: inline-block;
}


.icon::before
{
    display: inline-block;
    color: #A2A6A8;
    font-family: icons;
    font-size: 17px;
    pointer-events: none;
    position: absolute;
    vertical-align: top;
    z-index: 2;
    content: '\e801';
}

.year::before
{
    left: -72px;
    top: -5px;
}

.month::before
{
    left: -125px;
    top: -5px;
}