/* =========================================================
   AWTI DEVICES HUB
   ERROR + EMPTY STATE CSS
   File: assets/css/device-error.css
   ========================================================= */

.awti-device-single .awti-device-error,
.awti-device-error{
    position:relative;

    margin:20px 0;
    padding:20px;

    border:1px solid rgba(37,99,235,.18);
    border-left:3px solid #16a34a;
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5 0%,
            #ffffff 50%,
            #eff6ff 100%
        );

    color:#475569;

    font-size:14px;
    line-height:1.6;

    box-shadow:
        0 6px 20px rgba(15,23,42,.05);

    overflow:hidden;
}

.awti-device-single .awti-device-error::before,
.awti-device-error::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #16a34a,
            #0d9488,
            #2563eb
        );
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.awti-device-single .awti-empty-state{
    position:relative;

    padding:18px;

    border:1px dashed rgba(37,99,235,.25);
    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #ecfdf5,
            #eff6ff
        );

    color:#64748b;

    font-size:13px;
    line-height:1.6;

    text-align:center;
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.awti-device-single .awti-device-image-placeholder{
    color:#16a34a;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    .awti-device-single .awti-device-error,
    .awti-device-error{
        margin:15px 0;
        padding:15px;

        border-radius:13px;

        font-size:13px;
    }

    .awti-device-single .awti-empty-state{
        padding:14px;

        font-size:12px;
    }

}