@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);.dtime {
  font-family: 'Titillium Web', sans-serif;
}
.dtime__input {
  padding: 0px 0px 0px 5px;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  line-height: 31px;
}
.dtime__digit {
  padding: 4px 2px;
}
.dtime__digit._state_selected {
  background-color: rgba(66,139,202,0.24);
}
.dtime__field {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 2px;
  outline: none;
}
.dtime__sep {
  font-style: normal;
  color: #999;
}
.dtime__sep._gap {
  padding: 0 0.1em;
}
.dtime__actions {
  display: inline-block;
  vertical-align: bottom;
}
.dtime__action {
  padding: 9px;
  border-left: 1px solid #ddd;
  background-color: #eee;
  color: #444;
  cursor: pointer;
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: bottom;
}
.dtime__action:active {
  background-color: #d9d9d9;
}
.dtime__arrows {
  display: inline-block;
  vertical-align: bottom;
  padding-left: 5px;
}
.dtime__arrow {
  display: block;
  border-left: 1px solid #ddd;
  background-color: #eee;
  color: #444;
  padding: 2px;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  cursor: pointer;
  width: 11px;
  height: 11px;
}
.dtime__arrow:active {
  background-color: #d9d9d9;
}
.dtime__arrow._state_disabled {
  opacity: 0.5;
}
.dtime .dtcalendar {
  padding: 3px;
  position: absolute;
  z-index: 10;
  top: 40px;
  left: 9px;
  border: 1px solid #ddd;
  box-shadow: 1px 4px 10px 0px rgba(189,189,189,0.3);
  border-collapse: collapse;
  background-color: #fff;
  width: 200px;
  display: block;
  border-radius: 2px;
}
.dtime .dtcalendar__header {
  text-align: center;
  padding-top: 4px;
}
.dtime .dtcalendar__header-el {
  cursor: pointer;
}
.dtime .dtcalendar__header-separator {
  padding: 0 5px;
  color: #333;
}
.dtime .dtcalendar .currDay {
  background-color: #ffeab9 !important;
}
.dtime .dtcalendar .weekEnd {
  color: #f5472e;
}
.dtime .dtcalendar.show-left {
  right: 5px;
  left: auto !important;
}
.dtime .dtcalendar.show-bottom:before,
.dtime .dtcalendar.show-top:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0,0,0,0.2);
  content: '';
  top: -7px;
  left: 6px;
  display: inline-block;
  position: absolute;
}
.dtime .dtcalendar.show-bottom:after,
.dtime .dtcalendar.show-top:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  content: '';
  top: -6px;
  left: 7px;
  display: inline-block;
  position: absolute;
}
.dtime .dtcalendar.show-top {
  bottom: 0;
}
.dtime .dtcalendar__table {
  display: block;
}
.dtime .dtcalendar th {
  padding: 3px;
  font-weight: normal;
  color: #888;
}
.dtime .dtcalendar td {
  text-align: center;
  margin: 0 !important;
  height: 23px;
  width: 23px;
}
.dtime .dtcalendar td:hover {
  background-color: #e3e3e3 !important;
  cursor: pointer !important;
}
.dtime .dtcalendar td:empty {
  border: none !important;
  background-color: #fff !important;
  height: 0;
}
.dtime .dtcalendar td:empty:hover {
  cursor: default !important;
  background-color: #fff;
}
.dtime .dtcalendar td.selected {
  background-color: #609bce !important;
  color: #fff;
  cursor: default;
}
.dtime .dtcalendar td.selected:hover {
  background-color: #357ebd !important;
}
.dtime .month-year-grid {
  position: absolute;
  bottom: 0;
  height: calc(100% - 30px);
  background-color: #fff;
  overflow: hidden;
}
.dtime .month-year-grid__el {
  height: 33.33%;
  width: 25%;
  display: inline-block;
  text-align: center;
  line-height: 3.7em;
  cursor: pointer;
}
.dtime .month-year-grid__el.is-active {
  background-color: #609bce !important;
}
.dtime .month-year-grid__el.is-current {
  background-color: #ffeab9;
}
.dtime [class^="icon-"]:before,
.dtime [class*=" icon-"]:before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #000;
}
.dtime .icon-calendar:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJjYWxlbmRhcl8xXyI+PHBhdGggZD0iTTI5LjMzNCwzSDI1VjFjMC0wLjU1My0wLjQ0Ny0xLTEtMXMtMSwwLjQ0Ny0xLDF2MmgtNlYxYzAtMC41NTMtMC40NDgtMS0xLTFzLTEsMC40NDctMSwxdjJIOVYxICAgYzAtMC41NTMtMC40NDgtMS0xLTFTNywwLjQ0Nyw3LDF2MkgyLjY2N0MxLjE5NCwzLDAsNC4xOTMsMCw1LjY2NnYyMy42NjdDMCwzMC44MDYsMS4xOTQsMzIsMi42NjcsMzJoMjYuNjY3ICAgQzMwLjgwNywzMiwzMiwzMC44MDYsMzIsMjkuMzMzVjUuNjY2QzMyLDQuMTkzLDMwLjgwNywzLDI5LjMzNCwzeiBNMzAsMjkuMzMzQzMwLDI5LjcwMSwyOS43MDEsMzAsMjkuMzM0LDMwSDIuNjY3ICAgQzIuMjk5LDMwLDIsMjkuNzAxLDIsMjkuMzMzVjUuNjY2QzIsNS4yOTksMi4yOTksNSwyLjY2Nyw1SDd2MmMwLDAuNTUzLDAuNDQ4LDEsMSwxczEtMC40NDcsMS0xVjVoNnYyYzAsMC41NTMsMC40NDgsMSwxLDEgICBzMS0wLjQ0NywxLTFWNWg2djJjMCwwLjU1MywwLjQ0NywxLDEsMXMxLTAuNDQ3LDEtMVY1aDQuMzM0QzI5LjcwMSw1LDMwLDUuMjk5LDMwLDUuNjY2VjI5LjMzM3oiIGZpbGw9IiMzMzMzMzIiLz48cmVjdCBmaWxsPSIjMzMzMzMyIiBoZWlnaHQ9IjMiIHdpZHRoPSI0IiB4PSI3IiB5PSIxMiIvPjxyZWN0IGZpbGw9IiMzMzMzMzIiIGhlaWdodD0iMyIgd2lkdGg9IjQiIHg9IjciIHk9IjE3Ii8+PHJlY3QgZmlsbD0iIzMzMzMzMiIgaGVpZ2h0PSIzIiB3aWR0aD0iNCIgeD0iNyIgeT0iMjIiLz48cmVjdCBmaWxsPSIjMzMzMzMyIiBoZWlnaHQ9IjMiIHdpZHRoPSI0IiB4PSIxNCIgeT0iMjIiLz48cmVjdCBmaWxsPSIjMzMzMzMyIiBoZWlnaHQ9IjMiIHdpZHRoPSI0IiB4PSIxNCIgeT0iMTciLz48cmVjdCBmaWxsPSIjMzMzMzMyIiBoZWlnaHQ9IjMiIHdpZHRoPSI0IiB4PSIxNCIgeT0iMTIiLz48cmVjdCBmaWxsPSIjMzMzMzMyIiBoZWlnaHQ9IjMiIHdpZHRoPSI0IiB4PSIyMSIgeT0iMjIiLz48cmVjdCBmaWxsPSIjMzMzMzMyIiBoZWlnaHQ9IjMiIHdpZHRoPSI0IiB4PSIyMSIgeT0iMTciLz48cmVjdCBmaWxsPSIjMzMzMzMyIiBoZWlnaHQ9IjMiIHdpZHRoPSI0IiB4PSIyMSIgeT0iMTIiLz48L2c+PC9zdmc+");
}
.dtime .icon-cross:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xNy40NTksMTYuMDE0bDguMjM5LTguMTk0YzAuMzk1LTAuMzkxLDAuMzk1LTEuMDI0LDAtMS40MTRjLTAuMzk0LTAuMzkxLTEuMDM0LTAuMzkxLTEuNDI4LDAgIGwtOC4yMzIsOC4xODdMNy43Myw2LjI4NGMtMC4zOTQtMC4zOTUtMS4wMzQtMC4zOTUtMS40MjgsMGMtMC4zOTQsMC4zOTYtMC4zOTQsMS4wMzcsMCwxLjQzMmw4LjMwMiw4LjMwM2wtOC4zMzIsOC4yODYgIGMtMC4zOTQsMC4zOTEtMC4zOTQsMS4wMjQsMCwxLjQxNGMwLjM5NCwwLjM5MSwxLjAzNCwwLjM5MSwxLjQyOCwwbDguMzI1LTguMjc5bDguMjc1LDguMjc2YzAuMzk0LDAuMzk1LDEuMDM0LDAuMzk1LDEuNDI4LDAgIGMwLjM5NC0wLjM5NiwwLjM5NC0xLjAzNywwLTEuNDMyTDE3LjQ1OSwxNi4wMTR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iQ2xvc2UiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=");
}
.dtime .icon-angle-up:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB3aWR0aD0iMTc5MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTM5NSAxMTg0cTAgMTMtMTAgMjNsLTUwIDUwcS0xMCAxMC0yMyAxMHQtMjMtMTBsLTM5My0zOTMtMzkzIDM5M3EtMTAgMTAtMjMgMTB0LTIzLTEwbC01MC01MHEtMTAtMTAtMTAtMjN0MTAtMjNsNDY2LTQ2NnExMC0xMCAyMy0xMHQyMyAxMGw0NjYgNDY2cTEwIDEwIDEwIDIzeiIvPjwvc3ZnPg==");
}
.dtime .icon-angle-down:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB3aWR0aD0iMTc5MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTM5NSAxMTg0cTAgMTMtMTAgMjNsLTUwIDUwcS0xMCAxMC0yMyAxMHQtMjMtMTBsLTM5My0zOTMtMzkzIDM5M3EtMTAgMTAtMjMgMTB0LTIzLTEwbC01MC01MHEtMTAtMTAtMTAtMjN0MTAtMjNsNDY2LTQ2NnExMC0xMCAyMy0xMHQyMyAxMGw0NjYgNDY2cTEwIDEwIDEwIDIzeiIvPjwvc3ZnPg==");
  transform: rotate(180deg);
}