/* toolbox */

.toolbox      { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.toolbox      { display: none; position: fixed; z-index: 11; left: 50%; top: 50%; width: 400px; padding: 20px; font-size: 0; }
.toolbox      { background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.toolbox.show { display: block; }

.toolbox .close       { position: absolute; right: 0; top: 0; display: block; text-align: center; font-size: 24px; line-height: 36px; width: 36px; color: #228dcf; }
.toolbox .close:hover { text-decoration: none; }

.toolbox > ul                  { display: block; }
.toolbox > ul li               { display: inline-block; vertical-align: top; }
.toolbox > ul li a             { display: block; width: 80px; color: #228dcf; text-align: center; text-decoration: none; }
.toolbox > ul li a > span      { text-align: center; }
.toolbox > ul li a > span.icon { display: block; font-size: 32px; }
.toolbox > ul li a > span.text { display: block; font-size: 12px; padding-bottom: 5px; width: 100%; }

.toolbox > ul li a:hover       { color: #28447c; }
.toolbox > ul li.active a      { color: #28447c; }

.toolbox.tab1 > ul li.tab1 > a { color: #28447c; border-bottom: 2px solid #ffbc2d; }
.toolbox.tab2 > ul li.tab2 > a { color: #28447c; border-bottom: 2px solid #ffbc2d; }
.toolbox.tab3 > ul li.tab3 > a { color: #28447c; border-bottom: 2px solid #ffbc2d; }
.toolbox.tab4 > ul li.tab4 > a { color: #28447c; border-bottom: 2px solid #ffbc2d; }
.toolbox.tab5 > ul li.tab5 > a { color: #28447c; border-bottom: 2px solid #ffbc2d; }

.toolbox      .tooltab      { user-select: text; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; }

.toolbox      .tooltab      { display: none; font-size: 14px; margin-top: 20px; }
.toolbox.tab1 .tooltab.tab1 { display: block; }
.toolbox.tab2 .tooltab.tab2 { display: block; }
.toolbox.tab3 .tooltab.tab3 { display: block; }
.toolbox.tab4 .tooltab.tab4 { display: block; }
.toolbox.tab5 .tooltab.tab5 { display: block; }

.toolbox.show            { display: block; }


/* enlarged inputs */

.tooltab .classowl-input-frame > .input          { padding: 3px 9px; font-size: 18px; width: 100%; }
.tooltab .classowl-input-frame > .icon           { line-height: 38px; }
.tooltab .classowl-input-frame > textarea.input  { height: 38px;  min-height: 38px; font-size: 18px; max-height: 100px; resize: none; overflow: hidden; }


/* linebreak switching control extension */

.tooltab .classowl-input-frame > .icon.linebreak      { color: #228dcf; }
.tooltab .classowl-input-frame > .icon.linebreak.ctrl { color: #ccc; }

.tooltab .classowl-input-frame > .icon.linebreak                  { cursor: pointer; }
.tooltab .classowl-input-frame > .icon.linebreak       > .tooltip { background-color: rgba(0,0,0,0.8); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); border-radius: 5px; }
.tooltab .classowl-input-frame > .icon.linebreak       > .tooltip { padding: 5px; line-height: 18px; font-size: 12px; white-space: nowrap; }
.tooltab .classowl-input-frame > .icon.linebreak       > .tooltip { display: none; position: absolute; transform: translate(-50%, -100%); left: 50%; top: 0; }
.tooltab .classowl-input-frame > .icon.linebreak:hover > .tooltip { display: block; }

.tooltab .classowl-input-frame > .icon.linebreak      > .tooltip > span.none { display: block; }
.tooltab .classowl-input-frame > .icon.linebreak      > .tooltip > span.ctrl { display: none; }
.tooltab .classowl-input-frame > .icon.linebreak.ctrl > .tooltip > span.none { display: none; }
.tooltab .classowl-input-frame > .icon.linebreak.ctrl > .tooltip > span.ctrl { display: block; }



.tooltab div.loading      { position: absolute; display: none; right: 0; top: 0; width: 39px; height: 39px; background: url('/static/img/ajax-loader.gif') no-repeat center center; border: none; }
.tooltab div.loading.show { display: block; }

.tooltab .button         { line-height: 30px; width: 110px; margin: 20px 0 0 auto; }
.tooltab .button.center  { margin: 20px auto 0; }


.tooltab .priority      { float: left; margin-top: 13px; font-size: 0; }
.tooltab .priority div  { padding-bottom: 5px; font-size: 14px; }
.tooltab .priority a    { position: relative; display: inline-block; margin-right: 15px; width: 15px; height: 15px; }
.tooltab .priority a.p1 { background-color: #81cdf8; }
.tooltab .priority a.p2 { background-color: #fab37a; }
.tooltab .priority a.p3 { background-color: #ef4949; }
.tooltab .priority a.sel:after { content: ''; position: absolute; left: 1px; top: 1px; right: 1px; bottom: 1px; border: 1px solid #fff; }

.tooltab.voice form .classowl-recorder audio         { width: 370px; }
.tooltab.voice form .classowl-recorder      + button { display: none; }
.tooltab.voice form .classowl-recorder.play + button { display: block; }

.tooltab.link form.step1 input.error    { background-color: #fdd; }
.tooltab.link form.step1 .link-error    { margin-top: 10px; color: #de3030; }

.tooltab.link form.step2               { position: relative; }
.tooltab.link form.step2 .cancel       { position: absolute; right: 0; top: 0; z-index: 2; display: block; text-align: center; font-size: 24px; line-height: 24px; width: 24px; color: #fff; }
.tooltab.link form.step2 .cancel:hover { text-decoration: none; }

.tooltab.link form.step2 .preview       { position: relative; height: 120px; overflow: hidden; background: no-repeat top center; background-size: cover; }
.tooltab.link form.step2 .preview:after { position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(67,81,187,0.7); }
.tooltab.link form.step2 .preview:empty { background: url('/static/img/ajax-loader.gif') no-repeat center center; }
.tooltab.link form.step2 .preview:empty:after { display: none; }
.tooltab.link form.step2 .preview img   { display: block; width: 100%; }

.tooltab.link form.step2 .linkinfo        {  position: relative; z-index: 2; margin-top: -80px; padding: 0 20px 40px; height: 40px; color: #fff; }
.tooltab.link form.step2 .linkinfo .title { font-size: 14px; line-height: 24px; }
.tooltab.link form.step2 .linkinfo .host  { font-size: 10px; line-height: 16px; }

.tooltab.link.step1 form.step1 { display: block; }
.tooltab.link.step1 form.step2 { display: none;  }
.tooltab.link.step2 form.step1 { display: none;  }
.tooltab.link.step2 form.step2 { display: block; }

.tooltab .highlight   { font-size: 0; text-align: center; height: 39px; line-height: 39px; }
.tooltab .highlight a { position: relative; display: inline-block; margin-right: 18px; width: 30px; height: 30px; border-radius: 15px; vertical-align: middle; }
.tooltab .highlight a { font-size: 14px; text-align: center; color: #282828; line-height: 30px; text-decoration: none; }
.tooltab .highlight a:last-child { margin-right: 0; }
.tooltab .highlight a.h0 { background-color: #eee; border-radius: 20px; }
.tooltab .highlight a.h1 { background-color: #fcef7d; }
.tooltab .highlight a.h2 { background-color: #64df77; }
.tooltab .highlight a.h3 { background-color: #f477a8; }
.tooltab .highlight a.h4 { background-color: #ffb449; }
.tooltab .highlight a.h5 { background-color: #81cdf8; }
.tooltab .highlight a.h6 { background-color: #9688f8; }
.tooltab .highlight a.sel:after { content: ''; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; border: 2px solid #fff; border-radius: 16px; }


.tooltab.translate .dest                { font-style: italic; font-size: 0; }
.tooltab.translate .dest > div          { position: relative; display: inline-block; vertical-align: top; font-size: 14px; line-height: 21px; }
.tooltab.translate .dest > div a.lang   { margin-left: 5px; text-decoration: none; }
.tooltab.translate .dest > div a.lang i { padding: 0 5px;  }

.tooltab.translate .tts                 { float: right; line-height: 21px; font-size: 0; }
.tooltab.translate .tts a               { display: block; font-size: 24px; text-decoration: none; line-height: 36px; height: 36px; width: 36px; text-align: center; margin: -8px 0; overflow: hidden; }
.tooltab.translate .tts.playing a       { font-size: 18px; }

.tooltab.translate .tts.disabled a      { color: #999; }

.tooltab.translate .tts         a .play { display: initial; }
.tooltab.translate .tts         a .stop { display: none; }

.tooltab.translate .tts.playing a .play { display: none; }
.tooltab.translate .tts.playing a .stop { display: initial; }

.tooltab.translate .langs         { position: absolute; z-index: 2; left: 0; top: 21px; width: 200px; height: 300px; }
.tooltab.translate .langs.up      { top: auto; bottom: 21px; }
.tooltab.translate .langs         { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); font-size: 0; overflow: auto; display: none; }
.tooltab.translate .langs.show    { display: block; }
.tooltab.translate .langs a       { display: block; padding: 0 10px; line-height: 30px; font-size: 14px; font-style: normal; }
.tooltab.translate .langs a:hover { text-decoration: none; background-color: #eee; }
.tooltab.translate .langs a > span { margin-right: 5px; }
.tooltab.translate .langs .hidden  { display: none; }

.tooltab.translate .translated       { margin-top: 10px; min-height: 30px; max-height: 200px; overflow: auto; }
.tooltab.translate .translated:empty { background: url('/static/img/ajax-loader.gif') no-repeat center center; }
.tooltab.translate .translated:empty ~ .create-note { display: none; }
.tooltab.translate .translated.error { color: #de3030; }
.tooltab.translate .translated.error ~ .create-note { display: none; }