/*!
 * Copyright 2023 bati
 * svg-icon.css
 * bati
 */

/*
    **TODO 추후에 방식으로 변경
    -webkit-mask-image: url('/static/asset/media/svg/symbol/dropzone.svg');
    mask-image: url('/static/asset/media/svg/symbol/dropzone.svg');
    -webkit-mask-size: 15px;
    background-color: #7E8299;
 */


/*!
 *  Common
 */
.svg-close {
    width: 9px;
    height: 9px;
    background-image: url('/static/asset/media/svg/symbol/close.svg');
    background-size: 100% 100%;
    background-repeat:no-repeat;
}

.action-close {
    width: 9px;
    height: 9px;
    background-image: url('/static/asset/media/svg/symbol/close.svg');
    background-size: 100% 100%;
    background-repeat:no-repeat;
}


.svg-cancel {
    width: 20px;
    height: 20px;
    background-image: url('/static/asset/media/svg/symbol/cancel.svg');
    background-size: 100% 100%;
    background-repeat:no-repeat;
}

.svg-icon-plus {
    width: 15px;
    height: 15px;
    -webkit-mask-image: url('/static/asset/media/svg/workbase/plus.svg');
    mask-image: url('/static/asset/media/svg/workbase/plus.svg');
    -webkit-mask-size: 15px;
    background-color: #7E8299;
}

.svg-icon-minus {
    width: 15px;
    height: 15px;
    -webkit-mask-image: url('/static/asset/media/svg/workbase/minus.svg');
    mask-image: url('/static/asset/media/svg/workbase/minus.svg');
    -webkit-mask-size: 15px;
    background-color: #7E8299;
}

.svg-icon-guide {
    width: 27px;
    height: 27px;
    -webkit-mask-image: url('/static/asset/media/svg/workflow/action_guide.svg');
    mask-image: url('/static/asset/media/svg/workflow/action_guide.svg');
    -webkit-mask-size: 27px;
    background-color: #F3F7FA;
}

.svg-icon-search {
    width: 15px;
    height: 15px;
    -webkit-mask-image: url('/static/asset/media/svg/icon/search.svg');
    mask-image: url('/static/asset/media/svg/icon/search.svg');
    -webkit-mask-size: 15px;
    background-color: #7E8299;
}

.svg-icon-googleDrive {
    width: 20px;
    height: 16px;
    background-image: url(/static/asset/media/svg/workflow/googleDrive.svg);
    background-size: 20px 16px; /* SVG 크기 조정 */
    background-repeat: no-repeat; /* 배경 이미지 반복 방지 */
}

.svg-icon-trashcan {
    width: 15px;
    height: 15px;
    -webkit-mask-image: url('/static/asset/media/svg/icon/trashcan.svg');
    mask-image: url('/static/asset/media/svg/icon/trashcan.svg');
    -webkit-mask-size: 15px;
    background-color: #000;
}

/*!
 *  LNB aside
 */

/*프로젝트리스트*/
.svg-list {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/side-bar/list.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-send {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/side-bar/send.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*새작업*/
.svg-work {
    width: 21px;
    height: 21px;
    fill: #000;
    background-image: url('/static/asset/media/svg/side-bar/work.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*최근작업*/
.svg-recent {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/side-bar/recent.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*드라이브*/
.svg-drive {
    width: 25px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/side-bar/drive.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-folder {
    width: 19px;
    height: 19px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/folder.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-add-file {
    width: 35px;
    height: 35px;
    fill: #1484ec;
    background-image: url('/static/asset/media/svg/side-bar/file-add.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-pdf {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/pdf.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-doc {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/doc.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-docx {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/docx.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-xls {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/xls.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-xlsx {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/xlsx.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-ppt {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/ppt.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-pptx {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/pptx.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-zip {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/zip.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-gz {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/gz.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-tar {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/tar.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-jpg {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/jpg.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


.svg-fileType-jpeg {
    width: 22px;
    height: 22px;
    fill: #000;
    background-size: 100% 100%;
    background-image: url('/static/asset/media/svg/drive/fileType/jpeg.svg');
    background-repeat: no-repeat;
}

.svg-fileType-png {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/png.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-gif {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/gif.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-txt {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/txt.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-csv {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/csv.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-tsv {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/tsv.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-mp3 {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/mp3.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-mp4 {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/mp4.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-avi {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/avi.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-mkv {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/mkv.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-wmv {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/wmv.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-mov {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/mov.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-m4v {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/m4v.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-flv {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/flv.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-js {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/js.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-css {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/css.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-html {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/html.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-fileType-htm {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/drive/fileType/htm.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*갤러리*/
.svg-gallery {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/side-bar/gallery.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
/*연결앱*/
.svg-link-app {
    width: 22px;
    height: 22px;
    fill: #000;
    background-image: url('/static/asset/media/svg/side-bar/link-app.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
/*이력*/
.svg-history {
    width: 23px;
    height: 23px;
    fill: #000;
    background-image: url('/static/asset/media/svg/side-bar/history.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-filetype-pdf-pdf {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url('/static/asset/media/svg/drive/fileType/pdf.svg');
    mask-image: url('/static/asset/media/svg/drive/fileType/pdf.svg');
    -webkit-mask-size: 20px;
    background-color: #7E8299;
}

/*마이페이지*/
.svg-mypage-up {
    width: 23px;
    height: 23px;
    fill: #000;
    background-image: url('/static/asset/media/svg/mypage/up.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-mypage-money {
    width: 23px;
    height: 23px;
    fill: #000;
    background-image: url('/static/asset/media/svg/mypage/money.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-mypage-watch {
    width: 23px;
    height: 23px;
    fill: #000;
    background-image: url('/static/asset/media/svg/mypage/watch.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*!
 *  새작업, 가져오기
 */
.svg-icon-excel {
    width: 18px;
    height: 18px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/MSexcel.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-spread {
    width: 18px;
    height: 18px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/GoogleSpread.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-batiExcel {
    width: 14px;
    height: 14px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/bati_excel.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-batiNote {
    width: 14px;
    height: 14px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/bati_note.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-icon-docs {
    width: 18px;
    height: 18px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/docs.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-slide {
    width: 18px;
    height: 18px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/slide.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


/*
 * workbase svg
 */
.svg-icon-roundExcel {
    width: 20px;
    height: 20px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/round_excel.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-icon-roundNote {
    width: 20px;
    height: 20px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/round_note.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-icon-roundDocs {
    width: 20px;
    height: 20px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/round_docs.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-roundSlide {
    width: 20px;
    height: 20px;
    fill: #000;
    background-image: url('/static/asset/media/svg/app/round_slide.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}



.svg-icon-varoff {
    width: 20px;
    height: 20px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workbase/var_off.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-varon {
    width: 20px;
    height: 20px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workbase/var_on.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-googleSheet {
    width: 20px;
    height: 20px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workbase/icon_googleSheet.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-variationLink {
    width: 42px;
    height: 24px;
    background-image: url('/static/asset/media/svg/workbase/workbase_variationLink.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease; /
}

.bati-btn-hover-dark:hover .svg-icon-variationLink{
    background-image: url('/static/asset/media/svg/workbase/workbase_variationLink_dark.svg');
}


/*!
 *  dropzone 드랍존
 */
.svg-icon-dropzone {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url('/static/asset/media/svg/symbol/dropzone.svg');
    mask-image: url('/static/asset/media/svg/symbol/dropzone.svg');
    -webkit-mask-size: 20px;
    background-color: #7E8299;
}



/*!
 *  workflow icon 워크플로 아이콘
 */

.svg-icon-setting {
    width: 14px;
    height: 18px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workflow/setting.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-icon-play {
    width: 23px;
    height: 12px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workflow/play.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-icon-pause {
    width: 15px;
    height: 15px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workflow/pause.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-icon-copy {
    width: 19px;
    height: 15px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workflow/copy.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-icon-close {
    width: 13px;
    height: 17px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workflow/close.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}



.svg-icon-eye-on {
    width: 18px;
    height: 18px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workflow/eye-on.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-eye-off {
    width: 18px;
    height: 18px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workflow/eye-off.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-grab {
    width: 16px;
    height: 16px;
    fill: #000;
    background-image: url('/static/asset/media/svg/workflow/grab.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


/*!
 *  workflow STATUS
 */
.svg-success {
    width: 20px;
    height: 20px;
    fill: #4CC489;
    background-image: url('/static/asset/media/svg/status/svg-status-success.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.svg-fail {
    width: 20px;
    height: 20px;
    fill: #4CC489;
    background-image: url('/static/asset/media/svg/status/svg-status-fail.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-circle-check-blue {
    width: 95px;
    height: 95px;
    background-image: url('/static/asset/media/svg/status/circle-check-blue.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*!
 * workflow badge status
 */
.svg-badge-new {
    width: 15px;
    height: 15px;
    fill: #4CC489;
    background-image: url('/static/asset/media/svg/status/svg-badge-new.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*
 * workflow action icon
 */
.svg-icon-datepicker {
    width: 19px;
    height: 19px;
    -webkit-mask-image: url('/static/asset/media/svg/workflow/datepicker.svg');
    mask-image: url('/static/asset/media/svg/workflow/datepicker.svg');
    -webkit-mask-size: 19px;
}

.svg-icon-external-link {
    width: 19px;
    height: 19px;
    -webkit-mask-image: url('/static/asset/media/svg/workflow/external-link.svg');
    mask-image: url('/static/asset/media/svg/workflow/external-link.svg');
    -webkit-mask-size: 19px;
}

.svg-icon-cellRange {
    width: 17px;
    height: 17px;
    -webkit-mask-image: url('/static/asset/media/svg/workflow/cellRange.svg');
    mask-image: url('/static/asset/media/svg/workflow/cellRange.svg');
    -webkit-mask-size: 17px;
}

.svg-icon-fileUpload {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('/static/asset/media/svg/workflow/file-upload.svg');
    mask-image: url('/static/asset/media/svg/workflow/file-upload.svg');
    -webkit-mask-size: 24px;
}





/*!
 *  우측 상단 ai save etc
 */
.svg-icon-data {
    width: 18px;
    height: 18px;
    background-image: url('/static/asset/media/svg/workflow/data.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-data-purple {
    width: 18px;
    height: 18px;
    background-image: url('/static/asset/media/svg/workflow/data-purple.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-direct {
    width: 15px;
    height: 15px;
    -webkit-mask-image: url('/static/asset/media/svg/workflow/direct.svg');
    mask-image: url('/static/asset/media/svg/workflow/direct.svg');
    -webkit-mask-size: 15px;
    background-color: #7E8299;
}



.svg-icon-ai {
    width: 18px;
    height: 18px;
    background-image: url('/static/asset/media/svg/workflow/ai.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-export {
    width: 15px;
    height: 15px;
    background-image: url('/static/asset/media/svg/workflow/export.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-save {
    width: 15px;
    height: 15px;
    background-image: url('/static/asset/media/svg/workflow/save.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-etc {
    width: 15px;
    height: 15px;
    background-image: url('/static/asset/media/svg/workflow/etc.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.svg-icon-expand {
    width: 15px;
    height: 15px;
    -webkit-mask-image: url('/static/asset/media/svg/workflow/expand.svg');
    mask-image: url('/static/asset/media/svg/workflow/expand.svg');
    -webkit-mask-size: 15px;
    background-color: #7E8299;
}

.svg-icon-shrink {
    width: 15px;
    height: 15px;
    -webkit-mask-image: url('/static/asset/media/svg/workflow/shrink.svg');
    mask-image: url('/static/asset/media/svg/workflow/shrink.svg');
    -webkit-mask-size: 15px;
    background-color: #7E8299;
}


/**
*  hover active . .
 */
.bati-svg-hover-fill-dark:hover path{
    fill: #000;
}

button.bati-btn-hover-svg-dark:hover .svg-icon div{
    background-color: #000;
}




/**
*  wrap
 */

.svg-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}


/**
    btn delete 삭제
 */
.svg-btn-deleteRow {
    width: 18px;
    height: 18px;
    fill: #000;
    background-image: url(/static/asset/media/svg/workflow/deleteRow.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/**
    credit icon 크레딧 아이콘
 */
.svg-icon-credit {
    width: 10px !important;
    height: 10px;
    background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="4.5" fill="%23FFD54F" stroke="%23FFA000" stroke-width="0.5"/><circle cx="5" cy="5" r="3" fill="%23FFECB3" stroke="%23FF8F00" stroke-width="0.2"/><text x="5" y="6.5" text-anchor="middle" font-size="4" font-weight="bold" fill="%23E65100">C</text></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 2px;
    vertical-align: middle;
    opacity: 1 !important;
}

/**
    workflow action icons 워크플로 액션 아이콘들
 */
.svg-icon-grip-vertical {
    width: 16px;
    height: 16px;
    background-image: url('/static/asset/media/svg/workflow/grip-vertical.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
}

.svg-icon-settings {
    width: 12px;
    height: 12px;
    background-image: url('/static/asset/media/svg/workflow/settings.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
}

.svg-icon-copy {
    width: 12px;
    height: 12px;
    background-image: url('/static/asset/media/svg/workflow/copy.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
}

.svg-icon-play {
    width: 12px;
    height: 12px;
    background-image: url('/static/asset/media/svg/workflow/play.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
}

.svg-icon-pause {
    width: 6px;
    height: 11px;
    background-image: url('/static/asset/media/svg/workflow/pause.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
}

.svg-icon-delete {
    width: 11px;
    height: 13px;
    background-image: url('/static/asset/media/svg/workflow/delete.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
}

/**
    grade badge icons 등급 뱃지 아이콘들
 */
.svg-badge-basic {
    width: 50px;
    height: 16px;
    background-image: url('/static/asset/media/svg/workflow/badge-basic.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-block;
}

.svg-badge-pro {
    width: 40px;
    height: 16px;
    background-image: url('/static/asset/media/svg/workflow/badge-pro.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-block;
}