/* =========================
ET WRAP
========================= */

.et-wrap{

position:relative;

width:100%;

background:#050505;

border:1px solid #151515;

overflow:hidden;

padding:32px;

color:#fff;



}


/* =========================
LIGHT MODE
========================= */

.et-wrap.et-light{

background:#f5f5f5;

color:#111;

border-color:#ddd;

}


.et-wrap.et-light .et-input{

background:#fff;

border-color:#ddd;

color:#111;

}


.et-wrap.et-light .et-toolbar{

background:#fff;

border-color:#ddd;

}


.et-wrap.et-light .et-btn{

background:#fff;

border-color:#ddd;

color:#111;

}


/* =========================
TOOLBAR
========================= */

.et-toolbar{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:14px 18px;

background:#0f0f0f;

border:1px solid #1f1f1f;

border-radius:18px;

margin-bottom:40px;

flex-wrap:wrap;

}


.et-toolbar-group{

display:flex;

align-items:center;

gap:10px;

}


/* =========================
BUTTON
========================= */

.et-btn{

display:flex;

align-items:center;

justify-content:center;

height:42px;

min-width:42px;

padding:0 16px;

background:#0f0f0f;

border:1px solid #242424;

border-radius:12px;

color:#fff;

font-size:14px;

cursor:pointer;

transition:0.2s ease;

}


.et-btn:hover{

border-color:#C6FF33;

color:#C6FF33;

}


.et-btn-active{

background:#C6FF33;

border-color:#C6FF33;

color:#000;

}


/* =========================
PREVIEW
========================= */

.et-preview-wrap{

width:100%;

margin-bottom:40px;

}


.et-preview{

font-size:80px;

line-height:1;

word-break:break-word;

color:inherit;

transition:0.2s ease;

}


/* =========================
INPUT
========================= */

.et-input-wrap{

margin-bottom:30px;

}


.et-input{

width:100%;

min-height:120px;

padding:24px;

background:#0f0f0f;

border:1px solid #1f1f1f;

border-radius:18px;

color:#fff;

font-size:18px;

resize:none;

outline:none;



}


/* =========================
FOOTER
========================= */

.et-footer{

display:flex;

align-items:center;

gap:20px;

flex-wrap:wrap;

}


/* =========================
SLIDER
========================= */

.et-size{

flex:1;

accent-color:#C6FF33;

cursor:pointer;

}


/* =========================
SIZE VALUE
========================= */

.et-size-value{

font-size:14px;

opacity:0.7;

min-width:60px;

}


/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.et-wrap{

padding:20px;

}


.et-toolbar{

gap:12px;

}


.et-preview{
font-family:unset;
font-size:48px;

}


.et-input{
font-family:unset;
min-height:90px;

font-size:16px;

}

}