.jjshoutbox{--shoutbox-red:#e16464;--shoutbox-green:#7be082;--shoutbox-output-bg-color:transparent;--shoutbox-output-border-color:#ff3c16;--shoutbox-output-border-width:1px;--shoutbox-user-state-online:var(--shoutbox-green);--shoutbox-user-state-offline:var(--shoutbox-green);--shoutbox-tooltip-bg-color:#333;--shoutbox-tooltip-color:#fff;--shoutbox-header-bg-color:#ddd;--shoutbox-header-color:#111;--shoutbox-date-color:#777;--shoutbox-delete-icon-color:var(--shoutbox-red);--shoutbox-edit-icon-color:#444;--shoutbox-reply-icon-color:#444;--shoutbox-history-icon-color:#444;--shoutbox-volume-icon-color:#444;--shoutbox-thumbs-icon-color:#444;--shoutbox-thumbs-count-color:#444;--shoutbox-message-color:currentcolor;--shoutbox-user-quote-bg-color:#eeeded;--shoutbox-guest-not-allowed-color:var(--shoutbox-red);--shoutbox-code-bg-color:#f6f8fa;--shoutbox-drag-border-color:#7cbbe2;--shoutbox-upload-placeholder-color:#7cbbe2;width:100%;margin:auto;& img{width:20px;display:inline}& svg{max-width:none;&.jj-show{display:inline-block}&.jj-hide{display:none}}& joomla-alert{min-width:auto}& .jjshoutbox-audio{display:none}& .avatar{position:relative;& img{border-radius:50%;width:30px;height:30px;margin-inline-end:5px}}& .btn-group{margin-bottom:0}& .modal-dialog-scrollable{height:450px}}.jjshoutboxform{margin:0 auto;& img{width:20px;max-width:none}& textarea{resize:vertical}& .jj-colour-block{vertical-align:middle;background:linear-gradient(135deg,#e16464 45%,#67e164 55%);border-radius:3px;width:14px;height:14px;display:inline-block}& .jj-colour-picker{width:95px;min-width:auto;&>li{width:18px;height:18px;min-height:18px;margin:3px;padding:0}& a{border-radius:3px;width:18px;height:18px;padding:0;display:inline-block}}& .dropdown-menu{text-align:center;white-space:normal;padding:5px!important;& li{min-height:20px;margin:2px;padding:0;list-style:none;display:inline-block}}& .jj-math-output{width:70px;margin-top:0}& .btn-toolbar svg{vertical-align:middle}& .jj-noguest{color:var(--shoutbox-guest-not-allowed-color);font-weight:700}}.jjshoutboxoutput{word-wrap:break-word;border:var(--shoutbox-output-border-width)solid var(--shoutbox-output-border-color);background-color:var(--shoutbox-output-bg-color);width:100%;margin:.5em 0;overflow-y:auto;& .shout-message{color:var(--shoutbox-message-color);text-align:start;margin:0;padding:5px;font-size:.8em;& img{width:20px}}& .shout-header{height:auto;color:var(--shoutbox-header-color);background-color:var(--shoutbox-header-bg-color);margin-top:.5rem;padding-inline-start:.25rem;font-size:.8rem;font-weight:700;& .btn{align-items:center;margin-bottom:0;display:inline-flex}}& pre{word-wrap:normal;background-color:var(--shoutbox-code-bg-color);padding:5px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:85%;&>code{word-wrap:normal;white-space:pre;background-color:#0000;display:inline}}& .jj-shout-date{text-align:end;color:var(--shoutbox-date-color);padding-inline-end:5px}& .jj-shout-edited,& .jj-shout-date-text{font-size:.7em}& .jj-shout-date-text{color:var(--shoutbox-date-color)}& .user-state{inset-inline-end:6px;border-radius:50%;width:8px;height:8px;display:inline-block;position:absolute;bottom:0;&.user-state.online{background:var(--shoutbox-user-state-online)}&.user-state.offline{background:var(--shoutbox-user-state-offline)}}}.jj-shout-reply,.jj-shout-edit,.jj-remove{align-items:center;display:inline-flex}.jj-quote{background-color:var(--shoutbox-user-quote-bg-color);width:100%;font-size:.9em;display:inline-block}.jj-shout-reply,.jj-shout-edit{margin-inline-end:5px}.jj-thumbs-up{font-size:.7em;position:relative}.jj-thumbs-up-count{color:var(--shoutbox-thumbs-count-color)}.jjshoutbox-actions{text-align:end;margin-bottom:.5rem;& a:focus,& a:active,& img:focus,& img:active{border:0;outline:0;text-decoration:none}}.bbcode-form{max-height:250px;& p{font-weight:700}}.bbcode-button img{vertical-align:middle}.jj-imageupload{position:relative;&.jj-hover{border:2px dashed var(--shoutbox-drag-border-color);& .jj-placeholder{display:block}}& .jj-placeholder{width:100%;color:var(--shoutbox-upload-placeholder-color);text-align:center;font-size:16px;font-weight:700;display:none;position:absolute;top:50%;transform:translateY(-50%)}}.jj-toggle{transition:all .4s ease-in;overflow:hidden;&.jj-hidden{transition-timing-function:ease-out;border:0!important;min-height:0!important;max-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}}.jj-bold{font-weight:700!important}.jj-italic{font-style:italic!important}.jj-underline{text-decoration:underline!important}.jj-clearfix:before{content:"";display:table-cell}.jj-clearfix:after{clear:both;content:"";display:table}.jj-flex{display:flex}.jj-flex-middle{align-items:center}.jj-flex-right{justify-content:flex-end}.jj-flex-space-between{justify-content:space-between}