/* ==========================================================
   MEDIA / IMAGEN PRO V1
   ========================================================== */

.ir-media-pro{
    overflow:visible !important;
}


.ir-media-pro .ir-media-content{
    box-sizing:border-box;
}


/* ==========================================================
   INSPECTOR
   ========================================================== */

.media-pro-panel,
.media-pro-section{
    margin-bottom:14px;
    padding:12px;
    border:1px solid #354a65;
    border-radius:12px;
    background:#14233a;
}


.media-pro-heading{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:10px;
}


.media-pro-heading strong,
.media-pro-section > strong{
    color:#ffffff !important;
    font-size:12px;
}


.media-pro-heading small{
    color:#9fb0c4 !important;
    font-size:9px;
}


.media-pro-presets{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:7px;
}


.media-pro-presets button{
    min-height:70px;
    padding:7px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border:1px solid #3d526d !important;
    border-radius:11px;
    background:#0d192a !important;
    color:#ffffff !important;
    cursor:pointer;
}


.media-pro-presets button:hover{
    background:#192d49 !important;
    border-color:#6a86aa !important;
}


.media-pro-presets button.active{
    background:#21446d !important;
    border-color:#67aaff !important;
}


.media-pro-presets button span{
    color:#ffffff !important;
    font-size:20px;
}


.media-pro-presets button b{
    color:#ffffff !important;
    font-size:9px;
}


.media-pro-presets button small{
    color:#9fb1c6 !important;
    font-size:8px;
}


.media-pro-two{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:7px;
}


.media-pro-replace{
    width:100%;
    min-height:40px;
    margin-bottom:13px;
    border:1px solid #4b698e !important;
    border-radius:9px;
    background:#1c3657 !important;
    color:#ffffff !important;
    font-weight:750;
    cursor:pointer;
}


.media-pro-replace:hover{
    background:#28517e !important;
}



/* ==========================================================
   PNG PRO V1 - AREA REAL
   ========================================================== */

.ir-media-pro.ir-media-alpha-real{
    overflow:visible !important;
    background-clip:padding-box;
}


.ir-media-pro.ir-media-alpha-real
.ir-media-content{
    max-width:none !important;
    max-height:none !important;

    transform:none;

    transform-origin:
        top left;

    user-select:none;

    -webkit-user-select:none;

    -webkit-user-drag:none;
}


/* PANEL PNG */

.png-pro-area-panel{
    margin-bottom:14px;

    padding:12px;

    border:
        1px solid
        #3b5573;

    border-radius:
        12px;

    background:
        #101f33;
}


.png-pro-area-head{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:8px;
}


.png-pro-area-head > div{
    min-width:0;

    display:flex;

    flex-direction:
        column;

    gap:2px;
}


.png-pro-area-head strong{
    color:#ffffff;

    font-size:11px;
}


.png-pro-area-head small{
    color:#95abc3;

    font-size:8px;
}


.png-pro-area-head > span{
    padding:
        4px 6px;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        900;
}


.png-pro-area-head > span.ok{
    color:#76e1b1;

    background:
        rgba(
            44,
            200,
            130,
            .15
        );

    border:
        1px solid
        rgba(
            65,
            216,
            150,
            .35
        );
}


.png-pro-area-head > span.wait{
    color:#8fc0ff;

    background:
        rgba(
            75,
            150,
            255,
            .13
        );

    border:
        1px solid
        rgba(
            90,
            160,
            255,
            .32
        );
}


.png-pro-area-panel p{
    margin:
        9px 0 10px;

    color:#aebed0;

    font-size:8px;

    line-height:
        1.45;
}


.png-pro-area-actions{
    display:grid;

    grid-template-columns:
        1fr;

    gap:6px;
}


.png-pro-area-actions button{
    min-height:
        34px;

    border:
        1px solid
        #415d7e;

    border-radius:
        8px;

    background:
        #192f4b;

    color:#ffffff;

    font-size:8px;

    font-weight:800;

    cursor:pointer;
}


.png-pro-area-actions button:hover{
    background:
        #26517e;

    border-color:
        #6faeff;
}