/*
 * XDCHAT_MIGRATION20D_FORUM_RICH_COMPOSER_REAL_SECTIONS_FINAL
 */

/* ==========================================================
   SEZIONI FORUM
   ========================================================== */

.xd20d-section-tabs{
    display:flex!important;
    align-items:center;
    gap:8px;
    width:100%;
    margin:13px 0 16px!important;
    padding:3px 0;
    overflow-x:auto;
    scrollbar-width:thin;
}

.xd20d-section-tabs a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex:0 0 auto;
    padding:0 14px;
    border:1px solid rgba(79,190,241,.25);
    border-radius:11px;
    background:#082846;
    color:#a9c6df;
    text-decoration:none!important;
    font-size:9px;
    font-weight:850;
    white-space:nowrap;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.xd20d-section-tabs a:hover{
    transform:translateY(-1px);
    border-color:rgba(78,216,255,.55);
    color:#fff;
}

.xd20d-section-tabs a.is-active{
    border-color:rgba(126,111,255,.72);
    background:
        linear-gradient(
            135deg,
            #6d5dfc,
            #36c8f2
        );
    color:#fff;
    box-shadow:
        0 9px 20px rgba(80,112,255,.20);
}

/* ==========================================================
   CAMPO SEZIONE NUOVA DISCUSSIONE
   ========================================================== */

.xd20d-section-field{
    display:grid;
    gap:7px;
    margin:0 0 18px;
}

.xd20d-section-field>label{
    color:#d8e8f7;
    font-size:10px;
    font-weight:850;
}

.xd20d-section-field select{
    width:100%;
    min-height:46px;
    border:1px solid rgba(77,178,232,.30);
    border-radius:12px;
    outline:0;
    padding:0 13px;
    background:#061d35;
    color:#f4fbff;
    font:700 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
}

.xd20d-section-field select:focus{
    border-color:#55d9ff;
    box-shadow:
        0 0 0 3px rgba(60,199,255,.10);
}

/* ==========================================================
   COMPOSER
   ========================================================== */

.xd20d-composer{
    overflow:hidden;
    margin:0;
    border:1px solid rgba(78,183,238,.34);
    border-radius:17px;
    background:#061c34;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 28px rgba(0,0,0,.10);
}

.xd20d-toolbar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    padding:8px;
    border-bottom:1px solid rgba(88,171,224,.18);
    background:#08243f;
}

.xd20d-toolbar-group{
    display:flex;
    align-items:center;
    gap:4px;
    padding-right:6px;
    margin-right:2px;
    border-right:1px solid rgba(121,170,214,.13);
}

.xd20d-toolbar-group:last-child{
    border-right:0;
}

.xd20d-toolbar button,
.xd20d-toolbar select,
.xd20d-color{
    min-height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:1px solid rgba(100,177,224,.23);
    border-radius:8px;
    background:#0a3153;
    color:#eaf8ff;
    font:800 8px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
}

.xd20d-toolbar button{
    min-width:32px;
    padding:0 8px;
    cursor:pointer;
}

.xd20d-toolbar button:hover{
    border-color:rgba(82,218,255,.62);
    background:#0c3c64;
}

.xd20d-toolbar select{
    min-width:90px;
    padding:0 7px;
    outline:0;
}

.xd20d-color{
    width:34px;
    overflow:hidden;
    cursor:pointer;
}

.xd20d-color input{
    width:30px!important;
    height:29px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    cursor:pointer;
}

.xd20d-editor{
    min-height:230px;
    max-height:520px;
    overflow-y:auto;
    padding:15px 16px;
    outline:0;
    color:#eef8ff;
    background:#061c34;
    font:500 11px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif;
}

.xd20d-editor:empty::before{
    content:attr(data-placeholder);
    color:#738ba3;
    pointer-events:none;
}

.xd20d-editor a{
    color:#66dcff;
    text-decoration:underline;
}

.xd20d-editor blockquote{
    margin:10px 0;
    padding:9px 12px;
    border-left:3px solid #765dff;
    background:rgba(108,87,255,.08);
}

.xd20d-editor ul,
.xd20d-editor ol{
    padding-left:23px;
}

.xd20d-composer-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-top:1px solid rgba(88,171,224,.14);
    color:#7792aa;
    background:#071f39;
    font-size:8px;
}

.xd20d-file-preview{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:0 10px 10px;
    background:#071f39;
}

.xd20d-file-preview:empty{
    display:none;
}

.xd20d-file-pill{
    max-width:220px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 8px;
    border:1px solid rgba(87,184,231,.20);
    border-radius:8px;
    background:#092b4b;
    color:#a9c5dc;
    font-size:8px;
}

.xd20d-file-pill span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.xd20d-transport,
.xd20d-native-file-input,
.xd20d-native-file-field{
    display:none!important;
}

.xd20d-client-error{
    display:none;
    margin:0 0 10px;
    padding:9px 11px;
    border:1px solid rgba(255,92,112,.35);
    border-radius:10px;
    background:rgba(87,24,38,.56);
    color:#ffd5db;
    font-size:9px;
    font-weight:750;
}

.xd20d-client-error.is-visible{
    display:block;
}

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

@media(max-width:767px){
    .xd20d-section-tabs{
        margin:10px 0 13px!important;
        padding-bottom:4px;
    }

    .xd20d-section-tabs a{
        min-height:36px;
        padding:0 11px;
        font-size:9px;
    }

    .xd20d-toolbar{
        gap:4px;
        padding:7px;
    }

    .xd20d-toolbar-group{
        padding-right:4px;
    }

    .xd20d-toolbar button{
        min-width:34px;
        min-height:34px;
        padding:0 7px;
    }

    .xd20d-toolbar select{
        min-height:34px;
    }

    .xd20d-editor{
        min-height:190px;
        max-height:45vh;
        padding:13px;
        font-size:16px;
    }

    .xd20d-composer-foot{
        align-items:flex-start;
        flex-direction:column;
    }
}