web/frontend/src/app/views/virtual-scroll/scroller.css

.mobileDatePicker{
  display:flex;
}

.cdk-virtual-scroll-data-source-example {
  display: flex;
  height: 90px;
  width: 100%;
  max-width: 100%;
}


.cdk-virtual-scroll-data-source-example .example-viewport {
  height: 100%;
  width: 100%;
  padding-left: 0.5em;
  overflow-y:hidden;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

.cdk-virtual-scroll-data-source-example .example-viewport .cdk-virtual-scroll-content-wrapper {
  /* padding-left: 1.5em; */
  display: flex;
  flex-direction: row;
}

.cdk-virtual-scroll-viewport .example-viewport .cdk-virtual-scrollable .cdk-virtual-scroll-orientation-horizontal {
  padding-left: 1em;
}

.cdk-virtual-scroll-data-source-example .example-item {
  height: 100%;
  /* writing-mode: horizontal-tb; */
  margin-right: .2rem;
}

.item{
  margin:.5rem 0.2rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
  font-family: Lato;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 21px;
  width:60px;
  height:60px;
  /* border-radius:100%; */
  border-radius:10px;
  border: 1px solid rgba(204, 204, 204, 0.215);
  color:#00000043;
  transition: box-shadow .3s;
}

.item:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

.is-active{
 background: #3c4b64; 
 color: white !important;
}

.weekName {
  font-size:1rem;
  color:#3c4b64;
}

.is-active .weekName{
  font-size:1rem;
  color:#ffffff;
}

.month{
  padding: 0 1.5rem;
  background: #3c4b64;
  border-radius: 5px 0px 0px 5px;
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:30px !important;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

.monthIcon{
  margin-top:.2rem;
}