.ds-date-input-control {
	width: 8rem;
	margin-right: 4px;
    position:relative;
}
.ds-date-input-title{
    color:#505d74;
    font-weight:bold;
    padding-bottom:4px;
}

.ds-date-input[type="text"]{
  all: initial;
  color: #282e3a;
  width: 100%;
  border: none;
  height: 2.5rem;
  margin: 0;
  outline: 0;
  padding: 0.5rem;
  font-size: 0.875rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  line-height: 1.25rem;
  border-radius: 3px 3px 0 0;
  background-color: #f7f9fa;
  -webkit-transition-property: box-shadow, border;
  transition-property: box-shadow, border;
  border:none;
  border-bottom:solid 2px grey;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzE4Mzc4MiI+PHBhdGggZD0iTTIwIDNoLTFWMWgtMnYySDdWMUg1djJINGMtMS4xIDAtMiAuOS0yIDJ2MTZjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE4SDRWOGgxNnYxM3oiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: right 8px top 45%;
  background-size: 20px;
}

.ds-date-input[type="text"]:focus{
    border-bottom:solid 2px #255fcc;
}
.ds-date-input[type="text"]:focus + .ds-datepicker-container,
.ds-date-input[type="text"]:hover + .ds-datepicker-container{
    display:block;
}
.ds-datepicker-container{
  position: absolute;
  width: 315px;
  height: 360px;
  display:none;
  z-index:10;
}
.ds-datepicker-container.show{
  display:block
}
.ds-datepicker-container.same-size{
  width: 100%;
  height:auto;
  padding-top: 114%;
}
.ds-datepicker-container.right{
    right:0px;
}
.ds-datepicker {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:white;
	display:grid;
	grid-template-columns: repeat( 7 , 1fr);
    grid-template-rows: repeat( 8 , 1fr);
    column-gap: 4px;
    row-gap: 4px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.14);
    padding:8px;
    z-index:10;
}
.ds-datepicker > div{
    text-align:center;
    color:#505d74;
    border-radius:3px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.ds-datepicker-prev:before,
.ds-datepicker-next:before{
  content:"";
  width:100%;height:100%;
  background-repeat:no-repeat;
  background-position: center;
  background-size:35px;
}
.ds-datepicker-prev:before{
   background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTE0LjcxIDYuNzFhLjk5Ni45OTYgMCAwMC0xLjQxIDBMOC43MSAxMS4zYS45OTYuOTk2IDAgMDAwIDEuNDFsNC41OSA0LjU5YS45OTYuOTk2IDAgMTAxLjQxLTEuNDFMMTAuODMgMTJsMy44OC0zLjg4Yy4zOS0uMzkuMzgtMS4wMyAwLTEuNDF6IiBmaWxsPSIjMTgzNzgyIi8+PC9zdmc+");  
}
.ds-datepicker-next:before{
   background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTkuMjkgNi43MWEuOTk2Ljk5NiAwIDAwMCAxLjQxTDEzLjE3IDEybC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxMDEuNDEgMS40MWw0LjU5LTQuNTlhLjk5Ni45OTYgMCAwMDAtMS40MUwxMC43IDYuN2MtLjM4LS4zOC0xLjAyLS4zOC0xLjQxLjAxeiIgZmlsbD0iIzE4Mzc4MiIvPjwvc3ZnPg==");
}
.ds-datepicker > div:not(.ds-datepicker-weekday):not(.ds-disable){
    cursor:pointer;
}
.ds-datepicker > div:not(.ds-disable):not(.ds-datepicker-weekday):hover{
    background: #f0f4f6; 
    color:#505d74;
}
.ds-datepicker > div:not(.ds-disable):not(.ds-datepicker-weekday):focus{
    border: solid 2px #255fcc;
    border-radius:0px;
}
.ds-datepicker > div.ds-selected:not(.ds-disable):not(.ds-datepicker-weekday){
    background: #063b9e;
    color: #fff;
    font-weight:bold;
}
.ds-datepicker-current {
	grid-column: 2 / 7;
    font-weight:bold;
}
div.ds-datepicker-weekday {
	grid-column: 1 / 8;
	display: grid;
	grid-template-columns: repeat(7 , 1fr);
    cursor:initial;
}
.ds-datepicker-weekday > div{
    text-align:center;
    color: #c1c7d3;
}
.ds-datepicker > .ds-today{
    border: solid 2px #063b9e;
    font-weight:bold;
    color:#063b9e;
}
.ds-datepicker .ds-disable,
.ds-datepicker .ds-out{
  color: #c1c7d3;
}
.ds-datepicker > .ds-disable{
    cursor:not-allowed;
}