@charset "UTF-8";

/*#################################*/
/*### Scrollbars */
/*#################################*/
nav::-webkit-scrollbar { width:6px; position:absolute; top:0; right:0; }

nav::-webkit-scrollbar-track { display:none; background:#fff; }
nav::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }

nav::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
nav::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,0); }

.inlinePopup .content::-webkit-scrollbar { width:6px; position:absolute; top:0; right:0; }
.inlinePopup .content::-webkit-scrollbar-track { display:none; background:#fff; }
.inlinePopup .content::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
.inlinePopup .content::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
.inlinePopup .content::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
.inlinePopup .content::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }

.popup .content::-webkit-scrollbar { width:6px; position:absolute; top:0; right:0; }
.popup .content::-webkit-scrollbar-track { display:none; background:#fff; }
.popup .content::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
.popup .content::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
.popup .content::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
.popup .content::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }

.columns > li::-webkit-scrollbar, .chat .messages::-webkit-scrollbar { width:6px; position:absolute; top:0; right:0; }
.columns > li::-webkit-scrollbar-track, .chat .messages::-webkit-scrollbar-track { display:none; background:#fff; }
.columns > li::-webkit-scrollbar-track-piece:start, .chat .messages::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
.columns > li::-webkit-scrollbar-track-piece:end, .chat .messages::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
.columns > li::-webkit-scrollbar-track-piece, .chat .messages::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
.columns > li::-webkit-scrollbar-thumb, .chat .messages::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }

.trumbowyg-editor-box::-webkit-scrollbar { width:6px; position:absolute; top:0; right:0; }
.trumbowyg-editor-box::-webkit-scrollbar-track { display:none; background:#fff; }
.trumbowyg-editor-box::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
.trumbowyg-editor-box::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
.trumbowyg-editor-box::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
.trumbowyg-editor-box::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }

.ui-menu::-webkit-scrollbar { width:6px; position:absolute; top:0; right:0; }
.ui-menu::-webkit-scrollbar-track { display:none; background:#fff; }
.ui-menu::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
.ui-menu::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
.ui-menu::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
.ui-menu::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }

form.search .left::-webkit-scrollbar { width:6px; position:absolute; top:0; right:0; }
form.search .left::-webkit-scrollbar-track { display:none; background:#fff; }
form.search .left::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
form.search .left::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
form.search .left::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
form.search .left::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }

.trumbowyg-button-pane::-webkit-scrollbar { width:6px; height:6px; position:absolute; top:0; right:0; }
.trumbowyg-button-pane::-webkit-scrollbar-track { display:none; background:#fff; }
.trumbowyg-button-pane::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
.trumbowyg-button-pane::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
.trumbowyg-button-pane::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
.trumbowyg-button-pane::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }

form.search .query .button > ul > li > ul:not(.ui-menu)::-webkit-scrollbar { width:16px; position:absolute; top:0; right:0; }
form.search .query .button > ul > li > ul:not(.ui-menu)::-webkit-scrollbar-track { box-shadow:inset 0 0 10px 10px #fff; border-left:solid 10px transparent; }
form.search .query .button > ul > li > ul:not(.ui-menu)::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
form.search .query .button > ul > li > ul:not(.ui-menu)::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
form.search .query .button > ul > li > ul:not(.ui-menu)::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
form.search .query .button > ul > li > ul:not(.ui-menu)::-webkit-scrollbar-thumb { box-shadow:inset 0 0 10px 10px rgba(0,0,0,0.2); border-left:solid 10px transparent; }

/*#################################*/
/*### Reset */
/*#################################*/
html, body { width:100%; height:100%; min-height:100%; padding:0; margin:0; -webkit-text-size-adjust:100%; }
ul { margin:0; padding:0; }
h1, h2, h3, h4, h5 { margin:0; padding:0; }
p { margin:0; }
button { border:none; font-family:'Open Sans'; outline:none; }
[v-cloak] { display:none; }
input[type="checkbox"] { border-radius:0; }
a { cursor:pointer; }

/*#################################*/
/*### Basic */
/*#################################*/
body { font-family:'Open Sans'; overflow-y:scroll; background:#fff; }
body .ar { text-align:right; }
body .ac { text-align:center; }
body .wrapper { width:100%; min-height:100%; float:left; position:relative; }
body .wrap-all { width:100%; min-height:100%; float:left; position:relative; }
body .wrap-menu { width:100%; min-height:100%; float:left; }
body .swipeAnchor { position:fixed; top:0; left:0; width:15px; height:100%; background:#ff0; display:none; }
body .strike, body .strike input { text-decoration:line-through; }
body .strike input[type="date"]::after { content:""; width:62px; height:1px; background:#000; position:absolute; bottom:8px; }
body .blockrain { width:100%; height:100%; float:left; text-align:center; background:#000; padding:20px; box-sizing:border-box; }
body .blockrain > div { width:100%; max-width:538px; height:100%; display:inline-block; }
span.req { color:#ff0000; }
.toast { background:#333; width:auto; bottom:140px; left:50%; color:#fff; top:initial; transform:translateX(-50%); padding:10px 14px; border-radius:5px; position:fixed; display:none; text-align:center; font-size:14px; z-index:3000; }

main form.search legend { display:none; }

/*#################################*/
/*### Buttons */
/*#################################*/
.button { font-family:'Open Sans', sans-serif; color:#fff; padding:7px 12px; border-radius:100px; text-decoration:none; font-size:12px; float:left; font-weight:700; user-select:none; box-shadow:rgba(0,0,0,0.1) 0px 2px 1px; transition:opacity 0.2s linear; }
.button:not(span) { cursor:pointer; }
.button.green { background:#6ea56a; }
.button.red { background:#c54b4b; }
.button.white { background:#fff; border:1px solid #ccc; color:#666; }

.button:not(.disabled):not(:disabled):not(span):hover { opacity:0.7; }
.button.fr { float:right; }
.button.disabled, .button:disabled { cursor:default; opacity:0.3; }

/*#################################*/
/*### Popup */
/*#################################*/
.popup { width:100%; height:100%; position:fixed; top:0; left:0; z-index:10; display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:all 0.2s ease; }
.popup.visible { visibility:visible; opacity:1; }
.popup .bg {  width:100%; height:100%; position:absolute; background:rgba(0,0,0,0.5); }
.popup .slides { width:60%; height:88%; max-width:1024px; }
.popup .slides > div { width:100% !important; border-right:none; position:relative; }
.popup .bar { background:none; box-shadow:none; padding:0; border:none; }
.popup .bar ul.breadcrumb li { color:#fff; text-shadow:rgba(0,0,0,0.5) 0 1px 1px; }
.popup .bar ul.controls li { color:#fff; }
.popup .content { padding:30px; max-height:80vh; overflow-y:scroll; overflow-x:hidden; border-radius:3px; background:#fff; box-sizing:border-box; }
.popup .deals .content { background:rgb(110,165,106,0.5); }
.popup .prospects .content { background:rgb(187,76,76,0.5); }
.popup .contacts .content { background:rgb(235,188,48,0.5); }
.popup fieldset { position:relative; z-index:1; }
main .inlinePopup { width:100% !important; height:100%; position:fixed; top:0; left:0; z-index:10; transition:all 0.2s ease; background:rgba(0,0,0,0.5); padding:3% calc((100vw - 1024px) / 2); box-sizing:border-box; align-items:center; display:flex; flex-direction:column; }
main .inlinePopup .bar { background:none; box-shadow:none; padding:0; border:none; max-width:calc(100% - 20px) !important; }
main .inlinePopup .bar ul.breadcrumb li { color:#fff; text-shadow:rgba(0,0,0,0.5) 0 1px 1px; }
main .inlinePopup .bar ul.controls > li { color:#fff; margin:5px 1px; }
main .inlinePopup .bar ul.controls > li > a.material-icons::before { position:absolute; top:3px; left:3px; }
main .inlinePopup .bar ul.controls > li > a.material-icons.loader { color:#62bdf9; opacity:0; }
main .inlinePopup .bar ul.controls > li > a.material-icons.loader.loading { opacity:1;  }
main .inlinePopup .bar ul.controls > li > a.material-icons.loader::before { font-size:20px; animation:spin 1500ms infinite linear; top:5px; left:5px; }
main .inlinePopup .bar ul.controls > li > a.material-icons.loader.done { transition:all 1s ease; opacity:0; transition-delay:1s; }
main .inlinePopup .bar ul.controls > li > a.material-icons.loader.done::before { content:"\e92d"; color:#a3f59d; animation:none; }
main .inlinePopup .bar > .container { max-width:initial !important; }
main .inlinePopup .content { padding:30px; max-height:80vh; overflow-y:scroll; overflow-x:hidden; border-radius:3px; background:#fff; box-sizing:border-box; max-width:initial !important; }
main .inlinePopup.large { padding:1% calc((100vw - 1800px) / 2); }
main .inlinePopup.large .content {  max-height:calc(100% - 40px); height:100%; max-width:calc(100% - 20px) !important; }

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/*#################################*/
/*### Theme */
/*#################################*/
fieldset legend .controls li a,
.pagination .pages .actions a, 
.pagination .pages .scroll > div a.selected,
.button,
.themeColor,
.bar.material-icons::before,
.toggle input:checked::before,
.kanban > li > ul > li > a .bottom .avatar,
header .right button .profile .avatar { background:#366889; }

.pagination .pages .actions a, 
.pagination .pages .scroll > div a.selected,
.button,
.themeColor,
.kanban > li > ul > li > a .bottom .avatar,
header .right button .profile .avatar { color:#fff; }

.kanban > li > ul > li > a > .top > .pretitle,
.kanban > li > ul > li > a .bottom .deadline::before { color:#366889; }

.toggle { width:100%; float:left; margin:0; }
.toggle input { width:40px !important; background:none !important; border:none !important; margin:0; padding:0 !important; float:left; cursor:pointer; position:relative; -webkit-appearance:none !important; }
.toggle input::before { content:""; border-radius:100px; width:100%; height:23px; float:left; border:1px solid #999; box-sizing:border-box; } 
.toggle input::after { content:""; background:#666; border-radius:100px; width:15px; height:15px; float:left; position:absolute; left:4px; top:4px; transition:all 0.2s ease; } 
.toggle input:checked::after { left:20px; background:#fff; }
.toggle input:checked::before { border:1px solid transparent; }
.toggle label { padding:4px 12px; cursor:pointer; color:#333; font-weight:bold; margin:0; }
.toggle .material-icons { float:right; color:#666; }

form.search .right .toggle input { position:absolute; top:10px; right:7px; z-index:1; }

form.search ul.form li .toggle { margin:0 0 5px 0; }
form.search ul.form li > .toggle/*, form.search ul.form li .toggle:nth-child(2)*/ { border-bottom:1px solid #ededed; padding-bottom:15px; }
/*form.search ul.form li .toggle:nth-child(2) { margin-top:15px; }
form.search ul.form li .toggle.wall { margin-top:15px; }
form.search ul.form li .toggle.wall label { font-weight:bold; }*/
form.search ul.form li .wall { width:100%; float:left; margin-top:15px; }
form.search ul.form li .wall:last-child { border-bottom:none; }
form.search ul.form li .wall .toggle:first-child input:checked::before { background:#234f6b; }
form.search ul.form li .wall .toggle:first-child label { font-weight:bold; }

/*#################################*/
/*### Login */
/*#################################*/
body.login {  }
body.login header .logo {  }
body.login main { width:100%; left:0; background:none; top:0; height:100%; padding:0; }
body.login header { }
body.login .slides { background:none; height:100%; }
body.login .slides > div.full { width:380px; left:50%; margin-left:-200px; position:absolute; top:20%; height:auto; max-height:82%; min-width:initial; overflow-y:auto; overflow-x:hidden; border:1px solid rgba(0,0,0,0.05); border-radius:3px; box-shadow:rgba(0,0,0,0.15) 0px 3px 7px; padding:30px; }
body.login .slides > div > .content { padding:0; }
body.login .slides > div > .content fieldset { margin:0 0 15px 0; }
body.login .slides > div > .content fieldset:last-child { margin-bottom:0; }
body.login .slides > div > .content fieldset.footer li { display:flex; gap:15px; }
body.login ul.form li input:not([type=checkbox]), body.login ul.form li select:not([size]) { font-size:16px; padding:10px 10px 10px 40px; }
body.login ul.form li select[multiple], body.login ul.form li select[size] { font-size:14px; padding:10px; font-size:16px; }
body.login ul.form li::before { font-family:'Material Icons Round'; float:left; font-weight:normal; font-size:24px; text-align:center; color:rgba(0,0,0,0.3); position:absolute; top:10px; left:10px; z-index:2; }
body.login ul.form li.module::before { content:"\e88a"; }
body.login ul.form li.module::after { content:"\e313"; font-family:"Material Icons Round"; position:absolute; font-size:22px; bottom:8px; right:8px; color:#222; z-index:1; pointer-events:none; }
body.login ul.form li.email::before { content:"\e0be"; }
body.login ul.form li.username::before { content:"\e7fd"; }
body.login ul.form li.password::before { content:"\e0da"; }
body.login ul.form li.checkbox { margin-top:10px; }
body.login ul.form li.forgot-password { margin-top:10px; font-family:'Open Sans'; }
body.login ul.form li.forgot-password p { float:right; }
body.login ul.form li.forgot-password a { color:#666; font-size:14px; margin-top:3px; }
body.login ul.form li.forgot-password a:hover { text-decoration:underline; }
body.login ul.form li .checkboxContainer input { width:24px; height:24px; }
body.login ul.form li .checkboxContainer input:checked::after { font-size:24px; }
body.login ul.form li .checkboxContainer label { font-size:14px; color:#666; font-weight:normal; }
/*body.login ul.form li:last-child { margin-top:20px; }*/
body.login .button { width:100%; float:left; font-size:18px; padding-top:8px; padding-bottom:8px; }
body.login .button.microsoft { background-image:url(/public/images/microsoft_signin.svg); background-repeat:no-repeat; background-position:center; background-size:82px; padding:19px; }

/*#################################*/
/*### Menu */
/*#################################*/
nav { width:280px; height:calc(100% - 53px); background:#efefef; max-height:100%; overflow-y:overlay; overflow-x:hidden; z-index:4; position:fixed; right:-280px; top:53px; box-shadow:rgba(0,0,0,0.1) -2px 0 2px; transition:all 0.2s ease; visibility:hidden; }
nav.visible { right:0; visibility:visible; }
nav ul.menu { width:100%; float:left; list-style:none; padding:10px; box-sizing:border-box; }
nav ul.menu > li { width:100%; float:left; position:relative; margin-bottom:5px; }
nav ul.menu > li.toggleSearch { display:none; }
nav ul.menu > li a { width:100%; float:left; color:rgba(0,0,0,0.5); font-weight:100; padding:10px; text-decoration:none; box-sizing:border-box; font-size:14px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; background-color:rgba(0,0,0,0); transition:background-color 0.2s linear; border-radius:3px; }
nav ul.menu > li.hasChildren > a:hover, nav ul.menu > li.hasChildren.active > a { border-radius:10px 10px 0 0; }
nav ul.menu > li.hasChildren:not(.active) > a:hover { border-radius:10px; }
nav ul.menu > li > a:hover, nav ul.menu > li.active > a { color:#333; font-weight:bold; background-color:rgba(0,0,0,0.1); }
nav ul.menu > li > a::before { content:"\e88a"; font-size:20px; color:rgba(0,0,0,0.5); padding:10px; margin:-10px 6px -10px -10px; float:left; font-weight:100; }
nav ul.menu > li.active a::before, nav ul.menu > li a:hover::before { color:#333; }
nav ul.menu > li > ul { width:100%; float:left; border-radius:0 0 10px 10px; background:rgba(0,0,0,0.1); padding:0 10px 10px 10px; box-sizing:border-box; display:none; }
nav ul.menu > li.active > ul { display:block; }
nav ul.menu > li > ul > li { width:100%; float:left; list-style:none; position:relative; }
nav ul.menu > li > ul > li a { padding:4px; border-radius:0; background:none; color:rgba(0,0,0,0.8); }
nav ul.menu > li > ul > li:last-child a {  }
nav ul.menu > li > ul > li a:hover, nav ul.menu > li > ul > li.active a { text-decoration:underline; }

.left ul.shortcuts { width:calc(100% - 40px); float:left; list-style:none; position:absolute; bottom:20px; left:20px; }
.left ul.shortcuts li { float:left; margin:0; width:100%; }
.left ul.shortcuts li a { width:100%; color:#666; border-radius:5px; font-size:14px; border:1px solid #ccc; float:left; padding:10px; opacity:1; transition:all 0.2s ease; box-shadow:rgba(0,0,0,0.1) 0px 2px 1px; box-sizing:border-box; }
.left ul.shortcuts li a:hover { opacity:0.7; }
.left ul.shortcuts li a::before { font-size:24px; float:left; margin:-2px 5px -2px -2px; }

ul.notifications { width:280px; height:calc(100% - 53px); background:#efefef; max-height:100%; overflow-y:overlay; overflow-x:hidden; z-index:4; position:fixed; right:-280px; top:53px; box-shadow:rgba(0,0,0,0.1) -2px 0 2px; transition:all 0.2s ease; visibility:hidden; padding:10px; box-sizing:border-box; }
ul.notifications.visible { right:0; visibility:visible; }
ul.notifications li { width:100%; float:left; margin-bottom:10px; }
ul.notifications li:last-child { margin-bottom:0; }
ul.notifications li a { width:100%; float:left; color:#666; text-decoration:none; background:rgba(0,0,0,0.1); border-radius:3px; padding:10px; box-sizing:border-box; cursor:default; }
ul.notifications li a[href] { cursor:pointer; }
ul.notifications li a[href]:hover { opacity:0.8; }
ul.notifications li a .top { width:100%; float:left; display:flex; justify-content:space-between; gap:5px; }
ul.notifications li a .top .title { font-size:12px; }
ul.notifications li a .top .timestamp { font-size:10px; opacity:0.5; white-space:nowrap; }
ul.notifications li a .subtitle { width:100%; float:left; font-size:10px; margin:6px 0 0 0; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
ul.notifications li a .subtitle::before { font-size:12px; margin-top:1px; float:left; margin-right:3px; }
ul.notifications li a .description { width:100%; float:left; font-size:10px; margin-top:3px; }
ul.notifications li.active a { background:#366889; color:#fff; font-weight:bold; }



/*#################################*/
/*### Loader */
/*#################################*/
/*.loader { width:100%; height:100%; max-height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); z-index:2; opacity:1; transition:all 0.2s ease; }
.loader .lds-ring { display:inline-block; position:absolute; width:120px; height:120px; top:50%; left:50%; margin-left:-60px; margin-top:-60px; }
.loader .lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 84px; height: 84px; margin: 8px; border: 8px solid #ccc; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #ccc transparent transparent transparent; }
.loader .lds-ring div:nth-child(1) { animation-delay:-0.45s; }

.loader .lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.loader .lds-ring div:nth-child(3) { animation-delay: -0.15s; }*/
.pace { -webkit-pointer-events:none; pointer-events:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
.pace-inactive { display: none; }
.pace .pace-progress { background: #29d; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; }
body.pace-done > main > .loader { opacity:0; visibility:hidden; }
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


body > main > .loader { width:100%; height:100%; max-height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); z-index:10; opacity:1; transition:all 0.2s ease; display:flex; justify-content:center; align-items:center; }
body > main > .loader .lds-ring {
  height: 100px;
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
  mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
  filter: blur(12px);
}
body > main > .loader .lds-ring:before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(#0000 35%,#fff,#0000 65%);
  animation: l1 1.5s linear infinite;
}
@keyframes l1 {
  to {rotate: 1turn}
}


/*#################################*/
/*### Tables */
/*#################################*/
.tableContainer { width:100%; float:left; position:relative; overflow:visible; }
.tableContainer:last-child { margin-bottom:0; }
.tableContainer.hover tbody tr:hover td:last-child a:first-child { opacity:0.8; }
.tableContainer.hover tbody tr:hover td:last-child:hover a:first-child { opacity:0.3; }
.tableContainer.hover tbody tr a { text-decoration:none; color:#000; }
.tableContainer.rows table td { white-space:initial; }
/*.tableContainer:last-child { margin-bottom:0; } */
table { width:100%; float:left; border-spacing:0; border-collapse:separate; /*table-layout:fixed;*/ /*min-width:500px; */ position:relative; }
table tbody tr td { border-bottom:1px solid rgba(0,0,0,0.05); }
table tbody tr:last-child td { border-bottom:none; }
table th { padding:11px 9px; text-align:left; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,0.07); }
table tr:first-child th:first-child { border-radius:10px 0 0 0; }
table tr:first-child th:last-child { border-radius:0 10px 0 0; }
table tr:last-child th:first-child { border-radius:0 0 0 10px; }
table tr:last-child th:last-child { border-radius:0 0 10px 0; }
table tr:only-child th:last-child { border-radius:0 10px 10px 0; }
table tr:only-child th:first-child { border-radius:10px 0 0 10px; }
table tr:only-child th:last-child { border-radius:0 10px 10px 0; }
table th button { text-decoration:none; background:none; color:#333; font-family:'Open Sans', sans-serif; display:inline; font-size:12px; font-weight:bold; padding:0; margin:0; cursor:pointer; }
table th button:not(.material-icons)::after { content:"\e5ce"; font-family:'Material Icons Round'; opacity:0.5; position:relative; top:2px; left:1px; }
table th.asc button::after { content:"\e5cf"; }

table th.selected button::after { opacity:1; }
table td .material-icons:not(.button) { width:18px; height:18px; border-radius:100%; float:left; margin:-2px 2px -2px 2px; font-family:'Material Icons Round'; opacity:0.7; color:#000; text-align:center; line-height:18px; font-size:18px; text-decoration:none; }
table td:last-child .material-icons:not(.button) { opacity:0.3; }
table td .material-icons:not(.button)::before { font-size:18px; float:left; margin:0 0.5px; }
table td .material-icons:not(.button).disabled { cursor:default; opacity:0.1; }
table td .button { padding:5.5px 10px; margin:-4px; font-size:10px; }
table td .material-icons.button { line-height:25px; padding:0 8px 0 0;}
table td .material-icons.button::before { float:left; margin:3px 6px; font-size:18px; }

table th .material-icons { float:left; font-size:16px; width:16px; height:16px; position:relative; left:50%; margin:-1px 0 -1px -8px; }
table th .material-icons::before { font-size:16px; }
table th .material-icons::after { display:none; }
table th .material-icons.settings { opacity:0.5; }
table .material-icons { float:left; }
table tr.hidden { display:none; }
table tbody:empty { height:100px; display:table-cell; }
table tbody:empty::after { content:attr(data-empty-label); text-align:center; padding:43px 20px; font-style:italic; position:absolute; top:37px; font-size:12px; color:#333; width:100%; box-sizing:border-box; }
table td .shorten { display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:1px 0; margin:-1px 0; }

.tableContainer.hover tbody tr:not(.noResults):not(.filler) { cursor:pointer; }

.tableContainer.fixed table, .tableContainer.fixed { table-layout:fixed; }
table.break tr td { white-space:initial; text-overflow:initial; }

.tableContainer.hover tbody tr:not(.noResults):not(.filler):hover { opacity:0.7; }

table tr.noResults td { text-align:center; padding:40px 20px; font-style:italic; font-family:'Open Sans', sans-serif; }

table td { padding:11px 9px; font-size:12px; font-family:'Open Sans', sans-serif; color:#333; text-overflow:ellipsis; white-space:nowrap; position:relative; }
table tfoot td { font-weight:bold; }

ul.form li table td input[type="text"], ul.form li table td textarea, ul.form li table td select, ul.form li table td input[type="number"], ul.form li table td input[type="date"], ul.form li table td input[type="email"], ul.form li table td .input { /*width:calc(100% + 6px); margin:-3px; font-size:11px; padding:3px; height:auto; min-height:20px;*/ margin:-2px; }
ul.form li table td input[type="date"] { padding:1.5px 3px; }
ul.form li table td input[type="checkbox"] { width:16px; height:16px; -webkit-appearance:auto; }
/*ul.form li table td.select::after { content:"\e313"; font-family:"Material Icons Round"; position:absolute; font-size:16px; top:5px; right:4px; color:#222; z-index:1; pointer-events:none; }*/
ul.form li table td select { background-size:15px; }
ul.form li table td select:not([multiple]):not([size]) { background-position:right 2px top 7px; }
ul.form li table td[data-suffix]::after { content:attr(data-suffix); position:absolute; bottom:6px; right:7px; font-size:12px; color:#666; font-family:Arial, Helvetica, sans-serif; z-index:1; }
ul.form li table td[data-suffix] input { padding-right:30%; }
ul.form li table td .autocomplete-open { font-size:17px; bottom:17px; right:14px; }
ul.form li table td .autocomplete-open.loading { font-size:17px; bottom:18px; right:15px; }
ul.form li table td .ui-widget.ui-widget-content { width:calc(100% - 16px) !important; }

div.noResults { text-align:center; padding:40px 20px; font-style:italic; font-size:12px; color:#333; width:100%; box-sizing:border-box; }



/*#################################*/
/*### Paging */
/*#################################*/
.pagination { width:100%; float:left; }
.pagination footer { width:100%; float:left; background:rgba(0,0,0,0.07); border-radius:10px; padding:10px; box-sizing:border-box; }
.pagination .pages { width:100%;float:left; position:relative; }
.pagination .pages a { font-family:'Open Sans', sans-serif; width:26px; height:26px; text-align:center; line-height:25px; margin:0; float:left; cursor:pointer; font-size:14px; font-weight:bold; text-decoration:none; border-radius:100%; transition:opacity 0.3s linear; }
.pagination .pages a.prev, .pagination .pages a.next { font-size:16px; line-height:23px; }
.pagination .pages a:hover { opacity:0.7; }
.pagination .pages a:first-child {  }
.pagination .pages a:last-child { }
.pagination .pages .scroll { width:100%; float:left; overflow-x:overlay; }
.pagination .pages .scroll > div { float:left; display:inline-flex; padding-right:175px; }
.pagination .pages .scroll > div a { margin-right:5px; background:#ddd; }
.pagination .pages .scroll > div a:last-child { margin-right:0; }
.pagination .pages .scroll > div a.selected { }
.pagination .pages .actions { float:right; position:absolute; top:0; right:0; padding-left:5px; }
.pagination .pages .actions a { margin-left:5px; }
.pagination .pages .actions a:first-child { margin-left:0; }
.pagination .pages select { float:left; border:1px solid #ccc; background:#f9f9f9; font-size:12px; padding:4px; box-sizing:border-box; border-radius:10px; }

/*#################################*/
/*### Header */
/*#################################*/
header { width:100%; float:left; background:#f0f0f0; padding:14px; border-bottom:1px solid #d1d1d1; box-sizing:border-box; position:fixed; z-index:4; }
header .logo {  float:left; }
header .logo a { background-image:url(../images/logo.svg); background-repeat:no-repeat; float:left; width:114px; height:24px; transition:all 0.2s ease; }
header .right { position:relative; }
header .right { float:right; margin:-14px; }
header .right button { padding:16px; float:left; color:#666; position:relative; cursor:pointer; background:none; }
header .right button.material-icons { padding:16px 10px; }
header .right button.toggleNotificationsMenu::after { background:#dd2a2a; content:attr(data-count); border-radius:100px; width:16px; height:16px; line-height:16px; position:absolute; top:11px; right:4px; font-size:10px; font-weight:bold; color:#fff; }
header .right button.toggleNotificationsMenu[data-count="0"]::after { display:none; }
header .right button::before { font-size:20px; float:left; }
header .right button:hover, header .right a.active { background:rgba(0,0,0,0.1); }
header .right button:last-child {  }
header .right button .avatar { width:32px; height:32px; background:#ccc; border-radius:100px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; overflow:hidden; margin:-6px; pointer-events:none; }
header .right button .avatar.empty::after { font-size:14px; }
header .right .profile { width:280px; position:absolute; top:53px; background:#efefef; box-shadow:rgba(0,0,0,0.1) -2px 2px 2px; padding:20px; right:-280px; transition:all 0.2s ease; box-sizing:border-box; visibility:hidden; }
header .right .profile.visible { right:0; visibility:visible; }
header .right .profile .avatar { width:50px; height:50px; float:left; background:#ccc; border-radius:100px; box-sizing:border-box; margin:-4.5px 12px -4.5px -4.5px; display:flex; justify-content:center; align-items:center; overflow:hidden; }
header .right .profile .avatar.empty::after { font-size:18px; color:#666; }
header .right .profile .name { width:calc(100% - 62px); float:left; color:#666; font-size:20px; font-weight:bold; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-top:0; text-align:left; }
header .right .profile a { float:left; color:#999; font-size:10px; font-family:'Open Sans'; text-decoration:none; margin-right:5px; transition:all 0.2s ease; }
header .right .profile a:hover { text-decoration:underline; color:#333; }
header .right .profile a:last-child { margin-right:0; }

.avatar.empty::after { content:attr(data-initials); }
.avatar.grey { background:#ddd !important; color:#333 !important; }


form.search { width:100%; display:flex; align-items:center; flex-direction:column; /*margin:-15px -15px 15px -15px;*/ float:left; border-bottom:1px solid #dedede; padding:15px; box-sizing:border-box; box-shadow:rgba(0,0,0,0.1) 0 1px 3px; background:#fff; }

form.search .query { max-width:1024px; margin:0; position:relative; float:left; width:100%; display:flex; justify-content:space-between; }
form.search .query .input { width:100%; display:flex; gap:10px; }
.full form.search .query .input { width:30%;  }
form.search .query .input input { padding:8px 8px 8px 32px; font-size:12px; color:#333; font-family:'Open Sans'; font-weight:bold; border:1px solid #ccc; background:#fff; float:left; width:100%; box-sizing:border-box; outline:none; border-radius:3px; min-width:150px; }
form.search .query .input input::placeholder { color:#999; }
form.search .query .input input:focus {  }
form.search .query::before { font-family:"Material Icons Round"; content:"\e8b6"; position:absolute; top:8px; left:8px; font-size:20px; color:#999; }
form.search .query .button { white-space:nowrap; border-radius:100px; line-height:35px; padding:0 20px 0 40px; font-size:14px; position:relative; border:1px solid #366889; }
form.search .query .button::before { position:absolute; top:8px; left:12px; font-size:20px; }
form.search .query .button:not(.active) { background:none; border:1px solid #ccc; color:#666; }
form.search .query .button.searchToggle { background:none; color:#666; position:relative; box-shadow:none; border:none; }
form.search .query .button.searchToggle:hover { opacity:1; }
form.search .query .button.searchToggle.filter_list[data-filters]:not([data-filters="0"])::after { content:' (' attr(data-filters) ')'; }
form.search .query .button.searchToggle:last-child { padding-right:0; }
form.search .query .button.searchToggle.toggleLeft, form.search .query .button.searchToggle.toggleButtons { display:none; }
form.search .query .button.visible > ul:not(.ui-menu) { display:flex; }
form.search .query .button ul:not(.ui-menu) { min-width:200px; display:flex; gap:5px; flex-direction:column; position:absolute; padding:10px; top:50px; right:0; border:1px solid rgba(0,0,0,0.05); border-radius:3px; box-shadow:rgba(0,0,0,0.15) 0px 3px 7px; background:#fff; list-style:none; display:none; z-index:10; }
form.search .query .button > ul > li { border-radius:3px; position:relative; }
form.search .query .button > ul > li.disabled { opacity:0.4; }
form.search .query .button > ul > li label { width:100%; float:left; text-align:left; border-radius:3px; font-size:12px; position:relative; box-sizing:border-box; cursor:pointer; }
form.search .query .button > ul > li:not(.disabled) label:hover { background:rgba(0,0,0,0.1); }
form.search .query .button > ul > li label::before { float:left; font-size:18px; margin:8px 7px; }
form.search .query .button > ul > li label input[type="checkbox"] { width:16px; height:16px; position:absolute; top:7px; right:5px; }
form.search .query .button > ul > li label input[type="radio"] { width:16px; height:16px; position:absolute; top:7px; right:5px; }
form.search .query .button > ul > li > ul:not(.ui-menu) { list-style:none; top:0; right:100%; display:none; max-height:300px; }
form.search .query .button > ul > li:not(.owner_user_ids):not(.user_ids) > ul:not(.ui-menu) { overflow-y:auto; }
form.search .query .button > ul > li > ul label { padding:0 10px; }
form.search .query .button > ul > li > ul label span[style] { padding:3px 7px; color:rgba(0,0,0,0.8); border-radius:3px; font-weight:normal; }
form.search .query .button > ul > li:hover > ul:not(:empty) { display:block; }
form.search .query .button > ul > li.clear { font-size:10px; line-height:20px; text-align:left; padding:0 3px; }
form.search .query .button > ul > li.clear a { float:right; }
form.search .query .button > ul > li.clear a:hover { text-decoration:underline; }



form.search .query .button > ul > li .combobox { border:none; border-radius:3px; padding:3px; background:#f9f9f9; border:1px solid #ccc; border-radius:3px; }
form.search .query .button > ul > li .combobox input { padding:0; width:calc(100% - 16px); padding:3px; background:transparent; font-family:'Open Sans'; font-size:12px; }
form.search .query .button > ul > li .combobox .tag { width:100%; box-sizing:border-box; font-size:10px; font-weight:bold; text-align:left; padding:6px; line-height:initial; }
form.search .query .button > ul > li .combobox .tag a::after { top:6px; }
form.search .query .button > ul > li .combobox ul { width:100%; margin-top:3px; left:-1px !important; width:100% !important; min-width:initial; }
form.search .query .button > ul > li .combobox a.autocomplete-open { font-size:16px; bottom:-4px; }

/*form.search .tabControl { display:flex; gap:10px; }
form.search fieldset.closed {  }
form.search fieldset {  }
form.search .slideDown { width:100%; float:left; max-height:0; opacity:0; transition:all 0.2s ease; }
form.search .slideDown.open { opacity:1; max-height:1000px; }*/

form.search .tabControl { width:calc(100% + 40px); float:left; margin:-20px -20px 20px -20px; padding:10px 20px; box-sizing:border-box; box-shadow:rgba(0,0,0,0.1) 0 1px 3px; border-bottom:1px solid #dedede; }
form.search .tabControl .content { float:left; }
form.search .tabControl .content button { background:none; padding:10px 4px 10px 30px; position:relative; font-size:14px; font-weight:bold; color:#666; margin-right:8px; cursor:pointer; }
form.search .tabControl .content button:last-child { margin-right:0; }
form.search .tabControl .content button::before { position:absolute; top:7px; left:2px; }
form.search .tabControl .content button.focused, form.search .tabControl button:hover { border-bottom:2px solid #366889; }
form.search .tabControl .content button.focused::before, form.search .tabControl button:hover::before { color:#366889; }
form.search .tabControl > a { color:#666; border-radius:5px; font-size:14px; border:1px solid #ccc; float:right; padding:10px; opacity:1; transition:all 0.2s ease; box-shadow:rgba(0,0,0,0.1) 0px 2px 1px; box-sizing:border-box; text-decoration:none; }
form.search .tabControl > a:hover { opacity:0.7; }
form.search .tabControl > a::before { font-size:24px; float:left; margin:-2px 5px -2px -2px; }


form.search .left { overflow-y:scroll; position:fixed; top:0; left:0; width:280px; height:calc(100% - 53px); top:53px; box-sizing:border-box; padding:20px; box-shadow:inset rgba(0,0,0,0.08) -4px 0 5px; border-right:1px solid #e0e0e0; background:#fff; }

.flex { display:flex; gap:10px; list-style:none; }
.flex li { width:100%; }


.tabs { list-style:none; }


.kanban { display:flex; flex-direction:row; gap:15px 30px; }
.kanban > li { height:auto; border-radius:5px; margin:0 !important; position:relative; box-sizing:border-box; width:320px !important; min-width:260px; }
.kanban > li ul.hover { background:#eee; border-radius:5px; }
.kanban > li::before {  }
.kanban > li > div { color:#333; width:100%; font-size:18px; font-weight:bold; position:relative; box-sizing:border-box; font-family:'Open Sans'; margin-bottom:5px; z-index:2; }
.kanban > li.fixed { padding-top:35px; }
.kanban > li.fixed > div { position:fixed; top:194px; padding-top:17px; width:340px; background:#fff; padding-left:10px; padding-right:10px; }
.kanban > li > div .title { width:100%; float:left; font-size:14px; padding:8px 0; position:relative; }
.kanban > li > div .title input:not(:focus) { background:none; padding:0; border:none; font-size:14px; }
.kanban > li > div .title input:not(:focus)::placeholder { color:#000; }
.kanban > li > div .title input:focus { margin:-8px 0; }
.kanban > li > div .subtitle { width:100%; float:left; color:#666; font-size:12px; font-family:'Open Sans'; }
/*.kanban > li > div a { background:#fff; width:100%; float:left; font-size:12px; box-sizing:border-box; margin:0 0 8px 0; cursor:pointer; z-index:1; position:relative; border:1px solid rgba(0,0,0,0.05); border-radius:3px; box-shadow:rgba(0,0,0,0.15) 0px 3px 7px; padding:10px; margin-top:10px; }
.kanban > li > div a::before { float:left; }
.kanban > li > div a span { float:left; margin:4px;}*/
.kanban > li > div .buttons { position:absolute; top:8px; right:0;}
.kanban > li > div .buttons a { float:left; color:#fff; cursor:pointer; }
.kanban > li > div .buttons a:not(.drag_indicator):hover { opacity:0.7; }
.kanban > li > div .buttons a::before { font-size:18px; }
.kanban > li > div .buttons a.drag_indicator { cursor:grab; }
.kanban > li.ui-sortable-helper  > div .buttons a.drag_indicator { cursor:grabbing; }
.kanban > li:last-child > div::after { display:none; }
.kanban > li > ul { width:100%; height:calc(100% - 51px); }
.kanban > li > ul.success li, .kanban > li > ul.fail li { margin:0; }
.kanban > li > ul.success, .kanban > li > ul.fail { height:auto; background:#CAFFC7; margin-top:8px; box-sizing:border-box; position:relative; font-size:16px; color:rgba(0,0,0,0.5); min-height:72px; }
.kanban > li > ul.fail { background:#FFC7C7; }
.kanban > li > ul.success::before, .kanban > li > ul.fail::before { color:rgba(0,0,0,0.3); position:absolute; top:20px; left:20px; font-size:30px; }
.kanban > li > ul.success::after, .kanban > li > ul.fail::after { content:attr(data-label); position:absolute; top:25px; left:64px; }
.kanban > li > ul.ui-droppable-hover:not(.ui-draggable-parent) { background:#eee; border:1px dashed #000; box-sizing:border-box; }
.kanban > li > ul.ui-droppable-hover:not(.ui-draggable-parent) li { opacity:0; }
.kanban > li > ul > li { background:#fff; width:100%; font-size:12px; box-sizing:border-box; margin:0 0 8px 0; z-index:1; position:relative; border:1px solid rgba(0,0,0,0.05); border-radius:3px; box-shadow:rgba(0,0,0,0.15) 0px 3px 7px;/* transition:all 0.2s linear;*/ }
.kanban > li > ul > li:hover { box-shadow:rgba(0,0,0,0.3) 0px 3px 7px; }
.kanban > li > ul > li.small { transform:scale(0.8); }
.kanban > li > ul > li.hover { background:#eee; }
.kanban > li > ul > li.ui-sortable-helper { opacity:0.5; }
.kanban > li > ul > li.ui-sortable-helper > a { cursor:grabbing; }
.kanban > li > ul > li > a { cursor:pointer; width:100%; float:left; }
.kanban > li > ul > li > a > .top { padding:12px; width:100%; box-sizing:border-box; float:left; }
.kanban > li > ul > li > a > .top > .pretitle { font-size:12px; width:100%; float:left; margin-bottom:5px; }
.kanban > li > ul > li > a > .top > .title { color:#000; font-size:14px; width:100%; float:left; margin:0 0 10px 0; overflow:hidden; text-overflow:ellipsis; }
.kanban > li > ul > li > a > .top .checklist {  }
.kanban > li > ul > li > a > .top .checklist li { display:flex; flex-direction:row; gap:10px; align-items:center; }
.kanban > li > ul > li > a > .top .checklist li input { width:16px; height:16px; margin:0; }
.kanban > li > ul > li > a > .top .checklist li input:checked::after { content:"\e5ca"; font-family:'Material Icons Round'; color:rgba(0,0,0, 1); font-weight:normal; font-size:18px; position:absolute; top:-1px; left:-1px; }
.kanban > li > ul > li > a > .top .checklist li span { color:#000; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.kanban > li > ul > li > a > .top .checklist li .material-icons { min-width:16px; width:16px; height:16px; margin-right:-4px; }
.kanban > li > ul > li > a > .top .checklist li .material-icons::before { font-size:16px; color:#366889; }
.kanban > li > ul > li > a > .top .checklist li .material-icons.due::before { color:#dd2a2a; }
.kanban > li > ul > li > a > .top .tags { width:calc(100% - 60px); float:left; margin-top:10px; }
.kanban > li > ul > li > a > .top .tags li { width:auto; float:left; padding:3px 7px; color:rgba(0,0,0,0.8); border-radius:3px; margin:0 5px 5px 0; }
.kanban > li > ul > li > a > .top .tags li:last-child { margin-right:0; }
.kanban > li > ul > li > a > .top .icons { float:right; margin-top:10px; }
.kanban > li > ul > li > a > .top .icons .material-icons { width:22px; height:22px; float:left; color:#999; margin-left:8px; }
.kanban > li > ul > li > a > .top .icons .material-icons::before { font-size:22px; }
.kanban > li > ul > li > a > .top .icons .priority { color:#dd2a2a !important; margin-top:1px; }
.kanban > li > ul > li > a .bottom { margin-top:7px; border-top:1px solid #d1d1d1; float:left; width:100%; padding:12px; box-sizing:border-box; }
.kanban > li > ul > li > a .bottom .drag_indicator { color:#333; width:16px; height:16px; float:left; display:none; margin:-4px 2px -4px -4px; padding:4px; }
.kanban > li > ul > li > a .bottom .drag_indicator::before { font-size:16px; }
.kanban > li > ul > li > a .bottom .deadline { float:left; }
.kanban > li > ul > li > a .bottom .deadline::before { font-size:16px; float:left; margin-right:2px; }
.kanban > li > ul > li > a .bottom .deadline span { padding:0 2px; color:#333; }
.kanban > li > ul > li > a .bottom .deadline.due span { background:#dd2a2a; color:#fff; font-weight:bold; border-radius:3px; }
.kanban > li > ul > li > a .bottom .avatars { float:right; margin:-6px -2px; }
.kanban > li > ul > li > a .bottom .avatars .avatar { width:28px; height:28px; float:left; border-radius:100px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; overflow:hidden; border:1px solid #fff; margin-left:-8px; }
.kanban > li > ul > li > a .bottom .avatars .avatar.dark { background-color:#234f6b; }
.kanban > li > ul > li > a .bottom .avatars .avatar.empty::after { content:attr(data-initials); font-size:12px; }

.columns { display:flex; list-style:none; gap:20px; align-items:stretch; height:100%; }
.columns > li { padding-right:10px; }
.columns > li:last-child { padding-right:0; }
.columns > li fieldset:last-child { margin-bottom:0; }
.columns > li:nth-child(1) { width:18%; max-height:100%; min-height:0; overflow-y:scroll; overflow-x:hidden; }
.columns > li:nth-child(2) { width:56%; max-height:100%; min-height:0; overflow-y:scroll; overflow-x:hidden; }
.columns > li:nth-child(3) { width:26%; }
.columns > li:nth-child(3) fieldset { height:100%; }
.columns > li:nth-child(3) .messages { height:calc(100% - 98px); max-height:initial; }

ul.form li .trumbowyg-box { border-radius:3px; min-height:auto; box-sizing:border-box; font-size:14px; resize:vertical; overflow-x:hidden; height:200px; min-height:150px; /*min-height:150px; max-height:300px;*/ }
ul.form li .trumbowyg-box.resized { /*max-height:initial;*/ }
ul.form li .trumbowyg-box .trumbowyg-editor {   }
ul.form li .trumbowyg-dropdown { max-height:190px; }
ul.form li .trumbowyg-button-pane { display:-webkit-box; overflow-x:auto; }
ul.form li .trumbowyg-button-pane button { opacity:0.7 !important; }
ul.form li .trumbowyg-box p { margin-bottom:2px; }
ul.form li .trumbowyg-box ul { padding-left:40px; margin-bottom:2px; }
ul.form li .trumbowyg-box ul li { width:initial; float:initial; list-style:initial; margin:0; }
ul.form li .trumbowyg-box ol { padding-left:40px; margin-bottom:2px; }
ul.form li .trumbowyg-box ol li { list-style:auto; float:initial; margin:0; }
.trumbowyg-modal-box > form > .trumbowyg-input-row:nth-child(3) { display:none; }

/*#################################*/
/*### Main */
/*#################################*/
main { width:100%; min-height:calc(100% - 53px); top:53px; position:relative; float:left; box-sizing:border-box; }
/*body.hasLeftSearch main { padding-left:280px; }*/
.slides { width:100%; float:left; position:relative; display:flex; flex-direction:row; gap:15px; box-sizing:border-box; justify-content:center; }
.slides > div { width:50%; display:flex; flex-direction:column; align-items:center; }
.slides > div:not(.full):only-child { width:calc(50% - 7.5px); }
.slides > div > .content { width:100%; float:left; max-width:1024px; padding-top:30px; }
fieldset { width:100%; padding:0; margin:0; box-sizing:border-box; margin-bottom:30px; border:none; min-inline-size:auto; }
fieldset legend { width:100%; float:left; position:relative; padding:7px 0 7px 34px; box-sizing:border-box; font-size:18px; font-weight:bold; color:#444; margin-bottom:10px; }
fieldset legend::before { float:left; font-weight:normal; font-size:32px; text-align:center; color:rgba(0,0,0,0.5); position:absolute; top:8px; left:0px; }
fieldset legend .controls { float:right; margin:-3px 0; }
fieldset legend .controls li { list-style:none; float:left; margin-right:5px; }
fieldset legend .controls li:last-child { margin-right:0; }
fieldset legend .controls li a { font-family:'Open Sans', sans-serif; color:#fff; padding:7px 12px; border-radius:100px; text-decoration:none; font-size:12px; float:left; transition:opacity 0.2s linear; }
fieldset legend .controls li a:hover { opacity:0.7; }
/*hr { width:calc(100% + 50px); margin:25px -25px; height:1px; float:left; border:none; background:#ccc; }
.slides > div .slides { height:calc(100% - 33px); }
.slides > div { height:100%; }
fieldset { width:100%; float:left; padding:25px; box-sizing:border-box; border:none; min-inline-size:auto; margin:0; }
fieldset legend { width:calc(100% + 50px); margin:-25px -25px 25px -25px; padding:8px 8px 8px 28px; font-size:12px; font-weight:bold; float:left; border:none; position:relative; box-sizing:border-box; padding-inline-end:6px; }
fieldset legend:only-child {  }
fieldset legend::before { float:left; font-weight:normal; font-size:18px; text-align:center; color:rgba(0,0,0,0.5); position:absolute; top:6px; left:6px; }
fieldset.sticky.stuck { position:absolute; top:0; background:#fff; border-bottom:1px solid #ccc; z-index:1; }*/

.slides > div.double { flex-basis:50%; width:50%; }
.slides > div.full { width:100%; display:none; }
.slides > div.full:last-child { display:flex; }
.slides > div.full.takeover { top:0; left:0; position:absolute; }
.slides > div:nth-child(4) { border-right:none; }


fieldset iframe { width:calc(100% + 50px); margin:-25px; height:calc(100vh - 126px); overflow-y:overlay; float:left; border:none; }
fieldset iframe.viewerJs { /*height:calc(100vh - 96px);*/ }

fieldset legend .controls li > span { margin:2px; float:left; font-weight:normal; }
fieldset legend .controls li:not(.material-icons) a, 
fieldset legend .controls li:not(.material-icons) button { /*margin:-6px; padding:8px; float:left; font-weight:normal; text-decoration:none; cursor:pointer; font-size:12px; position:relative;*/ }
fieldset legend .controls li:not(.material-icons) a.material-icons, 
fieldset legend .controls li:not(.material-icons) button.material-icons { padding:3.5px 12px 3.5px 3.5px; line-height:24px; }
fieldset legend .controls li:not(.material-icons) a.material-icons:empty, 
fieldset legend .controls li:not(.material-icons) button.material-icons:empty { padding:3.5px; }
fieldset legend .controls li:not(.material-icons) a.material-icons.iconRight, 
fieldset legend .controls li:not(.material-icons) button.material-icons.iconRight { padding:8px 26px 8px 8px; }
fieldset legend .controls li:not(.material-icons) .material-icons::before { float:left; font-size:20px; margin:2px 4px; }

fieldset.footer { background:none; box-shadow:none; padding:0; border:none; margin-bottom:0; }
fieldset.footer .button { font-size:14px; font-weight:bold; padding:10px 18px; }
fieldset.footer .button.material-icons {}
fieldset.footer ul.form li div.buttons .button.material-icons { line-height:30px; }
fieldset.footer ul.form li div.buttons .button.material-icons::before { margin:6px 7px 6px 9px; }
form.disabled fieldset.footer { display:none; }
fieldset[disabled] .button:not(span), fieldset[disabled] ul.controls li a { opacity:0.3; cursor:default; background:#666; }
fieldset[disabled] .button:not(span):hover, fieldset[disabled] ul.controls li a:hover { opacity:0.3 !important; }
fieldset[disabled] td.buttons a { opacity:0.1 !important; cursor:default; }

.grid { display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr); grid-column-gap:15px; grid-row-gap:15px; }
.grid > * > .title { width:100%; float:left; font-size:18px; }
.grid > * > .subtitle { width:100%; float:left; font-family:'Open Sans'; font-size:30px; font-weight:bold; }
.grid > * > .subtitle .green { color:#56c373; font-size:24px; }
.grid > *.themeColor { border:none; }

.badge {  }
.badge .title { width:100%; float:left; font-size:18px; margin-bottom:5px; }
.badge .subtitle { width:100%; float:left; font-family:'Open Sans'; font-size:30px; font-weight:bold; }
.badge .subtitle span { font-size:24px; }
.badge .subtitle .green { color:#56c373; }
.badge .subtitle .red { color:#d77171; }
.badge .subtitle .grey { color:#bbb; }
.badge .subtitle div { width:calc(100% / 3); float:left; font-size:16px; margin-top:2px; }
.badge .subtitle div span { font-size:12px; width:100%; float:left; }

/*#################################*/
/*### Breadcrumb */
/*#################################*/
/*.bar { width:100%; float:left; margin:0; position:relative; font-size:14px; box-sizing:border-box; }
.bar ul.breadcrumb { display:none; }
.bar ul.controls { display:none; }*/

.bar { width:100%; display:flex; flex-direction:column; align-items:center; float:left; border-bottom:1px solid #dedede; padding:15.5px; box-sizing:border-box; box-shadow:rgba(0,0,0,0.1) 0 1px 3px; }
.bar > .container { width:100%; max-width:1024px; }
.bar.material-icons::before { float:left; padding:7px; border-radius:100px; color:#fff; margin-right:8px; font-size:20px; }
.bar ul.breadcrumb { float:left; z-index:1; position:relative; display:flex; max-width:94%; line-height:34px; }
.bar ul.breadcrumb li { float:left; list-style:none; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.bar ul.breadcrumb li::after { content:"»"; opacity:0.7; margin:0 5px; }
.bar ul.breadcrumb li:last-child { font-weight:bold; }
.bar ul.breadcrumb li:last-child::after { display:none; }
.bar ul.breadcrumb li a { color:#fff; text-decoration:underline; }
.bar ul.breadcrumb li a::after { font-family:"Material Icons Round"; content:"\e6b8"; position:absolute; top:1px; right:-16px; }
.bar ul.controls { float:right; margin:-3px; }
.bar ul.controls li { float:left; list-style:none; padding:0; position:relative; border:none; margin:3px; }
.bar ul.controls li a { width:30px; height:30px; line-height:30px; float:left; position:relative; cursor:pointer; padding:0; margin:0; }
.bar ul.controls li a:hover { opacity:0.7; }
.bar ul.controls li a::after { font-family:"Material Icons Round"; font-size:30px; float:left; position:absolute; top:0; right:0; }
/*.bar ul.controls li a.delete::after { content:"\e872"; }*/
.bar ul.controls li a.button { width:auto; height:auto; }
.bar ul.controls li a.button.material-icons { padding:0 10px 0 0; line-height:34px; }
.bar ul.controls li a.button.material-icons::before { float:left; font-size:18px; margin:8px; }
.bar ul.controls li select { float:left; background:#fff; -webkit-appearance:none; font-size:11px; padding:3px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='22' width='22' viewBox='0 96 960 960'><path x='0' y='0' fill='black' d='M480 712 240 472l43-43 197 197 197-197 43 43-240 240Z'/></svg>"); background-repeat:no-repeat; background-position:right 2px top 2px; padding-right:18px; background-size:14px; }
.bar ul.controls li ul { min-width:200px; gap:5px; flex-direction:column; position:absolute; padding:10px; top:26px; right:0; border:1px solid rgba(0,0,0,0.05); border-radius:3px; box-shadow:rgba(0,0,0,0.15) 0px 3px 7px; background:#fff; list-style:none; z-index:12; display:none; }
.bar ul.controls li.visible ul { display:flex; }
.bar ul.controls li ul > li { width:100%; float:left; margin:0; }
.bar ul.controls li ul > li a { width:100%; float:left; text-align:left; border-radius:3px; font-size:12px; position:relative; box-sizing:border-box; cursor:pointer; color:#666; height:35px; line-height:35px; font-weight:bold; }
.bar ul.controls li ul > li a:hover { background:rgba(0,0,0,0.1); color:#333; }
.bar ul.controls li ul > li a::before { float:left; font-size:18px; margin:8px 7px; }
/*form.search .query .button > ul > li { border-radius:3px; position:relative; }
form.search .query .button > ul > li.disabled { opacity:0.4; }
form.search .query .button > ul > li label { width:100%; float:left; text-align:left; border-radius:3px; font-size:12px; position:relative; box-sizing:border-box; cursor:pointer; }
form.search .query .button > ul > li:not(.disabled) label:hover { background:rgba(0,0,0,0.1); }
form.search .query .button > ul > li label::before { float:left; font-size:18px; margin:8px 7px; }
form.search .query .button > ul > li label input[type="checkbox"] { width:16px; height:16px; position:absolute; top:7px; right:5px; }
form.search .query .button > ul > li label input[type="radio"] { width:16px; height:16px; position:absolute; top:7px; right:5px; }
form.search .query .button > ul > li > ul:not(.ui-menu) { list-style:none; top:0; right:100%; display:none; max-height:300px; }
form.search .query .button > ul > li:not(.owner_user_ids):not(.user_ids) > ul:not(.ui-menu) { overflow-y:auto; }
form.search .query .button > ul > li > ul label { padding:0 10px; }
form.search .query .button > ul > li > ul label span[style] { padding:3px 7px; color:rgba(0,0,0,0.8); border-radius:3px; font-weight:normal; }
form.search .query .button > ul > li:hover > ul:not(:empty) { display:block; }
form.search .query .button > ul > li.clear { font-size:10px; line-height:20px; text-align:left; padding:0 3px; }
form.search .query .button > ul > li.clear a { float:right; }
form.search .query .button > ul > li.clear a:hover { text-decoration:underline; }*/

.bar ul.controls li.close { margin:5px; }
.bar ul.controls li.close a::after { content:"\e5cd"; }
.bar ul.controls li.close { display:none; }
.slides > div:last-child .bar ul.controls li.close { display:block; }

/*#################################*/
/*### Form element */
/*#################################*/
ul.form { width:100%; float:left; margin:-2px 0 -6px 0; }
ul.form li { width:100%; float:left; list-style:none; margin:2px 0 6px 0; position:relative; }
ul.form > li > * { float:left; }
ul.form li:empty { margin:0; }
/*ul.form li.select::after { content:"\e313"; font-family:"Material Icons Round"; position:absolute; font-size:22px; bottom:3px; right:3px; color:#222; z-index:1; pointer-events:none; }*/
ul.form li label { font-size:12px; color:#111; font-family:'Open Sans'; font-weight:normal; margin-bottom:3px; float:left; white-space:nowrap; }
ul.form li .labelLink { font-size:12px; color:#444; font-family:'Open Sans'; font-weight:normal; margin-bottom:3px; float:right; white-space:nowrap; text-decoration:underline; }
ul.form li .labelLink.material-icons { margin-bottom:-1px; }
ul.form li .labelLink.material-icons::before { font-size:15px; }
ul.form li input, ul.form li textarea, ul.form li select, ul.form li .input { width:100%; float:left; padding:8px; box-sizing:border-box; font-size:12px; color:#333; border:1px solid #ccc; -webkit-appearance:none; background:#f9f9f9; font-family:'Open Sans'; outline:none; position:relative; border-radius:3px; font-weight:bold; }
ul.form li .warning { background:#ffe4e4; }
ul.form li select[multiple]:not([size]) { height:80px; }
ul.form li select:not([multiple]):not([size]) { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='22' width='22' viewBox='0 96 960 960'><path x='0' y='0' fill='black' d='M480 712 240 472l43-43 197 197 197-197 43 43-240 240Z'/></svg>"); background-repeat:no-repeat; background-position:right 3px top 9px; padding:8px 26px 8px 8px; background-size:21px; }
ul.form li input:focus, ul.form li textarea:focus, ul.form li select:focus { border:1px solid #666; z-index:1; }
ul.form li input[type=date], ul.form li input[type=week], ul.form li input[type=time], ul.form li input[type=datetime-local], ul.form li input[type=month] { padding:7px; }
ul.form li input[type=color] { padding:0; }
ul.form li input::placeholder { color:#aaa; }
ul.form li input:disabled, ul.form li textarea:disabled, ul.form li select:disabled, ul.form li input[readonly], ul.form li textarea[readonly], ul.form li select[readonly] { background:#e4e4e4; }
ul.form li textarea { resize:vertical; height:120px; }
ul.form li ul { margin-left:0; width:100%; margin-bottom:0; }
ul.form li select option:checked { background:rgba(0, 74, 145, 0.2); }
ul.form li.full { width:100%; margin-left:0; }
ul.form li.half { width:48.5%; margin-left:3%; }
ul.form li.third { width:31.33%; margin-left:3%; }
ul.form li.twoThirds { width:65.67%; margin-left:3%; }
ul.form li.fourth { width:22.75%; margin-left:3%; }
ul.form li.fifth { width:17.6%; margin-left:3%; }
ul.form li.twoFifths { width:38.2%; margin-left:3%; }
ul.form li.threeFifths { width:58.8%; margin-left:3%; }
ul.form li.sixth { width:14.16%; margin-left:3%; }
ul.form li.seventh { width:13.42%; margin-left:1%; }
ul.form li.eigth { width:9.87%; margin-left:3%; }
ul.form li.ninth { width:8.44%; margin-left:3%; }
ul.form li.tenth { width:1.44%; margin-left:0.5%; margin-top:22px; }
ul.form li.oneAndHalfFourths { width:35.62%; margin-left:3%; }
ul.form li.threeFourths { width:74.25%; margin-left:3%; }
ul.form li.first { margin-left:0; clear:left; }
ul.form li.errors > span { width:100%; float:left; color:#ff0000; font-size:14px; text-align:right; }
ul.form li.success { color:#98c21d; font-size:14px; text-align:right; }
ul.form li.required label::after { content:" *"; color:#ff0000; }
ul.form li a.tag { float:left; background:#00a9c5; padding:12px; color:#fff; font-family:"Neutraface2Text"; font-weight:bold; font-size:24px; margin:0 10px 10px 0; text-decoration:none; cursor:pointer; }
ul.form li a.tag:hover { opacity:0.8; }
/*ul.form li .suffix { position:absolute; bottom:1px; right:8px; color:#999; font-size:12px; pointer-events:none; }*/
ul.form li .checkboxContainer { float:left; margin:0 10px 5px 0; }
ul.form li .checkboxContainer input[type="checkbox"] { cursor:pointer; float:left; width:20px; height:20px; margin:0; }
ul.form li .checkboxContainer input[type="checkbox"]:checked::after { content:"\e5ca"; font-family:'Material Icons Round'; color:rgba(0,0,0, 1); font-weight:normal; font-size:20px; position:absolute; top:-1px; left:-1px; }
ul.form li .checkboxContainer input[type="radio"] { cursor:pointer; float:left; width:20px; height:20px; margin:0; border-radius:100%; }
ul.form li .checkboxContainer input[type="radio"]:checked::after { content:""; width:12px; height:12px; border-radius:100%; background:rgba(0,0,0, 1); font-weight:normal; font-size:20px; position:absolute; top:3px; left:3px; }
ul.form li .checkboxContainer label { float:left; margin:1px 0 0 7px; cursor:pointer; }
ul.form li[data-suffix]::after { content:attr(data-suffix); position:absolute; bottom:7px; right:7px; font-size:12px; color:#666; font-family:Arial, Helvetica, sans-serif; z-index:1; }
ul.form li[data-suffix] input { padding-right:20%; }

ul.form li .attachmentsInput { padding:0; }
ul.form li .attachmentsInput button { font-weight:normal; float:left; padding:6px; }
ul.form li .attachmentsInput button.upload { width:80%; left:0; text-align:left; background:none; color:#999; font-family:Arial; white-space:nowrap; }
ul.form li .attachmentsInput button.preview { font-family:'Material Icons Round'; font-size:14px; width:20%; text-align:center; right:0; background:# }
ul.form li .attachmentsInput button.preview::before { content:"\e8b6"; }
ul.form li .attachmentsInput.selected button.upload { width:80%; color:#000; }
ul.form li .attachmentsInput.selected button.preview { display:block; }
ul.form li .attachmentsInput:not(.selected) button.preview { cursor:default; pointer-events:none; }
ul.form li .attachmentsInput:not(.selected) button.preview:hover { opacity:1; }

ul.form li .attachmentsButton.big { width:100%; padding:40px 0; font-style:italic; }

ul.form li div.buttons { float:left; }
ul.form li div.buttons .button { margin:0 5px 0 0; }
ul.form li div.buttons .button.material-icons { padding:3.5px 12px 3.5px 3.5px; line-height:24px; }
ul.form li div.buttons .button.material-icons::before { float:left; font-size:18px; margin:0 2px; }
ul.form li div.buttons .button:last-child { margin:0; }
ul.form li div.buttons.right { float:right; }
ul.form li div.buttons.right .button { margin:0 0 0 5px; }
ul.form li div.buttons.right .button:first-child { margin:0; }
ul.form li div.buttons.full { width:100%; }
ul.form li div.buttons.full .button { width:100%; margin:0 0 5px 0; }

ul.form li .combobox .tag { font-size:11px; }
ul.form li .combobox .ui-autocomplete { left:-1px !important; top:100% !important; width:100% !important; }

ul.form.horizontal li { width:100%; }
ul.form.horizontal li label { width:calc(50% - 6px); margin:6px 6px 6px 0; text-align:right; }
ul.form.horizontal li input[type=text], ul.form.horizontal li input[type=number], ul.form.horizontal li input[type=date], ul.form.horizontal li input[type=week], ul.form.horizontal li input[type=time], ul.form.horizontal li input[type=datetime-local], ul.form.horizontal li input[type=month], ul.form.horizontal li textarea, ul.form.horizontal li select { width:50%; }

.dropIndicator { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:1; }
.dropIndicator span { position:absolute; top:50%; color:#fff; font-size:18px; width:100%; text-align:center; text-shadow:#000 0 1px 1px; font-weight:bold; }
.dropIndicator.hover { background:rgba(0,0,0,0.2); }

a.autocomplete-open { font-family:"Material Icons Round"; position:absolute; font-size:22px; bottom:5px; right:3px; color:#222; z-index:1; }
a.autocomplete-open::after { content:"\e313"; }
a.autocomplete-open.loading { animation:lds-ring 2s linear infinite; cursor:default; font-size:18px; bottom:8px; right:5px; color:#888; }
a.autocomplete-open.loading::after { content:"\e8b8"; }
ul.form li a.autocomplete-clear { font-family:"Material Icons Round"; position:absolute; font-size:18px; top:22px; bottom:3px; right:22px; color:#222; z-index:1; display:none; }
ul.form li a.autocomplete-clear::after { content:"\e5cd"; }
ul.form li.autocomplete input { padding-right:24px; }
ul.form li.autocomplete:hover a.autocomplete-clear { display:block; }
ul.form li.autocomplete:hover input { padding-right:42px; }

a.inputIcon { font-family:"Material Icons Round"; position:absolute; font-size:22px; bottom:3px; right:3px; color:#222; z-index:1; text-decoration:none; }
a.inputIcon.cross::after { content:"\e5cd"; }
a.inputIcon.letter::after { content:"\e0be"; }
a.inputIcon.phone::after { content:"\e0cd"; }
td a.inputIcon { font-size:16px; bottom:5px; right:5px; color:#444; }

ul.form li.tags > span { float:left; color:#000; padding:4px 4px 4px 6px; border-radius:3px; margin:0 5px 5px 0; font-size:12px; }
ul.form li.tags > span .delete { font-family:"Material Icons Round"; position:relative; color:#fff; background:#000; border-radius:100%; width:12px; height:12px; float:right; text-align:center; margin:1px 0 1px 5px; line-height:12px; font-size:10px; cursor:pointer; }
ul.form li.tags > span .delete::after { content:"\e5cd"; position:absolute; left:1px; }

ul.form li .button { padding:9px 15px; white-space:nowrap; }
ul.form li .button.material-icons { padding:0 22px 0 0; line-height:35px; }
ul.form li .button.material-icons::before { float:left; margin:8.5px; font-size:18px; }

canvas.chart { width:100% !important; height:400px !important; padding:30px; background:#f9f9f9; border:1px solid #ccc; margin-bottom:10px; border-radius:5px; box-sizing:border-box; }

ul.form li.hasAvatar .avatar { width:28px; height:28px; float:left; border-radius:100px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#366889; position:absolute; bottom:3px; left:3px; z-index:5; }
ul.form li.hasAvatar .avatar:not(.grey).empty::after { content:attr(data-initials); font-size:12px; color:#fff; }
ul.form li.hasAvatar input[type="text"] { padding-left:34px; }

.chat { display:flex; flex-direction:column; }
.chat .messages { width:100%; float:left; box-sizing:border-box; list-style:none; padding:0 10px 0 42px; max-height:300px; overflow-y:overlay; overflow-x:hidden; display:flex; align-items:end; flex-direction:column; }
.chat .messages li { width:100%; float:left; margin-bottom:0px; }
.chat .messages li:first-child { margin-top:auto; }
/*.chat .messages li.right > .header { float:right; text-align:right; }
.chat .messages li.right .bubble { float:right; background:#4c73bb; color:#fff; }
.chat .messages li.right .bubble > span {  }
.chat .messages li.right .header .avatar { left:initial; right:-50px; }*/
.chat .messages li .bubble { border-radius:5px; width:100%; clear:both; float:left; margin-top:2px; margin-bottom:2px; font-family:'Open Sans'; font-size:12px; box-sizing:border-box; position:relative; }
.chat .messages li > .header { background:none; padding:0; margin:5.5px 0; font-size:12px; color:#666; position:relative; }
.chat .messages li > .header .avatar { width:28px; height:28px; float:left; position:absolute; top:-5.5px; left:-42px; border-radius:100px; background:#ccc; display:flex; justify-content:center; align-items:center; }
.chat .messages li > .header .timestamp { color:#666; float:right; }
.chat .messages li .bubble .buttons { width:100%; float:left; margin-top:4px; visibility:hidden; }
.chat .messages li:hover .bubble .buttons { visibility:visible; }
.chat .messages li .bubble > span { width:100%; float:left; }
.chat .messages li .bubble .buttons a { color:#999; }
.chat .messages li .bubble .buttons a::before { font-size:16px; }
.chat .messages li .bubble .buttons a:hover { opacity:0.7; }
.chat .messages li .bubble.deleted .buttons { visibility:hidden !important; }
.chat .messages li .filesBox { max-width:initial; }
.chat .messages div.noResults { height:100%; display:flex; justify-content:center; align-items:center; }

ul.form li .chatInput { width:100%; float:left; padding:8px; box-sizing:border-box; font-size:12px; color:#000; border:1px solid #ccc; -webkit-appearance:none; background:#f9f9f9; font-family:'Open Sans'; outline:none; position:relative; border-radius:5px; }
fieldset[disabled] ul.form li .chatInput { background:#e4e4e4; }
ul.form li .chatInput textarea { min-height:17px; padding:0; border:none !important; background:none; resize:none; height:auto; resize:initial; field-sizing:content; width:calc(100% - 52px); border-width:0; }
ul.form li .chatInput .buttons { position:absolute; bottom:1px; right:4px; }
ul.form li .chatInput .buttons a { color:#999; cursor:pointer; }
ul.form li .chatInput .buttons a:hover { opacity:0.7; }
ul.form li .chatInput .buttons a::before { font-size:23px; }
fieldset[disabled] ul.form li .chatInput .buttons a { opacity:0.3; cursor:default; }
fieldset[disabled] ul.form li .chatInput .buttons a:hover { opacity:0.3; }
.chatBox { background:#eee; border:1px solid #ccc; padding:10px; box-sizing:border-box; width:60%; border-radius:3px; margin-bottom:6px; float:left; }
.chatBox .header { width:100%; float:left; font-size:10px; position:relative; color:#666; float:left; }
.chatBox .header span {  }
.chatBox .header .closeBox { position:absolute; top:0; right:0; }
.chatBox .header .closeBox::before { font-size:14px; }
.chatBox .message { float:left; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#333; margin-top:3px; }

.filesBox { max-width:calc(100% - 52px); float:left; margin-bottom:-5px; margin-top:6px; }
.filesBox > * { background:#eee; border:1px solid #ccc; padding:7px 7px; box-sizing:border-box; border-radius:3px; margin-bottom:6px; float:left; margin:0 5px 5px 0; }
.filesBox > *:last-child { margin-right:0; }
.filesBox > *::before { font-size:18px; float:left; margin-right:5px; color:#999; }
.filesBox > * span { float:left; margin-right:5px; color:#333; }
.filesBox > * .removeFile { float:left; }
.filesBox > * .removeFile:hover { opacity:0.7; }
.filesBox > * .removeFile::before { font-size:18px; float:left; color:#333; }
.filesBox > a:hover { opacity:0.7; }

/* ######################################### */
/* ### Combobox */
/* ######################################### */
.combobox { width:100%; float:left; padding:5px 5px 2px 5px; border:1px solid #ccc; border-radius:5px; box-sizing:border-box; font-size:12px; background:#f9f9f9; font-family:Arial, Helvetica, sans-serif; cursor:text; position:relative; }
.combobox.disabled, fieldset[disabled] .combobox { background-color:#e4e4e4; }
.combobox input[type="text"] { width:80px; border:none !important; padding:3px 3px 6px 3px; float:left; background:none !important; }
.combobox input[type="text"]:focus { outline:none; border:none; }
.combobox .tag { float:left; background:#ddd; color:rgba(0,0,0,0.8); padding:4px 18px 4px 5px; border-radius:3px; margin:0 3px 3px 0; position:relative; font-size:12px; font-family:'Open Sans', Helvetica, sans-serif; }
.combobox .tag a::after { content:"\e14c"; font-family:'Material Icons Round'; position:absolute; top:5px; right:4px; width:12px; height:12px; font-size:14px; color:rgba(0,0,0,0.5); }
.combobox.focus { border:1px solid #666; }

/*#################################*/
/*### Autocomplete and tooltip */
/*#################################*/
.ui-widget.ui-widget-content { /*width:auto !important; min-width:max-content;*/ }
.ui-menu { border-radius:0 0 3px 3px; border:1px solid #666; border-top:none; width:100% !important; /*max-height:calc(100vh - 300px);*/ max-height:120px; min-width:180px; overflow-y:overlay; }
.ui-menu .ui-menu-item { color:#000; border:none; font-size:12px; box-sizing:border-box; clear:both; line-height:initial; }
.ui-menu .ui-menu-item:first-child, .ui-menu .ui-menu-item:first-child { margin-top:-1px; border-top:1px solid #666; }
.ui-menu .ui-menu-item a { box-sizing:border-box; background:#f7f7f7; padding:4px 6px; width:100%; float:left; line-height:initial; text-align:left; font-family:'Open Sans', sans-serif; }
.ui-menu .ui-menu-item.noResults { width:100%; pointer-events:none; }
.ui-menu .ui-menu-item.noResults a { color:#666; font-style:italic; text-align:center; padding:20px 0; pointer-events:none; }
/*.ui-menu .ui-menu-item:nth-child(even) a { background:#efefef; }*/
.ui-menu .ui-menu-item:hover a { border:none; } 
.ui-menu .ui-menu-item:last-child, .ui-menu .ui-menu-item:last-child div { border-radius:0 0 3px 3px; }
.ui-menu .ui-menu-item a.ui-state-active { border:none; margin:0; background:#ddd; color:#000; opacity:1; }
.ui-tooltip, .arrow:after { border:none !important; box-shadow: none !important; }
.ui-tooltip { background:#333; width:auto; padding:8px; color:#fff; border-radius:5px; font-size:12px; font-family:'Open Sans', sans-serif; white-space:pre-line; line-height:16px; box-shadow:rgba(0,0,0,1) 0 2px 2px 2px; white-space:nowrap; }


form.autoSubmit button[type="submit"] { display:none; }

/*#################################*/
/*### Custom */
/*#################################*/
.profileImage img { width:100%; aspect-ratio:1; float:left; border-radius:100%; background:#ddd; cursor:pointer; }
.profileImage img:hover { opacity:0.8; }
.profileImage:not(.hasImage)::before { content:attr(data-initials); color:#999; width:100%; height:100%; position:absolute; display:flex; justify-content:center; align-items:center; font-size:60px; pointer-events:none; }


/*.form.search .query .button.qvisten::before { content:""; background:url(../images/icon_white.svg); width:30px; height:30px; background-size:90%; background-repeat:no-repeat; background-position:center; }

dashboard .tabs > li:nth-child(2) { height:calc(100vh - 140px); }
.dashboard .tabs > li:nth-child(2) > ul:first-child { height:100%; }
.dashboard .tabs > li:nth-child(2) > ul:first-child > li { height:100%; }
.dashboard .tabs > li:nth-child(2) > ul:first-child > li > ul { height:100%; }*/

body.home .slides { justify-content:left; }
.dashboard { padding-left:280px; display:flex !important; }
.dashboard form.search { width:calc(100% - 280px); position:fixed; left:280px; z-index:3; padding:20px; }
.dashboard form.search .query { max-width:initial; }
.dashboard form.search .query .input { width:50%; }


.wysiwyg:not(.trumbowyg-textarea) { display:none; }


.slides > div.dashboard { align-items:start; }
.slides > div.dashboard > .content { width:auto; max-width:initial; margin-top:140px; padding:0; padding:20px; box-sizing:border-box; height:100%; min-height:calc(100vh - 208px); cursor:grab; /*overflow-y:auto; overflow-x:hidden;*/ }
body.scrolling { user-select: none; }
body.scrolling .slides > div.dashboard > .content { cursor:grabbing; }

.task form { min-height:100%; height:100%; }

.task .checklist td:nth-child(1), .task .checklist td:nth-child(2), .task .checklist td:nth-child(3) { width:16px; }
.task .checklist td:nth-child(5) { width:100px; }
.task .checklist td:nth-child(6) { width:70px; }
.task .checklist td:first-child a { color:#666; cursor:grab; }
.task .checklist td:last-child { width:66px; min-width:66px; }
.task .checklist td { padding:7px 7px; vertical-align:top; }
.task .checklist input[type="text"], .task .checklist input[type="date"] { background:none; border:none; font-size:14px; }
.task .checklist input[type="text"] { min-width:200px; padding-left:0; padding-right:0; }
.task .checklist input[type="date"] { width:120px; font-weight:normal; margin-top:2px; }
.task .checklist input[type="checkbox"] { margin-top:7px; }
.task .checklist tr:not(.checked) input[type="date"].due { background:#dd2a2a; color:#fff; font-weight:bold; }
.task .checklist tr.ui-sortable-helper { cursor:grabbing; display:table; }
.task .checklist td a.material-icons { margin-top:6px; }

.task .checklist td > .wysiwyg { display:none; }
.task .checklist tr td .trumbowyg-box { width:500px; position:absolute; top:25px; left:6px; margin-top:20px; display:none; height:150px; white-space:initial; }
.task .checklist tr td .trumbowyg-box .trumbowyg-editor-box { height:calc(100% - 37px); overflow-y:scroll; }
.task .checklist tr.open { height:208px; }
.task .checklist tr.open td:not(:last-child) { }
.task .checklist tr.open td .trumbowyg-box { display:block; z-index:1; }
.task .checklist tr.open td .keyboard_arrow_down::before { content:"\e316"; }

.task .checklist .avatars { float:right; margin:1px -2px; }
.task .checklist .avatars .avatar { width:28px; height:28px; float:left; border-radius:100px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; overflow:hidden; border:1px solid #fff; margin-left:-8px; background:#366889; }
.task .checklist .avatars .avatar:not(.grey).empty::after { content:attr(data-initials); font-size:12px; color:#fff; }

.task .checklist ul.form li table td .combobox { margin:-3px; }
.task .checklist ul.form li table td .combobox input[type="text"] { font-size:12px; }
.task .checklist ul.form li table td .autocomplete-open { bottom:7px; right:4px; }

.task input[name="name"]:not(:focus) { background:none; padding:6.5px 0; border:none; font-size:16px; }
.task input[name="name"].warning:not(:focus)::placeholder { color:#ff7c7c; }

.fireworks { position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; pointer-events:none; }


/*.kanban > li > div { color:#333; width:100%; font-size:18px; font-weight:bold; position:relative; box-sizing:border-box; font-family:'Open Sans'; margin-bottom:5px; }
.kanban > li > div .title { width:100%; float:left; font-size:14px; padding:8px 0; }
.kanban > li > div .title input:not(:focus) { background:none; padding:0; border:none; font-size:14px; }
.kanban > li > div .title input:not(:focus)::placeholder { color:#000; }*/

@media screen and (max-width:1024px) { 
	.task form { height:auto; }
	.dashboard { padding-left:0; }
	.dashboard form.search { width:100%; left:0; padding:14px; } 
	.dashboard form.search .query { max-width:100%; width:100%; display:block; }
	.dashboard form.search .query .input { width:auto; display:block; }
	.dashboard form.search .query .input input { padding-right:140px; }
	.dashboard form.search .query .right { position:absolute; top:0; right:0; }
	form.search .query .button.searchToggle.toggleLeft, form.search .query .button.searchToggle.toggleButtons { display:block; }
	form.search .query:not(.showButtons) .input .button { display:none; }
	form.search .query.showButtons .input input { margin-bottom:10px; }
	form.search .query .button.searchToggle { width:24px; height:24px; float:left; margin:5px; padding:0; }
	form.search .query .button.searchToggle::before { top:2px; left:2px; }
	form.search .query .button { margin:5px 5px 5px 0; }
	form.search .query .button > span { display:none; }
	form.search .query .button ul:not(.ui-menu) { max-height:60vh; overflow-y:auto; }
	form.search .query .button > ul > li > ul:not(.ui-menu) { right:0; position:relative; float:left; border:none; box-shadow:none; padding:10px 0 0 0; overflow:visible;}
	form.search .left { left:-280px; z-index:1; transition:all 0.2s ease; }
	form.search .left.open { left:0; }
	form.search .tabControl { margin:-14px -20px 14px -20px; }
	.columns { flex-direction:column; height:auto; }
	.columns > li { width:100% !important; float:left; margin:0; box-sizing:border-box; overflow:visible !important; padding-right:0; }
	.columns > li:nth-child(1) { order:2; }
	.columns > li:nth-child(2) { order:1; }
	.columns > li:nth-child(3) { order:3; }
	main .inlinePopup.large .content { padding:20px; }
	.slides > div.dashboard > .content { margin-top:126px; }
	.slides > div > .content { padding:30px 15px 15px 15px; box-sizing:border-box; }
	.full form.search .query .input { width:100%; }
	.wall ul.form li { width:100%; margin-left:0; }
	.board ul.form li { width:100%; margin-left:0; }
	.user ul.form li { width:100%; margin-left:0; }
	.profile ul.form li { width:100%; margin-left:0; }
	.profile ul.form li.profileImage { padding:20px 80px; box-sizing:border-box; }
	body.login .slides > div.full { width:100%; flex-basis:100%; height:100%; left:0; margin-left:0; position:relative; top:0; max-height:initial; padding-top:83px; box-sizing:border-box; }
	form.search .query .button.searchToggle.filter_list[data-filters]:not([data-filters="0"])::after { content:""; }
	form.search .query .button.searchToggle.filter_list[data-filters]:not([data-filters="0"])::before { color:#366889; }
	.chat .messages li .bubble .buttons { visibility:visible; }
	.kanban > li > ul > li { }
	.kanban > li > ul > li > a .bottom .drag_indicator  { display:block; }
	
	.task .checklist tr td .trumbowyg-box { left:-73px; }
	fieldset legend .controls li > a > span { display:none; }
	fieldset legend .controls li:not(.material-icons) a.material-icons, fieldset legend .controls li:not(.material-icons) button.material-icons { padding:3.5px; }
	
	.tableContainer { padding-bottom:40px; }
	
	.kanban > li.fixed > div { top:180px; }
}



@media (prefers-color-scheme: dark) {
	body, .kanban > li > div a, .kanban > li > ul > li, form.search .left, form.search, .popup .content, main .inlinePopup .content { background:#333639; }
	nav ul.menu > li a, nav ul.menu > li > a::before { color:rgba(255,255,255,0.5); }
	nav ul.menu > li > a:hover, nav ul.menu > li.active > a { color:rgba(255,255,255,0.9); }
	nav ul.menu > li.active a::before, nav ul.menu > li a:hover::before { color:rgba(255,255,255,0.9); }
	header, nav, .kanban > li ul.hover, .kanban > li > ul > li.hover, form.search .query .button ul:not(.ui-menu), header .right .profile, ul.notifications  { background:#282a2d; }
	ul.notifications li a { color:#999; }
    header { border-bottom:1px solid #111; }
    header .logo a { background-image:url(../images/logo_white.svg); }
    header .right button { color:#ddd; }
    form.search {  }
    form.search { border-bottom:1px solid #222; }
    form.search .left { border-right:1px solid #222; }
    form.search ul.form li > .toggle { border-bottom:1px solid #222; }
    .kanban > li > ul > li > a .bottom { border-top:1px solid #222; }
    .kanban > li > div { color:#ddd; }
    .kanban > li > ul > li > a > .top > .title { color:#fff; }
    ul.form li label { color:#eee; }
    ul.form li input, ul.form li textarea, ul.form li select, ul.form li .input { background:#333; border:1px solid #222; color:#eee; }
    ul.form li input:disabled, ul.form li textarea:disabled, ul.form li select:disabled, ul.form li input[readonly], ul.form li textarea[readonly], ul.form li select[readonly] { background:#222; color:#666; }
    form.search .query .input input { background:#333; border:1px solid #222; color:#eee; }
    .left ul.shortcuts li a { border:1px solid #222; color:#eee; }
    form.search .query .button:not(.active) { border:1px solid #222; color:#999 }
    form.search .query .button.searchToggle { border:none; color:#eee; }
    fieldset legend { color:#eee; }
    fieldset legend::before { color:rgba(255,255,255,0.5); }
    .bar { border-bottom:1px solid #222; }
    .bar ul.controls li.close { color:#eee; }
    .bar ul.breadcrumb li { color:#fff; }
    table th button { color:#ddd; }
    table tbody tr td { color:#fff; }
 	   table th .material-icons, table th { color:#ddd; }
    .tableContainer.hover tbody tr a { color:#fff; }
    .pagination .pages select { border:1px solid #222; background:#333; color:#eee; }
    .combobox { border:1px solid #222; background:#333; }
    .combobox .tag { background:#222; color:#ddd; }
    .combobox .tag a::after { color:rgba(255,255,255,0.5); }
    .combobox .tag[style] { color:rgba(0,0,0,0.8); }
    .combobox .tag[style] a::after { color:rgba(0,0,0,0.5); }
    .combobox.disabled, fieldset[disabled] .combobox { background:#222; color:#666; }
    .combobox.disabled .tag, fieldset[disabled] .combobox .tag { background:#111; }
    header .right .profile .avatar { background:#111; }
    header .right button .avatar { background:#111; color:#ddd; }
    header .right .profile .name { color:#ddd; }
    header .right .profile .avatar.empty::after { color:#ddd; }
    .ui-tooltip { background:#111; }
	.kanban > li > ul > li > a > .top .icons .material-icons { color:#ddd; }
	.kanban > li > ul > li > a .bottom .avatars .avatar { border:1px solid rgba(0,0,0,0.3); }
	form.search .query .button > ul > li .combobox { background:#222; border:1px solid #111; }
	form.search .query .button > ul > li .combobox input { color:#fff; }
	a.autocomplete-open { color:#ddd; }
	/*form.search .query .button > ul > li label input[type="checkbox"] { background:#222; border:1px solid #111; }*/
	.button.white { background:#222; color:#eee; border:1px solid #111; }
	table tbody:empty::after { color:#ddd; }
	ul.form li select:not([multiple]):not([size]) { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='22' width='22' viewBox='0 96 960 960'><path x='0' y='0' fill='white' d='M480 712 240 472l43-43 197 197 197-197 43 43-240 240Z'/></svg>"); }
	ul.form li .chatInput { background:#333; border:1px solid #222; color:#eee; }
	ul.form li .chatInput:disabled { background:#222; }
	.chat .messages li > .header .avatar { background:#222; color:#ddd; }
	div.noResults { color:#eee; }
	.ui-widget.ui-widget-content { border:1px solid #111; }
	ul.form li input:focus, ul.form li textarea:focus, ul.form li select:focus { border:1px solid #111; }
	.ui-menu .ui-menu-item:first-child, .ui-menu .ui-menu-item:first-child { border-top:1px solid #111; }
	.ui-menu .ui-menu-item a { background:#222; color:#eee; }
	.ui-menu .ui-menu-item:nth-child(even) a { background:#222; }
	.ui-menu .ui-menu-item a.ui-state-active { background:#333; color:#fff; }
	.chat .messages li > .header, .chat .messages li > .header .timestamp { color:#999; }
	.chat .messages li .bubble { color:#eee; }
	form.search .query .button > ul > li .combobox .tag { background:#111; }
	.kanban > li > div .title input:not(:focus)::placeholder { color:#fff; }
	table td .material-icons:not(.button) { color:#fff; }
	.toggle label { color:#fff; }
	body.login ul.form li::before { color:rgba(255,255,255,0.3); }
	body.login ul.form li .checkboxContainer input:checked::after { color:#fff; }
	body.login ul.form li .checkboxContainer label, body.login ul.form li.forgot-password a { color:#ccc; }
	form.search .tabControl { border-bottom:1px solid #222; }
	form.search .tabControl .content button { color:#eee; }
	form.search .tabControl a { border:1px solid #222; color:#eee; }
	.trumbowyg-box { border:1px solid #222; color:#fff; }
	.trumbowyg-button-pane { background:rgba(0,0,0,0.07); border-bottom:1px solid #222; }
	.trumbowyg-box svg { color:#fff; fill:#fff; }
	.trumbowyg-button-pane .trumbowyg-button-group::after { background:#222; }
	.trumbowyg-button-pane::after, .trumbowyg-button-pane::before { background:#222; }
	.trumbowyg-button-pane button.trumbowyg-active, .trumbowyg-button-pane button:not(.trumbowyg-disable):focus, .trumbowyg-button-pane button:not(.trumbowyg-disable):hover { background:#222; }
	.trumbowyg-dropdown button { background:none; color:#fff; }
	ul.form li .trumbowyg-dropdown { background:#282a2d; border:1px solid #222; }
	.bar ul.controls li ul { background:#282a2d; }
	.bar ul.controls li ul > li a { color:#fff; }
	.bar ul.controls li ul > li a:hover { color:#fff; }
	body.login p { color:#fff; }
	.chatBox { background:#2f3234; border:1px solid #222; }
	.chatBox .header { color:#ccc; }
	.chatBox .message { color:#fff; }
	.kanban > li > ul > li > a > .top .checklist li input:checked::after { color:#fff; }
	.kanban > li > ul > li > a > .top .checklist li span { color:#fff; }
	.kanban > li > ul > li > a .bottom .deadline span { color:#fff; }
	.kanban > li > ul > li > a .bottom .drag_indicator  { color:#fff; }
	.kanban > li.fixed > div { background:#333639; }
}