:root{
	--burger-color: #333;
	--grey: #f2f2f2;
	--grey-dark: #999;
	--blue: #436ba9;
	--blue-dark: #003469;
	--blue-light: #5289db;
	--blue-ex-light: #aac5ee;
	--red: #ec1c24;
	--red-light: #faa49e;
}

html, body { font-family:roboto; }
body { background-color:var(--grey); padding-bottom:30px; }

::-webkit-scrollbar { height: 10px; width:7px; }
::-webkit-scrollbar-track { background: #999; }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-light); }

.selection { -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none;  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 17.414 3.293 8.707l1.414-1.414L12 14.586l7.293-7.293 1.414 1.414L12 17.414z'/></svg>"); background-repeat: no-repeat; background-position-x: 98%; background-position-y: center; background-size:auto 40%; padding-right: 10px!important; }
.button { height:auto!important; }

.icomoon-icon:before { font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; font-size:1em; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

input[type='text'], input[type='password'], .button, .selection { padding:5px 10px; border-radius:5px;  height:40px; line-height:1.4em; }
.selection { padding:0 10px; }
.textarea { resize:none; }

.tooltip { cursor:pointer; }

.text-green { color:#63D375; }
.text-red { color:var(--red); }

.min-avatar { display:inline-block; vertical-align:middle; margin-right:5px; width:20px; height:20px; cursor:pointer; }
.min-avatar div { line-height:20px; fotn-size:1.2em; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--blue-dark); color:#FFF; text-align:center;  }
.min-avatar.grey div { background-color:#999!important; }

.progress-bar-container { line-height:40px; }
.progress-bar { display:inline-block; vertical-align:middle; width:100%; height:20px; background-color:var(--grey); position:relative; }
.progress-bar .progress-bar-percent { position:absolute; top:0; left:0; height:100%; background-color:var(--blue-light); max-width:100%; }
.progress-bar span { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

.multi-selection .selection-content {position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; text-align:center; display:none;}
.multi-selection .selection-content.active {display:block;}
.multi-selection .selection-content .selection-bg {position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:.75;}
.multi-selection .selection-content .selected-items { display:block; width:100%; }
.multi-selection .selection-content .selection-body { display:inline-block; width:96%; max-width:300px; height:auto; margin:0; position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%); background-color:#FFF; padding:10px; border-radius:5px; }
.multi-selection .selection-content .selection-body strong {margin-bottom:10px; display:inline-block;}
.multi-selection .selection-content .selection-body .lbjs {width:100%;box-sizing:border-box; text-align:left; }
.multi-selection .selection-content .selection-body .button {margin-top:10px;}

.multi-selection .selected-items { max-width:80%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; vertical-align: middle; margin-top: 5px; color:#999; }

.multi-selection .selected-items .textbox.amount {width:50px;}

.container .boundary { max-width:unset; }

.tox.tox-tinymce { border-radius:10px; }

.officer-profile { display:inline-block; }
.officer-profile .circle-image, .officer-profile .officer-profile-detail { vertical-align:middle; }
.officer-profile .circle-image { display:inline-block; width:60px; height:60px; margin-right:10px; }
.officer-profile .circle-image div { position:absolute; top:0; left:0; width:100%; height:100%; line-height:60px; font-size:2em; background-color:var(--blue-dark); color:#FFF; text-align:center; }
.officer-profile .officer-profile-detail { display:inline-block; width:calc(100% - 70px); font-size:0.8em; }
.officer-profile .officer-profile-detail div { font-weight:bold; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; font-size:1em; }
.officer-profile .officer-profile-detail .officer-profile-description a { color:inherit; }

.top-menu { position:relative; z-index:9999; height:80px; box-shadow:0 0 5px #666; background-color:#FFF; }
.top-menu .main-logo img, .top-menu .company-logo img { outline:0; width:auto; height:100%; display:inline; vertical-align:top; }
.top-menu .table .col { height:40px; line-height:40px; text-align:left; }
.top-menu .table .col .main-logo, .top-menu .table .col .company-logo { display:inline-block; vertical-align:top; width:auto; height:100%; }

.top-menu .table .col .company-logo { margin-right:20px; display:none; }
.top-menu .table .col .company-logo.min-hide {display:none;}
.top-menu .table .col .main-logo { height:100%; vertical-align:middle; }
.top-menu .table .col .main-logo.min-hide {display:none;}

.top-menu .company-name { font-size:1em; color:var(--blue-dark); display:inline-block; vertical-align:top; margin:0; width:auto; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-menu .company-name.min-hide {display:none;}

.top-menu .officer-menu { display:inline-block; vertical-align:middle; float:right; position:relative; }

.top-menu .officer-menu [class^=icon-] { position:relative; display:inline-block; color:var(--burger-color); font-size:1.8em; margin-right:15px; }
.top-menu .officer-menu [class^=icon-] span { position:absolute; display:inline-block; left:50%; bottom:50%; width:20px; height:20px; line-height:20px; background-color:var(--red); color:#FFF; font-size:0.4em; text-align:center; font-family:utmavo; border-radius:100%; }
.top-menu .officer-menu .icon-grid { font-size:1.4em; transition:all 0.3s; }
.top-menu .officer-menu .icon-grid.active { color:var(--blue-light); transform:rotate(90deg); }
.top-menu .officer-menu .icon-notifications_none { margin-right:20px; transition:all 0.3s; }
.top-menu .officer-menu .icon-notifications_none.active {transform:scale(1.1); color:var(--blue-light); }

.top-menu .officer-menu .officer-menu-content { display:none; width:200px; list-style-type:none; padding:0; margin:0; position:absolute; top:100%; right:0; background-color:#FFF; box-shadow:0 0 3px #666; transition:all 0.3s; max-height:80vh; overflow-y:auto; }
.top-menu .officer-menu .officer-menu-content.active {display:block;}
.top-menu .officer-menu .officer-menu-content li { line-height:1.5em; }
.top-menu .officer-menu .officer-menu-content li a { white-space:nowrap; padding:10px 20px; display:block; color:#000; }
.top-menu .officer-menu .officer-menu-content li:hover a { background-color:var(--grey); color:var(--blue-light); }

.top-menu .officer-menu .officer-menu-content .officer-profile { padding:10px; }
.top-menu .officer-menu .officer-menu-content .officer-profile .circle-image { width:30px; height:30px; }
.top-menu .officer-menu .officer-menu-content .officer-profile .circle-image div { line-height:30px; font-size:1.5em; font-weight:bold; }
.top-menu .officer-menu .officer-menu-content .officer-profile .officer-profile-detail { width:calc(100% - 40px); font-size:0.7em; line-height:1.5em; }

.top-menu .officer-menu .officer-menu-content.notification { width:300px; }
.top-menu .officer-menu .officer-menu-content.notification li { box-sizing:border-box; font-size:0.8em; padding:5px; border-bottom:1px solid #DDD; color:#999; }
.top-menu .officer-menu .officer-menu-content.notification li.new { color:#000; }
.top-menu .officer-menu .officer-menu-content.notification li .officer-min-avatar { display:inline-block; vertical-align:middle; margin-right:5px; width:20px; height:20px; }
.top-menu .officer-menu .officer-menu-content.notification li .officer-min-avatar div { line-height:20px; fotn-size:1.2em; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--blue-dark); color:#FFF; text-align:center;  }
.top-menu .officer-menu .officer-menu-content.notification li a { display:inline; white-space:break-spaces; padding:0; text-decoration:underline; text-underline-position:under; color:inherit; }
.top-menu .officer-menu .officer-menu-content.notification li:hover a {background-color:unset;}

.top-menu .support { display:inline-block; float:right; width:calc(100% - 250px); }
.top-menu .support.min-show, .top-menu .support.min-hide { display:none; }

.apps { position:fixed; top:-150%; left:2%; width:96%; height:auto; box-sizing:border-box; padding:130px 20px 20px; background-color:#FAFAFA; z-index:8888; box-shadow:0 0 3px #666; border-bottom-left-radius:10px; border-bottom-right-radius:10px; transition:all 0.3s; }
.apps.active { top:0; }
.apps .app-icon { display:inline-block; vertical-align:top; width:32%; margin: 0 2% 40px 0; font-weight:bold; font-size:0.9em;  color:#000; }
.apps .app-icon.active, .apps .app-icon.active [class^=icon-], .apps .app-icon:hover, .apps .app-icon:hover [class^=icon-] { color:var(--red); }
.apps .app-icon:nth-child(3n+0) { margin-right:0; }
.apps [class^=icon-] { font-size:2em; color:var(--blue); display:block; margin-bottom:10px; }

.main-body .company-notification { font-size:0.8em; background-color:#FFF984; color:#000; padding:5px; box-sizing:border-box; text-align:center;}

.main-body .main-body-left, .main-body .main-body-right { padding-top:30px; text-align:left; }
.main-body .main-body-right { padding-bottom:20px; }
.main-body .main-body-right.locked .manager-content, .main-body .main-body-right.locked .news-box { position:relative; }
.main-body .main-body-right.locked .manager-content, .main-body .main-body-right.locked .manager-content .table-menu a, .main-body .main-body-right.locked .news-box, .main-body .main-body-right.locked .news-box-button { pointer-events:none; }
.main-body .main-body-right.locked .manager-content:before, .main-body .main-body-right.locked .news-box:before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:5555; background-color:rgba(200,200,200,0.4); border-radius:10px; pointer-events:none; }
.main-body .main-body-right.locked .news-box.company-info { pointer-events:auto; }
.main-body .main-body-right.locked .news-box.company-info:before { display:none; }

.news-box { background-color:#FFF; border-radius:10px; box-shadow:0 0 5px #DDD; }
.news-box .news-box-officer, .news-box .news-box-content { padding:10px; }

.news-box .news-box-officer { border-bottom:1px solid #DDD; }
.news-box .news-box-officer .officer-profile { display:block; }
.news-box .news-box-officer .officer-profile .circle-image { width:40px; height:40px; }
.news-box .news-box-officer .officer-profile .circle-image div { line-height:40px; }
.news-box .news-box-officer .officer-profile .officer-profile-detail { width:calc(100% - 60px); position:relative; }
.news-box .news-box-officer .officer-profile .officer-profile-detail div { max-width:unset; }
.news-box .news-box-officer .officer-profile .officer-profile-detail div span { font-weight:normal; font-size:0.8em; }
.news-box .news-box-officer .officer-profile .officer-profile-detail .officer-profile-description, .news-box .news-box-comment .news-box-comment-item .officer-profile-detail div.officer-profile-description { font-size:1em; font-style:italic; color:#666666; font-weight:normal; margin-top:2px; }
.news-box .news-box-officer .officer-profile .officer-profile-detail .officer-profile-description:before, .news-box .news-box-comment .news-box-comment-item .officer-profile-detail div.officer-profile-description:before { content:"\e906"; font-size:0.9em; display:inline-block; vertical-align:middle; }
.news-box .news-box-officer .officer-profile .officer-profile-detail .officer-profile-button { position:absolute; top:50%; right:-10px; transform:translateY(-50%); font-size:1.3em; overflow:visible; }
.news-box .news-box-officer .officer-profile .officer-profile-detail a { color:inherit; }
.news-box .news-box-officer .officer-profile .officer-profile-detail .icon-dots-horizontal-triple:hover { color:#DDD; }
.news-box .news-box-officer .officer-profile .officer-profile-detail .officer-profile-button .officer-profile-button-menu { position: absolute; top: 100%; right: 0; font-weight: normal; font-size: 0.8em; background-color: #FFF; border: 1px solid #DDD; padding: 5px; line-height: 1.5em; display:none; }
.news-box .news-box-officer .officer-profile .officer-profile-detail .officer-profile-button:hover .officer-profile-button-menu { display:inline-block; }
.news-box .news-box-officer .officer-profile .officer-profile-detail .officer-profile-button .officer-profile-button-menu  a { padding:3px 5px; display:block; }
.news-box .news-box-officer .officer-profile .officer-profile-detail .officer-profile-button .officer-profile-button-menu  a:hover { background-color:var(--grey); border-radius:5px; }

.news-box.form .news-box-officer {background-color:var(--blue-light); color:#FFF; border-top-left-radius:10px; border-top-right-radius:10px; position:relative; }
.news-box.form .news-box-officer:after { content:"\e917"; font-family:'icomoon' !important; speak:never; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; display:inline-block; position:absolute; top:0; right:0; width:40px; height:40px; line-height:40px; text-align:center; transform:rotate(90deg); }
.news-box.form #show_editor_bt { color:#999; }
.news-box.form #show_editor_bt:hover {color:var(--blue);}

.news-box.form #image_container .u_images { display:block!important; min-height:10px; }
.news-box.form #image_container .image-uploader, .news-box .news-box-content .news-box-content-images .square-image { margin:5px 5px 5px 0; width:19.2%; max-width:80px; margin-right:1%; height:auto; box-sizing:border-box; }
.news-box.form #image_container .image-uploader:nth-child(5n+0) { margin-right:0; }
.news-box.form #image_container .image-uploader.bt {display:none}
.news-box.form #image_container .image-uploader div a.bt { background-color:var(--grey-dark); }
.news-box.form .button { height:40px; }
.news-box.form .form-buttons { display:inline-block; width:auto; float:right; }
.news-box.form .form-buttons .button { box-sizing:border-box; line-height:25px;}
.news-box.form .form-buttons i { font-size:1.5em; }
.news-box.form .form-buttons .button span {display:none;}
.news-box.form .checkbox { margin-top:10px; display:inline-block; }

.news-box.form .selection { border:0; width:auto; padding-right:20px;}

.news-box .news-box-content { font-size:0.9em; margin-bottom:20px; }
.news-box .news-box-content .news-box-content-title { margin-top:0; font-size:1.2em; }

.news-box .news-box-content .news-box-content-images { margin-top:10px; }
.news-box .news-box-content .news-box-content-images .square-image { display:inline-block; margin-bottom:0; }

.news-box .news-box-comment { border-top:1px solid #DDD; padding-top:10px; margin-top:10px; }
.news-box .news-box-comment .table .col { text-align:left; }
.news-box .news-box-comment .news-box-comment-form { display:none; }
.news-box .news-box-comment .news-box-comment-form.active { display:block; }
.news-box .news-box-comment .textarea { resize:none; border-radius:5px; margin-top:10px; }
.news-box .news-box-comment .button { height:auto; }
.news-box .news-box-comment a.bt { color:#999; font-weight:bold; }

.news-box .news-box-comment .news-box-comment-list { margin-top:20px; display:none; }
.news-box .news-box-comment .news-box-comment-list.active { display:block; }
.news-box .news-box-comment .news-box-comment-item { padding-bottom:10px; margin-bottom:10px; }
.news-box .news-box-comment .news-box-comment-item .officer-profile { width:100%; position:relative; }
.news-box .news-box-comment .news-box-comment-item .officer-profile .circle-image { width:40px; height:40px; }
.news-box .news-box-comment .news-box-comment-item .officer-profile .circle-image div { line-height:40px; }
.news-box .news-box-comment .news-box-comment-item .officer-profile .icon-trash { color:#666; position:absolute; top:5px; right: 5px; font-weight:normal; }
.news-box .news-box-comment .news-box-comment-item .officer-profile .icon-trash:hover {color:#000;}
.news-box .news-box-comment .news-box-comment-item .officer-profile-detail, .news-box .news-box-comment .news-box-comment-item .news-box-comment-item-content { width:calc(100% - 60px); }
.news-box .news-box-comment .news-box-comment-item .officer-profile-detail div {max-width:unset;}
.news-box .news-box-comment .news-box-comment-item .officer-profile-detail div span { font-weight:normal; }
.news-box .news-box-comment .news-box-comment-item .news-box-comment-item-content { margin-left: 55px; margin-top: 5px; }

.notification-container .notification-container-buttons { text-align:center; margin:10px 0 20px; }
.notification-container .notification-container-buttons .button { min-width:120px; height:auto; }

.footer { background-color:var(--blue-dark); color:#FFF; font-size:0.7em; height:30px; line-height:30px; position:absolute; bottom:0; left:0; width:100%; }
.footer .boundary { text-align:center; }

.new-noties { position:fixed; bottom:50px; right:10px; z-index:9999; width:70%; max-width:300px; }
.new-noties .new-noties-item { display:none; background-color:#FFF; padding:10px; box-sizing:border-box; border:1px solid #DDD; border-right:5px solid var(--blue-dark); border-bottom-left-radius:10px; border-top-left-radius:10px; box-shadow:0 0 10px #DDD; text-align:left; font-size:0.9em; transition:all 0.3s; margin-bottom:10px; }
.new-noties .new-noties-item a { text-decoration:underline; color:inherit; }
.new-noties .new-noties-item .circle-image { width:20px; display: inline-block; vertical-align: middle; }
.new-noties .new-noties-item .circle-image div { position:absolute; top:0; left:0; font-size:0.8em; background-color:var(--blue-dark); width:100%; height:100%; color:#FFF; line-height:20px; text-align:center; }

.news-box-group-info { font-size:0.8em; color:#BBB; margin-bottom:10px; padding-bottom:5px; border-bottom:1px solid #DDD; }

.chatbox { position:relative; padding-bottom:100px!important; }
.chatbox .news-box .news-box-comment { display:none; }
.chatbox .news-box.form { position:fixed; bottom:40px; right:2%; width:96%; z-index:8888; }
.chatbox .news-box-group-info { margin-top:45px; }
.chatbox .news-box { width:85%; }
.chatbox .news-box.active { margin-left:15%;}

@media (min-width:768px){
	
	.multi-selection .selected-items { display:inline-block; max-width:60%; margin:0 0 5px 10px; }
	
	.top-menu { height:70px; }
	.top-menu .table .col { height:70px; line-height:70px; }
	.top-menu .table .col .main-logo, .top-menu .table .col .company-logo { height:60px; margin:0; }
	
	.top-menu .table .col .main-logo { display:none; float:unset; margin:-5px 0 0; }
	.top-menu .table .col .main-logo.min-hide { display:inline-block; }
	
	.top-menu .table .col .company-logo { display:none; }
	.top-menu .table .col .company-logo.min-hide { display:inline-block; float:left; height:60px; width:auto; margin: 5px 10px 0 0; }
	.top-menu .table .col .company-name { display:none; font-size:1.2em; vertical-align:top; max-width:320px; }
	.top-menu .table .col .company-name.min-hide {display:inline-block;}
	
	.top-menu .officer-menu {line-height:70px;}
	.top-menu .officer-menu .icon-grid {display:none;}
	.apps {display:none;}
	
	.top-menu .support.min-hide { display:inline-block; width:auto; float:unset; color:var(--blue); margin-right:15px; font-weight:bold; font-size:.8em; }
	.top-menu .support.min-hide i { font-size:1.2em; color:inherit; margin-right:0; margin-bottom:5px; }
	.top-menu .support.min-hide a { color:inherit; }
	.top-menu .support.min-hide i, .top-menu .support.min-hide a { display:inline-block; vertical-align:middle; }
	.top-menu .support.min-hide span { display:none; }
	
	.main-body .main-body-left { padding-right:20px; }
	.main-body .main-body-left .officer-profile {}
	
	.main-body .main-menu { list-style-type:none; margin:30px 0 0; padding:0; position:sticky; top:0; }
	.main-body .main-menu > li {border-bottom:1px solid #DDD; padding:10px 5px; }
	.main-body .main-menu > li > a { font-weight:bold; }
	.main-body .main-menu li a { color:inherit; }
	.main-body .main-menu li i { font-size:1.5em; color:#808080; margin-right:15px; }
	
	.main-body .main-menu li ul { list-style-type:disc; margin-top:10px; padding-left:3.7em; }
	.main-body .main-menu li ul li { font-size:0.8em; color:#000; }
	.main-body .main-menu li ul li a { white-space:nowrap; font-size:1.3em; }
	.main-body .main-menu li ul.group-chat li a { white-space:break-spaces; display:inline-block; width:90%; vertical-align:top; }
	.main-body .main-menu li span { background-color:var(--red); color:#FFF; font-size:0.8em; display:inline-block; vertical-align:middle; margin:-2px 0 0 5px; width:18px; height:18px; line-height:18px; text-align:center; border-radius:100%; }
	.main-body .main-menu li.active, .main-body .main-menu li:hover { color:var(--red); }
	.main-body .main-menu li.active ul li { color:#000; }
	.main-body .main-menu li ul li.active, .main-body .main-menu li ul li:hover { color:var(--red); }
	
	.main-body .main-menu li ul.group-chat li { position:relative; }
	.main-body .main-menu li ul.group-chat .group-chat-list li { display:none; list-style-type:none; }
	.main-body .main-menu li ul.group-chat .group-chat-list li:first-child { display:list-item; list-style-type:disc; }
	.main-body .main-menu li ul.group-chat li [class^='icon-'] { display: inline-block; position: absolute; top: 3px; right: 0; width:auto; }
	.main-body .main-menu li ul.group-chat .group-chat-list li:hover, .main-body .main-menu li ul.group-chat .group-chat-list li.active1 { color:var(--red-light); }
	.main-body .main-menu li ul.group-chat .group-chat-list li:first-child:hover { color:var(--red); }
	
	.main-body .main-menu li ul.group-chat .group-chat-list.active li { display:list-item;  }
	
	.news-box.form .form-buttons .button span { display:inline-block; margin-left:5px; }
	.news-box .news-box-comment .news-box-comment-list { padding-left:20px; }
	
	.chatbox .news-box.form { width:53.664%; }

	/* .chatbox #notification_container { height:80vh; overflow-y:auto; } */
}

@media (min-width:996px){
	.top-menu .table .col .company-name { max-width:480px; }
	
	.news-box .news-box-comment .news-box-comment-list { margin-top:30px; }
	
	.chatbox .news-box-group-info { margin-top:0; }
	.chatbox .news-box.form { width:54.4%; }
}

@media (min-width:1200px){
	.top-menu .table .col .main-logo, .top-menu .table .col .company-logo { height:60px; }
	.top-menu .support.min-hide a:hover { text-decoration:underline; text-underline-position:under; }
	.top-menu .support.min-hide { margin-right:25px; font-size:1em; }
	.top-menu .support.min-hide span { display:inline-block; margin-left:5px; }
	.top-menu .support.min-hide i { font-size:1.5em; }
	
	.multi-selection { max-width:55%; margin-left:10px; }
	.multi-selection a {margin-top:0;}
	
	.top-menu-left { min-width:267px; }
	
	.chatbox .notification-container { width:70%; margin-left:30%; }
	.chatbox .news-box.form { width:45%; right:2%; }
}

@media (min-width:1490px){
	.chatbox .news-box.form { right:calc(50% - 700px); width:681px; }
}