/*!
Theme Name: chicagostarai
Theme URI: http://underscores.me/
Author: Bilal Khalid
Author URI: http://underscores.me/
Description: ChicagoStarAi is a custom WordPress theme based on starter theme called _s meticulously designed to offer a perfect blend of style and functionality. Built on an Advanced Custom Fields (ACF) block-based structure, it provides you with the flexibility to craft unique and dynamic content.  The theme features jQuery data tables for interactive and organized page listings, Bootstrap 5 for a modern and responsive design, and utilizes the WP-SCSS compile plugin for efficient and clean styling with SCSS. Notably, ChicagoStarAi streamlines the user experience by automatically creating and removing necessary pages upon activation and deactivation, respectively. The theme is developed to enhance the functionalities offered by chatgptrephraser, gmailapiconnector and rssfeedsfetcher plugins
Version: 1.0.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: chicagostarai
Tags: Custom Design, ACF Blocks, jQuery Data Tables, Bootstrap 5, WP-SCSS Compile Plugin, Flexible Content Creation, SCSS

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

chicagostarai is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


    .ck-editor__editable {
        height: 400px;
        overflow-y: auto;
    }

    .reset-button {
        display: flex;
        justify-content: right;
    }

    .editor-container,
    .result-box {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 30px;
    }

    .editor-box,
    .result {
        flex: 1 1 45%;
        min-width: 300px;
        box-sizing: border-box;
    }

    textarea {
        width: 100%;
        min-height: 200px;
        box-sizing: border-box;
        padding: 10px;
        font-size: 14px;
        resize: vertical;
    }

    /* .result {
        padding: 10px;
        background: #f9f9f9;
        border: 1px solid #ccc;
        white-space: pre-wrap;
    } */

    button {
        padding: 10px 20px;
        margin-top: 20px;
        background: #005194;
        color: #fff;
        font-weight: 600;
        border-radius: 8px;
        border: none;
        cursor: pointer;
    }

    .perplexityaicontent,
    .origionalcontent,
    .diffandsim {
        padding: 30px;
        border: 1px solid #bed5f3;
        border-radius: 8px;
    }

    .stats-container {
        display: flex;
        flex-wrap: wrap;
        margin-top: 30px;
        gap: 40px;
        justify-content: center;
    }

    .chart-section {
        flex: 0 0 320px;
        text-align: center;
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 8px;
    }

    .stat-boxes {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .stat-box {
        flex: 1;
        padding: 10px;
        margin: 5px;
        background: #f1f1f1;
        border-radius: 6px;
    }

    .stat-box strong {
        font-size: 24px;
        color: #222;
    }

    .sentence-section {
        flex: 1;
        max-height: 350px;
        overflow-y: auto;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .sentence-section h3 {
        text-align: center;
        margin-bottom: 10px;
    }

    .matched-list div {
        background: #fff;
        border: 1px solid #ccc;
        margin-bottom: 8px;
        padding: 8px;
        border-radius: 6px;
    }

    #matchedSentences {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
        max-height: 300px;
        overflow-y: auto;
    }

    .matched-box {
        background: #fff;
        border: 1px solid #ddd;
        padding: 10px 15px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        font-size: 14px;
    }

    #myDoughnutChart {
        max-height: 300px;
        max-width: 300px;
    }

    .chart-section {
        width: 100%;
        max-width: 400px;
    }

    .btn-module .btn-dashboard {
        padding: 10px 15px !important;
        margin-top: 0px !important;
    }

    .btn-module .add-feed-button {
        padding: 10px 27px !important;
    }
    
        .instructionmessagewrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }

    .instructionmessagewrapper .instructionmessage p {
        margin-bottom: 0px;
        font-size: 18px;
        font-style: italic;
    }
    
    .ck-content p:empty {
      display: none;
    }

    .perplexity-ai-text h3{
        height: 63px;
        padding-top: 22px;
    }

    .origional-artical h3 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .origional-artical h2 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .generated-artical-desc h3 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .generated-artical-desc h2 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .origionalcontent h2 {
    	font-size: 15px !important;
        line-height: 20px !important;
    }

    @media (max-width: 768px) {

        .editor-box,
        .result {
            flex: 1 1 100%;
        }
    }

    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.8);
        display: none;
    }

    #preloader:before {
        content: "";
        position: fixed;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
        border: 6px solid #37517e;
        border-top-color: #fff;
        border-bottom-color: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: animate-preloader 1s linear infinite;
    }

    @keyframes animate-preloader {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }