@import url('//uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css');
@import url('//uicdn.toast.com/tui-image-editor/latest/tui-image-editor.min.css');

DIV#dvSite.onlinetool > FOOTER { margin-top: 0 }
DIV#dvSite.onlinetool { background-color: #222 }
DIV#dvSite.onlinetool > HEADER { background-color: #222; background-color: rgba(34, 34, 34, .95) }
DIV#dvSite.onlinetool > MAIN .ui.subtitle > HEADER { color: #fff }
DIV#dvSite.onlinetool > HEADER > .ui.inner > H1 > A { background-image: url('./../image/logo-white.png') }
DIV#dvSite.onlinetool > HEADER > .ui.inner > .fn.ToggleMenu > .ui.icon { background-position: -13em 0 }
DIV#dvSite.onlinetool > HEADER > .ui.inner > NAV#nvMain > UL > LI > H2 > A { color: #fff }
DIV#dvSite.onlinetool > HEADER > .ui.inner > NAV#nvMain > UL > LI.liSelected > H2 > A { color: #d8292f }
DIV#dvSite.onlinetool > MAIN > .ui.inner > DIV#dvLocation > A { color: #888 }
DIV#dvSite.onlinetool > MAIN > .ui.inner > DIV#dvLocation > A:after { background-position: -11em 0 }
DIV#dvSite.onlinetool > MAIN > .ui.inner > DIV#dvLocation > STRONG { color: #fff }
DIV#dvSite.onlinetool > MAIN NAV > UL > LI:after { background-color: #444 }
DIV#dvSite.onlinetool > MAIN NAV > UL > LI > A { color: #676767 }
DIV#dvSite.onlinetool > MAIN NAV > UL > LI > A:hover { color: #fff }
DIV#dvSite.onlinetool > MAIN NAV > UL > LI > A:hover:after { background-color: #fff }
DIV#dvSite.onlinetool > MAIN NAV > UL > LI.liSelected > A { color: #d8292f }
DIV#dvSite.onlinetool > MAIN NAV > UL > LI.liSelected > A:after { background-color: #d8292f }
DIV#dvSite.onlinetool > MAIN .ui.subtitle > P { color: #aaa }

DIV#dvSite.onlinetool > MAIN#onlinetool > .ui.inner { color: #ddd }

MAIN#onlinetool { padding-bottom: 5em }
MAIN#onlinetool DIV#dvOnlinetool { position: relative }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools { background-color: #f7f7f7; color: #222; height: 100%; left: 0; position: absolute; top: 0; width: 25% }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > NAV { text-align: center }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > NAV > BUTTON { background: none; cursor: pointer; display: inline-block; font-size: 1.2em; font-weight: 800; padding: 2em 1em }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > NAV > BUTTON > SPAN { display: block; -webkit-transition: color .3s ease-out; transition: color .3s ease-out; position: relative }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > NAV > BUTTON > SPAN:after { background-color: #d8292f; bottom: -.25em; content: ''; display: block; height: 2px; left: 0; position: absolute; -webkit-transition: width .3s ease-out; transition: width .3s ease-out; width: 0 }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > NAV > BUTTON.buttonSelected > SPAN,
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > NAV > BUTTON:hover > SPAN { color: #d8292f }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > NAV > BUTTON.buttonSelected > SPAN:after,
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > NAV > BUTTON:hover > SPAN:after { width: 100% }

MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper { bottom: 0; left: 0; position: absolute; top: 6em; width: 100% }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV { display: none; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100% }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV.dvSelected { display: block }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV > UL { bottom: 0; left: 0; overflow-y: auto; padding: 0 2em 2em; position: absolute; top: 0; width: 100% }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV > UL > LI { margin-bottom: 2em }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV > UL > LI > A { border: 3px solid #fff; box-shadow: .5em .5em 1em rgba(0, 0, 0, .1); -webkit-transition: border-color .3s ease-out; transition: border-color .3s ease-out; }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV > UL > LI > A:hover { border: 3px solid #d8292f }

MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV.dvShapes {  }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV.dvShapes > UL { top: 7em }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV.dvShapes > UL > LI { display: inline-block; width: 50% }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV.dvShapes > UL > LI > A { margin: 0 .5em }

DIV#dvShapeColorPicker { left: 0; padding: 0 2em; position: absolute; top: 0; width: 100%; z-index: 1 }
DIV#dvShapeColorPicker .tui-colorpicker-container,
DIV#dvShapeColorPicker .tui-colorpicker-palette-container { width: auto }
DIV#dvShapeColorPicker .tui-colorpicker-container { background-color: #fff; border: 1px solid #eee; border-radius: .5em; box-shadow: .5em .5em 1em rgba(0, 0, 0, .05); padding: 1em 11em 1em 1em }
DIV#dvShapeColorPicker .tui-colorpicker-palette-container ul { margin: 0 auto; text-align: left; width: 12em }
DIV#dvShapeColorPicker .tui-colorpicker-palette-container ul li { display: inline-block; float: none; line-height: 1em; padding: .2em .1em }
DIV#dvShapeColorPicker .tui-colorpicker-palette-container .tui-colorpicker-clearfix { display: block }
DIV#dvShapeColorPicker .tui-colorpicker-palette-container .tui-colorpicker-clearfix:last-child { bottom: 1em; position: absolute; right: 3em; top: 1em; width: 9em }
DIV#dvShapeColorPicker .tui-colorpicker-palette-button { border: 0; border-radius: 50%; height: 1.25em; width: 1.25em }
DIV#dvShapeColorPicker .tui-colorpicker-palette-toggle-slider { cursor: pointer; display: block; background-color: #ccc; border-radius: 1em; color: #fff; float: none; font-weight: 800; line-height: 1em; margin-top: -1em; padding: .5em 1em; position: absolute; right: 0; top: 50% }
DIV#dvShapeColorPicker .tui-colorpicker-palette-toggle-slider:hover { background-color: #bbb }
DIV#dvShapeColorPicker .tui-colorpicker-palette-hex { background: none; display: none }
DIV#dvShapeColorPicker .tui-colorpicker-palette-preview { border: 0; border-radius: 50%; font-size: 2em; height: 1em; left: .5em; margin-top: -.5em; overflow: hidden; position: absolute; top: 50%; width: 1em }
DIV#dvShapeColorPicker .tui-colorpicker-slider-container { background-color: #fff; height: auto; padding: 1em; position: absolute; right: 2em }

MAIN#onlinetool DIV#dvOnlinetool DIV#dvTools > DIV#dvToolsWrapper > DIV.dvShapes > UL > LI > A > DIV > IMG { height: auto; max-height: 80%; max-width: 80%; width: auto; }

MAIN#onlinetool DIV#dvOnlinetool DIV#dvClientArea { margin-left: 25% }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvClientArea > DIV.dvWrapper { background-color: #000; padding-top: 70.7%; position: relative }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvClientArea > DIV.dvWrapper > DIV#dvImageEditor { height: 100%; left: 0; position: absolute; top: 0; width: 100% }
MAIN#onlinetool DIV#dvOnlinetool DIV#dvClientArea > DIV.dvWrapper > DIV#dvImageEditor .tui-image-editor-canvas-container { left: 50%; transform: translate(-50%, -50%); top: 50% }

MAIN#onlinetool DIV#dvControls { margin-top: 2em }
MAIN#onlinetool DIV#dvControls .ui.iconbutton { margin-right: 1em }
MAIN#onlinetool DIV#dvControls .ui.iconbutton > DIV { background-color: #444 }
MAIN#onlinetool DIV#dvControls .ui.iconbutton:hover > DIV { background-color: #d8292f }
MAIN#onlinetool DIV#dvControls .ui.iconbutton > SPAN { color: #ddd }
MAIN#onlinetool DIV#dvControls > .ui.colgroup > .ui.row > .ui.col:last-child { text-align: right }

MAIN#onlinetool > DIV#dvSaveForm { border-top: 1px solid #444; display: none; margin-top: 5em; padding-top: 5em }
MAIN#onlinetool > DIV#dvSaveForm.dvOpened { display: block }
MAIN#onlinetool > DIV#dvSaveForm SECTION { color: #ddd }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV {  }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV TABLE.ui { border-top-color: #ddd }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV TABLE.ui TBODY TR TD,
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV TABLE.ui TBODY TR TH { border: 0; color: #ddd }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV TABLE.ui TBODY TR TD { padding-right: 0 }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV TABLE.ui TBODY TR TH > SPAN.spRequired { color: #d8292f; font-weight: 800 }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV .ui.form { width: 100% }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV .ui.form > INPUT { background: none; color: #ddd }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV .ui.form:before { background-color: #444 }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV .ui.form:after { background-color: #ddd }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV .ui.form.focused:after { background-color: #d8292f }
MAIN#onlinetool > DIV#dvSaveForm SECTION > DIV STRONG { color: #fff; font-weight: 800 }
MAIN#onlinetool > DIV#dvSaveForm DIV.dvControls { text-align: center }