/* =====================================
   COLOR PICKER
===================================== */

#colorPicker{
display:none;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:270px;
background:#fff;
border:1px solid #333;
border-radius:6px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
overflow:hidden;
z-index:999999;
font-family:'BPG Arial Caps',sans-serif;
}

.cpHeader{
height:38px;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 10px;
font-size:13px;
font-weight:bold;
font-family:'BPG Arial Caps',sans-serif;
}

#cpClose{
background:#d61f1f;
color:#fff;
border:0;
padding:5px 12px;
font-size:12px;
font-family:'BPG Arial Caps',sans-serif;
cursor:pointer;
border-radius:4px;
transition:.2s;
}

#cpClose:hover{
background:#aa0000;
}

.cpBody{
padding:10px;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:8px;
background:#fff;
}

.cp{
width:26px;
height:26px;
border:1px solid #999;
border-radius:3px;
cursor:pointer;
transition:.15s;
}

.cp:hover{
transform:scale(1.12);
border-color:#000;
box-shadow:0 0 5px rgba(0,0,0,.35);
}

/* =====================================
   MESSAGE POPUP
===================================== */

#msgOverlay{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.35);
z-index:999998;
}

#msgPopup{
display:none;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:290px;
background:#fff;
border:1px solid #333;
border-radius:6px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
overflow:hidden;
z-index:999999;
font-family:'BPG Arial Caps',sans-serif;
}

.msgHeader{
height:38px;
background:#111;
color:#fff;
display:flex;
align-items:center;
padding:0 10px;
font-size:13px;
font-weight:bold;
font-family:'BPG Arial Caps',sans-serif;
}

.msgContent{
display:flex;
align-items:center;
gap:10px;
padding:15px;
font-size:13px;
line-height:18px;
font-family:'BPG Arial Caps',sans-serif;
}

.msgContent img{
width:34px;
height:34px;
}

.msgFooter{
padding:10px;
text-align:right;
border-top:1px solid #eee;
}

#msgOk{
background:#444;
color:#fff;
border:0;
padding:5px 15px;
border-radius:4px;
font-size:12px;
font-family:'BPG Arial Caps',sans-serif;
cursor:pointer;
transition:.2s;
}

#msgOk:hover{
background:#222;
}