:root{
	--burger-color: #666;
	--body-bg:#FAFAFA;
	--grey: #f2f2f2;
	--grey-dark: #999;
	--blue: #436ba9;
	--blue-dark: #003469;
	--blue-light: #5289db;
	--blue-ex-light: #aac5ee;
	--green: #006937;
	--green-light: #00b35c;
	--green-ex-light: #00DF73;
	--green-dark: #00331a;
	--orange: #F79420;
	--orange-light: #faab52;
	--yellow:#fced2c;
	--red: #ec1c24;
	--red-light: #faa49e;
}

html, body { font-family:montserrat; height:100%; width:100%; overflow:hidden; opacity:0; transition:all .5s; /* transform:translateX(50%); */ }
body { /* padding-bottom:50px; */ background-color:var(--body-bg); }

/* custom versatile-datepicke */
.c-datepicker-date-range-picker.has-sidebar { max-width:90%; max-height:85dvh; overflow:auto; z-index:199999; margin:0; }
.c-datepicker-date-range-picker.has-sidebar .c-datepicker-picker__body-wrapper { position:relative; }

.c-datepicker-picker [slot=sidebar], .c-datepicker-picker__sidebar { width:90px!important; }
.c-datepicker-picker__shortcut { font-size:.8rem!important; }
.c-datepicker-picker [slot=sidebar]+.c-datepicker-picker__body, .c-datepicker-picker__sidebar+.c-datepicker-picker__body { margin-left:90px!important; }

.c-datepicker-date-range-picker-panel__wrap.is-left { padding:5px!important; }
.c-datepicker-date-table td, .c-datepicker-date-table td div { height:25px!important; }

.c-datepicker-date-range-picker-panel__wrap { width:100%!important; }
.is-en.c-datepicker-date-range-picker .is-right .c-datepicker-date-range-picker__header-year { margin-left:0!important; }


.c-datepicker-date-table td, .c-datepicker-date-table td div { padding:0!important; }

.c-datepicker-picker__footer { text-align:center!important; padding-top:20px!important; }
.c-datepicker-picker__footer button { background-color:var(--green-light)!important; color:#FFF!important; padding:5px 20px!important; border-radius:20px; font-size:.8rem!important; }
.c-datepicker-picker__footer button.c-datepicker-button--text { background:unset!important; color:var(--green)!important; }

.c-datepicker-date-table td.current:not(.disabled) .cell { background-color:var(--green-light)!important; color:#FFF!important; }
.c-datepicker-picker__shortcut:hover, .c-datepicker-picker__shortcut.active, .c-datepicker-date-table td.today .cell { color:var(--green-light)!important; }
/* /custom versatile-datepicke */

::-webkit-scrollbar { height: 3px; width:3px; }
::-webkit-scrollbar-track { background: #DDD; border-radius:10px; }
::-webkit-scrollbar-thumb { background: var(--orange-light); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange-light); }

.form-message{ display: block; width: 100%; margin: 0 auto 10px; border-radius: 5px; background-color: var(--green); border-color: var(--green); }

.nowrap { white-space:nowrap; }

.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:30px!important; line-height:30px!important; border-radius:20px!important; padding:0 20px!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:30px; 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(--green-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(--green-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;}

.modal .manager-content { padding:0!important; margin:0!important; width:100%; font-size:.9em; }
.modal .manager-content .manager-main-title { padding:0 0 0 10px; margin:0 0 10px; }
.modal .manager-content .table .col { display:block!important; width:100%!important; text-align:left; padding:0; line-height:1.3em; }
.modal .manager-content .table .col label { margin:0!important; }
.modal .manager-content .table .col .button { display:none; }
.manager-content .table-list .table-list-filter form { display:inline-block; margin-right:10px; }

.container .boundary { max-width:unset; }

.tox.tox-tinymce { border-radius:10px; }

.officer-profile { display:inline-block; color:#FFF; padding:0 20px; box-sizing:border-box; }
.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(--green-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:fixed; bottom:1px; left:0; width:100%; z-index:99999; height:40px; padding:3px 0; background-color:#FFF; box-shadow:0 0 3px #999; border-bottom:1px solid #DDD; }
.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.top-menu-left { height:0; }
.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:50%; vertical-align:middle; vertical-align: top; margin-top: 5px; }
.top-menu .table .col .main-logo.min-hide {display:none;}

.top-menu .company-name { font-size:1em; color:var(--green-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; display:none; }
.top-menu .officer-menu .icon-grid.active { color:var(--green); transform:rotate(90deg); }
.top-menu .officer-menu .icon-notifications_none { margin-right:10px; transition:all 0.3s; }
.top-menu .officer-menu .icon-notifications_none.active {transform:scale(1.1); color:var(--green); }

.top-menu .officer-menu .officer-menu-content { display:block; opacity:0; width:100%; height:calc(100dvh - 40px); list-style-type:none; padding:20px; box-sizing:border-box; margin:0; position:fixed; bottom:-50px; right:0; background-color:#FFF; border-bottom:1px solid #DDD; transition:all .3s; overflow-y:auto; pointer-events:none; }
.top-menu .officer-menu .officer-menu-content.active { opacity:1; bottom:40px; pointer-events:auto; }
.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(--green-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:100dvw; }
.top-menu .officer-menu .officer-menu-content.notification li { box-sizing:border-box; font-size:0.8em; padding:10px 0; border-bottom:1px solid #f1f1f1; color:#999; }
.top-menu .officer-menu .officer-menu-content.notification li.new { color:var(--blue); }
.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(--green-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:none; color:inherit; background:unset; }
.top-menu .officer-menu .officer-menu-content.notification li:hover {background-color:#FAFAFA;}

.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.1s; }
.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(--orange); }
.apps .app-icon:nth-child(3n+0) { margin-right:0; }
.apps [class^=icon-] { font-size:2em; color:#333; display:block; margin-bottom:10px; }


.main-body { height:calc(100dvh - 40px); overflow:hidden; }
.main-body.active { background-color:var(--orange); height:100%; }
.main-body .boundary { width:100%; }
.main-body .company-notification { font-size:0.8em; background-color:#FFF984; color:#000; padding:5px; box-sizing:border-box; text-align:center;}

.main-body > .boundary > .table { display:block; white-space:nowrap; position:relative; left:-70%; transition:all .1s; }
.main-body.active > .boundary > .table { left:0; }

.main-body .main-body-left, .main-body .main-body-right { display:inline-block; vertical-align:top; text-align:left; white-space:wrap; transition:all .1s; overflow:hidden; height:calc(100vh - 50px); }
.main-body.active .main-body-left, .main-body.active .main-body-right { margin-top:30px; }
.main-body.active .main-body-right {  background-color:#FFF; }

.main-body .main-body-left { width:70%; }
.main-body .main-body-right { max-height:calc(100dvh - 45px); padding-bottom:20px; overflow-y:auto; position:relative; box-sizing:border-box; }
.main-body.active .main-body-right { overflow:hidden; height:calc(100dvh - 60px); overflow:hidden; border-radius:10px; }

.main-body.active .manager-menu { position:relative; }

.main-body .manager-content { width:100%; height:100%; margin:0; }
.main-body.active .manager-content .table-menu .table-menu-container { position:absolute; }
.main-body.active .manager-content {  }

.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; }

.main-body .main-body-right .hamburger { position:fixed; top:10px; left:10px; display:inline-block; z-index:8888; }
.main-body .main-body-right .hamburger.is-active { position:absolute; }

/* main-body-left main-menu */
.main-body .main-menu { list-style-type:none; margin:5px 0 0; padding:0 0 0 20px; box-sizing:border-box; position:sticky; top:0; max-height:calc(100dvh - 130px); overflow-y:auto; width:96%; }
.main-body .main-menu::-webkit-scrollbar { width:3px; }
.main-body .main-menu::-webkit-scrollbar-track { background-color:#ffd8ad; }
.main-body .main-menu::-webkit-scrollbar-thumb { background-color:var(--orange); }
.main-body .main-menu > li { padding:10px 5px; margin-bottom:5px; color:#FFF; }
.main-body .main-menu > li > a { font-weight:bold; }
.main-body .main-menu li a { color:inherit; }
.main-body .main-menu li i { display:inline-block; vertical-align:bottom; font-size:1.2em; color:inherit; margin-right:15px; }

.main-body .main-menu li ul { list-style-type:none; margin-top:10px; padding:0; }
.main-body .main-menu li ul li { color:#FFF; }
.main-body .main-menu li ul li a { display:block; white-space:nowrap; padding:5px 0 5px 35px; border-radius:5px; margin-bottom:5px; }
.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(--green); }
.main-body .main-menu li.active ul li { color:#FFF; }
.main-body .main-menu li ul li.active a, .main-body .main-menu li ul li:hover a { background-color:var(--orange-light); color:#FFF; border-color:var(--orange-light); }

.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;  }
/* / main-body-left main-menu */

.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(--green-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(--green);}

.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 { display:none; background-color:var(--green-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(--green-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(--green-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%;}

#image_popup { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgb(0,0,0,.7); z-index:99999; }
#image_popup .icon-x { position:absolute; top:5px; right:5px; font-size:2em; color:#FFF; }
#image_popup img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:96%; max-height:96%; }
#image_popup.active { display:block; }

@media (min-width:576px){
	
	.c-datepicker-date-range-picker-panel__wrap { width:50%!important; }
	.c-datepicker-date-range-picker-panel__wrap.is-left { padding:10px!important; }
}

@media (min-width:768px){
		
	/* custom versatile-datepicke *
	.c-datepicker-date-range-picker.has-sidebar { width:initial!important; top:initial!important; bottom:initial!important; left:initial!important; right:initial!important; }
	
	/* .c-datepicker-date-range-picker.has-sidebar .c-datepicker-picker__body-wrapper { position:relative; }

	.c-datepicker-date-range-picker-panel__wrap { width:100%!important; }

	.c-datepicker-date-table td { padding:0!important; }

	.c-datepicker-picker__footer { text-align:center!important; padding-top:20px!important; }
	.c-datepicker-picker__footer button { background-color:var(--green-light)!important; color:#FFF!important; padding:5px 20px!important; border-radius:20px; font-size:1rem!important; }
	.c-datepicker-picker__footer button.c-datepicker-button--text { background:unset!important; color:var(--green)!important; }

	.c-datepicker-date-table td.current:not(.disabled) .cell { background-color:var(--green-light)!important; }
	.c-datepicker-picker__shortcut:hover, .c-datepicker-picker__shortcut.active, .c-datepicker-date-table td.today .cell { color:var(--green-light)!important; }
	/* /custom versatile-datepicke */

	.top-menu .officer-menu .icon-notifications_none { margin:0; }
	
	.multi-selection .selected-items { display:inline-block; max-width:60%; margin:0 0 5px 10px; }
	
	.main-body > .boundary > .table { left:-40%; }
	.main-body .main-body-left { width:40%; }
	
	.main-body .main-body-left { padding-right:20px; }
	.main-body .main-body-left .officer-profile { margin-top:10px; }
	
	.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){	
	html, body { left:0; /* transform:translateY(50%); */ }
	
	.hamburger { display:none!important; }
	
	.main-body  > .boundary > .table { left:0!important; display:table; }
	.main-body { background-color:var(--orange); }
	.main-body, .main-body .main-body-left, .main-body .main-body-right { height:100dvh; max-height:100dvh; }
	.main-body .main-body-left { padding-right:0; }
	.main-body .main-body-right { background-color:#FFF; }
	
	.main-body .main-menu { width:100%; max-height:calc(100dvh - 90px); padding-bottom:30px; }
	
	.multi-selection { max-width:55%; margin-left:10px; }
	.multi-selection a {margin-top:0;}
	
	.top-menu { position:relative; }
	.top-menu-left { min-width:267px; }
	.top-menu .boundary { width:100%; max-width:calc(100% - 40px); }
	.top-menu .table .col .main-logo { display:none; }
	.top-menu .table .col .main-logo.min-hide { display:inline-block; height:28px; }
	
	.top-menu .officer-menu .officer-menu-content.notification { position:absolute; top:0; bottom:unset; right:0; width:auto; border:0; box-shadow: 0 0 50px #BBB; max-height:60vh; }
	.top-menu .officer-menu .officer-menu-content.active { top:100%;}
	
	.chatbox .notification-container { width:70%; margin-left:30%; }
	.chatbox .news-box.form { width:45%; right:2%; }
}

@media (min-width:1490px){
	
	.main-body .main-menu::-webkit-scrollbar { width:5px; }

	.chatbox .news-box.form { right:calc(50% - 700px); width:681px; }
}