/* ============================================================
   STRICTLY MOBILE CSS (≤ 768px)
   Extracted from atf.css – for phones only
   ============================================================ */

/* ---------- 768px and below ---------- */
@media (max-width: 768px) {
    .info-drag {
        display: none !important;
    }

    .col-md-4,
    .col-md-8 {
        width: 100%;
    }

    .col-md-4.p-0.show {
        position: fixed;
        right: 0;
        width: 100%;
        height: 100%;
        transform: translate(450px);
        transition: 0.3s all;
        z-index: 99;
    }

    .col-md-4.p-0.show.toggleSidebar {
        transform: translateX(0px);
    }

    .sidebar-tool {
        height: 100vh !important;
    }

    .option-title {
        padding: 7px 14px !important;
    }

    .pdftoword-option-list2,
    .jpgToPdf_list {
        width: 100%;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        margin-left: -4px;
        margin-right: -4px;
        padding: 0;
    }

    #settingsToogle {
        display: block;
        padding: 0;
    }

    #settingsToogle svg {
        fill: #3e77b6 !important;
    }

    .item_content p {
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    .hexagone h3 {
        font-size: 22px;
    }

    div[data-aa-adunit="/21722279357/970x90_Sticky_OB_ilovepdf"] {
        z-index: 99999 !important;
    }

    .col-md-4.p-0.show {
        top: 0 !important;
        height: 100vh !important;
        z-index: 99999 !important;
    }
}

/* ---------- 727px and below ---------- */
@media only screen and (max-width: 727px) {
    [data-aa-adunit="/21722279357/970x90_Sticky_OB_ilovepdf"] {
        max-width: 727px !important;
        width: 99% !important;
        min-width: 468px !important;
        max-height: 100px !important;
        background: #fafafa;
        text-align: center !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ---------- 610px and below ---------- */
@media (max-width: 610px) {
    .sidebar-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid #c6c6c6;
        padding: 10px 0;
        /* background: #fff; */
        z-index: 10;
        padding-bottom: 101px;
    }
}

/* ---------- 600px and below ---------- */
@media (max-width: 600px) {
    div.file {
        max-width: 218px;
    }

    .tool__header h1 {
        font-size: 2rem !important;
        line-height: 36px !important;
    }
}

@media only screen and (max-width: 600px) {
    #settingsToogle {
        width: 36px;
        margin: 0 !important;
        height: 36px;
        background-color: transparent !important;
    }

    #settingsToogle.actives i svg {
        background-color: white;
        fill: #3e77b6 !important;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 3px;
        display: block !important
    }

    .btn-icon--white path,
    .btn-icon--white svg {
        fill: #3e77b6;
    }

    .side-tools {
        right: 7% !important;
    }

    .upl.box .upl__extra {
        margin-top: -20px !important;
        flex-direction: column !important;
    }

    .upl.box .upl__extra a {
        margin: 10px 0 !important;
    }

    #pickfiles svg:nth-child(1) {
        width: 30px !important;
        height: 30px !important;
    }

    .uploader {
        flex-wrap: nowrap !important;
        flex-direction: row-reverse !important;
        width: 70% !important;
    }

    .upl.box .upl___box {
        width: 40px !important;
        height: 40px !important;
    }

    #pickfiles svg {
        width: 30px !important;
        height: 30px !important;
    }

    .upl.box .upl__extra .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .upl__extra__btn svg {
        max-width: 30px !important;
    }

    #pickfiles svg:nth-child(2) {
        width: 30px !important;
        height: 30px !important;
    }

    .hide-content .side-tools {
        display: flex !important;
        gap: 13px !important;
    }
}

/* ---------- 501px and below ---------- */
@media (max-width: 501px) {

    .downloader__btn,
    .uploader__btn {
        width: 100%;
        max-width: inherit;
    }

    .uploader .uploader__extra {
        margin-left: auto;
    }

    .uploader__droptxt {
        display: none;
    }

    .uploader .upl__extra {
        margin-left: auto;
    }
}

/* ---------- 500px and below ---------- */
@media (max-width: 500px) {
    .container_fluids {
        width: calc(100% - 80px) !important;
    }

    .file__act {
        display: flex !important;
    }

    .info-drag {
        display: none !important;
    }

    button.action {
        width: 94%;
        padding: 5% 0;
        font-size: 1.5rem;
    }
}

/* ---------- 467px and below ---------- */
@media only screen and (max-width: 467px) {
    [data-aa-adunit="/21722279357/970x90_Sticky_OB_ilovepdf"] {
        max-width: 467px !important;
        width: 99% !important;
        min-width: 320px !important;
        max-height: 100px !important;
        background: #fafafa;
        text-align: center !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ---------- Screen only (max-width: 768px) ---------- */
@media only screen and (max-width: 768px) {
    .col-md-4.p-0.show {
        position: fixed;
        right: 0;
        width: 100%;
        height: 100%;
        transform: translate(450px);
        transition: 0.3s all;
        z-index: 99;
    }

    #settingsToogle {
        display: block;
        padding: 0;
    }

    #settingsToogle svg {
        fill: #3e77b6 !important;
    }

    .item_content p {
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    .hexagone h3 {
        font-size: 22px;
    }

    #settingsToogle.actives i svg {
        background-color: white;
        fill: #3e77b6 !important;
        width: 37px !important;
        height: 37px !important;
        border-radius: 50%;
        padding: 3px;
        display: block !important;
    }
}

/* ---------- Screen only (max-width: 768px) – mynotice ---------- */
@media screen and (max-width: 768px) {
    .mynotice a {
        max-width: 86%;
    }
}