@charset "UTF-8";
/* ===== 도이 - 수정 ===== */


/* ===== File Upload ===== */
.xefu-act-selectfile { overflow: hidden !important; display: inline-block; vertical-align: middle; }

.xefu-container { margin: 10px 0; border: 1px solid #232323; background-color: #141414; color: #f2f2f2; }


/* ===== Dropzone ===== */
.xefu-dropzone { padding: 12px; border: 0; background-color: #101010; color: #f2f2f2; box-sizing: border-box; }
.in .xefu-dropzone { background-color: #1a1a1a; }
.hover .xefu-dropzone { border: 1px dotted #ff6b35; border-radius: 5px; }
.fade .xefu-dropzone { transition: all 0.3s ease-out; opacity: 1; }
.xefu-dropzone p { margin: 12px 0; }


/* ===== File List ===== */
.xefu-list { display: none; padding: 0 10px; }


/* ===== File List: Images ===== */
.xefu-list-images { max-height: 160px; overflow-y: scroll; -webkit-overflow-scrolling: touch; margin: 0 -5px; padding: 5px 0; border-bottom: 1px solid #232323; }
.xefu-list-images ul, .xefu-list-images li { list-style: none; margin: 0; padding: 0; }
.xefu-list-images li { position: relative; display: inline-block; margin: 3px; width: 60px; height: 60px; border: 3px solid #2e2e2e; }
.xefu-list-images input { position: absolute; top: 0; left: 0; }

.xefu-act-set-cover:hover { color: #ff6b35; }

.xefu-list-images .xefu-act-set-cover { display: none; cursor: pointer; position: absolute; top: 0; left: auto; right: 0; margin: 0; padding: 1px 0 1px 2px; border: 0 none; border-radius: 0 0 0 5px; font-size: 15px; line-height: 15px; background-color: #ff6b35; }

.xefu-list-images li:hover .xefu-act-set-cover { display: inline; color: #f2f2f2; background-color: #2e2e2e; }

.xefu-list-images .xefu-is-cover-image:hover .xefu-act-set-cover, .xefu-is-cover-image .xefu-act-set-cover { display: inline; color: #fff; background-color: #ff6b35; }

.xefu-is-cover-image { border-color: #ff6b35 !important; }

.xefu-list-images .xefu-file-name, .xefu-list-images .xefu-file-size { display: none; }
.xefu-list-images li img { width: 100%; height: 100%; }
.xefu-list-images .xefu-thumbnail { display: block; width: 100%; height: 100%; background-size: cover; background-position: center center; }


/* ===== Video ===== */
.xefu-file-video { position: absolute; top: 50%; left: 50%; margin: -15px; width: 30px; height: 30px; background: rgb(0,0,0,.5); border-radius: 50%; pointer-events: none; }
.xefu-file-video-play { position: absolute; top: 50%; left: 50%; margin: -8px -5px; border-width: 8px 0 8px 13px; border-style: solid; border-color: transparent transparent transparent #fff; }


/* ===== File List: Files ===== */
.xefu-list .xefu-list-files { margin: 5px 0; }
.xefu-list-files ul, .xefu-list-files li { list-style: none; margin: 0; padding: 0; }
.xefu-list-files li { padding: 3px 0; }
.xefu-list-files li.selected { background-color: #1a1a1a; }
.xefu-list-files .xefu-file-info { float: right; }
.xefu-list-files .xefu-file-info span { padding: 0 5px; }


/* ===== Control ===== */
.xefu-controll { display: none; padding: 10px; }
.xefu-progressbar { border-bottom: 1px solid #ff6b35; }
.xefu-progressbar div { height: 3px; background-color: #ff6b35; }


/* ===== Button ===== */
.xefu-btn { display: inline-block; *display: inline; margin: 0; padding: 0 12px !important; height: 24px !important; overflow: visible; border: 1px solid #2e2e2e; border-radius: 2px; text-decoration: none !important; text-align: center; vertical-align: top; line-height: 24px !important; font-family: inherit; font-size: 12px; color: #f2f2f2; *zoom: 1; cursor: pointer; box-shadow: none; background-color: #141414; background-image: none; }

input.xefu-btn, button.xefu-btn { height: 26px !important; }

.xefu-btn:hover, .xefu-btn:active, .xefu-btn[disabled] { color: #fff; background-color: #232323; background-image: none; }

.xefu-btn > a, .xefu-btn > button, .xefu-btn > input, .xefu-btn > span { display: inline-block; *zoom: 1; margin: 0 -12px !important; padding: 0 12px !important; overflow: visible; width: auto; height: 24px; border: 0; vertical-align: top; text-decoration: none !important; line-height: 24px; font-family: inherit; font-size: 12px; color: #f2f2f2; cursor: pointer; background: none; }


/* ===== Dropzone Message ===== */
p.xefu-dropzone-message { display: inline-block; margin: 0 0 0 5px !important; line-height: 24px; vertical-align: middle; }

.xefu-dropzone:hover p.xefu-dropzone-message, .in .xefu-dropzone p.xefu-dropzone-message, .hover .xefu-dropzone p.xefu-dropzone-message, .fade .xefu-dropzone p.xefu-dropzone-message { display: none; }


/* ===== Upload Info ===== */
.upload_info { display: none; margin: 0; margin-left: 5px; line-height: 24px; vertical-align: middle; }

.xefu-dropzone:hover .upload_info, .in .xefu-dropzone .upload_info, .hover .xefu-dropzone .upload_info, .fade .xefu-dropzone .upload_info { display: inline-block; margin: 0; margin-left: 5px; }


/* =========================================================
   라이트 모드 시작
   ========================================================= */

/* ===== Light: Container ===== */
html[data-theme="light"] .xefu-container { border-color: #ddd; background-color: #fff; color: #111; }


/* ===== Light: Dropzone ===== */
html[data-theme="light"] .xefu-dropzone { background-color: #f5f6f6; color: #111; }
html[data-theme="light"] .in .xefu-dropzone { background-color: #E9F3EF; }
html[data-theme="light"] .hover .xefu-dropzone { border-color: #9ad18f; }


/* ===== Light: Images ===== */
html[data-theme="light"] .xefu-list-images { border-bottom-color: #E6E6E6; }
html[data-theme="light"] .xefu-list-images li { border-color: #DDD; }

html[data-theme="light"] .xefu-list-images li:hover .xefu-act-set-cover { color: #666; background-color: #ddd; }

html[data-theme="light"] .xefu-list-images .xefu-is-cover-image:hover .xefu-act-set-cover, html[data-theme="light"] .xefu-is-cover-image .xefu-act-set-cover { color: #fff; background-color: #6cbd7e; }

html[data-theme="light"] .xefu-is-cover-image { border-color: #6cbd7e !important; }


/* ===== Light: File List ===== */
html[data-theme="light"] .xefu-list-files li.selected { background-color: #E9F3EF; }


/* ===== Light: Progress ===== */
html[data-theme="light"] .xefu-progressbar { border-bottom-color: #6AB97D; }
html[data-theme="light"] .xefu-progressbar div { background-color: #6AB97D; }


/* ===== Light: Button ===== */
html[data-theme="light"] .xefu-btn { border-color: #bbbbbb; color: #333333; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); background-color: #f5f5f5; background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); }

html[data-theme="light"] .xefu-btn:hover, html[data-theme="light"] .xefu-btn:active, html[data-theme="light"] .xefu-btn[disabled] { color: #333; background-color: #e6e6e6; background-image: linear-gradient(to bottom, #e6e6e6, #c9c9c9); background-repeat: repeat-x; }

html[data-theme="light"] .xefu-btn > a, html[data-theme="light"] .xefu-btn > button, html[data-theme="light"] .xefu-btn > input, html[data-theme="light"] .xefu-btn > span { color: #333; }