@import url('../fonts/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500');

body { margin: 0px; background: #f1f3f6; }
*:not(input,textarea) { /*-webkit-touch-callout: none; -webkit-user-select: none;*/ outline: none; }
* { font-family: 'Ubuntu', sans-serif; font-weight: 400; box-sizing: border-box; font-style: normal; }

.jqstooltip { padding: 5px !important; width: auto !important; height: auto !important; }
#scanbot-container { position: relative; width: 100%; display:none; z-index: 10000; }
#close-button { position: absolute; top: 1vh; left: 95%; font-size: 22px; }
#page_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: #fff; z-index: 9999; text-align: center; display: table; }
#page_overlay div { display: table-cell; vertical-align: middle; width: 25px; height: 25px; }

#login_page { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: #f1f3f6; text-align: center; display: table; }
#login_page .login_div { display: table-cell; vertical-align: middle; text-align: center; }
#login_page .login_form { display: inline-block; width: 360px; max-width: 95%; background: #33383e; }
#login_page .login_decoration { width: 17px; height: 52px; background: #ec0249; margin-top: 20px; }
#login_page .login_title { color: #fff; background: #2c3136; width: calc(100% - 17px); height: 52px; margin-top: 20px; text-align: left; padding: 7px 10px 0px 10px; font-size: 36px; font-weight: 500; letter-spacing: -1px; text-shadow: 1px 1px #383838; }
#login_page center { margin: 20px 17px 30px 17px; }
#login_page .login_warning { display: none; color: #ec0249; }
#login_page .username { display: block; width: 100%; font-size: 16px; padding: 15px; outline: none; margin-top: 20px; background: #2c3136; border: 1px solid #333833; color: #a6a6a6; }
#login_page .password { display: block; width: 100%; font-size: 16px; padding: 15px; outline: none; margin-top: 10px; background: #2c3136; border: 1px solid #333833; color: #a6a6a6; }
#login_page .security { width: 100%; margin-top: 10px; }
#login_page .security img { display: block; width: calc(50% - 5px); height: 50px; border: 1px solid #333833; }
#login_page .security_code { display: block; width: 50%; font-size: 16px; padding: 15px; outline: none; background: #2c3136; border: 1px solid #333833; color: #a6a6a6; }
#login_page .input-icon { float: right; font-size: 28px; margin-right: 8px; margin-top: -39px; position: relative; z-index: 2; color: rgba(255,255,255,0.1); }
#login_page .login_button { display: block; width: 100%; margin-top: 10px; min-height: 45px; }
#login_page .continue_button { width: 100%; margin-top: 10px; min-height: 45px; }
#login_page .login_loading { display: none; margin-top: 19px; }

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.c-green { color: green; }
.c-red { color: red; }
.c-blue { color: blue; }
.c-gray { color: gray; }
.c-purple { color: purple; }
.c-yellow { color: yellow; }
.c-pink { color: pink; }
.c-brown { color: brown; }
.c-black { color: black; }
.c-dark { color: #383838; }

.c-active, .c-plus { color: green !important; }
.c-passive, .c-minus { color: red !important; }

.c-success { color: green !important; }
.c-cancelled { color: red !important; }
.c-waiting { color: blue !important; }
.c-answered { color: green !important; }

.c-open { color: green !important; }
.c-closed { color: red !important; }

.left { float: left; }
.right { float: right; }

.left_align { text-align: left !important; }
.right_align { text-align: right !important; }

.clear { clear: both; height: 0px; }
.bold { font-weight: 500 !important; }
.pointer { cursor: pointer; color:blue }
.pointerz { cursor: pointer; color:black }
.hidden { display: none; }
.invisible { visibility: hidden; }

.full_absolute { position: absolute; left: 0px; top: 0px; width: 100%; min-height: 100%; display: flex; }
.rear_menu { float: left; border-right: 1px solid rgba(236,2,73,0.8); position: relative; left: 0px; width: 250px; min-height: 100%; background: #2c3136; align-items: stretch; }
.main_container { float: left; width: calc(100% - 250px); min-height: 100%; position: relative; left: 0px; }
.main_header { width: 100%; height: 50px; background: #fff; border-bottom: 1px solid #ddd; }
.main_content { margin: 15px 15px 0px 15px; white-space: nowrap; overflow-x: hidden; }
.main_content .xw { border: 1px solid #ddd; background: #fff; }

.m15 { margin: 15px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.ml5 { margin-left: 5px; }
.ml15 { margin-left: 15px; }
.mr15 { margin-right: 15px; }
.mb15 { margin-bottom: 15px; }

.p10 { padding: 10px; }
.p15 { padding: 15px; }
.pt15 { padding-top: 15px; }
.pl15 { padding-left: 15px; }
.pr15 { padding-right: 15px; }
.pb15 { padding-bottom: 15px; }

.rear_menu_overlay { display: none; position: absolute; left: 0px; top: 50px; width: 100%; min-height: 100%; margin-bottom: 0px; align-items: stretch; }
.rear_menu_overlay_click { position: absolute; left: 250px; top: 0px; width: calc(100% - 250px); min-height: 100%; margin-bottom: 0px; align-items: stretch; }

.main_header .menu_toggle { float: left; border-right: 1px solid #ddd; font-size: 24px !important; text-align: center; height: 100%; width: 50px; color: #ddd; padding-top: 11px; cursor: pointer; }
.main_header .menu_title { float: left; width: calc(100% - 200px); padding-left: 12px; padding-top: 13px; color: #383838; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /*text-shadow: 1px 1px #ccc;*/ }
.main_header .menu_icon { float: right; border-left: 1px solid #ddd; font-size: 24px !important; text-align: center; height: 100%; width: 50px; color: #bbb; padding-top: 11px; cursor: pointer; }
.main_header .menu_icon .badge_container { position: relative; width: 0px; height: 0px; top: -35px; left: 32px; }
.main_header .menu_icon .icon_badge { visibility: hidden; display: inline-block; font-family: tahoma; font-size: 11px; padding: 3px; min-height: 18px; min-width: 18px; border-radius: 9px; text-align: center; background: #ec0249; color: #fff; -webkit-transform: translateX(-50%); }
.main_header .menu_icon .notification_text{color:red;font-size:15px;margin-left:20px;margin-top:-15px}
.main_header .menu_toggle:hover, .main_header .menu_icon:hover { color: #383838; }
.main_header .menu_toggle:active, .main_header .menu_icon:active { color: #ec0249; }

.rear_menu .profile_photo { cursor: pointer; width: 60px; height: 60px; border-radius: 30px; margin-top: 45px; padding: 5px; border: 2px solid rgba(255, 255, 255, 0.1); }
.rear_menu .profile_name { padding-top: 10px; font-weight: 600 !important; color: #ec0249; font-size: 15px; margin-top: 5px; }
.rear_menu .profile_time { color: #fff; font-size: 12px; font-weight: 300; padding-top: 5px; padding-bottom: 30px; border-bottom: 1px solid #383838; }

.main_navigation { list-style-type: none; padding: 0px; margin-top: 0px; }
.main_navigation li { border-left: 4px solid #222; width: 100%; padding: 12px; color: #a6a6a6; font-size: 14px; font-weight: 300; background: #33383e; }
.main_navigation .is-hover { background: #000 !important; color: #fff !important; }
.main_navigation li i:after { content: "\00a0\00a0"; }
.main_navigation li i { font-size: 16px; min-width: 19px; }
.main_navigation li span { cursor: pointer; display: block; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 70px); }
.main_navigation .selected { background: #33383e; border-left: 4px solid #ec0249 !important; color: #fff !important; } 
.main_navigation .submenu { display: none; font-size: 14px; font-weight: 300; background: #1c1f22; width: 100%; border-top: 1px solid rgba(230,240,200,0.2); }
.main_navigation .submenu .div { margin-left: 25px; border-left: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; }
.main_navigation .submenu .line { float: left; width: 10px; height: 20px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); }
.main_navigation .submenu a { float: left; display: block; margin-left: 10px; margin-top: 10px; text-decoration: none; color: #a6a6a6; font-weight: 300; }
.main_navigation .submenu a:hover { color: #fff; }
.main_navigation .submenu .submenu-selected { color: #fff; }
.main_navigation .badge { visibility: hidden; cursor: pointer; float: right; margin-right: 8px; font-family: tahoma; font-size: 11px; padding: 3px; min-height: 18px; min-width: 18px; border-radius: 9px; text-align: center; background: #c17e18; color: #fff; }
.main_navigation .badge_red { background: #ec0249 !important; }


.disable_page { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 99999; }
.transparent_screen { opacity: 0.25; filter: alpha(opacity=25); pointer-events: none; }

.chat_container { z-index: 700; display: none; position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,0.6); }
.chat_container .chat_overlay { left: 0px; top: 0px; position: fixed; height: 100%; width: calc(100% - 300px); }
.chat_container .chat_main { position: fixed; height: 100%; width: 300px; top: 0px; right: -300px; border-left: 1px solid #ddd; background: #fff; }
.chat_container .chat_header { width: 100%; height: 50px; background: #2c3136; }
.chat_container .chat_icon { float: left; width: 50px; height: 50px; border-right: 1px solid #989696; font-size: 24px !important; text-align: center; color: #989696; padding-top: 11px; cursor: pointer; }
.chat_container .chat_icon:hover { color: #fff; }
.chat_container .chat_icon:active { color: #ec0249; }
.chat_container .chat_title { width: calc(100% - 50px); float: left; color: #989696; padding-left: 12px; padding-top: 13px; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat_container .chat_messages { width: 100%; height: calc(100% - 50px); overflow: auto; }
.chat_container .chat_details { width: 100%; height: calc(100% - 50px); overflow: auto; }
.chat_container .chat_image { width: 50px; height: 60px; padding: 10px 5px; }
.chat_container .chat_image img { width: 40px; height: 40px; border-radius: 20px; }
.chat_container .chat_user { cursor: pointer; width: calc(100% - 50px); height: 60px; padding: 10px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #ddd; line-height: 130%; color: #808080; }
.chat_container .chat_user:hover { background: #ddd; }
.chat_container .chat_online { color: green; font-size: 12px; }
.chat_container .chat_offline { color: red; font-size: 12px; }
.chat_container .chat_user_name { color: #383838; }
.chat_container .chat_user_message { font-size: 12px; color: #808080; }
.chat_container .unread_message { font-weight: 500; color: #000; }

.chat_container .chat_message_content { overflow: auto; width: 100%; height: calc(100% - 50px); }
.chat_container .chat_message_content a { font-weight: 500; color: #383838; }
.chat_container .chat_message_content a:hover { text-decoration: none; color: #ec0249; }
.chat_container .chat_message_in { text-align: left; width: calc(100% - 60px); word-wrap: break-word; margin: 5px; font-size: 14px; padding: 15px 15px 0px 15px; min-height: 30px; border-radius: 3px; background: #e6e6e6; }
.chat_container .chat_message_in span { text-align: left; display: block; padding: 5px 0px 10px 0px; font-size: 10px; color: #555; border-top: 1px solid #ddd; margin-top: 5px; }
.chat_container .chat_message_out { text-align: right; width: calc(100% - 60px); word-wrap: break-word; margin: 5px; font-size: 14px; padding: 15px 15px 0px 15px; min-height: 30px; border-radius: 3px; background: #ecffd5; }
.chat_container .chat_message_out span { text-align: right; display: block; padding: 5px 0px 10px 0px; font-size: 10px; color: #555; border-top: 1px solid #ddd; margin-top: 5px; }
.chat_container .chat_send_panel { background: #f1f3f6; border-top: 1px solid #ddd; height: 50px; }
.chat_container .chat_send_panel input { width: 240px; height: 30px; font-size: 14px; margin: 10px; outline: none; }
.chat_container .chat_send_panel img { width: 24px; height: 24px; margin-top: 12px; }
.chat_container .chat_send_panel form { padding: 0px; margin: 0px; }
.chat_container .chat_send { cursor: pointer; color: #2c3136; font-size: 22px; margin-top: 14px; margin-left: 2px; }
.chat_container .chat_send:hover { color: #989696; }
.chat_container .chat_send:active { color: #ec0249; }
.chat_container .chat_holder { width: 100%; height: 100%; }

.panel_container { z-index: 600; display: none; position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,0.6); }
.panel_container .panel_overlay { left: 0px; top: 0px; position: fixed; height: 100%; width: calc(100% - 300px); }
.panel_container .panel_main { position: fixed; height: 100%; max-width: 100%; width: 300px; top: 0px; right: -300px; border-left: 1px solid #ddd; background: #fff; }
.panel_container .panel_header { width: 100%; height: 50px; background: #2c3136; }
.panel_container .panel_icon { float: left; width: 50px; height: 50px; border-right: 1px solid #989696; font-size: 24px !important; text-align: center; color: #989696; padding-top: 11px; cursor: pointer; }
.panel_container .panel_icon:hover { color: #fff; }
.panel_container .panel_icon:active { color: #ec0249; }
.panel_container .panel_title { width: calc(100% - 50px); float: left; color: #989696; padding-left: 12px; padding-top: 13px; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel_container .panel_content { width: 100%; height: calc(100% - 50px); overflow: auto; }

.form_container { padding: 10px; height: 100%; overflow: auto; margin-right: 1px; font-size: 14px; }
.form_container .field { margin-bottom: 10px; }
.form_container .field_name { font-size: 12px; color: #555; font-style: italic; }
.form_container .field_name i { color: #999; }
.form_container .field_holder { width: 100%; padding: 3px; margin-top: 3px; }
.form_container .field_holder div { margin-right: 10px; }
.form_container .input { display: block; width: 100%; padding: 3px; font-size: 14px; margin-top: 3px; height: 26px; border: 1px solid #ddd; border-radius: 3px; }
.form_container .text { display: block; width: 100%; padding: 3px; font-size: 14px; margin-top: 3px; height: 60px; border: 1px solid #ddd; border-radius: 3px; }
.form_container .buttons { margin-top: 10px; margin-bottom: 25px; }
.form_container .more_filter { display: none; }
.form_container form { margin: 0px; padding: 0px; }
.form_container label { font-size: 12px; }

/*.fixed_table { table-layout: fixed; }*/
.fixed_table td, .fixed_table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data_table { width: 100%; font-size: 13px; border-collapse: collapse; border: 2px solid #fff !important; }
.data_table thead td { font-weight: 300; text-align: left; padding: 8px 6px 8px 6px; background: #8c3e3e; color: #fff; border: 1px solid #fff; }
.data_table thead th { font-weight: 500; text-align: left; padding: 8px 6px 8px 6px; background: #8c3e3e; color: #fff; border: 1px solid #fff; }
.data_table tbody td { text-align: left; font-weight: 300; padding: 8px 4px 8px 4px; border: 1px solid #fff; }
.data_table tbody th { height:46px;text-align: left;vertical-align: middle; font-weight: 200; padding: 8px 4px 8px 4px; border: 1px solid #fff; }
.data_table tbody tr:nth-child(odd) td, .data_table tbody tr:nth-child(odd) th { background:#f0f0f0; }
.data_table tbody tr:nth-child(even) td, .data_table tbody tr:nth-child(even) th { background:#fff; }
.data_table tbody tr:hover td, .data_table tbody tr:hover th { background: rgba(70,130,180,0.2); }
.data_table tfoot td { font-weight: 300; text-align: left; border-top: 3px solid #aaa; padding: 8px 4px 8px 4px; }
.data_table tfoot th { font-weight: 500; text-align: left; border-top: 3px solid #aaa; padding: 8px 4px 8px 4px; }
.data_table thead a { color: #fff; text-decoration: none; }
.data_table thead a:hover { text-decoration: underline; }
.data_table tbody a { font-weight: 300; color: #000; text-decoration: none; }
.data_table tbody a:hover { text-decoration: underline; }
.data_table .center { text-align: center !important; }
.data_table .long { word-break: break-all !important; white-space: pre-wrap !important; }
.data_table_footer { width: 100%; font-size: 13px; font-weight: 500; text-align: left; border-top: 1px solid #aaa; padding: 8px 4px 8px 4px; }
.data_table_footer .summary { line-height: 140%; margin-top: 10px; color: #999; }
.data_table_footer .summary span { color: #666; }

.data_table .selected-row th, .data_table .selected-row td, .data_table .selected-row a { background: #383838 !important; color: #fff !important; }
.data_table .detailed-row th, .data_table .detailed-row td { background: #e8f5e1 !important; }
.data_table .activated-row th, .data_table .activated-row td { background: #CBF3BF !important; }

.data_table .user-suspended td, .data_table .user-suspended td a { text-decoration: line-through red !important; }
.data_table .user-waiting td, .data_table .user-waiting td a { color: #808080 !important; }
.data_table .data-bold td, .data_table .data-bold td a { font-weight: 500 !important; }

.data_table .unpaid td, .data_table .unpaid td a { color: red !important; font-weight: 500; }
.data_table .details-box { border: 1px solid #ddd; background: #fff; width: 100%; padding: 15px; line-height: 170%; }

.ticket_container .customer .profile { float: left; text-align: center; width: 100px; padding: 0px 5px 0px 5px; font-size: 14px; line-height: 150%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket_container .customer .ticket { float: left; text-aling: left; max-width: calc(80% - 100px); }
.ticket_container .customer .message { float: left; text-aling: left; max-width: 100%; padding: 10px; background: #e6e6e6; color: #000; line-height: 150%; border-radius: 5px; height: auto !important; word-break: break-all !important; white-space: normal !important; }
.ticket_container .customer .time { float: left; font-size: 12px; margin-top: 5px; padding: 0px 5px 0px 5px; color: #383838; }
.ticket_container .agent .profile { float: right; text-align: center; width: 100px; padding: 0px 5px 0px 5px; font-size: 14px; line-height: 150%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket_container .agent .ticket { float: right; text-aling: right; max-width: calc(80% - 100px); }
.ticket_container .agent .message { float: right; text-aling: right; max-width: 100%; padding: 10px; background: #9fd8a4; color: #000; line-height: 150%; border-radius: 5px; height: auto !important; word-break: break-all !important; white-space: normal !important; }
.ticket_container .agent .time { float: right; font-size: 12px; margin-top: 5px; padding: 0px 5px 0px 5px; color: #383838; }

.pagination a { float: left; display: block; height: 30px; min-width: 30px; font-weight: 500; background: #efefef; border: 1px solid #ddd; text-align: center; padding-top: 6px; padding: 6px; margin-right: 5px; margin-bottom: 5px; color: #808080; text-decoration: none; }
.pagination a:hover { color: #ec0249; background: #fff; text-decoration: none !important; }
.pagination a:active { color: #000; text-decoration: none !important; }
.pagination .sel { color: #ec0249 !important; background: #efefef !important; text-decoration: none !important; }

.warning { white-space: pre-wrap; padding: 15px; width: 100%; background: #f3f7cf; color: #3a390b; border: 1px solid #3a390b !important; }
.success { white-space: pre-wrap; padding: 15px; width: 100%; background: #d3ffca; color: #0b5d07; border: 1px solid #0b5d07 !important; }
.error { white-space: pre-wrap; padding: 15px; width: 100%; background: #ffc0c0; color: #b30409; border: 1px solid #b30409 !important; }
.warning i::after, .success i::after, .error i::after { content: "\00a0\00a0"; }
.form_container .time_hh,.form_container .time_mm,.form_container .time_ss {width:50px}
.form_container input[type="text"], .form_container input[type="password"], .form_container input[type="file"] { width: 100%; font-size: 14px; height: 22px; }
.form_container select { width: 100%; font-size: 14px; height: 22px; }
.form_container textarea { width: 100%; font-size: 14px }
.form_container .holder { float: left; width: 50%; height: 22px; margin-bottom: 15px; }
.form_container .holder .caption { float: left; width: 30%; text-align: right; font-size: 14px; color: #383838; padding-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form_container .holder .input { float: left; margin-left: 10px; width: calc(70% - 10px); font-size: 14px; color: #383838; }
.form_container .holder .input::after { content: ""; display: block; clear: both; height: 0px; }
.form_container a { text-decoration: none; color: #383838; }
.form_container a:hover { text-decoration: underline; }
.form_container h3 { margin-top: 5px !important; color: #383838; }
.form_container hr { margin-bottom: 25px; border: 0px; height: 1px; background: #ddd; }
@media screen and (min-width: 1001px) {
	#scanbot-container { height: 100vh }
	.ms { display: none; }
	.menu_toggle {display:none}
	.hide_menu {display:inline}
	.dp_extra {display:none}
	.pm_priv{display:none}       
	.dp_all {display:none}
	.tr_project{display:none}
.tr_date{display:none}
  .tr_journal{display:none}
}
@media screen and (max-width: 1000px) {
	#scanbot-container { height: 90vh }
	    .menu_toogle {display:inline}
	   .hide_menu {display:none}
		    .dp_date {display:none}
		  .dp_project {display:none}
		.dp_location {display:none}
		.dp_set {display:none}
		.dp_crew {display:none}
		.dp_cast {display:none}
		.dp_background {display:none}
		.tr_position{display:none}
		.pm_priv{display:none} 
		  .pm_email{display:none}	
	  .pm_oc{display:none}
		.fp_characters{display:none}
		  .tr_journal{display:none}
.tr_project{display:none}
.tr_date{display:none}
.tr_department{display:none}
.tr_note{display:none}
.tr_rate{display:none}
.tr_ndb{display:none}
.tr_no{display:none}
	.ws { display: none; }
	#login_page .login_div { display: inline-block; margin-top: 20px; }
	.rear_menu { position: absolute; left: 0px; width: 100%; top: 50px; z-index: 500; }
	.main_container { width: 100%; }

	.main_content { margin: 8px 8px 0px 8px; }

	.m15 { margin: 8px; }
	.mt15 { margin-top: 8px; }
	.ml15 { margin-left: 8px; }
	.mr15 { margin-right: 8px; }
	.mb15 { margin-bottom: 8px; }

	.p15 { padding: 8px; }
	.pt15 { padding-top: 8px; }
	.pl15 { padding-left: 8px; }
	.pr15 { padding-right: 8px; }
	.pb15 { padding-bottom: 8px; }


	.form_container .holder { width: 100%; }

	/*.fixed_table { table-layout: fixed; }*/
	.long_form_container { overflow-x:auto !important; }

	.ticket_container .customer .ticket { max-width: calc(96% - 100px) !important; }
	.ticket_container .agent .ticket { max-width: calc(96% - 100px) !important; }	

}

.long_form_container { overflow-x:auto !important; }