@import '~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css';

.ui-datepicker {
  // z-index is set inline by datepicker, gets covered by nav
  z-index: $z-high !important;
}

/* timepicker add-on
----------------------------------*/

.ui-timepicker-div .ui_tpicker_time {
  display: none;
}

.ui-timepicker-div .ui_tpicker_time_label {
  display: block;
  float: none;
  background: #DDD;
  border: 1px solid #DDD;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
  font-weight: bold;
}

.ui-timepicker-div {
  background: #fff;
}

.ui-timepicker-div .ui-widget-header {
  margin-bottom: 8px;
}

.ui-timepicker-div dl {
  background: #F6F6F6;
  text-align: left;
  padding-bottom: 5px;
  margin: 5px 0;
}

.ui-timepicker-div dl dt {
  float: left;
  clear:left;
  padding: 0 0 0 5px;
}

.ui-timepicker-div dl dd {
  margin: 0 10px 10px 25%;
}

.ui-timepicker-div td {
  font-size: 90%;
}

.ui-tpicker-grid-label {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.ui-timepicker-rtl{
  direction: rtl;
}

.ui-timepicker-rtl dl {
  text-align: right;
  padding: 10px 5px 0 0;
}

.ui-timepicker-rtl dl dt{
  float: right;
  clear: right;
}

.ui-timepicker-rtl dl dd {
  margin: 0 25% 10px 10px;
}

.ui-datepicker-calendar thead tr th {
  font-size: 14px;
}

.ui-datepicker-calendar tbody tr td,
.ui-datepicker-calendar tbody tr:nth-child(odd) td,
.ui-datepicker-calendar tbody tr:hover td {
  background: #fff;
}

.ui_tpicker_hour_label,
.ui_tpicker_minute_label,
.ui_tpicker_second_label {
  font-weight: bold;
  font-size: 14px;
}


/*! jQuery UI - v1.9.2 - 2013-12-11
* http://jqueryui.com
* Includes: jquery.ui.core.css,
jquery.ui.datepicker.css,
jquery.ui.slider.css,
jquery.ui.theme.css
* To view and modify this theme,
visit http://jqueryui.com/themeroller/?ffDefault=Helvetica%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=2px&bgColorHeader=dddddd&bgTextureHeader=highlight_soft&bgImgOpacityHeader=50&borderColorHeader=dddddd&fcHeader=444444&iconColorHeader=0073ea&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=dddddd&fcContent=444444&iconColorContent=ff0000&bgColorDefault=f6f6f6&bgTextureDefault=highlight_soft&bgImgOpacityDefault=100&borderColorDefault=dddddd&fcDefault=0073ea&iconColorDefault=666666&bgColorHover=0073ea&bgTextureHover=highlight_soft&bgImgOpacityHover=25&borderColorHover=0073ea&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=dddddd&fcActive=ff0000&iconColorActive=454545&bgColorHighlight=ffffff&bgTextureHighlight=flat&bgImgOpacityHighlight=55&borderColorHighlight=cccccc&fcHighlight=444444&iconColorHighlight=0073ea&bgColorError=ffffff&bgTextureError=flat&bgImgOpacityError=55&borderColorError=ff0000&fcError=222222&iconColorError=ff0000&bgColorOverlay=eeeeee&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0px
* Copyright 2013 jQuery Foundation and other contributors;
  Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  zoom: 1;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter:Alpha(Opacity=0);
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none;
}

.ui-datepicker-header {
  position:relative;
  margin-bottom: 20px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  position:absolute;
  top: 6px;
  width: 1.8em;
  height: 1.8em;
  z-index: 1;

  &:after {
    color: $blue;
    font: normal 20px/1 FontAwesome;
  }

  &.ui-state-hover {
    border: none;
    background: transparent;
  }
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;

  &:after {
    content: "\f104";
  }
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
  text-align: right;

  &:after {
    content: "\f105";
  }
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: none;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
  font-size:1em;
  margin:1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 49%;
}

.ui-datepicker-year {
  font-weight: normal;
}

.ui-datepicker tr,
.ui-datepicker td {

  &,
  &:first-of-type:not(:only-child),
  &:last-of-type:not(:only-child) {
    padding: 0;
  }

  &:hover {
    background: none;
  }
}

.ui-datepicker td span,
.ui-datepicker td a {
  padding: 7px;
}

.ui-datepicker-calendar thead {
  border: none;
}

.ui-datepicker table {
  border: none;
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.ui-datepicker th {
  color: $gray;
  text-align: center;
  font-weight: bold;
  border: 0;

  &,
  &:first-of-type:not(:only-child),
  &:last-of-type:not(:only-child) {
    padding: .7em .3em;
  }
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 9px;
  text-align: center;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding:0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width:auto;
  overflow:visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float:left;
}

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    position: absolute;
  /*must have*/
    z-index: -1;
  /*must have*/
    filter: mask();
  /*must have*/
    top: -4px;
  /*must have*/
    left: -4px;
  /*must have*/
    width: 200px;
  /*must have*/
    height: 200px;
  /*must have*/
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider-horizontal {
  height: .8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: .8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-left: 0;
  margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-state-highlight {
  background-color: $blue;
  color: $white;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 1.1em;
}
.ui-widget .ui-widget {
  font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 1em;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: none;
  background: $gray-light;
  color: $black;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  color: $black;
  text-decoration: none;
}

.ui-state-hover,
.ui-state-active,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: $blue;
  font-weight: bold;
  color: $white;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
  color: $white;
  text-decoration: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: $blue;
  font-weight: bold;
  color: $white;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: $white;
  text-decoration: none;
}

.ui-widget-content.ui-slider {
  background: $gray-light;
  border: none;
  height: 7px;
}

.ui-slider-handle.ui-state-default {
  background-color: $blue;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;

  &:focus {
    outline: none;
  }
}

.ui-timepicker-div .ui_tpicker_time_label,
.ui-timepicker-div dl {
  border: none;
  background: $white;

  .timezone {
    font-weight: normal;
  }
}

.ui-timepicker-div dl dd.ui_tpicker_hour {
  margin-bottom: 20px;
}

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 2px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 2px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 2px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 2px;
}

/* Overlays */
.ui-widget-overlay {
  background: #eeeeee;
  opacity: .8;
  filter:Alpha(Opacity=80);
}

.ui-widget-shadow {
  margin: -4px 0 0 -4px;
  padding: 4px;
  background: #aaaaaa;
  opacity: .6;filter:Alpha(Opacity=60);
  border-radius: 0px;
}
