@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.ant-tabs-content{
    margin-top: $CAP_SPACE_16;
    .ant-tabs-tabpane-active{
      padding: unset;
    }
  }
//removing current one as not required now in each row we'll have 3 cards for which css has been added

// 3 cards per row across all breakpoints
.creatives-templates-list {
  .v2-pagination-container,
  .v2-pagination-container-half {
    .cap-custom-card-list-row {
      .cap-custom-card-list-col {
        width: calc(33.33% - #{$CAP_SPACE_08});
        margin-right: $CAP_SPACE_12;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
}

.creatives-templates-list {
  position: relative;

  .archive-listing-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: $CAP_SPACE_08;
    background: $CAP_WHITE;
    padding: $CAP_SPACE_08 $CAP_SPACE_16;
    border-radius: $CAP_SPACE_08;
    z-index: 10;
  }

  .delete-template-confirm {
    .ant-modal-footer {
      padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
    }

    .ant-modal-header {
      padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
    }

    .ant-modal-body {
      padding: 0 $CAP_SPACE_24;
    }

    .ant-modal-close-x {
      padding: $CAP_SPACE_12;
    }
  }

  .v2-pagination-container {
    .FACEBOOK {
      .ant-card-body {
        background-color: $CAP_G09;
        height: 320px;
      }
    
      &.no-image .ant-card-meta {
        height: 276px;
        background: $CAP_WHITE;
        padding: $CAP_SPACE_16 $CAP_SPACE_12;
    
        .ant-card-meta-description {
          height: 222px;
        }
      }

      &.carousel-img-section {
        .ant-card-body {
          padding: $CAP_SPACE_24 0;
        }
        .ant-card-meta-description {
          height: 250px;
        }
        .ant-card-meta {
          padding: 0;
        }
      }
    }
    .LINE {
      .ant-card-body {
        background-color: $CAP_G09;
        height: 320px;
      }
    
      &.no-image .ant-card-meta {
        height: 276px;
        background: $CAP_WHITE;
        padding: $CAP_SPACE_16 $CAP_SPACE_12;
    
        .ant-card-meta-description {
          height: 250px;
          word-wrap: break-word;
        }
      }

      &.carousel-img-section {
        .ant-card-body {
          padding: $CAP_SPACE_24 0;
        }
        .ant-card-meta {
          padding: 0;
        }
      }
    }
    .VIBER {
      &.cap-custom-card{
        height: 21.125rem;
        .ant-card-body {
         padding:0px 24px 0px;
          .button-content {    
            .ant-card-meta-description {
                min-width: 108px;
                max-width: 215px;
                height: 24px;
                padding: 2px 0px;
                border-radius: 16px;
                font-size: 14px;
                font-weight: 500;
                background-color:$CAP_PURPLE01;
                color:$CAP_WHITE;
                text-align:center;
            }
          }
          .truncate-text-viber{
            .ant-card-meta-description{
              display: -webkit-box;
              -webkit-line-clamp: 13;
              line-clamp: 13;
              -webkit-box-orient: vertical; 
            }
          }
          .truncate-text-with-button{
            .ant-card-meta-description{
            -webkit-line-clamp: 13;
            line-clamp: 13;
            }
          }
          .truncate-text-with-image{
            .ant-card-meta-description{
            -webkit-line-clamp: 3;
            line-clamp: 3;
            }
          }
        
        }
      
        &.no-image .ant-card-meta {    
          .ant-card-meta-description {
            word-wrap: break-word;
          }
        }
    
  
        &.carousel-img-section {
          .ant-card-body {
            padding: $CAP_SPACE_24 0;
          }
          .ant-card-meta {
            padding: 0;
          }
        }
    }

    }

    .WHATSAPP {
      .cap-custom-card {
        .ant-card-head {
          padding: $CAP_SPACE_16 !important;

          .ant-card-extra {
            margin: 1rem $CAP_SPACE_12 0 0 !important;
          }
        }
        .ant-card-body {
          .ant-card-meta {
            background-color: $CAP_G09;
            padding: 0;
            .ant-card-meta-description {
              .whatsapp-container {
                background-color: $CAP_WHITE;
                padding: $CAP_SPACE_12;
              }
              .scroll-container {
                overflow-x: auto;
                display: flex;
                padding-top: $CAP_SPACE_06;
                padding-right: $CAP_SPACE_06;
                white-space: nowrap;
                scrollbar-width: none; // Hide scrollbar in Firefox
                &::-webkit-scrollbar {
                  display: none; // Hide scrollbar in Chrome/Safari/Opera
                }
                overflow: hidden;
                .whatsapp-carousel-container {
                  padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
                  border-radius: $CAP_SPACE_06;
                  background-color: $CAP_WHITE;
                  width: 80%;
                  flex-shrink: 0;
                  margin-right: $CAP_SPACE_04;
                  white-space: pre-wrap;
                  word-break: break-word;
                  overflow: auto;
                  text-align: left;
                  .whatsapp-carousel-card {
                      margin: $CAP_SPACE_02 $CAP_SPACE_06 $CAP_SPACE_01 $CAP_SPACE_08;
                      .whatsapp-carousel-body {
                        margin-bottom: $CAP_SPACE_08;
                      }
                  }
                }
              }
            }
          }
        }
      }
    }

    .ZALO {
      .cap-custom-card {
        .ant-card-head {
          padding: $CAP_SPACE_16 !important;

          .ant-card-extra {
            margin: 1rem $CAP_SPACE_12 0 0 !important;
          }
        }
      }
    }

    .RCS {
      .cap-custom-card {
        .ant-card-head {
          padding: $CAP_SPACE_16 !important;

          .ant-card-extra {
            margin: 1rem $CAP_SPACE_12 0 0 !important;
          }
        }
      }
    }

    .MOBILEPUSH {
        .ant-card-body {
          padding: 0;
          background-color: $CAP_WHITE;
          border-top: 1px solid $CAP_COLOR_16;
          .ant-card-meta {
            background-color: $CAP_G09;
            .ant-card-meta-description {
              .mobilepush-container {
                background-color: $CAP_WHITE;
                padding: $CAP_SPACE_12;
                .app-header {
                  color: #5D5D5D;
                  font-weight: 600;
                  padding: 0.285rem 0.571rem 0.285rem 0.571rem;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .app-header-left{
                    display: flex;
                    align-items: center;
                    div {
                      word-break: break-word;
                    }
                    .app-icon {
                      width: 0.857rem;
                      height: 0.857rem;
                      border-radius: 50%;
                      background-color: #737070;
                    }
                  }
                }
                .mobilepush-message {
                  padding-left: 1.65rem;
                }
                .mobilepush-image {
                  width: 100%;
                  height: 120px;
                  margin-top: 10px;
                }
                .mobilepush-image-padding {
                  padding-left: 1.65rem;
                }
                .scroll-container {
                  overflow-x: auto;
                  display: flex;
                  padding-top: $CAP_SPACE_06;
                  padding-right: $CAP_SPACE_06;
                  white-space: nowrap;
                  scrollbar-width: none; // Hide scrollbar in Firefox
                  &::-webkit-scrollbar {
                    display: none; // Hide scrollbar in Chrome/Safari/Opera
                  }
                  overflow: hidden;
                  height: 100%;
                  width: 100%;
                  margin-left: 1.65rem;
                  .whatsapp-carousel-container {
                    padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
                    border-radius: $CAP_SPACE_06;
                    background-color: $CAP_WHITE;
                    width: 80%;
                    flex-shrink: 0;
                    white-space: pre-wrap;
                    word-break: break-word;
                    overflow: auto;
                    text-align: left;
                    margin: 0;
                    .whatsapp-carousel-card {
                        margin: $CAP_SPACE_02 $CAP_SPACE_02 $CAP_SPACE_01 $CAP_SPACE_02;
                        .whatsapp-carousel-body {
                          margin-bottom: $CAP_SPACE_08;
                        }
                    }
                  }
                }
                .actions{
                  background-color: #ffffff;
                  height: auto;
                  padding: $CAP_SPACE_08;
                  text-align: center;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  gap: $CAP_SPACE_08;
                  .action{
                    font-size: $FONT_SIZE_S;
                    font-weight: 600;
                    color: #1970DA;
                    height: 1.25rem;
                  }
                }
              }
            }
          }
        }
      }
    .INAPP {
      margin-bottom: $CAP_SPACE_12;
      .inapp-container {
        margin-top: $CAP_SPACE_24;
      }
      // Modal Layout - centered
      .inapp-modal-layout {
        position: absolute;
        display: flex;
        width: 12rem;
        top: 10%;
        left: 10%;
        bottom: 5%;
        overflow: hidden;
        background-color: $CAP_WHITE;
        border-radius: $CAP_SPACE_08;
    }
    
    // Full Screen Layout
    .inapp-fullscreen-layout {
      position: absolute;
      display: flex;
      width: 12rem;
      left: 10%;
      top: 1%;
      bottom: 1%;
      overflow: hidden;
      background-color: $CAP_WHITE;
      border-radius: $CAP_SPACE_08;
    }
    
    // Top Banner Layout
    .inapp-top-banner-layout {
      position: absolute;
      display: flex;
      width: 12rem;
      left: 10%;
      top: 1%;
      bottom: 20%;
      overflow: hidden;
      background-color: $CAP_WHITE;
      border-radius: $CAP_SPACE_08;
    }
    
    // Bottom Banner Layout
    .inapp-bottom-banner-layout {
      position: absolute;
      display: flex;
      justify-content: center;
      width: 12rem;
      left: 10%;
      top: 50%;
      bottom: 2%;
      overflow: hidden;
      background-color: $CAP_WHITE;
      border-radius: $CAP_SPACE_08;
    }
    }

    .EMAIL {
      .ant-card-body {
        height: 9.214rem;
        padding-top: 0;
      }
    }
  }

  .WEBPUSH {
    .cap-custom-card {
      .ant-card-body {
        height: 19rem;
        padding: $CAP_SPACE_16;
        overflow: hidden;

        .ant-card-meta {
          height: 100%;
          
          .ant-card-meta-description {
            height: 100%;
            display: flex;
            flex-direction: column;

            .sms-template-content.webpush-template-content {
              height: 100%;
              overflow: hidden;

              .webpush-template-card {
                height: 100%;
                overflow: hidden;

                .webpush-template-meta {
                  flex-shrink: 0;
                }

                .webpush-template-text {
                  flex: 1;
                  min-height: 0;
                  overflow: hidden;
                }

                .webpush-media-image {
                  max-height: 7.142rem;
                  flex-shrink: 0;
                }

                .webpush-template-cta-section {
                  flex-shrink: 0;
                  margin-top: $CAP_SPACE_08;
                  padding-top: $CAP_SPACE_08;
                  border-top: 1px solid $CAP_G07;
                }
              }
            }
          }
        }
      }
    }

    .cap-custom-card.has-hover-option:hover {
      .sms-template-content.webpush-template-content {
        opacity: 0.2;
      }
    }

    &.no-image .ant-card-meta {
      background: $CAP_WHITE;
      padding: $CAP_SPACE_16;

      .ant-card-meta-description {
        height: 100%;
      }
    }
  }

  .create-new-link{
    .ant-anchor-link {
      display: flex;

      .ant-anchor-link-title {
        margin: 0;
      }

      .cap-link-v2-suffix {
        margin-top: -2px;
      }
    }
  }
}

.card-title {
  line-height: 24px;
  font-size: 14px;
  text-align: left;
  color: #333333;
  font-family: Open-Sans;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-detail{
  text-align: left;
  color: #333333;
  font-family: Open-Sans;
  line-height: 16px;
  font-size: 12px;
  opacity: 1;
}

.sms-template-content{
    text-align: left;
    color: #333333;
    font-family: Open-Sans;
    line-height: 24px;
    font-size: 14px;
    padding: 16px;
    opacity: 0.88;
    height: inherit;
    width: 100%;
}

.sms-template-content.webpush-template-content {
  padding: 0;
  // Font-family override: needed when used in library mode where parent repo's root font-family differs
  font-family: 'Roboto', open-sans, sans-serif;
}

.webpush-template-card {
  display: flex;
  flex-direction: column;

  .webpush-template-meta {
    display: flex;
    align-items: flex-start;
    gap: $CAP_SPACE_08;
  }

  .webpush-brand-icon,
  .webpush-brand-icon-placeholder {
    width: $CAP_SPACE_20;
    height: $CAP_SPACE_20;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
  }

  .webpush-brand-icon-placeholder {
    background-color: $CAP_G07;
  }

  .webpush-template-text {
    display: flex;
    flex-direction: column;
    gap: $CAP_SPACE_04;
    width: 100%;
  }

  .webpush-template-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: $CAP_SPACE_08;
  }

  .webpush-template-title {
    width: 1px; // Required for text truncation with flex: 1
    font-weight: 600;
    color: $CAP_G02;
    font-size: $FONT_SIZE_S;
    line-height: $CAP_SPACE_16;
    word-break: break-word;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webpush-template-time {
    color: $CAP_G04;
    font-size: $FONT_SIZE_VS;
    line-height: $CAP_SPACE_16;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .webpush-template-message {
    color: $CAP_G04;
    font-size: $FONT_SIZE_S;
    line-height: $CAP_SPACE_16;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .webpush-media-image {
    width: 100%;
    height: auto;
    max-height: 8.571rem;
    border-radius: $CAP_SPACE_08;
    object-fit: cover;
    margin-top: $CAP_SPACE_04;
  }

  .webpush-template-cta-section {
    display: flex;
    margin-top: $CAP_SPACE_08;
    padding-top: $CAP_SPACE_08;
    width: 100%;

    &.single-cta {
      justify-content: center;

      .webpush-template-cta-item {
        flex: 0 1 auto;
      }
    }

    .webpush-template-cta-item {
      flex: 1;
      padding: 0 $CAP_SPACE_08;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .webpush-template-cta-item + .webpush-template-cta-item {
      border-left: 1px solid $CAP_G07;
    }

    .webpush-template-cta-text {
      font-weight: 600;
      font-size: $FONT_SIZE_VS;
      line-height: 1rem;
      color: $CAP_G02;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }
  }
}

.footer-container{
  padding: 8px 0 8px 16px;
}

.options-icon{
  font-size: 16px;
}

.template-header{
  font-size: 24px;
  line-height: 32px;
  font-family: proxima-nova, sans-serif;
  font-style: normal;
  font-weight: 600;
  flex: 1;
  color: #323B4E;
}

.template-header-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-font{
  text-align: left;
  color: #000000;
  font-family: Open-Sans;
  line-height: 24px;
  font-size: 14px;
}

.action-container{
  margin-top: 8px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popover-action-container:hover{
  background-color: #ecf6fd;
}

.popover-content{
  font-size: 14px;
}

.popover-action-container {
  line-height: 24px;
}

.sms-text, .mobilepush-message{
  height: 100%;
  overflow: hidden;
  word-wrap: break-word;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
}
.sms-text-blurred{
  opacity: 0.2;
}

.edit-button{
  position: absolute;
  top: 29.33%;
  left: 33.625%;
  width: 33%;
}

.select-button{
  position: absolute;
  top: 40.33%;
  left: 33.625%;
  width: 33%;
}

.preview-button{
  position: absolute;
  top: 43%;
  left: 33.5%;
  width: 33%;
}

.template-name{
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85%;
}

.select-account {
  min-width: 158px;
  width: 200px;
  border: none;
  font-size: 24px;
  line-height: 32px;
  &.ant-radio-group.cap-radioCard-v2.smallRadioCard .ant-radio-button-wrapper {
    border: 1px solid $CAP_G07;
    &.ant-radio-button-wrapper-checked {
      border-color: map-get($CAP_PRIMARY, base);
    }
  }
  .ant-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: -8px;
    .radio-card-header div {
      font-weight: normal;
    }
  }
  .radio-card-content-container {
    position: relative;
    top: 4px;
  }
}


#blankTemplate {
  .content-wrapper {
    height: 310px;

    .sms-template-content{
      cursor: pointer;

      .sms-text, .mobilepush-message {
        text-align: center;
        line-height: 260px;
        font-family: proxima-nova;
        font-weight: 600;
        font-size: 16px;
      }
    }
  }
  .seperator-line {
    display: none;
  }
  .footer-wrapper {
    display: none;
  }
}
.mobilepush-message{
  .message-pop{
    // width: initial;
    top: 0;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 4px;
    color: #FFFFFF;
    width: 70%;
    min-height: 26px;
    line-height: 14px;
    font-size: 10px;
    font-family: 'open-sans';
    max-height: 246px;
    overflow: hidden;
  }
  .android-push-message-Container, .iphone-push-message-Container{
    height: 336px;
    overflow: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    .message-pop{
      // width: initial;
      overflow: auto;
      word-wrap: break-word;
      white-space: pre-wrap;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      max-height: 100%;
      width: 100%;
      min-height: 26px;
      line-height: 16px;
      font-size: 10px;
      .body-image{
        img{
          max-width: 18.75rem;
          max-height: 128px;
          display: block;
          margin: auto;
        }
      }
    }
  }
  .android-push-message-Container{
    .title, .body-text, .body-image, .app-name{
      background-color: #FFFFFF;
      color: #333333;
    }
    .app-name{
      color: #707070;
      font-weight: 600;
      padding: 8px 8px 4px 8px;
    }
    .body-image{
      padding: 0 8px 0 8px;

    }
    .body-text{
      padding: 0 8px 4px 8px;
      color: #5a5959;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .title{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 8px 0 8px;
      font-weight: 600;
    }
    .actions{
      background-color: $CAP_WHITE;
      height: 32px;
      padding: 4px;
      .action{
        line-height: 24px;
        font-size: 10px;
        font-weight: 600;
        color: #1970DA;
        height: 12px;
        margin-left: 8px;
      }
    }
  }
  .iphone-push-message-Container{
    top: 10%;
    .message-pop{
      border-radius: 4px;
      word-wrap: break-word;
    }
    .title, .body-text, .body-image, .app-name{
      background-color: #FFFFFF;
      color: #333333;
    }
    .body-image{
      padding-top: 8px;
    }
    .title{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 600;
    }
    .app-name{
      padding: 8px;
      color: #707070;
      font-weight: 600;
      border-bottom: solid 1px #D6D6D6;
      .material-icons{
        font-size: 12px;
        float: right;
      }
    }
    .title, .body-text{
      padding: 4px 8px 4px 8px;
    }
    .body-text{
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .actions{
      background-color: #FFFFFF;
      opacity: 0.8;
      height: 32px;
      line-height: 26px;
      text-align: center;
      .action{
        font-size: 12px;
        color: $CAP_BLUE01;
        font-weight: 600;
        text-align: center;
        margin-left: 8px;
      }
    }
  }
}
.mobilepush-templates{
  .content-wrapper {
    overflow: hidden;
    background-image: url("https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/1720b7f7e78860c1f905.svg");
  }
}
.v2-pagination-container-half{
  height: calc(100vh - 20rem);
  overflow-y: auto;
  overflow-x: hidden;
}
.message-container{
  border-bottom: solid 0.5px #D6D6D6;
}

.main-content{
  overflow: hidden;
}

.wechat-filters,
.line-filters {
  width: 100%;
  padding-left: 12px;
  padding-bottom: 16px;
  .ant-radio-button-wrapper {
    line-height: 32px;
    border-radius: 16px;
    margin-right: 8px;
    text-align: center;
    border: solid 1px #9e9d87;
    padding: 8px 16px;
  }
  .ant-radio-button-wrapper:not(:first-child)::before {
    display: none;
  }
  .ant-radio-button-wrapper-checked {
    background-color: #ecece7;
    border: 0px white;
    box-shadow: none;
  }
}

.whatsapp-filters,
.zalo-filters,
.inapp-filters {
  display: flex;
  width: 100%;
  padding-left: 8px;
  padding-bottom: 16px;
  .cap-select-filter-v2 {
    margin: 0 8px;
  }
}

.zalo-listing-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  &.desc{
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
}

.selected-whatsapp-filters {
  margin-top: -16px;

  .cap-tag-v2{
    font-size: 12px;
    color: $CAP_G04;
    white-space: pre-wrap;
  }

  .ant-anchor-link-title {
    font-size: 12px;
  }
}

.illustration-desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  margin: 8px 0;
  white-space: pre-wrap;
}
.rcs-illustration{
  width: 25%;
  margin: 0 auto;
  text-align: center;
}
.zalo-illustration{
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.cap-illustration {
  .cap-illustration__title.cap-heading,
  .cap-illustration__title {
    text-align: center !important;
  }
}
.inapp-illustration {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
.inapp-illustration-button {
  display: none;
}
.channel-specific-illustration-text{
  text-align: center;
  margin-top: $CAP_SPACE_44;
}
.whatsapp-image{
  width: 100%;
  max-height: 123px;
  margin-bottom: 4px;
}
.viber-image{
  width: 100%;
  max-height: 11rem;
  margin-bottom: $CAP_SPACE_04;
}
.whatsapp-doc {
  width: 100%;
  max-height: 123px;
  margin-bottom: 4px;
  .pdf-img-box {
    width: 100%;
    margin: auto;
    .pdf-preview-img {
      width: 100%;
    }
  }
  .pdf-label{
    width: 100%;
    margin: auto;
  }
}
.whatsapp-rcs-template-name {
  max-width: 170px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.whatsapp-card-head-checkbox-wrapper {
  .ant-checkbox-wrapper {
    padding-top: 0.429rem;
  }
}

.zalo-template-name{
  max-width: 170px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: $CAP_G01;
  font-size: $FONT_SIZE_M;
  font-weight: $FONT_WEIGHT_MEDIUM;
  line-height: normal;
}

.zalo-view-tooltip {
  padding: $CAP_SPACE_06 $CAP_SPACE_12;
}

.zalo-illustration-button {
  display: none;
}

.whatsapp-message-with-media {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.whatsapp-message-without-media {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-preview {
  position: relative; 
}
.icon-position {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 0;
  top: 0;
}
.video-icon {
  position: absolute;
  right: -17px;
  bottom: -17px;
}
.inapp-illustration-parent {
  height: "calc(100vh - 325px)";
  overflow: 'auto';
}

// Archive feature layout classes
.illustration-scroll-wrapper {
  height: calc(100vh - 20.3125rem);
  overflow: auto;
}

.filter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 102%;
}

.filter-row-content {
  flex: 1;
}

.bulk-selection-bar {
  display: flex;
  align-items: center;
  gap: $CAP_SPACE_12;
  flex-shrink: 0;
  margin-right: $CAP_SPACE_32;

  .archive-template-button {
    column-gap: $CAP_SPACE_12;
    align-items: center;
  }
}

.archived-mode-header {
  display: flex;
  align-items: center;
  gap: $CAP_SPACE_12;
  margin-bottom: $CAP_SPACE_16;

  .archived-mode-back-icon {
    cursor: pointer;
    font-size: 1.428rem;
  }
}

.archived-tag {
  margin-left: $CAP_SPACE_08;
  font-size: 0.786rem;
}

.popover-archive-action {
  cursor: pointer;
  padding: $CAP_SPACE_08 0;
}

.archive-menu-item {
  display: inline-flex;
  align-items: center;
  gap: $CAP_SPACE_08;
  margin-top: 1rem;
}

.archive-btn-label {
  margin-right: 0.714rem;
}

.bulk-selection-bar .ant-btn.cap-button-v2 > .cap-button-v2-prefix + span {
  margin-left: -$CAP_SPACE_06;
}

.template-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $CAP_SPACE_08 $CAP_SPACE_12 0;
}

.template-listing-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: $CAP_SPACE_08;
  margin-right: $CAP_SPACE_32;
}

.template-listing-more-btn {
  padding-inline: $CAP_SPACE_20;
  min-width: auto;
}

.notification-template-label {
  color: $CAP_G04;
}

.notification-template-name {
  color: $CAP_G01;
}

.template-card-title {
  display: flex;
  align-items: center;
  min-width: 0;
  column-gap: $CAP_SPACE_12;

  .ant-checkbox-wrapper {
    padding-top: 0.429rem;
  }

  .cap-checkbox-v2 {
    flex-shrink: 0;
    margin-right: $CAP_SPACE_04;
    // Remove the empty label span's padding that antd Checkbox renders when no children are passed
    .ant-checkbox + span {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .template-card-name {
    font-weight: 500;
    font-size: $FONT_SIZE_L;
    color: $CAP_G01;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}
