body.adp-icon-modal-open{
    overflow:hidden !important;
}

.iconlib-tool-shortcode .iconlib-card{
    cursor:pointer !important;
    pointer-events:auto !important;
}

.iconlib-tool-shortcode .iconlib-modal{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.iconlib-tool-shortcode .iconlib-modal.open{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.iconlib-tool-shortcode .iconlib-modal.open .iconlib-panel{
    pointer-events:auto !important;
}

.iconlib-tool-shortcode .iconlib-modal-btn,
.iconlib-tool-shortcode .iconlib-close,
.iconlib-tool-shortcode .iconlib-style-reset,
.iconlib-tool-shortcode input[type="range"],
.iconlib-tool-shortcode input[type="color"],
.iconlib-tool-shortcode input[type="checkbox"]{
    pointer-events:auto !important;
}

.iconlib-tool-shortcode .iconlib-modal-btn:disabled{
    opacity:.68;
    cursor:wait;
}

/* ADP_ICON_MODAL_VERTICAL_LAYOUT_V1
 * The icon preview belongs above the name, controls and actions.
 * This is intentionally scoped to the icon shortcode modal only.
 */
.iconlib-tool-shortcode .iconlib-modal .iconlib-panel{
    width:min(760px,96vw) !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-panel-head{
    min-height:82px !important;
    padding:16px 22px !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-panel-body{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    grid-template-columns:none !important;
    gap:20px !important;
    padding:28px !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-big{
    order:1 !important;
    width:min(430px,100%) !important;
    min-height:280px !important;
    margin:0 auto !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-big svg{
    width:150px !important;
    height:150px !important;
    max-width:72% !important;
    max-height:72% !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-info{
    order:2 !important;
    width:100% !important;
    max-width:620px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:16px !important;
    text-align:center !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-info > div:first-child{
    width:100% !important;
    text-align:center !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-name{
    width:100% !important;
    direction:ltr !important;
    text-align:center !important;
    font-size:30px !important;
    line-height:1.35 !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-modal-color{
    width:min(340px,100%) !important;
    justify-content:center !important;
    margin:0 auto !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-modal-actions{
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-modal-btn{
    min-width:128px !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-code{
    width:100% !important;
}

@media(max-width:760px){
    .iconlib-tool-shortcode .iconlib-modal{
        padding:12px !important;
    }

    .iconlib-tool-shortcode .iconlib-modal .iconlib-panel{
        width:100% !important;
        max-height:94vh !important;
        border-radius:24px !important;
    }

    .iconlib-tool-shortcode .iconlib-modal .iconlib-panel-body{
        padding:18px !important;
        gap:16px !important;
    }

    .iconlib-tool-shortcode .iconlib-modal .iconlib-big{
        min-height:220px !important;
    }

    .iconlib-tool-shortcode .iconlib-modal .iconlib-name{
        font-size:24px !important;
    }

    .iconlib-tool-shortcode .iconlib-modal .iconlib-modal-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
    }

    .iconlib-tool-shortcode .iconlib-modal .iconlib-modal-btn{
        width:100% !important;
        min-width:0 !important;
    }
}

@media(max-width:440px){
    .iconlib-tool-shortcode .iconlib-modal .iconlib-modal-actions{
        grid-template-columns:1fr !important;
    }
}

/* ADP_ICON_MODAL_METADATA_COLOR_REST_V2 */
.iconlib-tool-shortcode .iconlib-modal .iconlib-panel-title{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-close{
    color:#fc9012 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    font-size:30px !important;
    line-height:1 !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-close:hover,
.iconlib-tool-shortcode .iconlib-modal .iconlib-close:focus{
    color:#df7600 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-identity{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    text-align:left !important;
    direction:ltr !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-name{
    width:100% !important;
    margin:0 !important;
    color:#172033 !important;
    font-family:"Montserrat",sans-serif !important;
    font-size:32px !important;
    line-height:1.25 !important;
    font-weight:600 !important;
    letter-spacing:-.02em !important;
    text-align:left !important;
    direction:ltr !important;
    word-break:break-word !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-keywords{
    color:#64748b !important;
    font-family:"Montserrat",sans-serif !important;
    font-size:17px !important;
    line-height:1.55 !important;
    font-weight:500 !important;
    text-align:left !important;
    direction:ltr !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-category{
    display:inline-flex !important;
    align-items:center !important;
    min-height:38px !important;
    margin-top:2px !important;
    padding:7px 14px !important;
    border-radius:10px !important;
    background:#f5f9fc !important;
    border:1px solid #edf2f7 !important;
    color:#172033 !important;
    font-family:"Montserrat","Cairo",sans-serif !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:600 !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-keywords[hidden],
.iconlib-tool-shortcode .iconlib-modal .iconlib-category[hidden]{
    display:none !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-modal-color-customizer{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:9px !important;
    direction:rtl !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-modal-color-label{
    color:#172033 !important;
    font-family:"Cairo",sans-serif !important;
    font-size:16px !important;
    line-height:1.5 !important;
    font-weight:700 !important;
    text-align:right !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-modal-color-fields{
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:center !important;
    direction:ltr !important;
}

.iconlib-tool-shortcode .iconlib-modal #modalIconColor{
    width:72px !important;
    height:52px !important;
    padding:5px !important;
    border:1px solid #dce7ee !important;
    border-radius:16px !important;
    background:#fff !important;
    cursor:pointer !important;
}

.iconlib-tool-shortcode .iconlib-modal #modalIconHex{
    width:100% !important;
    min-width:0 !important;
    height:52px !important;
    padding:0 18px !important;
    border:1px solid #dce7ee !important;
    border-radius:16px !important;
    background:#fff !important;
    color:#172033 !important;
    font-family:"Montserrat",monospace !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:600 !important;
    text-align:center !important;
    direction:ltr !important;
    outline:none !important;
}

.iconlib-tool-shortcode .iconlib-modal #modalIconHex:focus{
    border-color:#00bddd !important;
    box-shadow:0 0 0 4px rgba(0,189,221,.12) !important;
}

.iconlib-tool-shortcode .iconlib-modal #modalIconHex[aria-invalid="true"]{
    border-color:#dc2626 !important;
    box-shadow:0 0 0 4px rgba(220,38,38,.10) !important;
}

.iconlib-tool-shortcode .iconlib-modal .iconlib-modal-color-error{
    color:#b91c1c !important;
    font-family:"Cairo",sans-serif !important;
    font-size:13px !important;
    line-height:1.6 !important;
    text-align:right !important;
}

@media(max-width:520px){
    .iconlib-tool-shortcode .iconlib-modal .iconlib-name{
        font-size:26px !important;
    }

    .iconlib-tool-shortcode .iconlib-modal .iconlib-keywords{
        font-size:15px !important;
    }

    .iconlib-tool-shortcode .iconlib-modal .iconlib-modal-color-fields{
        grid-template-columns:64px minmax(0,1fr) !important;
        gap:9px !important;
    }

    .iconlib-tool-shortcode .iconlib-modal #modalIconColor{
        width:64px !important;
    }
}