#quickRead_continer {
    padding: 3rem;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background: #000000e8;
    z-index: 99999999;
    opacity: 0;
    visibility: hidden;

    & * {
        color: var(--CO_Dark_Light_Mode);
    }

    &.active {
        opacity: 1;
        visibility: visible;
    }

    @media (max-width:768px) {
        padding: 1rem 1rem !important;
    }

    /*  */
    & .Reading_Continer {
        padding: 4rem;
        padding-bottom: 10rem !important;
        background-color: var(--BG_Dark_Light_Mode);
        border-radius: 0.75rem;
        width: 800px;
        max-width: 100%;
        inset: 0;
        overflow-y: auto;
        height: 100vh;

        /* skeleton */

        & .qr-skeleton {
            &>* {
                background: #ececec;
                border-radius: 12px;
                position: relative;
                overflow: hidden;
                margin-bottom: 18px;
            }

            &>*::after {
                content: "";
                position: absolute;
                left: -100%;
                top: 0;
                height: 100%;
                width: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
                animation: loading 1.2s infinite;
            }

            & .sk-image {
                height: 340px;
            }

            & .sk-category {
                width: 130px;
                height: 20px;
            }

            & .sk-title {
                height: 42px;
            }

            & .sk-title.short {
                width: 65%;
            }

            & .sk-meta {
                width: 220px;
                height: 18px;
            }

            & .sk-line {
                height: 16px;
            }

            & .sk-line.short {
                width: 55%;
            }
        }

        @media (max-width: 600px) {
            padding: 1.5rem;
        }

        & * {
            font-family: var(--latest-posts-v1-title-font,
                    var(--latest-posts-v2-title-font,
                        var(--latest-posts-v3-title-font,
                            var(--latest-posts-v4-title-font, sans-serif))));
        }

        & .info {
            border-bottom: 1px dashed #898989;
            padding: 0 0 2rem;

            & .bollet {
                display: inline-block;
                width: 0.3rem;
                height: 0.3rem;
                border-radius: 50%;
                background-color: var(--Primary-Color);
                margin: 0 7px;
            }

            h2.title {
                font-size: clamp(2rem, 3vw, 3rem);
                font-weight: 600;
                line-height: 1.2;
                letter-spacing: 1;
                text-transform: capitalize;
                margin-bottom: 2rem;
            }

            & span {
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                font-size: 11px;
                color: var(--CO_Dark_Light_Mode);
            }

            & span.line {
                margin: 0 7px;
                height: 6px;
                width: 6px;
                display: inline-block;
                background: var(--Primary-Color);
                border-radius: 100%;
            }
        }

        & a {
            font-weight: bold;
            text-decoration: none !important;
        }

        & h2,
        & h3,
        & h4,
        & h5,
        & h6 {
            margin: 25px 0 15px;
        }

        & h2 {
            font-size: 26px;
            font-weight: 600;
            text-transform: capitalize;
        }

        & h2,
        & h3,
        & h4,
        & h5 {
            letter-spacing: 1.4px;
            line-height: 1.5;
        }

        & h3,
        & h4,
        & h5 {
            font-size: 1.5rem;
        }

        & p {
            font-size: 15px;
            line-height: 1.8;
            letter-spacing: 1px;
            font-weight: 400;
            text-transform: capitalize;
            margin: 1.5rem 0;
        }

        & a {
            color: #2563eb;
            text-decoration: underline;
            transition: 0.2s;
        }

        & a:hover {
            opacity: 0.8;
        }

        & img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 25px auto;
            border-radius: 10px;
        }

        & ul,
        & ol {
            padding-left: 50px;
            margin: 15px 0 20px;

            & li {
                font-size: 18px;
                line-height: 1.8;
                list-style: circle;
            }
        }

        & blockquote {
            margin: 20px 0;
            padding: 15px 18px;
            border-left: 4px solid #2563eb;
            background: #eef4ff;
            font-style: italic;

            & * {
                color: #000 !important;
            }
        }


        & pre {
            background: #0f172a;
            color: #e5e7eb;
            padding: 15px;
            border-radius: 10px;
            overflow-x: auto;
            margin: 20px 0;

            & code {
                font-family: monospace;
                font-size: 15px;
            }
        }

        & table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 16px;

            & th,
            & td {
                border: 1px solid #ddd;
                padding: 10px;
            }

            th {
                background: #f0f0f0;
            }
        }
    }


    /*  */
    & .Reding_Controller {
        bottom: 0px;
        position: fixed;
        transform: translate(-50%, 0);
        display: flex;
        padding: 1rem;
        /* gap: 1rem; */
        align-items: center;
        flex-direction: column;
        /* width: 28rem; */
        /* background: #ffffff1c; */
        left: 50%;

        @media (max-width: 670px) {
            width: 100% !important;
            bottom: 10px !important;
        }

        /*  */
        & .Reading_nav {
            width: 100%;
            padding: 0px 15px;
            transform: translateY(5.5px);

            & .reaDing_Porog {
                height: 5px;
                width: 100%;
                background: var(--Primary-Color);
                border-radius: 40px;
            }
        }

        /* Reading Controll */
        & .Reading_controll {
            box-shadow: 2px 2px 6px #0000003b;
            background: #ffffff;
            padding: 1rem;
            border-radius: 50px;
            display: flex;
            justify-content: space-evenly;

            & button {
                border: none;
                border-right: 1px solid #0000004f;
                padding-left: 15px;
                padding-right: 15px;
                cursor: pointer;
                background: transparent;

                &:last-child {
                    border: none;
                }
            }

            & .Exit_Reading_Mode {
                letter-spacing: 0.1em;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 0.65rem;
                line-height: 1rem;
                font-family: Manrope, sans-serif;
                display: flex;
                align-items: center;
                gap: 5px;

                & span {
                    color: #000 !important;
                }
            }
        }
    }
}

/*  */
@keyframes loading {
    100% {
        left: 100%;
    }
}