@media (max-width: 575.98px) {
}

@media (min-width: 576px) and (max-width: 767.98px) {
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .admin-ui-sidebar.admin-ui-collapse-sidebar .offcanvas-close{
    display: block;
  }
  .admin-ui-header-sec .navbar-collapse {
    display: flex;
    margin-top: 1em;
  }
  .ai-header-search-frame{
    width: 100%;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1440px) {
}

@media (max-width: 1199.98px) {
  .ai-tool-card-img {
    height: 16em !important;
    aspect-ratio: 1 / 2;
  }

  .ai-header-search-frame {
    min-width: 299px !important;
    margin-right: 1em !important;
  }
}

@media (max-width: 991.98px) {
  .resp-mrg-btm-md {
    margin-bottom: 2em;
  }

  .ai-home-grid-layout {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1em !important;
  }

  .ai-tool-card-img {
    height: 16em !important;
    aspect-ratio: 1 / 2;
  }

  .ai-text-image-types-frame,
  .ai-colorized-image-type-box,
  .ai-colorized-image-style-box,
  .ai-text-to-speech-box {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    justify-items: center;
    gap: 1em;
  }
}

@media (max-width: 991.98px) {
  .admin-ui-sidebar {
    display: none;
  }

  .admin-ui-sidebar.admin-ui-collapse-sidebar {
    position: fixed;
    z-index: 9999;
    top: 0;
  }

  .admin-ui-main-wrapper {
    margin-left: 0% !important;
  }

  .ai-auth-avater-frame {
    display: none !important;
  }

  .ai-auth-field-frame {
    padding: 1em;
    height: 100vh;
  }

  .ai-auth-field {
    max-width: 100%;
  }

  .admin-ui-collapse-btn {
    cursor: pointer;
    display: block !important;
  }

  .admin-ui-main-wrapper .admin-ui-header-sec {
    left: 0 !important;
  }

  .ai-content-wrapped {
    margin-top: 0 !important;
  }

  .ai-modal-check-card-img-sec,
  /* .ai-colorized-image-type-image-sec, */
  .ai-colorized-image-style-image-sec,
  .ai-text-to-speech-image-sec {
    width: 100%;
    height: 100%;
  }

  .admin-ui-header-sec {
    position: relative !important;
  }
}

@media (max-width: 767.98px) {
  .order-by {
    order: 1;
  }

  .admin-ui-collapse-sidebar {
    width: 80% !important;
  }

  .admin-ui-header-sec {
    padding: 0.5em 0.5em !important;
  }

  .admin-ui-collapse-sidebar .offcanvas-close {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .admin-ui-logo {
    max-width: 7em !important;
  }

  .admin-your-bot-list-header-sec {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 1em;
  }

  .admin-your-bot-list-header-right-sec {
    justify-content: center !important;
    align-items: center !important;
  }

  .admin-ui-sidebar.admin-ui-collapse-sidebar .offcanvas-close {
    display: flex;
  }

  .ai-home-grid-layout {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 1em !important;
  }

  .ai-content-wrapped {
    padding: 1em !important;
  }

  .ai-text-image-types-frame,
  .ai-colorized-image-type-box,
  .ai-colorized-image-style-box {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    justify-items: center;
    gap: 1em;
  }

  .ai-text-to-speech-box {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }

  .form-action-frame {
    flex-direction: column;
  }

  .form-action-frame button,
  .ai-text-to-speech-recent-generations-header-right-sec button,
  .ai-text-to-speech-recent-generations-info-sec {
    width: 100%;
  }

  .ai-image-upload-box {
    min-width: 100% !important;
  }

  .ai-page-tile-frame h2 {
    font-size: 1em !important;
  }

  .ai-colorized-image-type-info h4,
  .ai-modal-check-card-info h4 {
    font-size: 0.8em !important;
  }

  .ai-text-to-speech-recent-generations-header-sec {
    flex-direction: column;
    gap: 1em;
  }

  .ai-text-to-speech-recent-generations-card {
    flex-direction: column;
    gap: 1em;
    padding: 1em !important;
  }

  .ai-text-to-speech-recent-generations-header-right-sec {
    grid-template-columns: repeat(1, 1fr) !important;
    width: 100%;
  }

  .ai-text-to-speech-recent-generations-created-date-sec {
    padding: 0.5em !important;
    justify-content: center;
  }

  .ai-generated-card .ai-chat-card-content {
    padding: 1em !important;
  }

  .ai-chat-input-frame {
    padding: 1em 0 !important;
  }

  .ai-chat-main-frame {
    /* min-height: calc(100vh - 160px); */
    /* max-height: calc(100vh - 160px); */
    /* overflow: auto; */
  }

  .ai-recent-generated-card {
    padding: 1em !important;
  }

  .ai-recent-generated-card-main {
    padding: 1em 0 !important;
  }

  .ai-recent-generated-check p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }

  .ai-lang-success-frame,
  .ai-lang-success-card-body-info,
  .ai-lang-success-card-body-status,
  .ai-lang-success-card-body-action {
    padding: 1em !important;
  }

  .all-generation-header-sec {
    flex-direction: column;
  }

  .ai-settings-all-generation-box {
    grid-template-columns: repeat(1, 1fr);
    gap: 1em;
  }

  .ai-header-search-frame {
    min-width: 100% !important;
    margin-right: 0 !important;
    margin-top: 1em;
  }

  .how-its-work-box {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .how-its-work-inner-card {
    padding: 1em !important;
  }

  .generated-avater {
    width: 100% !important;
  }

  .ai-footer-media {
    flex-direction: column;
  }

  .ai-scrollery-overlay {
    bottom: 0 !important;
  }
  .ai-proifle-card {
    flex-direction: column;
  }
  .ai-profile-card-info {
    flex-direction: column;
    gap: 1em;
  }
  .ai-profile-secondary-box {
    grid-template-columns: repeat(1, 1fr);
  }
  .profile-account-user-img-edit-icon {
    left: 0;
  }
  .ai-profile-img-sec {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
  }
  .ai-writing-aids-box {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
  }
  .ai-writing-aids-card {
    padding: 1em;
  }
  .navbar-nav .dropdown-menu {
    width: 30%;
  }
  .user-dropdown-sec .dropdown-menu {
    margin-left: 0 !important;
    margin-top: .5em !important;
  }
  .user-dropdown-sec .dropdown-toggle {
    padding: 0;
    margin-top: 1em;
  }
}

@media (max-width: 575.98px) {
  .ai-recent-generated-card-bottom {
    flex-direction: column;
    gap: 1em;
  }

  .ai-recent-badge,
  .ai-recent-date-badge {
    width: 100%;
  }
}