/* Style Sheet for Raspberry Phone */

/* CSS_dhtmlxUi */

.NoSelect {
	-webkit-user-select: none; /* Chrome all / Safari all */
	-moz-user-select: none; /* Firefox all */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Likely future */
}

.UiText {
	/*font-family: Roboto, Arial, Helvetica;*/
	color: #333333;
	font-size: 14px;
	margin-top: 10px;
}

.UiButtonBar {
	text-align: center;
	border-top: 1px solid #e6e6e6;
	background-color: #F3F3F3;
	height: 49px;
	vertical-align: middle;
	line-height: 49px;
}

.UiButtonBar button {
	margin: 0px;
	line-height: 100%;
	padding: 0px;
	padding-left: 7px;
	padding-right: 7px;
	border: 1px solid #0b213a;
	background-color: #395f88;
	border-radius: 4px;
	min-width: 30px;
	min-height: 24px;
	/*font-family: Roboto, Arial, Helvetica;*/
	color: #FFFFFF;
	font-size: 14px;
	margin-left: 1px;
	margin-right: 1px;
	outline: none;
	cursor: pointer;
	box-shadow: inset 1px 1px 1px 0px rgba(250, 250, 250, 0.2), inset -1px -1px 1px rgba(0, 0, 0, 0.2);
}

.UiButtonBar button:hover {
	background-color: #2c5077;
	background-image: linear-gradient(#597ca2, #2c5077);
	border: 1px solid #092139;

	color: #FFFFFF;
}

.UiButtonBar button:active {
	border: 1px solid #092139;
	background-color: #092139;
	background-image: none;

	color: #FFFFFF;
}

.UiButtonBar button:focus {
	outline: none;
}

.UiButtonBar button:disabled {
	cursor: default;
	color: #CCCCCC;
}

.UiButtonBarHtml {
	position: absolute;
	left: 0px;
	width: 100%;
	bottom: 0px;
}

.UiWindowButtonBar {
	text-align: center;
	height: 49px;
	vertical-align: middle;
	line-height: 49px;
}

/*
.UiWindowButtonBar button {
	margin: 0px;
	line-height: 100%;
	padding: 0px;
	padding-left: 7px;
	padding-right: 7px;
	border: 1px solid #0b213a;
	background-color: #395f88;
	border-radius: 4px;
	min-width: 80px;
	font-family: Roboto, Arial, Helvetica;
	color: #FFFFFF;
	font-size: 14px;
	margin-left: 1px;
	margin-right: 1px;
	outline: none;
	cursor: pointer;
	box-shadow: inset 1px 1px 1px 0px rgba(250, 250, 250, 0.2), inset -1px -1px 1px rgba(0, 0, 0, 0.2);
}

.UiWindowButtonBar button:hover {
	background-color: #2c5077;
	background-image: linear-gradient(#597ca2, #2c5077);
	border: 1px solid #092139;

	color: #FFFFFF;
}

.UiWindowButtonBar button:active {
	border: 1px solid #092139;
	background-color: #092139;
	background-image: none;

	color: #FFFFFF;
}

.UiWindowButtonBar button:focus {
	outline: none;
}

.UiWindowButtonBar button:disabled {
	cursor: default;
	color: #CCCCCC;
}
*/

.UiInputText {
	margin-bottom: 5px !important;
	font-size: 18px !important;
	color: #333333 !important;
	width: 100% !important;

	padding-top: 10px !important;
	padding-bottom: 10px !important;
	padding-left: 3px !important;
}

.UiWindowField {
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15%;
	padding-right: 15%;

	font-family: Roboto, Arial, Helvetica;
	color: #333333;
	font-size: 14px;
	line-height: 1.5;

	height: calc(100% - 60px);
	overflow-y: auto;
	overflow-x: hidden;
}

.PastePreviewContainer {
	display: block;
	width: 150px;
	height: 150px;
	border: 10px solid #FFFFFF;
	border-radius: 200px;
	background-color: #F3F3F3;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.PastePreview {
	max-width: 340px;
	max-height: 340px;
	border: 1px solid #CCCCCC;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
	margin: 5px;

	background-color: #F3F3F3;
	border: 10px solid #FFFFFF;
	border-radius: 200px;
}

.FullScreenVideo {
	position: fixed !important;
	top: 0px !important;
	left: 0px !important;
	width: 100% !important;
	height: 100% !important;
	background-color: #000000 !important;
	margin: 0px !important;
	padding: 0px !important;
	z-index: 2147483647 !important;
}

.dtmfButtons {
	font-size: 20px;
	color: #222222;
	width: 40px;
	height: 40px;

	border: 1px solid #efefef;
}

.dtmfButtons:hover {
	color: #FFFFFF;
	background-color: #222222;
}

.dtmfButtons:active {
	color: #cccccc;
	background-color: #000000;
}

.dtmfButtons div {
	font-size: 20px;
	line-height: 9px;
	margin: 0px;
	margin-top: 7px;
	padding: 0px;
}

.dtmfButtons span {
	font-size: 9px;
	line-height: 9px;
	margin: 0px;
	padding: 0px;
}

/* CSS_TabPageTemplate */

audio {
	outline: none;
}

html {
	margin: 0px;
	padding: 0px;
	height: 100%;
}

body {
	height: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	font-family: Roboto, Arial, Helvetica;
	font-size: 14px;
	line-height: 1.5;
	color: #CCCCCC;
	cursor: default;
	background-color: #222222;;
	overflow: hidden;
	user-select: none !important;
}

.pageContainer {
	min-width: 320px;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

.smallFlag {
	height: 12px !important;
	vertical-align: middle !important;
	display: inline-block !important;
	margin-right: 5px !important;
	border: 1px solid #868686 !important;
	border-radius: 2px !important;
	background-color: #868686 !important;
}

/* ScrollBar Styling */
.scroller {
	overflow-y: auto;

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: #516896 transparent;
}

.scroller::-webkit-scrollbar {
	width: 10px;
	/* Width */
}

.scroller::-webkit-scrollbar-track {
	background: transparent;
	/* Track */
}

.scroller::-webkit-scrollbar-thumb {
	background: #516896;
	/* Handle */
	border-radius: 50px;
}

.scroller::-webkit-scrollbar-thumb:hover {
	background: #697ca2;
	/* Handle on hover */
}

.NoItems {
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 200px;
	border: 2px dashed #9cb5d7;
	border-radius: 15px;
	padding: 20px;
	color: #9cb5d7 !important;
}

.SelectItemArrow {
	float: left;
	margin-top: -10px;
	margin-right: -16px;
	margin-left: -10px;
}

.helpFieldset {
	background-color: #f9f9f9;
	border-right: none;
	border-left: none;
	border-color: #293442;
	font-size: 13px;
	color: #515e6f;
}

.FormTextRight {
	display: inline-block;
	text-align: right;
	padding-right: 5px;
}

.textField {
	border: 1px solid #80add4 !important;
	border-radius: 5px;
	padding-left: 3px !important;
	line-height: 22px !important;
	background-color: #f7f7f7 !important;
	box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
}

.contentLoading {
	display: none;
	/* Start Hidden - must activate me :) */
	margin-top: 15px;
	margin-bottom: 15px;
	border: 1px solid #CCCCCC;
	border-radius: 50px;
	background-color: #FFFFFF;
	text-align: center;
	color: #333333;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	/* Optional */
	box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.25);
	line-height: 16px;
	font-size: 11px;
	background-color: #e6e6e6;
	background-image: repeating-linear-gradient(-45deg, #e6e6e6, #e6e6e6 10px, #cfd9e8 10px, #cfd9e8 20px);
}

.required:before {
	content: "\f069";
	font-family: FontAwesome;
	color: red;
	font-size: 7px;
	vertical-align: text-top;
	margin-right: 3px;
}

.on_white {
	color: #333333;
}

.on_white:hover {
	color: #F3F3F3;
}

/* CSS_dhtmlxUiImportant */
/* ====================================================================================== */

/* Windows */
.dhxwin_fr_cover_dnd {
	display: block !important;
}

.dhxwins_vp_material div.dhxwins_mcover {
	background-color: #000000 !important;
	opacity: .6 !important;
}

.dhxwins_vp_material div.dhxwin_active {
	background-color: #FFFFFF !important;
	border-radius: 5px 5px 0px 0px !important;
}

.dhxwins_vp_material div.dhxwin_hdr {
	background-color: #FFFFFF !important;
	color: #222222 !important;
}

.dhxwins_vp_material div.dhxwin_brd {
	border-color: #FFFFFF !important;
}

.dhxwins_vp_material div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button, .dhxwins_vp_material div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button_dis {
	margin-top: 0px !important;
	background-image: none !important;
}

.dhxwins_vp_material div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button.dhxwin_button_help:before {
	content: "\f128"; /* Help */
	font-family: FontAwesome;
	position: absolute;
	line-height: 24px;
	height: 24px;
	width: 24px;
	text-align: center;
	font-size: 13px;
}

.dhxwins_vp_material div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button.dhxwin_button_park:before {
	content: "\f2d1"; /* Minimise */
	font-family: FontAwesome;
	position: absolute;
	line-height: 24px;
	height: 24px;
	width: 24px;
	text-align: center;
	font-size: 13px;
}

.dhxwins_vp_material div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button.dhxwin_button_minmax:before {
	content: "\f2d0"; /* Maximise */
	font-family: FontAwesome;
	position: absolute;
	line-height: 24px;
	height: 24px;
	width: 24px;
	text-align: center;
	font-size: 13px;
}

.dhxwins_vp_material div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button.dhxwin_button_minmaxed:before {
	content: "\f2d2"; /* Restore */
	font-family: FontAwesome;
	position: absolute;
	line-height: 24px;
	height: 24px;
	width: 24px;
	text-align: center;
	font-size: 13px;
}

.dhxwins_vp_material div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button.dhxwin_button_close:before {
	content: "\f00d"; /* Close */
	font-family: FontAwesome;
	position: absolute;
	line-height: 24px;
	height: 24px;
	width: 24px;
	text-align: center;
	font-size: 13px;
}

.dhxwins_vp_material div.dhxwin_active div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button:hover {
	background-color: #b01607 !important;
	box-shadow: inset 0px 0px 0 1px #b01607 !important;
	border-radius: 5px !important;
	color: #FFFFFF;
}

.dhxwins_vp_material div.dhxwin_active div.dhx_cell_wins div.dhx_cell_statusbar_def div.dhx_cell_statusbar_text, .dhxwins_vp_material div.dhxwin_inactive div.dhx_cell_wins div.dhx_cell_statusbar_def div.dhx_cell_statusbar_text {
	height: 49px !important;
}

/* Sidebar */
.dhxsidebar_base_material div.dhxsidebar_cont div.dhx_cell_sidebar div.dhx_cell_sidebar_hdr div.dhx_cell_sidebar_hdr_icon {
	background-image: none !important;
	cursor: pointer !important;
}

.dhxsidebar_base_material div.dhxsidebar_cont div.dhx_cell_sidebar div.dhx_cell_sidebar_hdr div.dhx_cell_sidebar_hdr_icon:before {
	content: "\f0c9"; /* Bars */
	font-family: FontAwesome;
	position: absolute;
	font-size: 18px;
}

.dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side.dhxsidebar_tpl_details div.dhxsidebar_side_items div.dhxsidebar_item img.dhxsidebar_item_icon {
	display: none !important;
}

.dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side.dhxsidebar_tpl_details div.dhxsidebar_side_items div.dhxsidebar_item div.dhxsidebar_item_text {
	padding-left: 16px !important;
}

/* CSS_HtmlElements */
/* ====================================================================================== */
fieldset {
	border: 1px solid #333333;
	border-radius: 5px;
	text-align: left;
}

legend {
	line-height: initial !important;
	text-align: left;
}

hr {
	height: 1px;
	border: none;
	background-color: #CCCCCC;
	clear: both;
	margin: 0;
}

button {
	margin: 0px;
	line-height: 100%;
	padding: 0px;
	padding-left: 7px;
	padding-right: 7px;
	border: 1px solid transparent;
	background-color: transparent;
	border-radius: 5px;
	min-width: 30px;
	min-height: 24px;
	font-family: Roboto, Arial, Helvetica;
	color: #dedede;
	font-size: 14px;
	margin-left: 1px;
	margin-right: 1px;
	outline: none;
	cursor: pointer;
}

button:hover {
	background-color: #333333;
	border: 1px solid #404040;
	color: #FFFFFF;
}

button:active {
	border: 1px solid #333333;
	background-color: #222222;
	background-image: none;
	color: #FFFFFF;
	box-shadow: 0px 0px 0px 2px rgba(65, 100, 147, 0.25);
	transition: box-shadow 240ms;
}

button:focus {
	outline: none;
}

button:disabled {
	cursor: default;
	color: #CCCCCC;
}

button:disabled:hover {
	cursor: default;
	color: #CCCCCC;
}

button:disabled:active {
	box-shadow: none;
	transition: none;
}

/* Text Field */
input[type=text] {
	color: #dcdcdc;
	font-size: 14px;
	padding: 0px;
	line-height: 22px;
	border: none;
	border-bottom: 2px solid #a3bad9;
	background-color: transparent;
}

input[type=text].is-invalid {
	border-bottom-color: #dc3545;
}

input[type=text]:focus {
	outline: none;
	border-bottom: 2px solid #416493;
}

/* Password Field */
input[type=password] {
	color: #416493;
	font-size: 14px;
	padding: 0px;
	line-height: 22px;
	border: none;
	border-bottom: 2px solid #a3bad9;
}

input[type=password].is-invalid {
	border-bottom-color: #dc3545;
}

input[type=password]:focus {
	outline: none;
	border-bottom: 2px solid #416493;
	background-color: transparent;
}

/* Select Dropdown */
select {
	min-width: 45px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmlld0JveD0iMCAwIDMyMCA1MTIiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzQiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImNhcmV0LWRvd24uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjMgKDI0MDU1NDYsIDIwMTgtMDMtMTEpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGExMCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczgiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyMDI2IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjE0NzciCiAgICAgaWQ9Im5hbWVkdmlldzYiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjEuNDEwMTU2MiIKICAgICBpbmtzY2FwZTpjeD0iNzMuNzYyNzEyIgogICAgIGlua3NjYXBlOmN5PSIyNjAuMzM4OTgiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc0IiAvPgogIDxwYXRoCiAgICAgZD0iTTMxLjMgMTkyaDI1Ny4zYzE3LjggMCAyNi43IDIxLjUgMTQuMSAzNC4xTDE3NC4xIDM1NC44Yy03LjggNy44LTIwLjUgNy44LTI4LjMgMEwxNy4yIDIyNi4xQzQuNiAyMTMuNSAxMy41IDE5MiAzMS4zIDE5MnoiCiAgICAgaWQ9InBhdGgyIgogICAgIHN0eWxlPSJmaWxsOiM0MTY0OTM7ZmlsbC1vcGFjaXR5OjEiIC8+Cjwvc3ZnPgo8IS0tCkZvbnQgQXdlc29tZSBGcmVlIDUuNC4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tCkxpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgKEljb25zOiBDQyBCWSA0LjAsIEZvbnRzOiBTSUwgT0ZMIDEuMSwgQ29kZTogTUlUIExpY2Vuc2UpCi0tPgoK');
	background-size: 10px;
	background-position: center right;
	background-repeat: no-repeat;
	font-size: 14px;
	color: #416493;
	padding: 0px;
	line-height: 22px;
	vertical-align: middle;
	padding-right: 16px;
	border: none;
	border-bottom: 2px solid #a3bad9;
	background-color: transparent;
	cursor: pointer;
	white-space: nowrap !important;
	border-radius: 0px !important;
}

select:focus {
	outline: none;
	border-bottom: 2px solid #416493;
}

/* Check Boxes */
input[type=checkbox] {
	display: none;
}

input[type=checkbox] + label {
	color: #416493;
	padding: 0px;
	line-height: 22px;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
	margin-right: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

input[type=checkbox] + label:before {
	font-family: FontAwesome;
	content: "\f096";
	/* fa fa-square-o */
	/* content: "\f204"; */
	width: 20px;
	display: inline-block;
	font-size: 18px;
	vertical-align: middle;
	line-height: 22px;
}

input[type=checkbox]:checked + label:before {
	font-family: FontAwesome;
	content: "\f046";
	/* fa fa-check-square-o */
	/* content: "\f205"; */
	width: 20px;
	display: inline-block;
	font-size: 18px;
	vertical-align: middle;
	line-height: 22px;
}

/* Radio Boxes */
input[type=radio] {
	display: none;
}

input[type=radio] + label {
	color: #416493;
	padding-top: 5px;
	padding-bottom: 5px;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
	margin-right: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

input[type=radio] + label:before {
	font-family: FontAwesome;
	content: "\f10c";
	margin-right: 3px;
	font-size: 16px;
	vertical-align: middle;
}

input[type=radio]:checked + label:before {
	font-family: FontAwesome;
	content: "\f192";
	margin-right: 3px;
	font-size: 16px;
	vertical-align: middle;
}

/*
input[type=range]{

}
*/

.pill-nav {
	display: inline-block;
	color: black;
	text-align: center;
	font-size: 16px;
	border: 1px solid #416493;
	border-radius: 3px;
	font-size: 0;
	vertical-align: middle;
	white-space: nowrap;
	line-height: initial;
}

.pill-nav input[type=radio] {
	display: none;
}

.pill-nav .radio_pill {
	cursor: pointer;
	font-size: 14px;
}

.pill-nav input[type=radio] + label {
	color: #416493;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
	margin-right: 0px;
}

.pill-nav input[type=radio] + label:before {
	font-family: initial !important;
	content: initial !important;
	margin-right: initial !important;
	font-size: initial !important;
	vertical-align: initial !important;
}

.pill-nav input[type=radio]:checked + label {
	background-color: #416493;
	color: white;
}

.pill-nav input[type=radio]:checked + label:before {
	font-family: initial !important;
	content: initial !important;
	margin-right: initial !important;
	font-size: initial !important;
	vertical-align: initial !important;
}

.pill-nav button:disabled {
	cursor: default;
	color: #666666;
	background-color: #333333;
}

.pill-nav button {
	border: none;
	margin: 0px;
	border-radius: 2px;
}


/* CSS_dhtmlxTemplateImportant */
/* ====================================================================================== */
div.gridbox_material.gridbox {
	border-radius: 5px !important;
	border: 1px solid #9cb5d7 !important;
}

div.gridbox_material.gridbox .xhdr {
	border-bottom: 1px solid #97b2d7 !important;
}

div.gridbox_material.gridbox table.hdr tr {
	background-color: none !important;
	border: none !important;
}

div.gridbox_material.gridbox table.hdr td {
	background-color: #9cb5d7 !important;
	border: 1px solid transparent !important;
	color: #ffffff !important;
	font-size: 14px !important;
	border-right: 1px solid transparent !important;
}

div.gridbox_material.gridbox table.hdr td:hover {
	border-right: 1px solid #839fc5 !important;
}

div.gridbox_material.gridbox table.obj.row20px tr td {
	border-right: 1px solid transparent !important;
}

div.gridbox_material.gridbox table.hdr td.dhxgrid_sort_desc_col {
	background-image: none !important;
}

div.gridbox_material.gridbox table.hdr td.dhxgrid_sort_desc_col::before {
	content: "\f0dd";
	font-family: FontAwesome;
	width: 13px;
	height: 13px;
	position: absolute;
}

div.gridbox_material.gridbox table.hdr td.dhxgrid_sort_asc_col {
	background-image: none !important;
}

div.gridbox_material.gridbox table.hdr td.dhxgrid_sort_asc_col::before {
	content: "\f0de";
	font-family: FontAwesome;
	width: 13px;
	height: 13px;
	position: absolute;
}

div.gridbox_material.gridbox table.obj.row20px tr.rowselected td {
	background-color: #ffebc1 !important;
}

div.gridbox_material.gridbox table.obj tr.rowselected td:first-child {
	border-left: 2px solid #db9f20 !important;
}

.dhtmlxcalendar_material div.dhtmlxcalendar_dates_cont ul.dhtmlxcalendar_line li.dhtmlxcalendar_cell_month_date {
	background-color: #416493;
}

.dhtmlxcalendar_material div.dhtmlxcalendar_dates_cont ul.dhtmlxcalendar_line li.dhtmlxcalendar_cell_month_date_hover {
	background-color: #416493;
}

div.dhx_popup_material div.dhx_popup_area {
	border-radius: 5px;
}

/* CSS_Phone */
/* ====================================================================================== */
.noneSelected {
	text-align: center;
	padding: 25px
}

.Settings_VolumeOutput_Container {
	display: inline-block;
	width: 100%;
	height: 4px;
	border-radius: 50px;
	border: 1px solid #CCCCCC;
	margin-top: 10px;
	background-color: #FFFFFF;
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.Settings_VolumeOutput {
	width: 5%;
	height: 4px;
	border-radius: 50px;
	background-color: rgb(14, 192, 23);
	box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(0, 0, 0, 0.2);
}

.clearsearchTextBtn {
	border-radius: 100px;
	cursor: pointer;
	width: 16px;
	height: 16px;
	border: none;
	background-color: transparent;
	padding: 0px;
	font-size: 13px;
	box-shadow: none;
	color: #333333;
	min-width: 0px;
	line-height: 16px
}

.clearsearchTextBtn:before {
	content: "\f05c";
	font-family: FontAwesome;
}

.clearsearchTextBtn:hover {
	background-color: transparent;
}

.clearsearchTextBtn:active {
	background-color: transparent;
}

.cleanScroller {
	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: #a6a6a6 transparent;
}

.cleanScroller::-webkit-scrollbar {
	width: 10px;
}

.cleanScroller::-webkit-scrollbar-thumb {
	background: #a6a6a6;
	border-radius: 5px;
}

.cleanScroller::-webkit-scrollbar-track {
	background: transparent;
}

.contactArea {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;

	/* For Firefox */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	padding: 5px;
	box-sizing: border-box;
}

.buddy {
	padding: 5px;
	height: 56px;
	cursor: pointer;
	color: #333333;
	border-left: 3px solid transparent;
	position: relative;
	border-bottom: 1px solid #333333;
}

.buddy:hover {
	background-color: #333333;
}

.buddySelected {
	padding: 5px;
	height: 56px;
	cursor: pointer;
	color: #333333;
	background-color: #404040;
	position: relative;
	border-bottom: 1px solid #333333;
	border-left: 3px solid #3c5f82;
}

.buddyActiveCall {
	padding: 5px;
	height: 56px;
	cursor: pointer;
	color: #333333;
	background-color: #404040;
	position: relative;
	border-bottom: 1px solid #333333;
	border-left: 3px solid #40bd3f;
}

.buddyActiveCallHollding {
	padding: 5px;
	height: 56px;
	cursor: pointer;
	color: #333333;
	background-color: #404040;
	position: relative;
	border-bottom: 1px solid #333333;
	border-left: 3px solid #d2a70a;
}

.lineIcon {
	border-radius: 50px;
	width: 36px;
	height: 36px;
	background-color: #cc9009;
	border: 1px solid #3e3e3e;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
	float: left;
	text-align: center;
	line-height: 36px;
	padding: 0px;
	font-size: 24px;
	color: #F3F3F3;
}

.buddyIcon {
	border-radius: 50px;
	width: 36px;
	height: 36px;
	top: 5px;
	position: relative;
	background-size: 36px;
	background-color: #CCCCCC;
	border: 1px solid #3e3e3e;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
	float: left;
}

.callAnswerBuddyIcon {
	border-radius: 100px;
	width: 100px;
	height: 100px;
	background-size: 100px;
	background-color: #CCCCCC;
	border: 1px solid #3e3e3e;
	display: inline-block;
}

.profileContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

.contact {
	padding: 5px;
	height: 56px;
	color: #4c4c4c;
	/* border-left: 3px solid transparent; */
	position: relative;
	/*cursor: pointer;*/
}

.contactNameText {
	margin-left: 0px;
	margin-top: 0px;
	font-size: 16px;
	color: #cdcdcd;
	margin-right: 55px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

.contactDate {
	float: right;
	font-size: 11px;
	color: #999999
}

.presenceText {
	margin-left: 18px;
	margin-top: -3px;
	font-size: 11px;
	color: #999999;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.presenceTextRegister {
	margin-left: 0px;
	margin-top: -4px;
	font-size: 11px;
	color: #999999;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.presenceTextBuddy {
	margin-left: 20px;
	margin-top: -5px;
	font-size: 12px;
	color: #999999;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.presenceVersion {
	margin-left: 0px;
	margin-top: 11px;
	font-size: 11px;
	color: #999999;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.searchClean {
	border: 1px solid #404040;
	border-radius: 5px;
	padding: 1px;
	padding-left: 5px;
	background-color: #222222;
	box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25);
	height: 26px;
	box-sizing: border-box;
	display: inline-block;
}

.searchClean:before {
	content: "\f002";
	font-family: FontAwesome;
	color: #393f47;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}

.searchClean INPUT {
	border: none;
	margin-left: 5px;
	outline: none;
	background-color: transparent;
}

.searchClean INPUT:focus {
	border: none;
}

.answerCall {
	text-align: center;
	padding: 25px;
	margin-top: 10px;
}

.dialCall {
	text-align: center;
	padding: 25px;
	margin-top: 10px;
}

.progressCall {
	text-align: center;
	padding: 25px;
	margin-top: 10px;
}

.videoCall {
	margin-top: 10px;
}

.stream {
	display: none;
}

.streamSelected {
	height: 100%;
	width: 100%;

}

.streamSection {
	padding: 5px;
	background-color: #292929;
	border-radius: 5px;
	border: 1px solid #404040;
	vertical-align: top;
	position: relative;
}

.streamSectionBackground {
	background-size: 250px; /* normalise retinal scaling */
	background-position-x: center;
	background-position-y: bottom;
	box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
	background-image: none !important;
}

.chatHistory {
	display: none;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	user-select: none;

	/* For Firefox */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 1;
	padding: 5px;
	box-sizing: border-box;
}

.roundButtons {
	border-radius: 100px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border: 1px solid #404040;
	background-color: transparent;
	padding: 0px;
	font-size: 14px;
	box-shadow: none;
	color: #dcdcdc;
	min-width: 0px;
	top: -5px;
	position: relative;
}

.roundButtons:hover {
	border: 1px solid #404040;
	background-color: #333333;
}

.roundButtons:active {
	border: 1px solid #404040;
	background-color: #222222;
	color: #FFFFFF;
}

.toolBarButtons {
	border-radius: 5px;
	cursor: pointer;
	width: 26px;
	height: 26px;
	border: 1px solid #CCCCCC;
	background-color: #ececec;
	padding: 0px;
	font-size: 14px;
	box-shadow: none;
	color: #333333;
	min-width: 0px;
	vertical-align: middle;
}

.toolBarButtons:hover {
	border: 1px solid #CCCCCC;
	background-color: #CCCCCC;
}

.toolBarButtons:active {
	border: 1px solid #666666;
	background-color: #666666;
	color: #FFFFFF;
}

.meterContainer {
	display: inline-block;
	width: 6px;
	height: 38px;
	border: 1px solid #CCCCCC;
	background-color: #ececec;
	padding: 0px;
	vertical-align: middle;
	position: relative;
	border-radius: 3px;
	margin-bottom: 15px;
	margin-right: 20px;
}

.meterLevel {
	background-color: #19ad19;
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	border-radius: 2px;
}

.sendImagePreview {
	padding-top: 2px;
	padding-bottom: 8px;
	border-bottom: 1px solid #404040;
	font-family: Roboto, Arial, Helvetica;
	font-size: 14px;
	color: #272f39;
	outline: none;
}


.sendMessagePreview {
	padding-top: 2px;
	padding-bottom: 2px;
	border-bottom: 1px solid #404040;
	font-family: Roboto, Arial, Helvetica;
	font-size: 14px;
	color: #272f39;
	margin-bottom: 5px;
}

.sendMessagePreviewLeft {
	margin-right: 30px;
}

.sendMessagePreviewHtml {
	background-color: rgba(215, 232, 247, 0.8);
	padding: 5px;
	box-sizing: border-box;
	border-radius: 5px;
	display: inline-block;
	text-align: left;

	max-height: 300px;
	max-width: 85%;
	overflow-y: auto;
	overflow-x: hidden;
}

.previewImage {
	cursor: pointer;
	max-width: 320px;
	border-radius: 5px;
	border: 1px solid #929292;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}

.previewHyperlink {
	color: blue;
}

.sendMessagePreviewContainer {
	width: 100%;
}

.sendMessagePreviewContainer TD {
	vertical-align: middle;
	text-align: center;
}

.sendMessageContainer {
	width: 100%;
	height: 80px;
}

.sendMessageContainer TD {
	vertical-align: top;
	text-align: center;
}

.chatMessage {
	box-sizing: border-box;
	padding: 2px;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	resize: none;
	font-family: Roboto, Arial, Helvetica;
	font-size: 14px;
	color: #cccccc;
	background-color: transparent;
}

.buddyIconSmall {
	display: block;
	border-radius: 50px;
	width: 18px;
	height: 18px;
	background-size: 18px;
	background-color: #CCCCCC;
	border: 1px solid #FFFFFF;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.theirChatMessage {
	padding-left: 5px;
	margin-top: 5px;
	margin-right: auto;
	max-width: 85%;
}

.theirChatMessage TD {
	vertical-align: top;
	text-align: left;
}

.theirChatMessage AUDIO {
	width: 100%;
	height: 30px;
	outline: none;

	border-radius: 5px;
	background-color: #f2f3f4;
	color: #333333;
}

.theirChatMessage VIDEO {
	max-width: 640px;
	width: 100%;
	outline: none;
	/* max-height: 360px; */
	background-color: #000000;
	border-radius: 5px;
}

.theirChatMessageText {
	display: inline-block;
	background-color: rgba(231, 231, 231, 0.8);
	padding: 5px;
	border-radius: 5px;
	font-size: 14px;
	color: #272f39;
	position: relative;
}

.ourChatMessage {
	padding-right: 5px;
	margin-top: 5px;
	margin-left: auto;
	max-width: 85%;
}

.ourChatMessage TD {
	vertical-align: top;
	text-align: left;
}

.ourChatMessage AUDIO {
	width: 100%;
	height: 30px;
	outline: none;

	border-radius: 5px;
	background-color: #f2f3f4;
	color: #333333;
}

.ourChatMessage VIDEO {
	max-width: 640px;
	width: 100%;
	outline: none;
	/* max-height: 360px; */
	background-color: #000000;
	border-radius: 5px;
}

.ourChatMessageText {
	display: inline-block;
	background-color: rgba(215, 232, 247, 0.8);
	padding: 5px;
	border-radius: 5px;
	font-size: 14px;
	color: #272f39;
	position: relative;
}

.messageDate {
	font-size: 11px;
	color: #666666;
}

.messageText {
	user-select: text;
	cursor: text;
}

.chatMessageDropdown {
	cursor: pointer;
	position: absolute;
	right: 5px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50px;
}

.callRecordings {
	font-size: 11px
}

.callRecordings button {
	width: 30px;
	text-align: center;
	height: 30px;
	line-height: 30px;

	float: left;
	margin-right: 10px;

	color: #333333;
	background-color: #CCCCCC;
	border: 1px solid #222222;
	border-radius: 50px;
}

.callRecordings button:hover {
	color: #cccccc;
	background-color: #333333;
	border: 1px solid #222222;
}

.callRecordings img {
	width: 100%;
	max-width: 400px; /* 854x480 (16:9) */
	border-radius: 5px;
	filter: blur(1px);
	transform: scale(1.1);
}

.callRecording {
	background-color: #CCCCCC;
	border-radius: 10px;
	padding: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
}

.callRecording DIV {
	overflow: hidden;
	border-radius: 5px;
}

.videoPoster {
	border-radius: 50px !important;
	margin: 0px !important;
	border: none !important;
	color: #cccccc !important;
	background-color: rgba(0, 0, 0, 0.5) !important;
	width: 50px !important;
	height: 50px !important;
	padding: 0px !important;

	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
}

.videoPoster:hover {
	color: #e0e0e0 !important;
}

.videoPoster I {
	border: 1px solid #cccccc;
	border-radius: 50px;
	width: 48px;
	text-align: center;
	height: 48px;
	line-height: 48px;
	font-size: 24px;
	background-color: rgba(0, 0, 0, 0.5);
}

.previewVideo {
	max-height: 720px;
	max-width: 100%;
	background-color: #666666;
	border: 1px solid #222222;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .25);
	border-radius: 5px;
	transform: rotateY(180deg);
}

.emojiButton BUTTON {
	font-size: 21px;
	padding-left: 0px;
	padding-right: 0px;
	min-width: 30px;
	min-height: 30px;
	line-height: 28px;
	text-align: center;
}


.PreviewContainer {
	text-align: left;
	/* margin-top: 5px; */

	margin-top: 15px;
	position: absolute;
	left: 0px;
	right: 0px;
	z-index: 10;
}

.PreviewContainer VIDEO {
	margin-left: 10px;
	border-radius: 5px;
	background-color: #000000;
	height: auto;
	width: 15%;
}

.PreviewContainer_FS {
	height: calc(10%);
	position: absolute;
}

.PreviewContainer_FS VIDEO {
	height: 100% !important;
	width: auto !important;
}

.StageContainer {
	width: 100%;
	max-height: 360px;
	/* max-height: 508px; */
	background-color: #000000;
	margin-top: 10px;
	text-align: center;
	z-index: 9;
}

.StageContainer VIDEO {
	border-radius: 0px;
	background-color: #000000;

	height: auto;
	max-height: 360px;
	/* max-height: 508px; */
	width: 100%;
	/* max-width: 640px; */
	max-width: 898px;
	object-fit: contain;
}

.StageContainer_FS {
	height: calc(100% - 55px) !important;
	max-height: initial !important;
}

.StageContainer_FS VIDEO {
	height: 100% !important;
	width: 100% !important;
	max-height: 100% !important;
	max-width: 100% !important;

	object-fit: cover;
}

.canvas-container {
	display: inline-block;
}

.callStatus {
	background-color: #333333;
	border-radius: 50px;
	padding: 5px;
	padding-left: 15px;
	text-align: left;
}

.answerButton {
	background-color: #059609;
	border: 1px solid #055d05;
	padding-left: 15px;
	padding-right: 15px;
}

.answerButton:hover {
	background-color: #0aa80f;
	border: 1px solid #055d05;
}

.answerButton:active {
	background-color: #017a05;
}

.hangupButton {
	background-color: #dc0000;
	border: 1px solid #870000;
	padding-left: 15px;
	padding-right: 15px;
}

.hangupButton:hover {
	background-color: #ff1b1b;
	border: 1px solid #870000;
}

.hangupButton:active {
	background-color: #d80000;
}

.dotOnline {
	background-color: #3fbd3f;
	border: 1px solid #148014;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 20px;
	color: #FFFFFF;
	min-width: 0px;
	padding: 0px;
	left: 15px;
	top: 35px;
	z-index: 10;
	font-size: 9px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin: 0px;
}

.dotOffline {
	background-color: #b5b5b5;
	border: 1px solid #808080;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 20px;
	color: #FFFFFF;
	min-width: 0px;
	padding: 0px;
	left: 5px;
	top: 33px;
	z-index: 10;
	font-size: 9px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin: 0px;
}

.dotRinging {
	background-color: #3fbd3f;
	border: 1px solid #148014;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 20px;
	color: #FFFFFF;
	min-width: 0px;
	padding: 0px;
	left: 30px;
	top: 35px;
	z-index: 10;
	font-size: 9px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin: 0px;
}

.dotRinging:before {
	content: "\f2a0";
	font-family: FontAwesome;
	position: absolute;
	left: 2.5px;
	top: 0px;
}

.dotInUse {
	background-color: #3fbd3f;
	border: 1px solid #148014;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 20px;
	color: #FFFFFF;
	min-width: 0px;
	padding: 0px;
	left: 30px;
	top: 35px;
	z-index: 10;
	font-size: 9px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin: 0px;
}

.dotInUse:before {
	content: "\f095";
	font-family: FontAwesome;
	position: absolute;
	left: 2.5px;
	top: 0px;
}

.dotReady {
	background-color: #3fbd3f;
	border: 1px solid #148014;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 20px;
	color: #FFFFFF;
	min-width: 0px;
	padding: 0px;
	left: 30px;
	top: 35px;
	z-index: 10;
	font-size: 9px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin: 0px;
}

.dotOnHold {
	background-color: #3fbd3f;
	border: 1px solid #148014;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 20px;
	color: #FFFFFF;
	min-width: 0px;
	padding: 0px;
	left: 30px;
	top: 35px;
	z-index: 10;
	font-size: 9px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin: 0px;
}

.dotOnHold:before {
	content: "\f095";
	font-family: FontAwesome;
	position: absolute;
	left: 2.5px;
	top: 0px;
	color: #CCCCCC;
}

.dotFailed {
	background-color: red;
	border: 1px solid darkred;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 20px;
	color: #FFFFFF;
	min-width: 0px;
	padding: 0px;
	left: 30px;
	top: 35px;
	z-index: 10;
	font-size: 9px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin: 0px;
}

.missedNotifyer {
	background-color: #ff0000;
	border: 1px solid #640000;
	position: absolute;
	width: 18px;
	height: 18px;
	line-height: 18px;
	font-weight: bold;
	border-radius: 20px;
	color: #FFFFFF;
	min-width: 0px;
	padding: 0px;
	right: 2px;
	top: 5px;
	font-size: 12px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin: 0px;
	text-align: center;
}

.quickDial {
	border-radius: 50%;
	cursor: pointer;
	width: 25px;
	height: 25px;
	line-height: 22px;
	text-align: center;
	border: 1px solid #404040;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	background-color: #2a2a2a;
	padding: 0px;
	font-size: 12px;
	color: #dcdcdc;
	min-width: 0px;

	position: absolute;
	bottom: 5px;
}

.startDragDrop {
	outline: 2px dashed #184369;
}

.progressBarContainer {
	border: 1px solid #787878;
	width: 250px;
	height: 10px;
	background-color: #fafafa;
	box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	margin-top: 5px;
	overflow: hidden;
}

.progressBarTrack {
	background-color: #19cc19;
	width: 0%;
	height: 10px;
	box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.5);
}

.audioStats {
	padding: 10px;
	overflow: auto;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	box-sizing: border-box;
	height: 100%;
	background-color: #222222;
	z-index: 99999999;
}

.audioStatsSet {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

.audioGraph {
	background-color: #FFFFFF;
	border-radius: 5px;
	margin-top: 10px;

	margin-left: auto;
	margin-right: auto;
}

.buddyProfilePic {
	display: block;
	width: 150px;
	height: 150px;
	border: 10px solid #FFFFFF;
	border-radius: 200px;
	margin-left: auto;
	margin-right: auto;
	background-size: cover;
	background-position: center;
	margin-top: 10px;
	background-color: #F3F3F3;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.ProfileTextLarge {
	font-size: 22px;
	color: #4c4c4c;
	line-height: 22px;
}

.ProfileTextMedium {
	font-size: 14px;
	color: #4c4c4c;
	line-height: 16px;
}

.ProfileTextSmall {
	font-size: 11px;
	color: #4c4c4c;
	line-height: 12px;
}

.ConferenceParticipant {
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	border-radius: 100px;
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 240px;
	padding: 10px;
	box-sizing: content-box;
	vertical-align: top;
	height: 37px;
	font-size: 14px;
	color: #4c4c4c;
	cursor: pointer;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
}

.ConferenceParticipant .Talking {
	border: 3px solid green;
	border-radius: 50px;
	width: 32px;
	height: 32px;
	background-size: 32px;
	background-color: #CCCCCC;
	box-shadow: 1px 1px 5px rgba(0, 255, 0, 0.25);
	float: left;
	margin-right: 10px;
}

.ConferenceParticipant .NotTalking {
	border: 3px solid white;
	border-radius: 50px;
	width: 32px;
	height: 32px;
	background-size: 32px;
	background-color: #CCCCCC;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
	float: left;
	margin-right: 10px;
}

.FlagCall {
	color: orange;
	font-size: 18px;
	vertical-align: text-top;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.SendingMessage {
	font-size: 13px;
}

.SentMessage {
	color: #0099c7;
	font-size: 13px;
}

.FailedMessage {
	color: red;
	font-size: 13px;
}

.DeliveredMessage {
	color: #0099c7;
	font-size: 13px;
}

/* Tags */
.tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}

.tags li {
	user-select: none;
	float: left;
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 0px;
	margin-right: 2px;
	color: #333333;
	border: 1px solid #888888;
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	padding: 0px;
	padding-left: 2px;
	padding-right: 5px;
	line-height: 18px;
	font-size: 12px;
	cursor: pointer;
}

.tags li:hover::before {
	content: "\f1f8";
}

.tags li::before {
	content: "\f02b";
	font-family: FontAwesome;
	width: 16px;
	display: inline-block;
	line-height: 16px;
	height: 16px;
	vertical-align: middle;
	text-align: center;
}

.tags input[type=text] {
	font-size: 12px;
	padding: 0px;
	margin: 0px;
	line-height: initial;
	color: #333333;
	border: none;
	width: 60px;
}

.tags .tagText:hover::before {
	content: "\f067";
}

.tags .tagText::before {
	content: "\f067";
}

.cdrTag {
	margin-right: 10px;
}

.cdrTag::before {
	content: "\f02b";
	font-family: FontAwesome;
	width: 16px;
	display: inline-block;
	line-height: 16px;
	height: 16px;
	vertical-align: middle;
	text-align: center;
}

.messageReadMore {
	text-align: left;
	font-size: 12px;
}

.messageReadMore span {
	text-decoration: underline;
	color: #0061c7;
}

.cdrComment {
	font-size: 12px !important;
	color: #444444 !important;
	line-height: initial !important;
	text-align: left;
}

.cdrComment input[type=text] {
	font-size: 12px !important;
	color: #444444 !important;
	background-color: #FFFFFF;
	border: none !important;
	line-height: initial !important;
	box-sizing: border-box;
	width: 100%;
	border-radius: 3px;
	padding: 3px;
}

.inCallButtons {
	width: 45px !important;
	height: 45px !important;
	font-size: 20px !important;
	margin-left: 2px !important;
	margin-right: 2px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.dialTextInput {
	font-size: 16px;
	text-align: center;
	border-radius: 10px;
	border: none;
	background-color: transparent;
	outline-color: #cbe4ff;
}

.dialButtons {
	font-size: 24px;
	border: none;
	color: #333333;
}

.dialButtons:hover {
	color: #f3f3f3;
	background-color: #333333;
}

.dialButtons:disabled {
	color: #666666;
}

.dialButtons:disabled:hover {
	color: #666666;
	background-color: transparent;
	border: none;
}

.timelineMessage {
	margin-left: 20%;
	color: #F3F3F3;
	border-left: 3px solid #3c5e82;
}

.timelineMessageDot {
	position: relative;
	left: -6.5px;
	color: #3c5e82;
}

.timelineMessageArea {
	color: #F3F3F3;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
}

.timelineMessageDate {
	color: #d0d0d0;
	font-size: 12px;
}

.timelineMessageText {
	color: #bdbdbd;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	margin-left: 10px;
}

.userData {
	width: 100%;
	height: 100%;
	z-index: 10;
	position: relative;
	background-color: #404040;
}

#userKeep {
	padding: 7px;
	font-size: 14px;
}

#userKeep table td.title {
	width: 65px;
}

#userKeep table td {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#setPause, #btn-Settings {
	margin-left: 3px;
}

#BtnFreeDial, #BtnHistory, #BtnTabulation, #BtnExternal, #BtnUserStatus {
	float: right;
}

.text-primary {
	color: #0d6efd !important;
}

.text-warning {
	color: #ffc107 !important;
}

.text-info {
	color: #0dcaf0 !important;
}

.text-success {
	color: #20c997 !important;
}

.text-danger {
	color: #dc3545 !important;
}

.contentsScroll {
	height: 100%;
	overflow-y: auto;
}

#callList {
}

#callList .date {
	width: 220px;
}

#callList td, #callList th {
	color: #404040;
	text-align: center;
}

#logoutUser {
	top: 5px;
	right: 5px;
	position: absolute;
}

#refreshSession {
	top: 5px;
	right: 40px;
	position: absolute;
}

#keepStatus {
	top: 8px;
	/* right: 80px; */
	width: 12px;
	margin: 3px;
	height: 12px;
	color: #404040;
	position: absolute;
	border-radius: 50%;
	background: rgb(211, 211, 211);
}

#keepStatus:before {
	content: 'K';
	font-size: 7px;
	color: #fff;
	position: relative;
	top: -8px;
	margin: 4px;
}

#keepStatus.alive {
	color: white;
	background: #20c997;
}

#spinnerContainer {
  color: #cccccc;
  position: absolute;
  top: 30px;
  right: 9px;
  display: flex;
  gap: 7px; /* espaço entre spinners */
  align-items: center;
  font-size: 13px;
}

.keepStatusSpinnerBuddySocket,
.keepStatusSpinnerBuddyRecord,
.keepStatusSpinnerBuddyOnline,
.keepStatusSpinnerBuddySIP {
  color: #cccccc;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.buddy-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 7px;
}

.buddy-keeps {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  text-align: left;
  gap: 7px;
}

select#setPause, select#setTranfer {
	color: white;
	margin: 7px 0;
	font-size: 14px;
	border-bottom: 2px solid #999999;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwUlEQVR4nO3QxxEDMRADwQsdmVMf6aErGdoFzXQEwFwXAAAAAAAAgKOllJT2pZMj5J3fNELZ+c0i1J3fJELb+cUj9Dm/aIS+5xeLMOb8IhHGnp88Qsz5SSPEnp8sguf8JBG8519MEeT+/SY4gtx/PwqKIPfPnwZHkPtflkER5P5VpHMEuf9U6RRB7h9NGiPIvb+Lyghy7+6qMILce4fIjCD3zqH+RJB7X4gvEeTeFeoWQe49Fs8Icu8AAAAAAABneQB46Yg9OiAULwAAAABJRU5ErkJggg==');
	padding-right: 20px;
	padding-left: 5px;
}

select#setPause option, select#setTranfer option {
	color: black;
}

select#setPause {
	margin-right: 10px;
}

.dhx_cell_cont_wins > p.message {
	color: #404040;
	margin: 7px 15px;
}

#errorLogin, #errorLoged {
	margin-top: 10px;
	text-align: center;
}

.hide {
	display: none;
}

.UiWindowButtonBar button:disabled {
	opacity: .6;
}

.dhx_cell_cont_wins .message {
	text-align: center;
}

.callingSession {
	height: 320px;
}

#regStatus {
	position: absolute;
}

#volumeRange {
	top: 30px;
	right: 15px;
	text-align: right;
	position: absolute;
}

#volumeRange i {
	margin: 0 5px 0 10px;
}

#volumeRange input[type="range"] {
	top: -4px;
	height: 2px;
	width: 35%;
	outline: none;
	opacity: 0.7;
	position: relative;
	background-color: #939393;
	-webkit-appearance: none;
}

#volumeRange input[type="range"]:hover {
	opacity: 1;
}

#volumeRange input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #d3d3d3;
	cursor: pointer;
}

#volumeRange input[type="range"]::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #d3d3d3;
	cursor: pointer;
}

#volumeRange input[type="range"]:hover::-moz-range-thumb,
#volumeRange input[type="range"]:focus::-moz-range-thumb {
	background: white;
}

#volumeRange input[type="range"]::-moz-range-progress {
	background: white;
}

#userStatusTimeStream {
	float: right;
	padding: .5rem;
}

#userServiceStream {
	float: right;
	white-space: nowrap;
	padding: .5rem;
}

div#userStatusTimeStream::before {
	content: "Tempo: ";
	font-weight: bold;
}

.searchButton {
	margin-bottom: 10px;
}

input {
	border: solid thin #ced4da;
}

.searchButton span {
	width: 25px;
	height: 25px;
	line-height: 25px;
	position: relative;
	text-align: center;
	display: inline-block;
	border-color: #ced4da;
	background-color: #e9ecef;
}

.searchButton #filterTable {
	width: calc(100% - 27px);
}

#extensionListTableHeader, #extensionListTable {
	width: 100%;
}

#extensionListTable tr.selected {
	color: white;
	background-color: #007bff !important;
}

#scrollTable {
	height: 140px;
	overflow-y: auto;
}

#warnTransfer.active {
	width: 100vw;
	height: 100vh;
	position: absolute;
	animation: borderGrow 2s linear infinite;
	pointer-events: none;
	z-index: 9999;

	box-shadow: 0 1px 30px -20px #dc3545 inset;
	-webkit-box-shadow: 0 1px 30px -20px #dc3545 inset;
	-moz-box-shadow: 0 1px 30px -20px #dc3545 inset;
}

#warnTransfer .alert-danger {
	position: absolute;
	bottom: 100px;
	width: calc(100% - 160px);
	text-align: center;
	margin: 0 80px;
	padding: 7px;
	background-color: #dc3545;
	color: white;
}

@keyframes borderGrow {
	0% {
		box-shadow: 0 1px 30px -20px #dc3545 inset;
		-webkit-box-shadow: 0 1px 30px -20px #dc3545 inset;
		-moz-box-shadow: 0 1px 30px -20px #dc3545 inset;
	}
	33% {
		box-shadow: 0 1px 30px 2px #dc3545 inset;
		-webkit-box-shadow: 0 1px 30px 2px #dc3545 inset;
		-moz-box-shadow: 0 1px 30px 2px #dc3545 inset;
	}
	100% {
		box-shadow: 0 1px 30px -20px #dc3545 inset;
		-webkit-box-shadow: 0 1px 30px -20px #dc3545 inset;
		-moz-box-shadow: 0 1px 30px -20px #dc3545 inset;
	}
}