@include export-module('cc-delivery-planning-overview-tile-layout') {
  @import "../../delivery-planning-overview-tile-settings-popup/style/material";
  .co-delivery-planning-overview-tile {
    &.disabled {
      opacity: 0.2;
    }



    display: flex;

    .footer-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      co-button {
        display: flex;
      }
    }

    .delivery-planning-overview-tile-wrapper {
      padding: 15px;
      border: 1px solid #DCE4EA;
      border-radius: 4px;
      width: 100%;

      &.selected {
        border: 1px solid rgba($color-action, 0.5);
      }
      .header-tile-wrapper {
        display: flex;
        justify-content: space-between;
        position: relative;
        flex-wrap: wrap;
        .header-title {
          display: flex;
          justify-content: flex-start;
          position: relative;
          align-items: center;
          gap: 5px;
          cursor: pointer;
          span {
            font-weight: bold;
            font-size: 14px;
          }
          co-icon {
            width: 20px;
            height: 20px;
          }
        }
        .truck-header-tile {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: end;
          gap: 0.5em;
          .co-icon {
            width: 30px;
            height: 30px;
            &.small{
              width: 20px;
              height: 20px;
            }
            path.fa-secondary {
              fill: #000;
              opacity: 0.2;
            }
            path.fa-primary {
              fill: #1a73e8;
            }
          }
        }
      }
      .tile-header-buttons {
        padding: 10px 0 0 0;
        width: 100%;
        display: flex;
        gap: 10px;
        justify-content: start;
        span {
          font-size: 12px;
        }
        .button-text {
          &.selected {
            color: #1A73E8;
            padding-bottom: 0.25em;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            width: fit-content;
          }
        }
      }
      .route-start-wrapper {
        background-color: #F5F5FA;
        padding: 10px;
        display: flex;
        flex-direction: row;
        gap: 1em;
        span {
          color: $color-action-accent;
          text-align: center;
        }
        .first-route, .second-route {
          border-right: 1px solid #6E7694;
          padding-right: 1em;
        }
      }
    }
    .co-hour-scheduling {
      padding: 15px 0;
      .time-block {
        .object-half {
          padding: 0;
          .co-delivery-planning-overview-tile-line {
            .planning-line-wrapper {
              padding: 5px;
            }
          }
        }
      }
    }
    .co-hour-scheduling-expandable {
      .scheduled-objects {
        .co-hour-scheduling-expandable-template {
          .custom-scheduled-object {
            .planning-line-wrapper {
              background: transparent;
              &.active-lines {
                background: #F5F5FC;
              }
            }
          }
        }
      }
    }
  }
}
