//@import "./src/App";
@import '../../../src/App';
.time-picker-component{
  position: absolute;
  //top: 10%;

  .title {
    width: 100%;
  }
  .labels{
    @include font-body-small;
  }
  .main{

    margin-top: 20px;
    @include font-display-medium;
    display: grid;
    align-items: start;
    grid-auto-flow: column;
    grid-template-columns: repeat( 4,max-content ) ;
    grid-gap: 12px;

    p{
      align-self: center;
      height: 72px;
      margin: 0;
    }

  }


  .footer{

    align-items: center;
    margin-bottom: 8px;
    svg{
      width: 1.5em;
      cursor: pointer;
    }
    margin-top: 24px;
    display: grid;
    grid-auto-flow: column;
    width: 100%;
    grid-template-columns: 1fr auto ;

  }
  .msg {
    @include font-body-small;
    align-self: end;
    margin: 1em 0;
  }
  #btns{

    display: grid;
    grid-auto-flow: column;
    grid-gap: .5em;
  }

}