/* iPhone Retina */
@media only screen and (max-width:320px) {

}
/* Extra Small Device, Phone */
@media only screen and (min-width:321px) and (max-width:480px) {

}
/* Small Device, Tablet */
@media only screen and (min-width:481px) and (max-width:768px) {

}
/* Medium Device, Desktop */
@media only screen and (min-width:769px) and (max-width:992px) {

}
/* Large Device, Wide Screen */
@media only screen and (min-width:993px) {

}

.datepicker {
    width: 480px;
    display: none;
    /*
    border: 2px solid rgb(237,237,237);
    */
    box-shadow: 0px 4px 6px rgb(88,88,88);
    background: #fff;
    position: absolute;
    z-index: 3;
}

.calendar-top {
    width: 100%;
    height: 48px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: #1c4a99;
    color: #fff;
    font-size: 20px;
}

.month-current {
    min-width: 33%;
    height: 100%;
    line-height: 48px;
    text-align: center;
    margin: auto 0;
    background: #1c4a99;
    /*
    background: #1c4a99 url(../assets/images/chevron-down-1c4a99.png) no-repeat center left 8px;
    */
    transition: all 0.2s ease-in;
}

.month-current:hover {
    cursor: pointer;
    background: rgb(165,25,31);
    /*
    background: rgb(165,25,31) url(../assets/images/chevron-down-ffffff.png) no-repeat center left 8px;
    */
}

.active-month-current {
    /*
    background: rgb(165,25,31) url(../assets/images/chevron-up-ffffff.png) no-repeat center left 8px;
    */
    background: rgb(165,25,31);
}

.active-month-current:hover {
    /*
    background: rgb(165,25,31) url(../assets/images/chevron-up-ffffff.png) no-repeat center left 8px;
    */
}

.year-current {
    min-width: 33%;
    height: 100%;
    line-height: 48px;
    text-align: center;
    margin: auto 0;
    background: #1c4a99;
    /*
    background: #1c4a99 url(../assets/images/chevron-down-1c4a99.png) no-repeat center right 8px;
    */
    transition: all 0.2s ease-in;
}

.year-current:hover {
    cursor: pointer;
    background: rgb(165,25,31);
    /*
    background: rgb(165,25,31) url(../assets/images/chevron-down-ffffff.png) no-repeat center right 8px;
    */
}

.active-year-current {
    /*
    background: rgb(165,25,31) url(../assets/images/chevron-up-ffffff.png) no-repeat center right 8px;
    */
    background: rgb(165,25,31);
}

.active-year-current:hover {
    /*
    background: rgb(165,25,31) url(../assets/images/chevron-up-ffffff.png) no-repeat center right 8px;
    */
}

.month-previous {
    width: 8%;
    height: 100%;
    background: transparent url(../images/glyphicons-225-chevron-left-ffffff.png) no-repeat center left 40%;
    transition: all 0.2s ease-in;
}

.month-previous:hover {
    background-color: rgb(165,25,31);
    cursor: pointer;
}

.month-next {
    width: 8%;
    height: 100%;
    background: transparent url(../images/glyphicons-224-chevron-right-ffffff.png) no-repeat center right 40%;
    transition: all 0.2s ease-in;
}

.month-next:hover {
    background-color: rgb(165,25,31);
    cursor: pointer;
}

.month-menu {
    width: 100%;
    height: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: auto;
    background: rgb(237,237,237);
}

.month-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: rgb(237,237,237);
    padding: 0 0 2px 0;
}

.month-select {
    min-width: 72px;
    height: 28px;
    line-height: 28px;
    margin: 4px 0;
    padding: 2px 2px;
    text-align: center;
    transition: all 0.2s ease-in;
}

.month-select:hover {
    background: rgb(165,25,31);
    color: #fff;
    cursor: pointer;
}

.active-month {
    background: rgb(165,25,31);
    color: #fff;
}

.year-menu {
    width: 100%;
    height: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: auto;
    background: rgb(237,237,237);
}

.year-previous {
    width: 8%;
    background: url(../images/glyphicons-225-chevron-left-25538e.png) no-repeat center left 40%;
    transition: all 0.2s ease-in;
}

.year-previous:hover {
    background-color: rgb(165,25,31);
    cursor: pointer;
}

.year-next {
    width: 8%;
    background: url(../images/glyphicons-224-chevron-right-25538e.png) no-repeat center right 40%;
    transition: all 0.2s ease-in;
}

.year-next:hover {
    background-color: rgb(165,25,31);
    cursor: pointer;
}

.year-list {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.year-select {
    min-width: 56px;
    height: 28px;
    line-height: 28px;
    margin: 4px 0px;
    padding: 2px 2px;
    text-align: center;
    transition: all 0.2s ease-in;
}

.year-select:hover {
    background: rgb(165,25,31);
    color: #fff;
    cursor: pointer;
}

.active-year {
    background: rgb(165,25,31);
    color: #fff;
}

.calendar-body-header {
    height: 34px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 2px solid #1c4a99;
    cursor: default;
}

.calendar-weekday {
    width: 12%;
    height: 100%;
    padding: 6px ;
    margin: 2px;
    text-align: center;
}

.calendar-body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: auto;
}

.day-ghost {
    width: 12%;
    height: 16px;
    line-height: 16px;
    padding: 8px 0;
    margin: 2px;
    text-align: center;
    background: rgb(237,237,237);
    color: rgba(80,80,80,0.8);
    cursor: default;
}

.day-select {
    width: 12%;
    height: 16px;
    line-height: 16px;
    padding: 8px 0;
    margin: 2px;
    text-align: center;
    transition: all 0.2s ease-in;
}

.day-select:hover {
    cursor: pointer;
    background: rgb(165,25,31);
    color: #fff;
}

.active-day {
    background: rgb(165,25,31);
    color: #fff;
}