@charset "uft-8";


/* --------------------------  */
/* grid (.dino-grid-container)    */
/* --------------------------  */

/* 기본형 grid */
.dino-grid-container {position: relative; display: grid; gap: 10px; grid-template-columns: repeat(1, 1fr);}
.dino-grid-container.col-1 {grid-template-columns: repeat(1, 1fr);}
.dino-grid-container.col-2 {grid-template-columns: repeat(2, 1fr);}
.dino-grid-container.col-3 {grid-template-columns: repeat(3, 1fr);}
.dino-grid-container.col-4 {grid-template-columns: repeat(4, 1fr);}
.dino-grid-container.col-5 {grid-template-columns: repeat(5, 1fr);}
.dino-grid-container.col-6 {grid-template-columns: repeat(6, 1fr);}
.dino-grid-container.col-7 {grid-template-columns: repeat(7, 1fr);}
.dino-grid-container.col-8 {grid-template-columns: repeat(8, 1fr);}
.dino-grid-container + .dino-grid-container {margin-top: 30px;}
.dino-grid-container > .title {grid-column: 1 / -1; font-size: 14px; font-weight: 400;}
.dino-grid-container > *:not(.title) {position: relative; border: 1px solid var(--gray5); background-color: var(--bg-color); border-radius: 4px; min-height: 100px; padding: 15px 20px; min-width: 0;}
/* min-width: 0; --> grid item 내부 긴 요소 포함시 자동확장 방지  // overflow: hidden은 안됨(레이어 팝업) */
.dino-grid-container > *.span-2 {grid-column: span 2;}
.dino-grid-container > *.span-3 {grid-column: span 3;}
.dino-grid-container > *.span-4 {grid-column: span 4;}
.dino-grid-container > *.span-5 {grid-column: span 5;}
.dino-grid-container > *.span-6 {grid-column: span 6;}
.dino-grid-container > *.span-7 {grid-column: span 7;}
.dino-grid-container > *.span-8 {grid-column: span 8;}
.dino-grid-container > * > .title {font-size: 15px; font-weight: 400; margin-bottom: 12px;}
.dino-grid-container > * > * + .title {margin-top: 30px;}

/* 응용형 grid (예시) */
.dino-grid-container.type-1 > .big {grid-area: 2 / 2 / 4 / 4;}
.dino-grid-container.type-2 > .big {grid-area: 2 / 2 / 4 / 4;}
.dino-grid-container.type-2 > section:nth-of-type(2) {order: 2;}
.dino-grid-container.type-2 > section:nth-of-type(3) {order: 4;}
.dino-grid-container.type-2 > section:nth-of-type(4) {order: 3;}
.dino-grid-container.type-2 > section:nth-of-type(5) {order: 5;}

.dino-grid-container p.content-nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}



/* --------------------------  */
/* Tab                         */
/* --------------------------  */

/* Section Tab */
.dino-section-tab {position: relative; margin: 30px 0;}
.dino-section-tab .dino-grid-container {display: none; margin-top: 0;}
.dino-section-tab .dino-grid-container.on {display: grid;}
.dino-section-tab .dino-grid-container > .title {position: absolute; left: -9999px;}
.dino-tab {font-size: 13px; margin-bottom: 5px; border-bottom: 1px solid var(--gray4); overflow: auto; scrollbar-width: thin; scrollbar-color: #e0e0e0; -ms-overflow-style: none;}
.dino-tab::-webkit-scrollbar {height: 0;}
.dino-tab::-webkit-scrollbar-thumb {background-color: transparent; border-radius: 10px;}
.dino-tab:hover::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.2);}
.dino-tab::-webkit-scrollbar-track {background-color: transparent;}
.dino-tab > ul {display: inline-flex; vertical-align: top;}
.dino-tab > ul > li {flex-shrink: 0; border-top: 1px solid var(--gray4); border-left: 1px solid var(--gray4); border-top-left-radius: 4px; border-top-right-radius: 4px; overflow: hidden;}
.dino-tab > ul > li:last-child {border-right: 1px solid var(--gray5);}
.dino-tab > ul > li > a {display: block; padding: 10px 20px; background-color: var(--gray6);}
.dino-tab > ul > li.on > a {font-weight: 700; background-color: var(--bg-color);}




/* --------------------------  */
/* button                      */
/* --------------------------  */
.dino-btn-container,
.dino-btn,
.btn-line {
  --color-bg: var(--bg-color);
  --base-size: 26px;
  --font-size: 12px;
  --base-width: 80px;
}
.dino-btn.small {
  --base-size: 22px;
  --font-size: 11px;
  --base-width: 60px;
}
.dino-btn.regular {
  --base-size: 26px;
  --font-size: 12px;
  --base-width: 80px;
}
.dino-btn.medium {
  --base-size: 32px;
  --font-size: 14px;
  --base-width: 120px;
}
.dino-btn.large {
  --base-size: 38px;
  --font-size: 16px;
  --base-width: 160px;
}

/* button container */
.dino-btn-container::after {content: ''; display: block; clear: both;}
.dino-btn-container.left {text-align: left;}
.dino-btn-container.cetner {text-align: center;}
.dino-btn-container.right {text-align: right;}
#main > .dino-btn-container {margin-top: 20px;}
* + .dino-btn-container {margin-top: 10px;}
.dino-btn-container + * {margin-top: 10px;}

/* button basic */
.dino-btn {position: relative; display: inline-flex; justify-content: center; font-size: var(--font-size); min-width: var(--base-width); height: var(--base-size); line-height: calc(var(--base-size) - 2px); padding: 0 0.8em; border: 1px solid transparent; border-radius: 4px; background-color: #999999; color: #ffffff; vertical-align: middle; cursor: pointer; appearance: none; transition: all 0.3s; text-align: center; overflow: hidden;}
.dino-btn > * {position: relative;}
.dino-btn:hover {border-color: rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1);}
.dino-btn:active {box-shadow: none;}
.dino-btn.angle {border-radius: 0;}
.dino-btn.circle {border-radius: 100px; padding: 0 1em;}
.dino-btn.disabled {opacity: 0.5; cursor: no-drop !important;}
.dino-btn.left {float: left; margin-right: 3px;}
.dino-btn.block {display: block;}

/* button color */
.dino-btn.default {background-color: var(--bg-color); color: var(--main-text); border-color: var(--gray3);}
.dino-btn.main {background-color: var(--blue);}
.dino-btn.sub1 {background-color: var(--mint);}
.dino-btn.sub2 {background-color: var(--yellow);}
.dino-btn.dark {background-color: var(--gray);}
.dino-btn.warn {background-color: var(--red);}

/* icon text */
.dino-btn > i {position: relative; opacity: 0.8;}
.dino-btn > i::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dino-btn > i:first-child {margin-right: 0.5em;}
.dino-btn > i:last-child {margin-left: 0.5em;}

/* icon box (with text) */
.dino-btn.icon-left {padding-left: calc(var(--base-size) + 0.5em);}
.dino-btn.icon-left > i {position: absolute; left: 0; top: 0; width: var(--base-size); height: 100%; margin: 0; background-color: rgba(255, 255, 255, 0.3);}
.dino-btn.icon-left.default > i {background-color: var(--gray6);}
.dino-btn.icon-right {padding-right: calc(var(--base-size) + 0.5em);}
.dino-btn.icon-right > i {position: absolute; right: 0; top: 0; width: var(--base-size); height: 100%; margin: 0; background-color: rgba(255, 255, 255, 0.3);}
.dino-btn.icon-right.default > i {background-color: var(--gray6);}

/* icon only (no text) */
.dino-btn.icon {min-width: var(--base-size); padding: 0;}
.dino-btn.icon > em {position: absolute; left: -9999px;}
.dino-btn.icon > i {margin: 0;}

/* line 형 버튼 디자인 */
.btn-line .dino-btn,
.dino-btn.line {background-color: var(--color-bg); color: #999999; border: 2px solid #999999; line-height: calc(var(--base-size) - 4px);}
.btn-line.no-line .dino-btn,
.dino-btn.line.no-line {background-color: transparent !important;}

/* line 형 버튼 button color */
.btn-line .dino-btn.default,
.dino-btn.line.default,
.btn-line .dino-btn.default[class*="icon-"] > i,
.dino-btn.line.default[class*="icon-"] > i {border-color: var(--main-text); color: var(--main-text);}
.btn-line .dino-btn.main,
.dino-btn.line.main,
.btn-line .dino-btn.main[class*="icon-"] > i,
.dino-btn.line.main[class*="icon-"] > i {border-color: var(--blue); color: var(--blue);}
.btn-line .dino-btn.sub1,
.dino-btn.line.sub1,
.btn-line .dino-btn.sub1[class*="icon-"] > i,
.dino-btn.line.sub1[class*="icon-"] > i {border-color: var(--mint); color: var(--mint);}
.btn-line .dino-btn.sub2,
.dino-btn.line.sub2,
.btn-line .dino-btn.sub2[class*="icon-"] > i,
.dino-btn.line.sub2[class*="icon-"] > i {border-color: var(--yellow); color: var(--yellow);}
.btn-line .dino-btn.dark,
.dino-btn.line.dark,
.btn-line .dino-btn.dark[class*="icon-"] > i,
.dino-btn.line.dark[class*="icon-"] > i {border-color: var(--gray); color: var(--gray);}
.btn-line .dino-btn.warn,
.dino-btn.line.warn,
.btn-line .dino-btn.warn[class*="icon-"] > i,
.dino-btn.line.warn[class*="icon-"] > i {border-color: var(--red); color: var(--red);}

/* line 형 버튼 icon box (with text) 라인 추가 */
.btn-line .dino-btn.icon-left > i,
.dino-btn.line.icon-left > i {border-right: 1px solid rgba(0, 0, 0, 0.1);}
.btn-line .dino-btn.icon-right > i,
.dino-btn.line.icon-right > i {border-left: 1px solid rgba(0, 0, 0, 0.1);}



/* --------------------------  */
/* form                        */
/* --------------------------  */

/* 변수선언 */
.dino-form-group,
.dino-form {
  --base-size: 26px;
  --font-size: 12px;
  --radius: 4px;
  --color-bg: var(--bg-color);
  --color-bg-box: var(--gray6);
  --color-text: var(--text-color);
  --color-border: var(--gray3);
  --color-focus: rgba(0, 122, 255, 1);
  --color-focus-outline: rgba(0, 122, 255, 0.3);
  --color-valid: rgba(40, 205, 65, 1);
  --color-valid-outline: rgba(40, 205, 65, 0.3);
  --color-error: rgba(255, 59, 48, 1);
  --color-error-outline: rgba(255, 59, 48, 0.3);
}

/* 기본 form 디자인 */
.dino-form {position: relative; display: inline-block; vertical-align: top; font-size: var(--font-size); background-color: var(--color-bg);}
.dino-form input.text,
.dino-form select,
.dino-form textarea {position: relative; height: var(--base-size); border: 1px solid var(--color-border); border-radius: var(--radius); outline: 3px solid transparent; vertical-align: middle; color: var(--main-text); font: inherit; transition: all 0.3s; appearance: none; background-color: transparent; z-index: 1;}
.dino-form input[type="file"] {position: relative; font-size: var(--font-size); outline: 3px solid transparent; transition: all 0.3s;}
.dino-form input[type="radio"],
.dino-form input[type="checkbox"] {position: relative; margin: 0; vertical-align: middle; outline: none;}
.dino-form input[type="radio"]::before,
.dino-form input[type="checkbox"]::before {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1.1em; height: 1.1em; border: 3px solid transparent; border-radius: 100%; transition: all 0.3s;}
.dino-form input[type="checkbox"]::before {border-radius: 4px;}
.dino-form input.text {width: 160px; padding: 0 0.8em;}
.dino-form select {padding: 0 1.6em 0 0.8em;}
.dino-form textarea {padding: 0.8em; width: 100%; height: 100px;}
.dino-form *[readonly] {background-color: rgba(255, 204, 0, 0.1) !important;}
.dino-form *[disabled] {background-color: #eeeeee !important; opacity: 0.7;}


/* form container 형식 추가 */
.dino-form.select::before {content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 0.5em; top: 50%; transform: translate(0, -50%); opacity: 0.4;}
.dino-form.block {display: block;}
.dino-form.block > input,
.dino-form.block > select,
.dino-form.block > textarea {display: block !important; width: 100% !important;}
.dino-form.block + .dino-form {margin-top: 3px;}
.dino-form + .dino-form.block {margin-top: 3px;}
.dino-form ::placeholder {opacity: 0.6;}

/* 상태별 디자인 (focus, valid, error) */
.dino-form input.text:focus,
.dino-form select:focus,
.dino-form textarea:focus,
.dino-form input[type="file"]:focus {border-color: var(--color-focus); outline-color: var(--color-focus-outline); z-index: 10;}
.dino-form input[type="radio"]:focus,
.dino-form input[type="checkbox"]:focus {z-index: 10;}
.dino-form input[type="radio"]:focus::before,
.dino-form input[type="checkbox"]:focus::before {border-color: var(--color-focus-outline);}

.dino-form.valid::after {content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 0.5em; top: 50%; transform: translate(0, -50%); color: var(--color-valid);}
.dino-form.valid input.text,
.dino-form.valid select,
.dino-form.valid textarea {border-color: var(--color-valid); padding-right: var(--base-size);}
.dino-form.valid input.text:focus,
.dino-form.valid input[type="file"]:focus,
.dino-form.valid select:focus,
.dino-form.valid textarea:focus {outline-color: var(--color-valid-outline);}
.dino-form.valid.select::before {opacity: 0;}

.dino-form.error::after {content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 0.5em; top: 50%; transform: translate(0, -50%); color: var(--color-error);}
.dino-form.error input.text,
.dino-form.error select,
.dino-form.error textarea {border-color: var(--color-error); color: var(--color-error); padding-right: var(--base-size);}
.dino-form.error input.text:focus,
.dino-form.error input[type="file"]:focus,
.dino-form.error select:focus,
.dino-form.error textarea:focus {outline-color: var(--color-error-outline);}
.dino-form.error.select::before {opacity: 0;}

/* radio, checkbox */
.dino-form ul.input-list {display: inline-flex; flex-wrap: wrap; gap: 0 20px; vertical-align: top; line-height: var(--base-size);}
.dino-form ul.input-list > li,
.dino-form > p.check {position: relative;}
.dino-form ul.input-list > li > input,
.dino-form > p.check > input {top: -1px;}
.dino-form ul.input-list label,
.dino-form > p.check label {display: inline-block; vertical-align: top; padding-left: 0.5em;}
.dino-form ul.input-list.block {display: block; line-height: 1.3em;}
.dino-form ul.input-list.block > li + li {margin-top: 4px;}

/* icon */
.dino-form.icon input.text,
.dino-form.icon select,
.dino-form.icon textarea {padding-left: var(--base-size);}
.dino-form.icon > i {position: absolute; left: 0; top: 0; width: var(--base-size); height: 100%; opacity: 0.4; transition: all 0.3s; z-index: 20;}
.dino-form.icon > i::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dino-form.icon textarea {padding-left: calc(var(--base-size) + 0.5em);}
.dino-form.icon textarea + i {background-color: var(--color-bg-box);}
.dino-form > *:focus + i {color: var(--color-focus); opacity: 0.7;}
.dino-form.valid > i {color: var(--color-valid);}
.dino-form.error > i {color: var(--color-error);}
.dino-form.icon > *:focus + i {opacity: 0.7;}

/* 입력 도움말 */
.dino-form div.help {position: absolute; right: 0; bottom: 100%; width: 16px; height: 16px;}
.dino-form div.help > a {display: block; height: 100%; overflow: hidden;}
.dino-form div.help > a em {position: absolute; left: -999px;}
.dino-form div.help > a::before {content: '\f059'; font-family: 'Font Awesome 6 Free'; font-weight: 500; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--focus-color);}
.dino-form div.help > .popup {position: absolute; right: -8px; bottom: calc(100% + 6px); width: 200px; border-radius: 4px; padding: 4px; font-size: 11px; background-color: rgba(255, 255, 255, 0.8); border: 1px solid var(--focus-color); color: var(--focus-color); box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2); z-index: 100; display: none;}
.dino-form div.help > .popup::before {content: ''; position: absolute; right: 8px; bottom: -12px; border: 6px solid transparent; border-top-color: var(--focus-color);}
.dino-form div.help > .popup::after {content: ''; position: absolute; right: 9px; bottom: -10px; border: 5px solid transparent; border-top-color: rgba(255, 255, 255, 1);}
.dino-form div.help > a:hover + .popup {display: block;}



/* form group */
.dino-form-group {position: relative; display: inline-flex; vertical-align: top; font-size: var(--font-size); background-color: var(--color-bg); color: var(--color-text); max-width: 100%; line-height: calc(var(--base-size) - 2px);}
.dino-form-group input.text,
.dino-form-group select,
.dino-form-group textarea {border-radius: 0;}
.dino-form-group > * {position: relative; flex-grow: 0;}
.dino-form-group > * + *,
.dino-form-group > * + * > input.text,
.dino-form-group > * + * > select,
.dino-form-group > * + * > textarea {border-left: none !important;}
.dino-form-group > *:first-child,
.dino-form-group > *:first-child input.text,
.dino-form-group > *:first-child select,
.dino-form-group > *:first-child textarea {border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.dino-form-group > *:last-child,
.dino-form-group > *:last-child input.text,
.dino-form-group > *:last-child select,
.dino-form-group > *:last-child textarea {border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.dino-form-group.block {width: 100%;}
.dino-form-group.block + .dino-form-group.block {margin-top: 3px;}
.dino-form-group > .dino-form {flex-grow: 1;}
.dino-form-group > .dino-form > input.text,
.dino-form-group > .dino-form > select,
.dino-form-group > .dino-form > textarea {width: 100%;}

.dino-form-group > label {border: 1px solid var(--color-border); min-width: 60px; text-align: center; padding: 0 0.6em; background-color: var(--color-bg-box); white-space: nowrap;}
.dino-form-group > span {border: 1px solid var(--color-border); min-width: var(--base-size); text-align: center; padding: 0 0.6em; background-color: var(--color-bg-box); white-space: nowrap;}
.dino-form-group span.label em {color: var(--red); margin-left: 5px;}
.dino-form-group > span.icon > i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.4;}
.dino-form-group > span.text {background-color: var(--color-bg);}
.dino-form-group > span.no-border {border-color: transparent;}
.dino-form-group > span.check > input {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;}
.dino-form-group > span.check > label {position: absolute; left: -9999px;}
.dino-form-group > a.btn {border: 1px solid transparent; min-width: var(--base-size); text-align: center; padding: 0 0.6em; background-color: var(--mint); color: #ffffff;}
.dino-form-group > a.btn > i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dino-form-group + span.text {display: inline-block; vertical-align: top; line-height: 26px;}

.dino-form-group div.help {border: 1px solid var(--color-border); width: var(--base-size);}
.dino-form-group div.help > a {display: block; height: 100%; overflow: hidden;}
.dino-form-group div.help > a em {position: absolute; left: -999px;}
.dino-form-group div.help > a::before {content: '\f059'; font-family: 'Font Awesome 6 Free'; font-weight: 500; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--focus-color); opacity: 0.4;}
.dino-form-group  div.help > .popup {position: absolute; right: 0; top: calc(100% + 3px); width: 200px; border-radius: 4px; padding: 0.6em 0.8em; font-size: calc(var(--font-size) - 1px); background-color: var(--color-bg); border: 1px solid var(--color-border); color: var(--focus-color); box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2); z-index: 100; display: none;}
.dino-form-group  div.help > .popup em {font-weight: 700; display: block; margin-bottom: 3px;}
.dino-form-group div.help .popup::before {content: ''; position: absolute; right: 6px; top: -12px; border: 6px solid transparent; border-bottom-color: var(--color-border);}
.dino-form-group div.help .popup::after {content: ''; position: absolute; right: 6px; top: -10px; border: 6px solid transparent; border-bottom-color: var(--color-bg);}
.dino-form-group div.help.on .popup {display: block;}

/* input size */
.dino-form input.text.short {width: 60px;}
.dino-form input.text.year {width: 60px;}
.dino-form input.text.month {width: 80px;}
.dino-form input.text.date {width: 90px;}
.dino-form input.text.datetime {width: 140px;}
.dino-form input.text.digit {text-align: right;}



/*
.dino-form.valid > i {color: var(--color-valid);}
.dino-form.valid > *:focus + i {opacity: 0.7;}
.dino-form.valid span.message {border-color: var(--color-valid); background-color: var(--color-valid-outline); color: var(--color-valid);}
.dino-form.valid span.message::before {border-bottom-color: var(--color-valid);}
*/
/*
.dino-form.error > i {color: var(--color-error);}
.dino-form.error > *:focus + i {opacity: 0.7;}
.dino-form.error span.message {border-color: var(--color-error); background-color: var(--color-error-outline); color: var(--color-error);}
.dino-form.error span.message::before {border-bottom-color: var(--color-error);}

/* input size *
.dino-form input.text.short {width: 60px;}
.dino-form input.text.medium {width: 100px;}
.dino-form input.text.date {width: 110px;}
.dino-form input.text.num {text-align: right;}
.dino-form.half {display: block;}
.dino-form.half input.text {width: 50%;}
.dino-form.full {display: block;}
.dino-form.full input.text,
.dino-form.full select  {width: 100%;}

*/







/* --------------------------  */
/* file attachment             */
/* --------------------------  */
div.dino-attach-file,
div.dino-attach-image {
  --color-icon: var(--yellow);
  --color-size: var(--mint);
  --color-move: var(--mint);
  --color-del: var(--red);
  --color-text-hover: var(--mint);
}

div.dino-attach-file {position: relative; font-size: 11px; color: var(--gray); text-align: left;}
div.dino-attach-file > ul {position: relative;}
div.dino-attach-file > ul > li {position: relative; height: 26px; line-height: 24px; border: 1px solid var(--gray5); border-radius: 4px; transition: border-color 0.3s; background-color: var(--main-bg);}
div.dino-attach-file > ul > li:hover {border-color: var(--gray3);}
div.dino-attach-file > ul > li + li {margin-top: 3px;}
div.dino-attach-file > ul > li > i {position: absolute; left: 0.6em; top: 50%; transform: translate(0, -50%); color: var(--color-icon);}
div.dino-attach-file > ul > li .title {display: block; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2.5em; padding-right: 9em; transition: color 0.3s;}
div.dino-attach-file > ul > li > a.title::after {content: '\f063'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 7em; top: -3em; color: var(--color-move);}
div.dino-attach-file > ul > li > a.title:hover::after {animation: dino-attach-down 1s linear 0s infinite normal forwards;}
div.dino-attach-file > ul > li > a:hover {color: var(--color-text-hover);}
div.dino-attach-file > ul > li .size {position: absolute; right: 0.6em; top: 50%; transform: translate(0, -50%); line-height: 1.6em; font-size: 0.9em; border: 1px solid var(--color-size); color: var(--color-size); padding: 0 0.6em; border-radius: 0.3em;}
div.dino-attach-file > ul > li .function {position: absolute; display: inline-flex; right: 7em; top: 50%; transform: translate(0, -50%);}
div.dino-attach-file > ul > li .function > a {display: block; position: relative; font-size: 0.9em; width: 1.8em; height: 1.8em; border: 1px solid var(--color-move); color: var(--color-move); border-radius: 100px; overflow: hidden; opacity: 0; transition: all 0.3s;}
div.dino-attach-file > ul > li:hover .function > a {opacity: 1;}
div.dino-attach-file > ul > li .function > a:hover {background-color: var(--gray6);}
div.dino-attach-file > ul > li .function > a + a {margin-left: 3px;}
div.dino-attach-file > ul > li .function > a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.dino-attach-file > ul > li .function > a.del {border-color: var(--color-del); color: var(--color-del);}
div.dino-attach-file > ul > li > input {position: absolute; left: -9999px;}
div.dino-attach-file > ul ~ .dino-form {margin-top: 3px;}
div.dino-attach-file > ul ~ .dino-form input[type="file"] {font: inherit;}
div.dino-attach-file > ul > li.uploading > i {animation: dino-attach-rotate-v-center 1.5s linear 0s infinite normal forwards;}
div.dino-attach-file > ul > li.edit .title {padding-right: 15em;}
div.dino-attach-file > ul + input {margin-top: 5px;}

div.dino-attach-image {position: relative; font-size: 11px; color: var(--gray); text-align: left;}
div.dino-attach-image > ul {position: relative; display: flex; flex-wrap: wrap;}
div.dino-attach-image > ul > li {position: relative; width: 180px; height: 170px; border: 1px solid var(--gray5); border-radius: 4px; padding: 4px; transition: border-color 0.3s; background-color: var(--main-bg); margin: 0 5px 5px 0;}
div.dino-attach-image > ul > li:hover {border-color: var(--gray3);}
div.dino-attach-image > ul > li .thumb {position: relative; display: block; height: 110px; border: 1px solid var(--gray6); border-radius: 4px; background-color: var(--main-bg); overflow: hidden;}
div.dino-attach-image > ul > li .thumb > i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 4em; color: var(--color-icon);}
div.dino-attach-image > ul > li .thumb > img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; object-fit: contain;}
div.dino-attach-image > ul > li .thumb span.dimension {position: absolute; left: 0; bottom: -2em; width: 100%; line-height: 2em; font-size: 0.9em; color: #ffffff; background-color: rgba(0, 0, 0, 0.5); text-align: center; transition: bottom 0.3s;}
div.dino-attach-image > ul > li .thumb a.control {position: absolute; left: 50%; top: -50%; transform: translate(-50%, -50%); width: 3em; height: 3em; border-radius: 10em; background-color: rgba(0, 0, 0, 0.5); color: #ffffff; transition: all 0.3s;}
div.dino-attach-image > ul > li .thumb a.control:hover {background-color: rgba(0, 0, 0, 0.8);}
div.dino-attach-image > ul > li .thumb a.control i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.3em;}
div.dino-attach-image > ul > li .thumb:hover span.dimension {bottom: 0;}
div.dino-attach-image > ul > li .thumb:hover a.control {top: 50%;}
div.dino-attach-image > ul > li .title {display: block; line-height: 2.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
div.dino-attach-image > ul > li .title i {color: var(--color-icon); margin-right: 0.4em;}
div.dino-attach-image > ul > li .size {position: absolute; left: 0.6em; bottom: 0.6em; line-height: 1.6em; font-size: 0.9em; border: 1px solid var(--color-size); color: var(--color-size); padding: 0 0.6em; border-radius: 0.3em;}
div.dino-attach-image > ul > li .function {position: absolute; display: flex; right: 0.6em; bottom: 0.6em;}
div.dino-attach-image > ul > li .function > a {display: block; position: relative; font-size: 0.9em; width: 1.8em; height: 1.8em; border: 1px solid var(--color-move); color: var(--color-move); border-radius: 100px; overflow: hidden; transition: all 0.3s;}
div.dino-attach-image > ul > li .function > a:hover {background-color: var(--gray6);}
div.dino-attach-image > ul > li .function > a + a {margin-left: 3px;}
div.dino-attach-image > ul > li .function > a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.dino-attach-image > ul > li .function > a.del {border-color: var(--color-del); color: var(--color-del);}
div.dino-attach-image > ul > li > input {position: absolute; left: -9999px;}
div.dino-attach-image > ul ~ .dino-form input[type="file"] {font: inherit;}
div.dino-attach-image > ul > li.uploading .thumb > i {animation: dino-attach-rotate-center 1.5s linear 0s infinite normal forwards;}
div.dino-attach-image > ul > li.uploading .title > i {animation: dino-attach-rotate 1.5s linear 0s infinite normal forwards;}

@keyframes dino-attach-down {
  0% {top: -3em;}
  100% {top: 3em;}
}
@keyframes dino-attach-rotate {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}
@keyframes dino-attach-rotate-v-center {
  0% {transform: translate(0, -50%) rotate(0);}
  100% {transform: translate(0, -50%) rotate(360deg);}
}
@keyframes dino-attach-rotate-center {
  0% {transform: translate(-50%, -50%) rotate(0);}
  100% {transform: translate(-50%, -50%) rotate(360deg);}
}


/* --------------------------  */
/* customized form             */
/* --------------------------  */
.dino-multi-select {position: relative; display: inline-block; min-width: 160px; max-width: 300px; background-color: var(--main-bg); font-size: 12px; color: var(--main-text); vertical-align: middle;}
.dino-multi-select > a {position: relative; display: block; height: 2.4em; line-height: calc(2.4em - 2px); padding: 0 4em 0 0.6em; border: 1px solid var(--gray4); border-radius: 0; background-color: var(--main-bg); outline: 3px solid transparent; transition: all 0.3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.dino-multi-select > a::before {content: '\f0ae'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 2em; top: 50%; transform: translate(0, -50%); transition: all 0.3s; color: var(--gray2);}
.dino-multi-select > a::after {content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 0.6em; top: 50%; transform: translate(0, -50%); transition: all 0.3s;}
.dino-multi-select > a:focus {border: 1px solid rgba(0, 122, 255, 1); outline-color: rgba(0, 122, 255, 0.3); z-index: 10;}
.dino-multi-select > .container {position: absolute; left: 0; top: 100%; width: 100%; background-color: var(--main-bg); overflow: hidden; height: 0; display: none; z-index: 1000;}
.dino-multi-select > .container ul {padding: 0.6em 0; border: 1px solid var(--gray4); border-top: none;}
.dino-multi-select > .container ul > li {line-height: 2em; padding-left: 0.6em;}

.dino-multi-select.open > a::before {color: var(--gray);}
.dino-multi-select.open > a::after {transform: translate(0, -50%) rotate(180deg);}
.dino-multi-select.open > .container {display: block; height: auto;}