@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(255,255,255,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(255,255,255,0.2); }

.chat::-webkit-scrollbar { width:16px; position:absolute; top:0; right:0; }
.chat::-webkit-scrollbar-track { box-shadow:inset 0 0 10px 10px #fff; border-left:solid 10px transparent; }
.chat::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
.chat::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
.chat::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
.chat::-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%; 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:'Fira Sans'; outline:none; }
[v-cloak] { display:none; }
input[type="checkbox"] { border-radius:0; }
a { cursor:pointer; }

/*#################################*/
/*### Basic */
/*#################################*/
body { font-family:'Quicksand', sans-serif; overflow-x:hidden; overflow-y:scroll; background:#eee; }
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; margin-left:90px; 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:10px; 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: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%; }
.popup .slides > div { width:100% !important; border-right:none; position:relative; }
.popup .bar { position:absolute; padding:15px 20px; }
.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:60px 20px 20px 20px; max-height:80vh; overflow-y:scroll; overflow-x:hidden; border-radius:10px; background:rgba(76,115,187,0.5); 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:2% 20%; box-sizing:border-box; align-items:center; display:flex; flex-direction:column; }
main .inlinePopup .bar { position:relative; top:56px; padding:0 20px; }
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; }
main .inlinePopup .content { padding:60px 20px 20px 20px; max-height:80vh; overflow-y:scroll; overflow-x:hidden; border-radius:10px; background:rgba(76,115,187,0.5); box-sizing:border-box; }
main .inlinePopup.deals .content { background:rgb(110,165,106,0.5); }
main .inlinePopup.prospects .content { background:rgb(187,76,76,0.5); }
main .inlinePopup.contacts .content { background:rgb(235,188,48,0.5); }
.popup .inlinePopup { position:relative; }

/*#################################*/
/*### Theme */
/*#################################*/
nav { background:rgba(30,67,137,1); }

fieldset legend .controls li a,
.pagination .pages .actions a, 
.pagination .pages .scroll > div a.selected,
.button,
.themeColor,
.bar.material-icons::before { /*background:rgba(30,67,137,0.9);*/ background:#4c73bb; }

.prospects fieldset legend .controls li a,
.prospects .pagination .pages .actions a, 
.prospects .pagination .pages .scroll > div a.selected,
.prospects .button,
.prospects .themeColor,
.prospects .bar.material-icons::before { background:#bb4c4c; }

.contacts fieldset legend .controls li a,
.contacts .pagination .pages .actions a, 
.contacts .pagination .pages .scroll > div a.selected,
.contacts .button,
.contacts themeColor,
.contacts .bar.material-icons::before { background:#ebbc30; }

.deals fieldset legend .controls li a,
.deals .pagination .pages .actions a, 
.deals .pagination .pages .scroll > div a.selected,
.deals .button,
.deals themeColor,
.deals .bar.material-icons::before { background:#6ea56a; }

.pagination .pages .actions a, 
.pagination .pages .scroll > div a.selected,
.button,
.themeColor { color:#fff; }

/*#################################*/
/*### 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; }
body.login .slides > div.full { width:460px; left:50%; margin-left:-230px; position:absolute; top:12%; height:auto; max-height:82%; min-width:initial; overflow-y:auto; overflow-x:hidden; }
body.login .slides > div > .content { overflow-y:hidden; }
body.login .slides > div > .content::before { content:""; background-image:url(../images/logo_black.svg); width:100%; float:left; height:100px; background-size:80%; background-position:center; margin-bottom:20px;  background-repeat:no-repeat;}
body.login .slides > div > .content fieldset { margin:0 0 15px 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:240px; height:100%; max-height:100%; overflow-y:overlay; overflow-x:hidden; z-index:2; position:fixed; float:left; }
nav .logo { width:100%; float:left; background-color:rgba(255,255,255,0.1); padding:30px 25px; background-position:center; box-sizing:border-box; }
nav .logo a { background-image:url(../images/logo.svg); background-repeat:no-repeat; float:left; width:100%; height:40px; transition:all 0.2s ease; }
nav .logo a:hover { opacity:0.7; }
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(255,255,255,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; border-radius:10px; background-color:rgba(255,255,255,0); transition:background-color 0.2s linear; }
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:#fff; font-weight:bold; background-color:rgba(255,255,255,0.1); }
nav ul.menu > li > a::before { content:"\e88a"; font-size:20px; color:rgba(255,255,255,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:#fff; }
nav ul.menu > li > ul { width:100%; float:left; border-radius:0 0 10px 10px; background:rgba(255,255,255,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(255,255,255,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; }

nav ul.shortcuts { width:100%; float:left; list-style:none; display:flex; justify-content:center; align-items:center; position:absolute; bottom:90px; }
nav ul.shortcuts li { float:left; gap:10px; margin:0 10px; }
nav ul.shortcuts li a { /*color:rgba(30,67,137,0.9); background:#fff;*/ color:#fff; border-radius:100px; float:left; padding:10px; opacity:1; transition:all 0.2s ease; box-shadow:rgba(0,0,0,0.1) 0px 2px 1px; }
nav ul.shortcuts li a.contacts { background:#ebbc30; }
nav ul.shortcuts li a.flag { background:#bb4c4c; }
nav ul.shortcuts li a.cases { background:#6ea56a; }
nav ul.shortcuts li a:hover { opacity:0.7; }
nav ul.shortcuts li a::before { font-size:24px; float:left; }


nav .profile { background:rgba(0,0,0,0.3); width:100%; float:left; padding:14px; position:absolute; bottom:0; left:0; box-sizing:border-box; }
nav .profile .avatar { width:40px; height:40px; float:left; background:#ccc; border-radius:100px; box-sizing:border-box; margin-right:8px; display:flex; justify-content:center; align-items:center; overflow:hidden; }
nav .profile .avatar.empty::before { content:"\e7fd"; font-family:'Material Icons Round'; font-size:30px; color:#666; }
nav .profile .name { width:calc(100% - 48px); float:left; color:#fff; font-size:16px; font-weight:bold; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-top:3px; }
nav .profile a { float:left; color:#999; font-size:10px; font-family:'Open Sans'; text-decoration:none; margin-right:5px; transition:all 0.2s ease; }
nav .profile a:hover { text-decoration:underline; color:#fff; }
nav .profile a:last-child { margin-right:0; }

/*#################################*/
/*### 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; }
.pace-done .loader { opacity:0; visibility:hidden; }
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.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; display:flex; justify-content:center; align-items:center; }
.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);
}
.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; overflow-x:overlay; 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 7px; text-align:left; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,0.03); }
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 0 -2px 0; 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 7px; 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.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.03); 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 { float:left; display:none; }

form.search .query { margin:0 0 15px 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:50%;  }
form.search .query input { border-radius:100px; padding:14px 20px 14px 54px; font-size:18px; color:#333; font-family:'Open Sans'; font-weight:bold; border:1px solid #ccc; background:#fff; float:left; width:100%; box-sizing:border-box; box-shadow:rgba(0,0,0,0.1) 0px 2px 1px; outline:none; }
form.search .query input::placeholder { color:#999; }
form.search .query input:focus {  }
form.search .query::before { font-family:"Material Icons Round"; content:"\e8b6"; position:absolute; top:12px; left:16px; font-size:30px; color:#999; }
form.search .query .button { white-space:nowrap; border-radius:100px; line-height:54px; padding:0 20px 0 50px; font-size:18px; position:relative; }
form.search .query .button::before { position:absolute; top:12px; left:14px; font-size:30px; }
form.search .query .button.toggleFilters { background:#fff; color:#666; }
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; }

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


.tabs { list-style:none; }


.kanban { display:flex; flex-direction:row; gap:10px; }
.kanban > li { height:auto; background:#e4e4e4; padding:10px; border-radius:5px; margin:0 !important; position:relative; box-sizing:border-box; }
.kanban > li ul.hover { background:#ddd; 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'; padding:5px; margin-bottom:5px; }
.kanban > li > div .title { width:100%; float:left; }
.kanban > li > div .subtitle { width:100%; float:left; color:#666; font-size:12px; font-family:'Open Sans'; }
.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; cursor:grab; z-index:1; position:relative; border:1px solid rgba(0,0,0,0.2); border-radius:5px; box-shadow:rgba(0,0,0,0.1) 0px 2px 1px; }
.kanban > li > ul > li.ui-sortable-helper { cursor:grabbing; opacity:0.5; }
.kanban > li > ul > li > a { line-height:18px; cursor:inherit; padding:8px; width:100%; box-sizing:border-box; }
.kanban > li > ul > li > a > .title { font-size:14px; width:100%; float:left; font-weight:bold; }
.kanban > li > ul > li > a > .subtitle { font-size:12px; width:100%; float:left; }
.kanban > li > ul > li > a > .price { font-size:10px; width:100%; float:left; }


.kanban > li.bottom { background:none; line-height:46px; border:2px dashed #999; text-align:center; text-transform:uppercase; padding:0; border-radius:5px; font-family:'Open Sans'; font-weight:bold; color:#666; }
.kanban > li.bottom > ul { height:100%; }
.kanban > li.bottom > ul::before { content:attr(data-label); position:absolute; }
.kanban > li.lost { color:#bb4c4c; }
.kanban > li.won { color:#6ea56a; }
.kanban > li.bottom ul.hover { background:rgba(0,0,0,0.2); }
.kanban > li.bottom.lost ul.hover { background:rgba(187,76,76,0.2); }
.kanban > li.bottom.won ul.hover { background:rgba(110,165,106,0.2); }

.kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* first row: 5 columns */
  grid-auto-flow: row; /* items fill row by row */
  grid-template-rows: auto 50px;
  gap: 10px; /* optional spacing */
  list-style: none; /* optional reset */
  padding: 0;
  margin: 0;
}

.kanban > li:nth-child(n+4) {
  grid-column: span 1; /* second row items take 1 column each */
}

.kanban > li:nth-child(4) {
  grid-column: 1; /* force 6th li to start second row */
}

.kanban > li:nth-child(5) {
  grid-column: 2;
}

.kanban > li:nth-child(6) {
  grid-column: 3;
}



.tree { width:100%; float:left; }
.tree .leaf { width:10px; height:10px; float:left; background:#ff0000; }

/*#################################*/
/*### Main */
/*#################################*/
main { width:100%; height:100%; float:left; padding-left:240px; box-sizing:border-box; }
.slides { width:100%; height:100%; max-height:100%; float:left; position:relative; display:flex; flex-direction:row; gap:15px; padding:15px; box-sizing:border-box; }
.slides > div { width:50%; }
.slides > div:not(.full):only-child { width:calc(50% - 7.5px); }
.slides > div > .content { width:100%; float:left; }
fieldset { width:100%; background:#fff; border-radius:5px; padding:25px; border:1px solid rgba(0,0,0,0.2); box-shadow:rgba(0,0,0,0.1) 0px 2px 1px; box-sizing:border-box; margin-bottom:15px; }
fieldset legend { width:100%; float:left; position:relative; padding:7px 0 7px 44px; box-sizing:border-box; font-size:20px; 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:8px; }
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:10px; 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 { min-width:100%; width:100%; display:none; }
.slides > div.full:last-child { display:block; }
.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:24px; margin:0 2px; }

fieldset.footer { background:none; box-shadow:none; padding:0; border:none; }
fieldset.footer .button { font-size:18px; font-weight:bold; padding:10px 18px; }
fieldset.footer .button.material-icons {}
fieldset.footer ul.form li div.buttons .button.material-icons { line-height:37px; }
fieldset.footer ul.form li div.buttons .button.material-icons::before { margin:6px; }
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%; float:left; margin:0; position:relative; font-size:25px; margin:0 2px 8px 2px; box-sizing:border-box; color:#444; font-weight:900; }
.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.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:bold; margin-bottom:3px; float:left; white-space:nowrap; }
ul.form li .labelLink { font-size:12px; color:#444; font-family:'Open Sans'; font-weight:bold; 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:#000; border:1px solid #ccc; -webkit-appearance:none; background:#f9f9f9; font-family:'Open Sans'; outline:none; position:relative; border-radius:5px; }
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 8px; padding-right:26px; background-size:17px; }
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:4px 6px; }
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; }
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:24px; 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 13px; 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; }


.chat { width:100%; float:left; box-sizing:border-box; list-style:none; padding:0 50px; max-height:300px; overflow-y:overlay; }
.chat li { width:100%; float:left; }
.chat li.right > .header { float:right; text-align:right; }
.chat li.right .bubble { float:right; background:#4c73bb; color:#fff; }
.chat li.right .bubble > span {  }
.chat li.right .header .avatar { left:initial; right:-50px; }
.chat li .bubble { background:#eee; border-radius:5px; padding:10px; width:auto; clear:both; float:left; max-width:80%; margin-bottom:5px; font-family:'Open Sans'; font-size:12px; box-sizing:border-box; position:relative; }
.chat li > .header { background:none; padding:0; margin:5px 0 5px 0; font-size:10px; color:#333; position:relative; }
.chat li > .header .avatar { width:40px; height:40px; float:left; position:absolute; top:19px; left:-50px; border-radius:100px; background:#ccc; display:flex; justify-content:center; align-items:center; }
.chat li > .header .avatar.empty::before { content:"\e7fd"; font-family:'Material Icons Round'; font-size:30px; color:#666; }
.chat li > .header span:last-child { color:#666; }
.chat li .bubble .buttons { position:absolute; top:0; right:-28px; display:none; padding:6px 0 4px 8px; }
.chat li:hover .bubble .buttons { display:block; }
.chat li .bubble > span { width:100%; float:left; }
.chat li .bubble .buttons a { color:#999; }
.chat li .bubble .buttons a::before { font-size:23px; }
.chat li .bubble .buttons a:hover { opacity:0.7; }
.chat li .filesBox { max-width:initial; }

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; background:none; resize:none; height:auto; resize:initial; field-sizing:content; width:calc(100% - 52px); }
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; }
.replyBox { background:#eee; border:1px solid #ccc; padding:10px; box-sizing:border-box; width:60%; border-radius:3px; margin-bottom:6px; float:left; }
.replyBox .header { width:100%; float:left; font-size:10px; position:relative; margin-bottom:3px; color:#666; float:left; }
.replyBox .header span {  }
.replyBox .header .closeReply { position:absolute; top:0; right:0; }
.replyBox .header .closeReply::before { font-size:14px; }
.replyBox .message { float:left; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#333; }

.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 1px 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; }
.combobox input[type="text"]:focus { outline:none; border:none; }
.combobox .tag { float:left; background:#ddd; color:#333; padding:4px 18px 5px 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:#666; }
.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); min-width:180px; overflow-y:overlay; }
.ui-menu .ui-menu-item { color:#000; border:none; font-size:12px; box-sizing:border-box; clear:both; }
.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; }
.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; }


/*#################################*/
/*### Custom */
/*#################################*/
.profileImage img { width:100%; aspect-ratio:1; float:left; background:#ccc; border-radius:100%; border:1px solid #999; box-shadow:rgba(0,0,0,0.1) 0px 2px 1px; background:#ddd; cursor:pointer; }
.profileImage img:hover { opacity:0.8; }
.profileImage:not(.hasImage)::before { content:"\e3b0"; font-family:'Material Icons Round'; font-size:30px; color:#999; width:100%; height:100%; position:absolute; display:flex; justify-content:center; align-items:center; font-size:80px; 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%; }