@include export-module('cc-delivery-planning-layout') {
  @import "../../delivery-planning-main/style/material";
  .co-delivery-planning {
    position: relative;
    * {
      font-family: $font-family;
    }
    .row {
      display: flex;
      flex-direction: row;
      .wrapper {
        .delivery-main-wrapper {
          .co-delivery-planning-overview {
            .delivery-overview-wrapper {
              .tile-view-modes {
                top: 30px;
                right: 50px;
                .co-icon {
                  width: 35px;
                  height: 35px;
                }
              }
            }
          }
        }
      }
    }
    .co-delivery-planning-main {
      width: 100%;
      .wrapper {
        gap: 2em;
        .transactions-wrapper {
          .block {
            height: 1200px
          }
        }
        .delivery-main-wrapper{
          width: 100%;
          background: #FFF;
          padding: 30px 15px 0 15px;
        }
      }
      .planning-selection-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .options-wrapper {
          display: flex;
          position: absolute;
          flex-direction: column;
          z-index: 1;
          animation: slideIn 0.5s forwards;
          grid-row-gap: 10px;
          row-gap: 10px;
          padding: 10px;
          box-shadow: 0 0 3px 0 rgba(1, 1, 1, 0.5);
          border-radius: 0;
          background-color: #212437;
          top: 30px;
          overflow: auto;
          width: 100%;
          min-width: 180px;
          .option {
            color: #FFF;
            background: #2e3350;
            cursor: pointer;
            padding: 5px;
            font-size: 12px;
            &:hover {
              background: #e8eceb;
              color: #171721;
            }
            span {
              width: 100%;
              display: block;
            }
          }
        }
      }

      .co-delivery-planning-selection {
        .wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .co-delivery-planning-overview {
        .delivery-overview-wrapper {
          width: 100%;
          .tile-view-modes {
            position: absolute;
            top: 20px;
            right: 50px;
          }
          .block {
            flex: 1;
            margin: 1em;
            padding: 1em;

            .weekday-block{
              padding: 1em;
              margin-bottom: 2em;
              display: flex;
              align-items: center;
              justify-content: center;
              span {
                display: flex;
                font-weight: bold;
              }
              border: 1px solid #DEF8EF;
            }
          }
          .sc-agenda {
            .agenda-header-wrapper {
              padding: 0;
            }
            .hour-label-placeholder {
              position: absolute;
              top: 30px;
              border: none;
              .select-wrapper {
                display: flex;
                gap: 10px;
                .label {
                  background: #F5F5FA;
                  padding: 2px 5px;
                  font-size: 11px;
                  border-radius: 3px;
                  cursor: pointer;
                  &.active {
                    background: #1A73E8;
                    color: #FFF;
                  }
                }
              }
            }
          }
          &.cols-7, &.cols-5 {
            .weekday-value {
              flex-direction: column;
              line-height: normal;
              text-align: center;
              display: flex;
            }
          }
        }
      }
      .co-delivery-planning-overview-tile {
        .wrapper {
          padding: 0;
        }
      }
    }
  }
  @keyframes slideIn {
    from {
      height: 0;
    }
    to {
      height: 172px; /* Change this to the desired height */
    }
  }
}