@CHARSET "windows-1255";
html {
	margin: 0;
	padding: 0;
	height:100%;
	width: 100%;
}

body {
	margin: 0;
	padding: 0;
	height:100%;
	width:100%;
	font-family: Arial, tahoma, Helvetica, sans-serif ;
	line-height: 16px;
	overflow:hidden;
}

img{
	border:0px;
}

input{
	border:0px;	
	width:250px;
	height:100%;
}

.error_input{
	background-color: #FFEBE8;
    border: 1px #DD3C10 solid !important;
}

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

.selectable{
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

.all_site{
	height:100%;
	width:100%;
}

table,tbody,tr,td,th{
	padding:0px;
	margin:0px;
	vertical-align: top;
	font-size: 12px;
	border:0px;
	table-layout:fixed;
	overflow:hidden; 
	white-space: nowrap;
}

table{
	width:100%;	
}

table tr th,table tr td{
	height: 40px;
	font-size: 16px;
	vertical-align: middle;
	padding-left: 10px;
	text-align: left;
	font-weight: normal;
}

table tr:FIRST-CHILD{
	background-color: transparent ;
}


ul{
	-webkit-padding-start:0px;
	padding:0px;
}

a {
	text-decoration: none;
	color: #dae0e0;
}
 a:HOVER{
	text-decoration: none;
	color: black;
}
.blue_link{
	text-decoration: underline;
	color: blue;
}
.blue_link:hover{
	color: rgb(36, 36, 163);
}
	

#message_view_body a {
	text-decoration: none;
	color: #004080;
}
#message_view_body a:HOVER {
	text-decoration: underline;
}

.circle{
    background: var(--notifaction_circle_background);
    width: 27px;
    height: 13px;
    border-radius: 50%;
    padding: 7px 0px;
    margin-top: 7px;
    text-align: center;
	color: var(--notifaction_circle_color);
}

.chosen-containerww{
	max-height:200px;
	overflow:auto;
}

.left_bar{
	float:left;
	width:160px;
	height:100%;
	background-color:var(--main_blue_menu);
	color:white;
}
.left_bar .menu_stadium_name .name{
	text-align:center;
	margin:10px 0px;
	font-size:20px;
	text-transform: capitalize;
	line-height: 22px;
}

.left_bar .logo{
	padding: 10px 0px 0px 5px;
	min-height:50px;
	max-height:145px;
	
}
 
.left_bar .logo img{
	width:150px;
	max-height: 145px;
}

nav ul li.selected .arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid white; 
	float:right;
	position: relative;
	top:18px;
}

/* drafts */
#drafts_messages_list{
	overflow: auto;
}

#drafts_messages_list table thead tr{
    background-color: var(--main_blue_menu);
    color:white;
	font-weight: bold;
}

#drafts_messages_list table thead tr th{
	height:30px;	
}


#drafts_messages_list table tbody tr td{
	background-color: #fff;
	border:0px;
	border-bottom:1px solid #eaeaea;
	text-overflow: ellipsis;
	font-size:16px;	
	height:50px;	
	max-width: 220px;
}

#drafts_messages_list table tbody tr td img{
	padding:10px;	
}

#drafts_messages_list table tbody tr td img.send, .draft_list_icons img.send{
	content:url('/image/icons/send.png');
}
#drafts_messages_list table tbody tr td img.send, .draft_list_icons img.send{
	content:url('/image/icons/send.png');
}

#drafts_messages_list table tbody tr td img.send:hover{
	content:url('/image/icons/send_orange.png');
}

#drafts_messages_list table tbody tr td img.send.disabled, .draft_list_icons img.send.disabled{
	content:url('/image/icons/send_gray.png');
	cursor:default;
}

#drafts_messages_list table tbody tr td img.recall, .draft_list_icons img.recall{
	content:url('/image/icons/recall.png');
}

#drafts_messages_list table tbody tr td img.recall:hover{
	content:url('/image/icons/recall_orange.png');
}

#drafts_messages_list table tbody tr td img.recall.disabled, .draft_list_icons img.recall.disabled{
	content:url('/image/icons/recall_gray.png');
	cursor:default;
}

#drafts_messages_list table tbody tr td img.edit, .draft_list_icons img.edit{
	content:url('../image/icons/edit.png');
}

#drafts_messages_list table tbody tr td img.edit:hover{
	content:url('/image/icons/edit_orange.png');
}

#drafts_messages_list table tbody tr td img.edit.disabled, .draft_list_icons img.edit.disabled{
	content:url('/image/icons/edit_gray.png');
	cursor:default;
}


#drafts_messages_list table tbody tr td img.delete, .draft_list_icons img.delete{
	content:url('/image/icons/delete.png');
}

#drafts_messages_list table tbody tr td img.delete:hover{
	content:url('/image/icons/delete_orange.png');
}

#drafts_messages_list table tbody tr td img.delete.disabled, .draft_list_icons img.delete.disabled{
	content:url('/image/icons/delete_gray.png');
	cursor:default;
}

#drafts_messages_list table tbody tr td img.attachment{
	content:url('/image/icons/paper_clip.png');
}

#drafts_messages_list table tbody tr td img.attachment.disabled{
	content:url('/image/icons/paper_clip_gray.png');
	cursor:default;
}

#drafts_messages_list table tbody tr.draft_sent td{
	color:#868686;
}

.menu_new_message{
	text-transform:capitalize;
	background-color: var(--main_button_background);
	padding: 10px;
	margin:5px 11px;
	color:#fff; 
}

.button{
	background-color:#520066;
	padding: 10px;
	color:#fff;	
	font-size: 14px;
	cursor: hand;
	outline:none !important;
}

input[type=button]{
	outline:none !important;
}

.button_green{
	background-color: #009300;
}
.button_red{
	background-color: red;
}

.table_action_buttons .button{
	height:28px;
	background-color: #12142d;
	color:#fff;	
	font-size: 15px;
	cursor: pointer;
	padding:1px;
}

.button:hover,.menu_new_message:hover,new_message_send_button:hover{
	background-color: #f85922;
	cursor:pointer;
}

nav ul li{
	display: block;
	/* padding: 18px 0px 18px 15px; */
	height:55px;
	text-align: left;
	overflow: hidden;
	border-top:1px solid;
	text-transform: capitalize;
	border-color:  #0d7599;
}

nav ul li:hover{
	cursor:pointer;
	background-color: var(--notifaction_circle_background);
	color: black;
}
nav ul li:hover a{
	color: black;
}

nav ul li.selected a{
	font-weight: bold;
	color:#fff;
}
nav ul li.selected{
	/*padding: 15px 5px 15px 12px;*/
	background-color: var(--menu_selected_background);
}

nav ul li:LAST-CHILD{
	 border-bottom: 1px solid #0d7599;
}

nav ul li a, nav ul li a:HOVER{
	text-decoration: none;
	text-transform: capitalize;
	position: relative;
	top:20px;
	left:15px;
}


nav ul li .messages_counter{
	float:right;
	position:relative;
	top:-10px;
	right:10px;
}

nav ul li.selected .messages_counter{
	top:5px;
	right:5px
}

.pre_post_game_button{
	border-left:1px solid #024861;
	border-right:1px solid #024861;
}

.message_options_a,.questionier_header{
	color:var(--main_content_a_color);
}

.dashboard_inbox .message_options{
	background-color:var(--main_content_border_background) !important;
	
}
.dashboard_inbox .message_options a{
	color: #fff!important;
	font-weight:normal;
	font-size:16px;
}
.dashboard_inbox .message_options a img{
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(305deg) brightness(103%) contrast(103%);
}

.page_headers{
	color:#05618c;
}

.left_help_bar{
	float:left;
	width:160px;
	height:100%;
	background-color:#00618b;
	color:white;
}
.left_help_bar ul li{
	display: block;
	text-align: left;
	overflow: hidden;
	border-bottom:1px solid;
	text-transform: capitalize;
	border-color:  #dae0e0;
	padding: 10px 0px 0px 10px;
	cursor: pointer;
}
.left_help_bar ul li:FIRST-CHILD{
	height:30px;
	border-top:1px solid;
}
.left_help_bar ul li ul li:FIRST-CHILD{
	border:0px;
	height: 20px;
}

.left_help_bar ul li ul li{
	height: 20px;
	padding-left: 20px;
	display: block;
	text-align: left;
	overflow: hidden;
	text-transform: capitalize;
	border:0px;
	font-size:13px;
}

#faq h1{
	margin-left:20px;
	text-decoration: underline;
}


#faq ol dl{
	font-weight: bold;
	text-decoration: underline;
	font-size: 20px;
}

#faq ol li p{
	color: #f85922;
	font-weight: bold;
}

.right_area{
	height:100%;
}

.top_bar{
	height: 40px;
	width: 100%;
	font-size: 14px;
	background-color:#12142d;
	color: #dae0e0;
}

.top_bar .user_settings{
	float:right;
	margin: 11px 25px 10px 5px;
	padding-right:10px;
	/* border-right: 1px solid #dae0e0;  */
	text-transform: capitalize;
}
.top_bar .game_name{
	margin: 11px 0px 0px 5px;
	padding-right:10px;
	border-right: 1px solid #dae0e0; 
}

.top_bar .logout{
	margin: 10px 50px 0px 10px;
	float:right;
}

#top-drop-menu{
	width:150px;
	background-color: #eaeaea;
	position: absolute;
	right:30px;
	top:40px;
	/* border: 1px solid #024861; */
	-webkit-box-shadow: 0px 6px 20px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 6px 20px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 6px 20px 0px rgba(0,0,0,0.75);
	z-index:300;
}
#top-drop-menu div{
	border-bottom: 1px solid #c4c4c4;
	min-height:20px;
	padding:8px;
	color:black;
	text-align: left;
	vertical-align: middle;
	font-weight:bold; 
}
#top-drop-menu div:hover{
	background-color:#f85922;
}
#top-drop-menu div img{
	margin-right:5px;	
}

header{
	font-size: 18px;
	font-weight: bold;
	margin-bottom:30px;
}

.search_box{
	background-color: #fafafa;
	width: 100%;
	height: 80%;
	border:0px;
    padding-left:10px;
    background-image: url('/image/search-icon.png'); /* default, Android, Sf < 6 */
	background-position: -webkit-calc(100% - 20px) center; /* Sf 6 */
	background-position: right 20px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
	 background-repeat: no-repeat;
}

.right_area .main{
	/* padding-left:160px; */
	overflow-y: scroll;
	overflow-x:hidden;
	height: 100%;
}

.new_main{
	background-color:var(--main_content_border_background);
	padding: 13px 20px 0px
}

.main h2{
	color:var(--main_content_a_color);
}

.mail_icon{
	margin:0px 2px;
	filter: invert(22%) sepia(76%) saturate(2259%) hue-rotate(177deg) brightness(91%) contrast(104%);
}

.right_area .main .message_options{
	background-color: #DFD9E3;
	height: 28px;
	width: 100%;
	font-size: 14px;
	color: #00618b;
	padding: 13px 0px 0px;
	text-transform:capitalize;
}

.right_area .dashboard .messages{
	float:left;
	width:49%;
	height:321px;
}

.right_area .dashboard .header{
	width: 100%;
    height: 30px;
    background-color: #05618c;
}
.right_area .dashboard .header span{
   	position: relative;
    color: white;
    font-size: 18px;
    font-weight: bold;
    top: 7px;
    left: 10px;
    float:left;
}

.right_area .dashboard .header .dashboard_points{
    position: relative;
    color: white;
    font-size: 30px;
    font-weight: bold;
    top: 5px;
    left: -10px;
    float: right;
}


.right_area .dashboard .dashboard_body{
	background-color: white;
	height: 95%;	
}

.message_options a{
	color: #441053;
	margin-left: 20px;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
.message_options a img{
	margin-right: 3px;
}

.data{
	padding:20px 0px 0px 20px;
}

.game_div{
	width: 95%;
	margin: 20px 20px;
	background-color: #DFD9E3;
	padding-bottom: 20px;
}


.game_div .game_div_header{
	background-color: #00618b;
	color: white;
	font-size: 23px;
  	font-weight: bold;
  	height:50px;
	padding:0px 0px 0px 20px;
}

.game_general_data tbody tr td{
	vertical-align: top;
}
.game_general_data tbody tr td:FIRST-CHILD{
	width: 170px;
	font-weight: bold;
}
.game_general_data tbody tr td ul{
	padding:inherit;
	margin:0px;
}
.game_div_data{
	color:#00618b;
	padding:10px 20px;
	font-weight: bold;
}

.game_div_data input{
    width: 80%;
    height: 30px;
    border: 0px;
}
.game_objectives {
	width:80%;	
}

.game_objectives input{
	width:100%;
	margin:3px 0px;
}

.game_objectives ul{
    -webkit-padding-start: 160px;
    margin: 0px;
}
.game_objectives ul li{
	white-space:normal;
}

.game_div_data .start_time_input input{
	width: auto;
}
.game_players_list{
	border:0px solid #00618b;
}

.game_players_list tr td:first-letter{
	text-transform: capitalize;
}
	

.game_players_list tbody tr:FIRST-CHILD{
	background-color: var(--main_blue_menu);
	color:white;	
}
.game_players_list tbody tr th{
	white-space: pre-wrap;
}
.game_players_list tbody tr td{
	color:#12142d;
	padding-left:10px;
}

.game_players_list tbody tr{
	background-color:white;
}

.game_players_list input,.game_players_list select, .game_div_date input{
	width:95%;
	height: 80%;
	font-size:16px;
	color:#00618b;
}

.game_players_list input:HOVER,.game_players_list select:HOVER{
	border: 1px solid #00618b;
}

.game_div_header input{
	font-size:23px;
	color:#00618b;
}

/*  pop up section  */
.overFrameBlack{
	/*opacity: 0.6;
 	filter: alpha(opacity=60);
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // first! for ie8
 	*/
 	width: 100%;
    height: 100%;
    z-index: 5;
    position:absolute;
 	background-color:#000;
 	filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
	top:0px;
	left:0px;
	
	/*background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000)";*/
}

.overFrameDiv{
	width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
}

.popUpFrame{
	background-color:#fff;
	width: 400px;
    height: 130px;
    z-index: 15;
    position: relative;
    top: 300px;
    border: 5px solid #168bcf;
    -webkit-box-shadow: 0px 0px 8px #666;
	-moz-box-shadow:0px 0px 8px #666;
	box-shadow:0px 0px 8px #666;
	padding: 10px;
}

.iFrameDiv{
    position: absolute;
    left:15px;
    top:15px;
	background-color:#FFF;
	width:884px;
	-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
}

#msg_popup_div{
	overflow: auto;
}

.popup_header{
	height:50px;
	background-color:#2D2B32;
	color:white; 
	text-align: center;
	vertical-align: middle;
	font-size: 23px;
	font-weight: bold;
	text-transform: capitalize;
	line-height:50px; 
}


.popup_close_btn{
	margin-right: 10px;
	float:right;
	font-size: 18px; 
}

.popup_body{
	background-color: white;
	overflow: auto;
}

.popup_body h2{
	font-size:22px;
	line-height:24px;	
}

.popup_form{
	background-color: #DFD9E3;
	/*margin: 0px 0px 15px;*/
	padding:30px 0px 30px 100px;
}

.popup_form table tbody tr td{
	padding: 3px 10px 3px 0px ;
}

.popup_form table tbody tr td:FIRST-CHILD {
	color:#00618b;
	font-weight: bold;
	padding-left: 10px;
}

.popup_form table tbody tr td .game_input{
	padding-left: 10px;
}

.popup_submit_div{
	height:40px;
	padding:2px 0px 15px;
	text-align: center;
}

.popup_submit_div input[type="submit"]{
	background-color: #12142d;
	color:white;
	font-weight: bold;
	cursor: pointer;
}


.success_div {
	font-family:Arial,Verdana,Helvetica,sans-serif;
	background-color:#e2fee7;
	border: 1px #00db24 solid;
	color:green;
	min-height:30px;
	padding-top:10px;
	padding-bottom:0px;
	padding-left:20px;
	text-align:left;
	font-size: 14px;
	margin: 20px 15px;
	vertical-align: middle;
}


/* error section */
#error_div, #error, .error ,.error table tr td {
	font-family:Arial,Verdana,Helvetica,sans-serif;
	background-color:#FFEBE8;
	border: 1px #DD3C10 solid;
	color:red;
	min-height:30px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:20px;
	text-align:left;
	font-size: 12px;
	margin: 20px 0px;
	vertical-align: middle;
}
#error_td,#error table tr td{
	vertical-align: middle;	
}

#error_ul{
	padding: 15px 0px 15px 30px;
	margin: 0px;
}

.login_register_form{
	
}

.login_register_form tbody tr td{
	text-align: center;
	padding: 3px 0px;
}

.login_register_form tbody tr td input{
	padding-left:10px;
	width:300px;
	font-family: Roboto;
  	font-size: 18px;
  	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
  	color: #828282;
}


.login_register_form select{
	border:0px;	
	width:260px;
	height:100%;
}

.login_register_form tbody tr td input[type=submit],#registerTable input[type=submit]{
	margin:10px 0px;
	width:300px;
	background-color: black;
	font-size:18px;
	color:#f6851f;
	font-weight: bold;
	cursor: hand;
	text-align: center;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border: 2px solid #f6851f;
	height:50px;
	outline:none !important;
}

#game_choser_div input[type=button],#logout_button{
	margin:10px 0px;
	width:200px;
	background-color: black;
	font-size:17px;
	color:#fff;
	font-weight: bold;
	cursor: hand;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border: 1px solid #fff;
	height:50px;
}

#logout_button{
	float: right;
    width: 100px;
    height: 27px;
    top: 10px;
    position: relative;
    padding: 5px 0px 0px 16px;
    color:white;
    background-color: transparent;
}

.view_video_button{
margin: 10px 40px 0px;
    width: 241px;
	font-size:18px;
	color:#04608e;
	/* font-weight: bold; */
	cursor: hand;
	text-align: center;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border: 2px solid #04608e;
    height: 49px;
	outline:none !important;
	cursor:pointer;
}

.view_video_button span{
	font-size:19px;
	/* font-size:17px; */

	position:relative;
	top:19px;
	/* left:8px; */
	left:5px;

}
	
.triangle-right_inside {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 20px;
	border-color: transparent transparent transparent #021322;
    position: relative;
    left: -24px;
    top: -11px;
}

.triangle-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 0 13px 26px;
    border-color: transparent transparent transparent #04608e;

margin: 11px 0px 0px 7px;
}
.triangle-right_img{
    width: 20px;
    margin-top: 9px;
    margin-left: 5px;
}

.view_button_circle{
	border: 2px solid #04608e;
	width: 48px;
    float: right;
	height: 46px;
	top: -1px;
    position: relative;
    left: 2px;
	border-radius: 50%;
	position: relative;

}

#newGameTable tbody tr td:first-child{
	width:175px;
  	height: 14px;
  	font-family: Roboto;
  	font-size: 18.5px;
  	font-weight: bold;
  	font-style: normal;
  	font-stretch: normal;
  	line-height: normal;
  	letter-spacing: normal;
  	text-align: left;
  	color: #ffffff;
  	padding-left:50px;
}

#registerTable tbody tr td input{
	width:360px;
	height:40px;
	padding-left:10px;
	font-family: Roboto;
  	font-size: 18px;
  	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
  	color: #828282;
}

#registerTable tbody tr td select{
	width:370px;
	height:40px;
	padding-left:6px;
	font-family: Roboto;
  	font-size: 18px;
  	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
  	color: #828282;
	
}

#newGameTable tbody tr td:nth-child(2) input{
	width:360px;
	height:40px;
}

#newGameTable tbody tr td:nth-child(2) select{
	width:370px;
	height:40px;
}


#game_choser_div input[type=button]:hover{
	background-color: #f6851f;
	color:#fff;
}

#login_form #text_div{
  width: 482px;
  height: 30px;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  margin-bottom:50px;
  
}

#forgot_password_href{
	position:relative;
	top:-30px;
}

#resend_code_href{
	position:relative;
	top:-30px;
	font-size: initial;
}

#forgot_password_href:hover{
	text-decoration:underline;	
}

#resend_code_href:hover{
	text-decoration:underline;	
}

.login_register_form tbody tr td input[type=submit]:hover,#registerTable input[type=submit]:hover{
	background-color: #f6851f;
	color:#fff;
}

.login_error{
	color:white;
	font-size: 14px;
	font-weight: bold;
}

.choose_game_title{
	color:white;
	font-size:18px;
	padding: 10px 0px 20px;
}


.select_game_table{
	border-collapse:separate; 
	width:510px;	
}

.select_game_table tbody tr td{
	text-align: center;
	padding: 3px 0px;
	margin-top:10px;
	width:100%;
/*	background-color: #dbdbdb; */
	font-size:16px;
	font-weigth:300;
	color:#1b90ba;
	cursor: hand;
/*	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; */
	border-bottom: 1px solid #1b90ba;
}

.select_game_table tbody tr:hover td{
	color: #f6851f;
	cursor: pointer;
/*	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;*/
}

.select_game_table tbody tr td input[type=submit]{
	margin-top:10px;
	width:100%;
	height:100%;
	padding:0px;
	background-color: #f85922;
	font-size:18px;
	color:#fff;
	font-weight: bold;
	cursor: pointer;
}


.game_tr td:first-child{
	width:315px;	
}

.game_tr td:nth-child(2){
	width:200px;
}


.backNet{
 	background-image: url('/image/bckgnet.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right; 
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
}

.backOpeneingPages{
 	background-image: url('/image/Best-entrence-video-screen-bckg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right; 
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
}

.gradient_video_back{
background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(4,30,53,1) 63%, rgba(2,28,50,1) 64%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(4,30,53,1) 63%,rgba(2,28,50,1) 64%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(4,30,53,1) 63%,rgba(2,28,50,1) 64%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#021c32',GradientType=0 ); /* IE6-9 */
}

.upperFooter{
	padding:15px 0px 0px;
	text-align: center;
	width: 100%;
	color:#fff;
	height:300px;
	background-color: #032949;
   /* position: absolute;*/
    bottom: 45px;
}
.powerBy{
	/* position: absolute;*/
	bottom: 0px;
	padding:10px 0px;
	text-align: center;
	width: 100%;
	color:#586a7d;
	background-color: #021c32;
	height:25px;
}

.new_message_div{
	width:760px;
	padding: 5px 0px;
}

.new_message_inpute_header{
  color: #00618b;
  font-weight: bold;
  padding-left: 10px;
  height:20px;
  vertical-align: text-top;
  text-transform: capitalize;
 }
  
.new_message_div input{
	width:600px;
	height:30px;
	border:0px;
}

.new_message_div select{
	width:286px;
	height:30px; 
	border:0px;
}
.new_message_div textarea{
	height:250px;
	width: 879px;
	border:0px;
	overflow-y: scroll;
}

.new_message_div span{
	display:block;
	display:inline-block;
	margin: 2px 0px;
}

.new_message_button{
	background-color: #520066;
	padding: 10px;
	color:#fff; 
	text-align: center;
	margin:5px 11px;
	font-size:21px;
	width:77px;
	cursor: pointer;
}

.new_message_send_button{
	vertical-align:middle;
	height:75px;
	padding-top:40px;
	margin-top:10px;
	margin-bottom: 6px;
}


.new_doc_send_button{
	vertical-align:middle;
	height:50px;
	padding-top:20px;
	margin-top:10px;
	margin-bottom: 20px;
}

.file_chioce{
	  position: relative;
  margin: 3px 5px 3px 0;
  padding: 3px 20px 3px 5px;
  border: 1px solid #aaa;
  max-width: 100%;
  border-radius: 3px;
  background-color: #eeeeee;
  line-height: 13px;
}


.file_chioce a{
	  position: absolute;
	  top: 4px;
	  right: 3px;
	  display: block;
	  width: 12px;
	  height: 12px;
	  background: url('/js/chosen/chosen-sprite.png') -42px 1px no-repeat;
	  font-size: 1px;
}


.file_chioce span{
  font-size: 13px;
  word-wrap: break-word;
  display: block;
  display: inline-block;
  margin: 2px 0px;
}

/*  
dsa{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  width: 100%;
  height: 30px;
  border: 0px;
  background-color: #fff;
}
/*

/* messages section */
#messages_left{
	float:left;
	width:365px;
	font-size:14px;
	border-right: 1px solid #DFD9E3; 
	border-left: 1px solid #DFD9E3;
	height:100vh;
	overflow: hidden;
}

#messages_container{
	overflow-y:auto;
	height: 100%;
}

#messages_container .message_box{
	width:100%;
	height:60px;
	border-bottom: 1px solid #DFD9E3; 
}

#messages_container .message_box:hover {
	background-color: var(--notifaction_circle_background);
	cursor: pointer;
}

#messages_container .grayed_out:hover{
	cursor:default;
}


#messages_container .unread_box{
	font-weight: bold;		
}

#messages_container .selected_box{
	background-color: var(--main_content_selected);
}

#messages_container .empty_list{
	width:100%;
	text-align: center;;
	font-size: 14px;
}

#messages_left #search_and_filter div{
	margin: 3px 0px;
	background-color: #DFD9E3;
	padding-left:10px;
	text-transform:capitalize;
}
#messages_left #search_and_filter input{
	width:335px;
	margin:5px 0px;
	height:30px;
	border:0px;
	padding-left:10px;
}

#messages_left #search_and_filter select{
	margin:5px 10px;
	height:30px;
	border:0px;	
	background-color: #DFD9E3;
	font-size:14px;
	width:225px;
	text-transform:capitalize;
}

#messages_container .message_read_or_not{
	float:left;
	width:29px;
	padding:3px 15px 0px 15px;
	vertical-align: middle;
}

#messages_container .from_and_subject{
	float:left;
	width:240px
}

#messages_container .to{
	float:left;
	width:240px
}

#messages_container .draft_list_icons{
	float:right;
	width:150px
}

.text_cut{
	text-overflow: ellipsis;white-space: nowrap;  overflow: hidden;
}


#messages_container .from_and_subject .message_from,#messages_container .to .message_from{
	font-size: 16px;
	padding-top:10px;
	text-transform: capitalize;
}

#messages_container .from_and_subject .subject{
	font-size: 16px;
	padding-top:8px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

.message_box .time_and_flags  .message_time{
	padding-top:10px;
}
.message_box .time_and_flags  .flags{
	padding-top:5px;
}


#messages_container .time_and_flags{
	float:right;
	width:30px;
	padding-right:15px;
	text-align: center;
}


#messages_container .drafts_attacment{
	float:left;
	width:3% !important;
	padding:7px 15px 0px 15px;
	vertical-align: middle;
	font-size:18px;
	line-height:20px;
}

#message_view{
	width: 100%;
}

#message_view .message_view_header{
	border-bottom: 1px solid #DFD9E3;
}

message_view_header #from{
	text-transform: capitalize;
}

#message_view .message_view_header , #message_view #message_view_body{
	margin-left: 350px;
	padding: 30px 30px 10px 30px;
	height: 100%;
	overflow-y: auto;
}
#message_view .message_view_header #subject,#message_view .message_view_header #from, #message_view .message_view_header #time, #message_view .message_view_header #to_list,#message_view .message_view_header #cc_list,#message_view .message_view_header #attachmensts{
	padding: 3px 0px;	
}

#message_view .message_view_header #subject{
	font-size:22px;
	font-weight: bold;
	padding-bottom:6px;
	line-height:24px;
}

#message_view .message_view_header #from{
	/*font-size:20px;*/
}

#message_view .message_view_header .header_title{
	color:#00618b;
}

#message_view .message_view_header #attachmensts ul{
	margin:0px 0px 10px;
}

#attachments_read_only_ul{
	margin:6px 0px 10px;
};


#message_view .message_view_header #attachmensts li,#attachments_read_only_ul li{
	display:inline-block;
    float:left;
    vertical-align: top;
    padding-right: 10px;
}

#message_view .message_view_header #attachmensts li a , #attachments_read_only_ul li a{
	color:blue;
}

#message_view .message_view_header #attachmensts li a:hover , #attachments_read_only_ul ul li a:hover{
	text-decoration: underline;
}


/*  actions */
section {
	margin:20px;
	color:#12142d;
}
section .big_box{
	width:170px;
	height:170px;
	background-color: #DFD9E3;
	color:#00618b;
	font-weight: bold;
	float:left;
	text-align: center;
	padding-top:30px;
	text-transform:capitalize;
}

section .big_box .logo_box{
	width:70px;
	height: 70px;
	background-color: #00618b;
	margin: 20px auto;
}

.logo_box img{
	margin-top:15px;
}

section .table_box{
	margin: 0px 20px 0px 190px;
}

section .table_box .other_action:nth-child(odd), section .table_box .other_action:nth-child(odd) td{
	background-color: #f85922;
}
section .table_box .other_action, section .table_box .other_action td{
	background-color: #fba88c;
}

section .table_box .other_action:hover td,section .table_box table tbody tr:hover td{
	background-color: #70a9f0;
	cursor:pointer;
}

 section table tbody tr td, section table tbody tr{
 	height: 50px;
 	border: 0px;
 	padding: 0px 10px;
 	margin: 0px;
 }
section table tbody tr:nth-child(odd), section table tbody tr:nth-child(odd) td{
	background-color: #DFD9E3;
}

section table tbody tr:nth-child(even), section table tbody tr:nth-child(even) td{
	background-color: #f7f7f7;
}

section table tbody td a{
	color:#00618b;
	text-decoration: underline;
	font-weight: bold;
}
section table tbody td a:hover{
	color: #f85922;
	text-decoration: underline;
}

.actions_sign{
	float:left;
	width:20px;
	/* background-color: #00618b;*/
	margin: 20px auto;
}

#messages_left .actions_title{
	font-size: 42px;
	padding:40px 0px 0px 105px;
	color:#00618b;
	font-weight: bold;
	text-transform: capitalize;
}

.message_view_header #challenges div:FIRST-CHILD, .message_view_header #dilemmas div:FIRST-CHILD , .message_view_header #decisions div:FIRST-CHILD{
	float:left;
}
	
.message_view_header #challenges ul, .message_view_header #dilemmas ul , .message_view_header #decisions ul{
	padding-left:185px;
}

.message_view_header #challenges, .message_view_header #dilemmas , .message_view_header #decisions{
	line-height:22px;
}
 
#messages_left .logo_box{
	width:70px;
	height: 70px;
	background-color: #00618b;
	margin:10px 0px 10px 20px;
}

#messages_left .logo_box img{
	margin:15px;
}

.small_action_logo{
	height: 15px;
	width: 15px;
	padding:3px;
	background-color: #00618b;
}

.small_action_logo img{
	margin:1px;
	width: 12px;
}

/* chat */
#chat_main{
	position: absolute;
	bottom: 0px;
	right: 15px;
	z-index:40;
}

.chat_header{
	background-color:var(--main_button_background);
	color:white;
	height: 40px;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.player_online_offline_mark{
	float:left;
	width:40px;
}

.chat_header div{
	float:left;
}

.chat_header .chat_title{
	font-size: 16px;
	font-weight: 700;
	padding:13px 10px;
}
.chat_window .chat_header .chat_title,
.chat_window .chat_header .chat_title .player_name{
	width:170px;
	text-transform: capitalize;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height:25px;

}
.chat_header .arrow_div{
	float:right;
	width: 40px;
	height:40px;
	font-size:25px;
	border-left: 1px solid #dae0e0;
	text-align: center; 
}
.chat_window .chat_header .close_div{
	width: 40px;
	float: right;
	text-align: center;
	font-weight: bold;
	padding-top:13px;
	font-size:21px;
}

.chat_window{
	align-self: flex-end
}

#players_list {
	height: 300px;
}
#players_list .player_container,#admin_chat_player .player_container{
	border-bottom: 1px solid #dae0e0;
	height: 40px;
}
#players_list .player_container .player_name,#admin_chat_player .player_name{
	float: left;
	margin-top:10px;
	width:130px;
	text-transform: capitalize;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size:13px !important;
}

.group_name{
	width:130px;
	text-transform: capitalize;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#players_list .player_container #new_message_number{
	margin: 7px;
	float: right;
}

#players_list .player_container:hover{
	background-color: #70a9f0;
	cursor:pointer;
}

.chat_window{
	width:250px;
	z-index:9;
	position: relative;
}
.chat_window_open_container{
	border-left: 1px solid #dae0e0;
	border-right: 1px solid #dae0e0;
}
#chat_message_list{
	width:100%;
	height: 120px;
	background-color: white;
	overflow-y:auto;
	display: inline-block;
	zoom:1;
}

.chat_input_text_div{
	height:40px;
	background-color:#DFD9E3;
	border-top: 1px solid #dae0e0;
}

.chat_input_text_div input{
	height: 25px;
	margin:7px;
	width:231px;
	padding-left:3px
}

.his_message,.my_message{
	width:160px;
	font-size: 11px;
	color:black;
	border: 1px solid #dae0e0;
	margin:5px;
	padding:5px;
  	word-wrap: break-word;
}
.my_message{
	margin-left:55px;
	background-color: #70a9f0;
}

.his_message{
	background-color: white;
}

.statistics_filter_options select option:first-letter, .search-choice:first-letter{
	text-transform:capitalize;
}

.statistics_filter_options{
	background-color: #DFD9E3;
	font-size: 14px;
	color: #00618b;
	padding: 0px 20px ;
	font-weight: bold; 
}
.statistics_filter_options div{
	padding-top: 10px;
}
.statistics_filter_options{
	padding-bottom: 10px;
}
.statistics_filter_options select,.statistics_filter_options input{
	height:30px;
}

#table_stats table{
	table-layout: fixed;
	width: auto;
}

#table_stats table tbody tr td{
	text-align: center;
	padding: 0px 5px;
}
#table_stats .detailed_table tbody tr th{
	position:fixed;
	text-align:center;
	background-color: #00618b;
	color:white;
	word-wrap:break-word;
	padding: 5px;
	height: 30px;
	min-width: 60px;
}
#table_stats .summery_table tbody tr th,#table_stats .summery_table tbody tr td:FIRST-CHILD{
	text-align:center;
	background-color: var(--main_blue_menu);
	color:white;
	word-wrap:break-word;
	padding: 5px;
}

#table_stats .heat_map_table tbody tr th,#table_stats .heat_map_table tbody tr td:FIRST-CHILD{
	text-align:center;
	background-color: var(--map_background );
	color:black;
	word-wrap:break-word;
	padding: 0px 10px;
}

.heat_map_players_title{
	background-color:#006289;
	color:white;
}

#table_stats .heat_map_table tbody tr:FIRST-CHILD th{
	color:var(--main_content_a_color);
	font-weight:bold;
}

#table_stats .heat_map_table tbody tr td:FIRST-CHILD{
	font-weight:normal;
	height:30px;
}
#table_stats .heat_map_table tbody tr td{
	font-weight:bold;
	height:30px;
}

#table_stats table tbody tr .stats_time_header{
	text-align: left;
}

#table_stats .summery_table tbody tr th:FIRST-CHILD{
	background-color: white;
}
#table_stats table tbody tr:nth-child(odd){
	background-color: #DFD9E3;
}

#table_stats table tbody tr:nth-child(even){
	background-color: #f7f7f7;
}

#table_stats .heat_map_table tbody tr:nth-child(odd){
	background-color: #ebebeb;
}

.tooltip-styling{
	border: 1px solid black;
	background-color:white;
	padding:10px;
	display:inline-block;
	max-width:70%;
	 
}

#preloader{
	border: 4px solid black;
	background-color: white;
	position: absolute;
	top: 100px;
	left:240px;
	height: 170px;
	padding-top:50px;
	width: 430px;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    behavior: url(/css/border-radius.htc);
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
	text-align: center;
	display:none;
	z-index:99;
}

#preloader p{
	display: block;
	width: 240px;
	height:20px;
	padding: 5px 5px;
	margin: 2px auto;
	border: 1px inset #446;
	border-radius: 5px;
	background: #eee url("/image/preloaderbar.png") 100% 0 repeat-y;
	color:#12142d;
	font-size:23px;
	font-weight: bold;
}

.preloaderBack{
	width: 100%;
    height: 100%;
    z-index: 98;
    position:absolute;
 	background-color:#000;
 	filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
	top:0px;
	left:0px;
	display:none;
}


/***************** site *******************/
.site_container{
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	width:950px;
	position: relative;
}

.site_login_button{
	float:left;
	height: 30px;
	width: 100px;
	background-color: #f85922;
	text-align: center;
	font-size: 20px;
	padding-top: 12px;
	cursor: pointer;
	color:white;
}

.site_contact_button{
	float:left;
	height: 30px;
	width: 150px;
	text-align: center;
	font-size: 20px;
	padding-top: 12px;
	cursor: pointer;
	color:white;
}

.site_header{
	color:#00618b;
	font-size:38px;
}

.site_footer{
	background-color:#000;
	height:40px;
	clear:both;
	color: white;
	text-align: center;
	padding-top: 10px;
}

.push {
	height:40px;
	clear:both;
}

.site_box{
	float:left;
	padding-top:20px;
	width: 160px;
	padding:0px 5px;
	height:190px;
	margin-right: 20px;
	margin-top:auto;
	margin-bottom:auto;
	color:black;
	background-color: #DFD9E3;
	font-weight: bold;
}
.site_box img{
	padding:10px 0px;
}

.site_big_image_text{
	color:white;
	text-align: center;
	padding-top:550px;
	font-size: 36px;
}

.site_video{
	padding: 0px 13px;
	border:2px solid black;
	-webkit-box-shadow: 0px 13px 17px 2px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 13px 17px 2px rgba(0,0,0,0.75);
	box-shadow: 0px 13px 17px 2px rgba(0,0,0,0.75);
}

#report_message_list{
	overflow: auto;
	height: 100%;
}

#report_message_list table,#report_message_list table tbody,#report_message_list table tr, #report_message_list table td, #report_message_list table th{
	 overflow:auto;
}

#report_message_list table tbody tr td{
    white-space: normal;
    padding: 5px 0px 5px 5px;
    vertical-align:top; 
	
}

#report_message_list table thead tr th{
	background-color: #12142d;
	color:white;
	position: sticky;
  	top: 0;
}

#report_message_list table tbody tr:nth-child(odd){
	background-color: #DFD9E3;
}

#report_message_list table tbody tr:nth-child(even){
	background-color: #f7f7f7;
}

.customer_satisfaction{
	color:black;
	margin:auto;
	
}
.customer_satisfaction_head{
	background-color:#333333;
	color:white;
	height:400px;
	width:100%;
	padding-top:30px;
	font-size:20px;
	line-height:22px;
	
}

.customer_satisfaction table tbody tr td,.customer_satisfaction table tbody tr th{
	text-align: center;
}

 input[type=radio]{
	height: auto;
	width: auto;
}
.customer_satisfaction h2{
	line-height: 26px;
	font-size:20px;
}

.customer_satisfaction_head h1{
	line-height: 40px;
	padding-bottom:20px;
	font-weight:normal;
}


.customer_satisfection THEAD tr th{
	border:1px solid black;
	text-align: center;
}

.customer_satisfection tbody tr td{
	border:1px solid white;
	text-align: center;
	color: black; 
}




#wordle_table{
	width:100%;
}

#wordle_table thead tr th{
	text-align:center;
	background-color: #12142d;
    color: white;
    
}

#wordle_table tbody tr td{
	white-space: initial;
}

.reports h1{
	color:#00618b;
	text-decoration:  underline;
}
.reports p{
	margin-left: 15px;
}

.reports h3{
	color:#00618b;
}

.reports table{
	width: auto;
	border: solid black 1px ;
	border-collapse: collapse;
}
.reports table tr td,.reports table tr th{
	border: solid white 1px ;
	padding: 0px 10px ;
}

.reports table.flowTable{
	width:100%;	
}

.reports table tr th{
	background-color: #00618b;
	color:white;
	text-transform: capitalize;
	font-weight: bold;
}
.reports table tr:nth-child(even) {
	background-color: #f7f7f7;
}

.reports table tr:nth-child(odd){
	background-color: #DFD9E3;
}

.event_analytics_box,.event_analytics_box div{
	border:1px solid black;
}

.event_analytics_box .map_div{
	height:700px;
}

.event_analytics_box .big_title{
	background-color: #00618b;
	font-size:22px;
	color:white;
	padding: 5px 0px 5px 10px;
}

.event_analytics_box .small_title{
	font-size:14px;
	background-color: #c1edff;
	padding: 8px 0px 8px 10px;
}

#questions_wrapper a{
	color:black;
	text-decoration: none;
	font-size:12px;	
}

#questions_wrapper a:hover{
	text-decoration: underline;
}

.question_div{
	margin:10px 0px;
	border: 1px dotted;
		
}

.entrence_top_bar{
	/*height:150px;*/
	maring-bottom:20px;
	/*background-color: #01537b;*/
}

.entrance_wrapper{
	width:950px;
	margin: auto auto;
		
}

.menu-toggle-buttons{
	height:10px;
	border-top: 1px solid;
	padding:10px;
	border-color: #0d7599;
}
	
.menu-toggle-buttons div{
	float:left;
	width:45px;	
	border:1px solid #2B2D32;
	font-size: 13px;
	height:20px;
	padding-top:5px;
	margin:auto;
	text-align: center;
}
.menu-toggle-buttons div:hover{
	cursor: pointer;
}

.menu-toggle-buttons div:hover{
	cursor: pointer;
}
.menu-toggle-buttons div:hover{
	background-color: #f85922;
}
.menu-toggle-buttons div.selected:hover{
	background-color:#024861;
}
.menu-toggle-buttons div.selected{
	background-color:var(--menu_selected_background);
}

#circle { 
   width: 24px;
   height: 21px;
   float:right;
   border: 2px solid white;
   border-radius:50%;
   margin-left:10px;
   margin-top:4px;
   font-size: 14px;
   padding-top: 7px;
   padding-left: 6px;
	background-color: var(--main_button_background);
}

#top-menu-div #triangle{
	width: 0;height: 0;border-style: solid;border-width: 0 7px 11px 7px;border-color: transparent transparent #ffffff transparent;position:absolute;right:34px;top:30px;
}

.user_settings #triangle{
float:right;margin:5px 0px 0px 0px;width: 0;height: 0;border-style: solid;border-width: 8px 5px 0 5px;border-color: #ffffff transparent transparent transparent;	
}

/* mvp graph */

.mvp_container{
	width:100%;
	margin-bottom:30px;	
}

.mvp_container table tbody tr td:last-child{
	background-color:white;
	text-align:left;
}
.mvp_container table.container_0 tr td:first-child{
	background-color:#ec5f0d;
	color:white;
}
.mvp_container table.container_0 tr td:nth-child(2){
	background-color:#eb3c07;
	color:white;
}
.mvp_container table.container_0 tr td:nth-child(3){
	color:#ec5f0d;
}

.mvp_container table.container_1 tr td:first-child{
	background-color:#06618d;
	color:white;
}
.mvp_container table.container_1 tr td:nth-child(2){
	background-color:#044762;
	color:white;
}
.mvp_container table.container_1 tr td:nth-child(3){
	color:#06618d;
}

.mvp_container table.container_2 tr td:first-child{
	background-color:#268e6b;
	color:white;
}
.mvp_container table.container_2 tr td:nth-child(2){
	background-color:#1b7a58;
	color:white;
}
.mvp_container table.container_2 tr td:nth-child(3){
	color:#268e6b;
}
	
.mvp_container table.container_3 tr td:first-child{
	background-color:#edcc27;
	color:white;
}
.mvp_container table.container_3 tr td:nth-child(2){
	background-color:#d6b007;
	color:white;
}
.mvp_container table.container_3 tr td:nth-child(3){
	color:#edcc27;
}


/*   new flow */
#flow_div {
 	position:relative;
}

.flowTable {
 	border-spacing: 0px;
 	width:max-content;	
 	overflow: scroll;
 	position:relative;
}

.heat_map_table {
 	border-spacing: 0px;
 	width:max-content;	
 	overflow: scroll;
 	position:relative;
 	 margin-bottom: 40px;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  left:0px;
}

.flowTable tbody tr td,.flowTable thead tr th {
	border-width:1px; 
	border-style:solid dashed solid none ;
	position:relative;
	background-color:#DFD9E3;
	height:160px;
}

.flowTable tbody tr td.same_phase{
	border-style:solid none solid none ;
}

.flowTable tbody tr td.new_same_phase{
	border-style:solid none solid dashed ;
}

.flowTable tbody tr td{
	border-style:solid dashed solid dashed ;
}

.flowTable tbody tr td.same_phase + td:not(.same_phase) {
	/*border-style:solid dashed solid dashed ;*/
}

.flowTable tbody tr td:not(.name_td) {
	width:160px !important;
	padding:0px 15px;
}

.flowTable thead tr th:last-child{
	border-style:solid solid solid none !important ;
}
	
.flowTable tbody tr .name_td,.flowTable thead tr .name_td{
	background-color:#C7D4DF;
	border-style:solid;
	height:160px;
	width:50px;
	position: -webkit-sticky; /* for Safari */
  	position: sticky;
  	left: 0;
  	z-index:30;
}

.heat_map_table tbody tr .name_td,.heat_map_table thead tr .name_td{
	background-color:#C7D4DF;
	border-style:solid;
	width:50px;
	position: -webkit-sticky; /* for Safari */
  	position: sticky;
  	left: 0;
  	z-index:30;
}

.flowTable thead tr th{
	height:20px !important;
	text-align:center;
	background-color:white;	
	border:1px solid black;
	position: -webkit-sticky; /* for Safari */
  	position: sticky;
  	top: 0;
  	color:black;
	z-index: 15;
}

.flowTable  tbody tr th.name_td{
	background-color:#white;
	height:20px;
	border:0px;
}

.flowTable  tbody tr .name_td .rotate{
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	width:110px;
	color:black;
	font-size:15px;
	white-space: pre-line;
	position:relative;
	left:-40px;
	text-align:center;
}

.flowTable tbody tr .name_td.represented{
	background-color:#0070c0;
}

.flowTable .square{
	width: 140px;
    height: 60px;
    color: black;
    border: 1px solid black;
    text-align: center;
    white-space: pre-wrap;
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
    position:absolute;
    top:40px;
    z-index:10;
}


.flowTable .oval {
   width: 140px; 
   height: 60px;
   -moz-border-radius: 100px / 50px;
   -webkit-border-radius: 100px / 50px; 
    border-radius: 100px / 50px;
    border: 1px solid black;
    text-align: center;
    white-space: pre-wrap;
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
    position:absolute;
    top:40px;
    z-index:10;
}

.flowTable .oval .text , .flowTable .square .text {
  display: table-cell;
  height: 60px;
  vertical-align: middle;
  width:140px;
  white-space: pre-wrap;
  text-align:center;
}
	
/*	
.flowTable .octagon {
	margin-left:10px;
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background-color:blue;
 	width:140px;
 	height:140px;
 	z-index:20;
 	position: absolute;
    top: 10px;
}
*/

.flowTable .hexagon {
  position: relative;
  width: 116px; 
  height: 66.97px;
  background-color: #ffffff;
  margin: 33.49px auto;

  border-left: solid 2px #333333;
  border-right: solid 2px #333333;
  z-index:3;
  
}

.flowTable .hexagon:before,
.flowTable .hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 82.02px;
  height: 82.02px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 11.9878px;
  z-index:3;
}

.flowTable .hexagon:before {
  top: -43.0122px;
  border-top: solid 2.8284px var(--border-color);
  border-right: solid 2.8284px var(--border-color);
  margin-left:3px;
}

.flowTable .hexagon:after {
  bottom: -43.0122px;
  border-bottom: solid 2.8284px var(--border-color);
  border-left: solid 2.8284px var(--border-color);
  margin-left:3px;
}

.flowTable .hexagon .text {
  display: table-cell;
  height: 68px;
  vertical-align: middle;
  width:140px;
  white-space: pre-wrap;
  text-align:center;
  z-index:22;
  position:relative;
}


/*
.flowTable .octagon {
  position: relative;
  width: 116px; 
  height: 69.28px;
  background-color: #fff;
  margin: 34.64px 0;
  border-left: solid 2px var(--border-color);
  border-right: solid 2px var(--border-color);
  z-index:20;
}

.flowTable .octagon:before,
.flowTable .octagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 84.85px;
  height: 84.85px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 12.5736px;
}

.flowTable .octagon:before {
  top: -42.4264px;
  border-top: solid 2.8284px var(--border-color);
  border-right: solid 2.8284px var(--border-color);
}

.flowTable .octagon:after {
  bottom: -42.4264px;
  border-bottom: solid 2.8284px var(--border-color) ;
  border-left: solid 2.8284px  var(--border-color);
}

.flowTable .octagon .text {
  display: table-cell;
  height: 140px;
  vertical-align: middle;
  width:140px;
  white-space: pre-wrap;
  text-align:center;
 	z-index:22;
}

*/


.flowTable .diamond {
  position: relative;
  height: 100px;
  width: 100px;
  text-align: center;
  margin: 0px 30px;
  transform:rotate(45deg);
  border: 1px solid black;
  z-index:20;
}

.diamond .text {
  display: table-cell;
  height: 100px;
  transform: rotate(-45deg);
  vertical-align: middle;
  width:100px;
  white-space: pre-wrap;
}

.flowTable .pentagon {
	  position: relative;
	  width: 54px;
	  box-sizing: content-box;
	  border-width: 50px 18px 0;
	  border-style: solid;
	  border-color: red transparent;
	  z-index:20;
}
#pentagon:before {
	  content: "";
	  position: absolute;
	  height: 0;
	  width: 0;
	  top: -85px;
	  left: -18px;
	  border-width: 0 45px 35px;
	  border-style: solid;
	  border-color: transparent transparent red;
	  z-index:20;
}
    
.markRow{
	border-bottom:3px dashed red !important;
	border-top:3px dashed red !important;	
}

.markColumn{
	border-left:3px dashed red !important;
	border-right:3px dashed red !important;	
}

.line{
	background-color:black;
	position:absolute;
	height:2px;
}

.arrow-up {
    width: 0px;
    height: 0px;
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    border-right: 9px solid #2f2f2f;
    position: relative;
    top: -6px;
    z-index:11;
}

.grayed_out{
	color:#bcbcbc;	
}
	
	
.titlegroup{
	display:none;	
}

.tutorial_video_div{
	position:absolute;
	top:200px;
	margin:0px auto;
	width:604px;
	baclground-color:red;
	z-index:20;	
}

.flow_zoom{
	position: absolute;
	right: 295px;
	top: 55px;	
}


.statistics_slider{
	width:200px;	
}



/* counter wait for game */
.progress-circle {
	font-size: 20px;
	position: relative; /* so that children can be absolutely positioned */
	width: 7em;
	height: 7em;
	border-radius: 50%;
	width: 167px;
   height: 168px;
 }

 .time{
	width: 74px;
	height: 59px;
	font-family: Roboto;
	font-size: 60px;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: 0.33;
	letter-spacing: -2px;
	text-align: center;
	color: #ffffff;
	margin-left: -142px;
	margin-top: -151px;
text-align: center;

 }


 .titel{
	width: 78px;
   height: 13px;
   font-size: 18px;
   font-family: Roboto;
   font-weight: normal;
   font-style: normal;
   font-stretch: normal;
   line-height: 1.44;
   letter-spacing: -0.45px;
   text-align: center;
   color: #ffffff;
   margin-top: 34px;
   margin-left: 6px;
   text-align: center;
 }
 .progress-circle:after{
	 border: none;
	 position: absolute;
	 top:3px;
	 left:3px;
	 text-align: center;
	 display: block;
	 border-radius: 50%;

	 width: 6.7em;
	 height: 6.7em;
background-color: #021c32;
	 
	 content: " ";
 }
 /* Text inside the control */
 .progress-circle span {
	 position: absolute;
	 line-height: 7em;
	 width: 7em;
	 text-align: center;
	 display: block;
	 color: white;
	 z-index: 2;
   
 }
 .left-half-clipper { 
	/* a round circle */
	border-radius: 50%;
	width: 7em;
	height: 7em;
	position: absolute; /* needed for clipping */
	clip: rect(0, 7em, 7em, 3.5em); /* clips the whole left half*/ 
 }
 
 .progress-circle.over30 .left-half-clipper {
	clip: rect(auto,auto,auto,auto);
 }
 .value-bar {
	/*This is an overlayed square, that is made round with the border radius,
	then it is cut to display only the left half, then rotated clockwise
	to escape the outer clipping path.*/ 
	position: absolute; /*needed for clipping*/
	/* clip: rect(0, 3.5em, 7em, 0); this is the true */
	clip: rect(0, 3.5em, 7em, 0);
background-color: rgb(3, 41, 73);

/* background-color: firebrick; */

	width: 7em;
	height: 7em;
	border-radius: 50%;
	border: 2px dotted #00ffff ;
	box-sizing: border-box;
   
 }


#HeatMapPopUp{
	width:240px;
	height:75px;
	background-color:white;
	border:1px solid black;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	z-index:9999;
	position:absolute;
	font-size:13px;
}

#HeatMapPopUpHeader{
	font-weight: bold;
	padding:5px;
	float:left;
}

#HeatMapPopUpTotalCounter{
    float: right;
    width: 25px;
    padding: 3px;
    margin: 5px 10px 5px 0px;
    text-align: center;
}

.HeatMapPopUpInfo {
	float:left;	
}

.HeatMapPopUpInfo div{
	float:left;
	font-size:	10px;
}
.HeatMapPopUpInfo div div{
	width:6px;
	height:6px;
	float:left;
	margin: 4px 6px;
}

#HeatMapPopUp table{
	margin:0px 4px;
	width:95%;
	text-align:center;
}
#HeatMapPopUp table tr td{
	text-align:center;
	font-size:13px;
	height:20px;
	padding:0px;
}


.heatmap-arrow-up{
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7.5px 13.0px 7.5px;
    border-color: transparent transparent #ffffff transparent;
    line-height: 0;
    _border-color: #000000 #000000 #ffffff #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    top: -12px;
    position: absolute;
    left: 22px;
}

.kpi{
	background-color:#ff8080!important;
}

 /* Progress bar filling the whole right half for values above 50%  */
 .progress-circle.over30 .first50-bar {
	/* Progress bar for the first 50%, filling the whole right half */
	position: absolute;
	 /* needed for clipping  */
	 clip: rect(0, 7em, 7em,3.5em);
	background-color: rgb(3, 41, 73);

	border-radius: 50%;
	border: 2px dotted #00ffff ; 
	width:7em;
	height: 7em; 
	box-sizing: border-box;
	
  }  
 .progress-circle:not(.over30) 
 .first50-bar{ display: none; }
 
 /* Progress bar rotation position */
 .progress-circle.sm0 .value-bar { transform: rotate(360deg); }
 .progress-circle.sm1 .value-bar { transform: rotate(354deg); }
 .progress-circle.sm2 .value-bar { transform: rotate(348deg); }
 .progress-circle.sm3 .value-bar { transform: rotate(342deg); }
 .progress-circle.sm4 .value-bar { transform: rotate(336deg); }
 .progress-circle.sm5 .value-bar { transform: rotate(330deg); }
 .progress-circle.sm6 .value-bar { transform: rotate(324deg); }
 .progress-circle.sm7 .value-bar { transform: rotate(318deg); }
 .progress-circle.sm8 .value-bar { transform: rotate(312deg); }
 .progress-circle.sm9 .value-bar { transform: rotate(306deg); }
 .progress-circle.sm10 .value-bar { transform: rotate(300deg); }
 .progress-circle.sm11 .value-bar { transform: rotate(294deg); }
 .progress-circle.sm12 .value-bar { transform: rotate(288deg); }
 .progress-circle.sm13 .value-bar { transform: rotate(282deg); }
 .progress-circle.sm14 .value-bar { transform: rotate(276deg); }
 .progress-circle.sm15 .value-bar { transform: rotate(270deg); }
 .progress-circle.sm16 .value-bar { transform: rotate(264deg); }
 .progress-circle.sm17 .value-bar { transform: rotate(258deg); }
 .progress-circle.sm18 .value-bar { transform: rotate(252deg); }
 .progress-circle.sm19 .value-bar { transform: rotate(246deg); }
 .progress-circle.sm20 .value-bar { transform: rotate(240deg); }
 .progress-circle.sm21 .value-bar { transform: rotate(234deg); }
 .progress-circle.sm22 .value-bar { transform: rotate(228deg); }
 .progress-circle.sm23 .value-bar { transform: rotate(222deg); }
 .progress-circle.sm24 .value-bar { transform: rotate(216deg); }
 .progress-circle.sm25 .value-bar { transform: rotate(210deg); }
 .progress-circle.sm26 .value-bar { transform: rotate(204deg); }
 .progress-circle.sm27 .value-bar { transform: rotate(198deg); }
 .progress-circle.sm28 .value-bar { transform: rotate(192deg); }
 .progress-circle.sm29 .value-bar { transform: rotate(186deg); }
 .progress-circle.sm30 .value-bar { transform: rotate(180deg); }
 .progress-circle.sm31 .value-bar { transform: rotate(174deg); }
 .progress-circle.sm32 .value-bar { transform: rotate(168deg); }
 .progress-circle.sm33 .value-bar { transform: rotate(162deg); }
 .progress-circle.sm34 .value-bar { transform: rotate(156deg); }
 .progress-circle.sm35 .value-bar { transform: rotate(150deg); }
 .progress-circle.sm36 .value-bar { transform: rotate(144deg); }
 .progress-circle.sm37 .value-bar { transform: rotate(138deg); }
 .progress-circle.sm38 .value-bar { transform: rotate(132deg); }
 .progress-circle.sm39 .value-bar { transform: rotate(126deg); }
 .progress-circle.sm40 .value-bar { transform: rotate(120deg); }
 .progress-circle.sm41 .value-bar { transform: rotate(114deg); }
 .progress-circle.sm42 .value-bar { transform: rotate(108deg); }
 .progress-circle.sm43 .value-bar { transform: rotate(102deg); }
 .progress-circle.sm44 .value-bar { transform: rotate(96deg); }
 .progress-circle.sm45 .value-bar { transform: rotate(90deg); }
 .progress-circle.sm46 .value-bar { transform: rotate(84deg); }
 .progress-circle.sm47 .value-bar { transform: rotate(78deg); }
 .progress-circle.sm48 .value-bar { transform: rotate(72deg); }
 .progress-circle.sm49 .value-bar { transform: rotate(66deg); }
 .progress-circle.sm50 .value-bar { transform: rotate(60deg); }
 .progress-circle.sm51 .value-bar { transform: rotate(54deg); }
 .progress-circle.sm52 .value-bar { transform: rotate(48deg); }
 .progress-circle.sm53 .value-bar { transform: rotate(42deg); }
 .progress-circle.sm54 .value-bar { transform: rotate(36deg); }
 .progress-circle.sm55 .value-bar { transform: rotate(30deg); }
 .progress-circle.sm56 .value-bar { transform: rotate(24deg); }
 .progress-circle.sm57 .value-bar { transform: rotate(18deg); }
 .progress-circle.sm58 .value-bar { transform: rotate(12deg); }
 .progress-circle.sm59 .value-bar { transform: rotate(6deg); }
 .progress-circle.sm60 .value-bar { transform: rotate(0deg); }
 

 
 
 .progress-circle.h0 .value-bar { transform: rotate(360deg); }
 .progress-circle.h1 .value-bar { transform: rotate(345deg); }
 .progress-circle.h2 .value-bar { transform: rotate(330deg); }
 .progress-circle.h3 .value-bar { transform: rotate(315deg); }
 .progress-circle.h4 .value-bar { transform: rotate(300deg); }
 .progress-circle.h5 .value-bar { transform: rotate(285deg); }
 .progress-circle.h6 .value-bar { transform: rotate(270deg); }
 .progress-circle.h7 .value-bar { transform: rotate(255deg); }
 .progress-circle.h8 .value-bar { transform: rotate(240deg); }
 .progress-circle.h9 .value-bar { transform: rotate(225deg); }
 .progress-circle.h10 .value-bar { transform: rotate(210deg); }
 .progress-circle.h11 .value-bar { transform: rotate(195deg); }
 .progress-circle.h12 .value-bar { transform: rotate(180deg); }
 .progress-circle.h13 .value-bar { transform: rotate(165deg); }
 .progress-circle.h14 .value-bar { transform: rotate(150deg); }
 .progress-circle.h15 .value-bar { transform: rotate(135deg); }
 .progress-circle.h16 .value-bar { transform: rotate(120deg); }
 .progress-circle.h17 .value-bar { transform: rotate(105deg); }
 .progress-circle.h18 .value-bar { transform: rotate(90deg); }
 .progress-circle.h19 .value-bar { transform: rotate(75deg); }
 .progress-circle.h20 .value-bar { transform: rotate(60deg); }
 .progress-circle.h21 .value-bar { transform: rotate(45deg); }
 .progress-circle.h22 .value-bar { transform: rotate(30deg); }
 .progress-circle.h23 .value-bar { transform: rotate(15deg); }
 .progress-circle.h24 .value-bar { transform: rotate(0deg); }

 .progress-circle.d0 .value-bar { transform: rotate(360deg); }
.progress-circle.d1 .value-bar { transform: rotate(355deg); }
.progress-circle.d2 .value-bar { transform: rotate(350deg); }
.progress-circle.d3 .value-bar { transform: rotate(345deg); }
.progress-circle.d4 .value-bar { transform: rotate(340deg); }
.progress-circle.d5 .value-bar { transform: rotate(335deg); }
.progress-circle.d6 .value-bar { transform: rotate(330deg); }
.progress-circle.d7 .value-bar { transform: rotate(325deg); }
.progress-circle.d8 .value-bar { transform: rotate(320deg); }
.progress-circle.d9 .value-bar { transform: rotate(315deg); }
.progress-circle.d10 .value-bar { transform: rotate(310deg); }
.progress-circle.d11 .value-bar { transform: rotate(305deg); }
.progress-circle.d12 .value-bar { transform: rotate(300deg); }
.progress-circle.d13 .value-bar { transform: rotate(295deg); }
.progress-circle.d14 .value-bar { transform: rotate(290deg); }
.progress-circle.d15 .value-bar { transform: rotate(285deg); }
.progress-circle.d16 .value-bar { transform: rotate(284deg); }
.progress-circle.d17 .value-bar { transform: rotate(283deg); }
.progress-circle.d18 .value-bar { transform: rotate(282deg); }
.progress-circle.d19 .value-bar { transform: rotate(281deg); }
.progress-circle.d20 .value-bar { transform: rotate(280deg); }

.progress-circle.d21 .value-bar { transform: rotate(279deg); }
.progress-circle.d22 .value-bar { transform: rotate(278deg); }
.progress-circle.d23 .value-bar { transform: rotate(277deg); }
.progress-circle.d24 .value-bar { transform: rotate(276deg); }
.progress-circle.d25 .value-bar { transform: rotate(275deg); }
.progress-circle.d26 .value-bar { transform: rotate(274deg); }
.progress-circle.d27 .value-bar { transform: rotate(273deg); }
.progress-circle.d28 .value-bar { transform: rotate(272deg); }
.progress-circle.d29 .value-bar { transform: rotate(271deg); }
.progress-circle.d30 .value-bar { transform: rotate(270deg); }
.progress-circle.d31 .value-bar { transform: rotate(269deg); }
.progress-circle.d32 .value-bar { transform: rotate(268deg); }
.progress-circle.d33 .value-bar { transform: rotate(267deg); }
.progress-circle.d34 .value-bar { transform: rotate(266deg); }
.progress-circle.d35 .value-bar { transform: rotate(265deg); }
.progress-circle.d36 .value-bar { transform: rotate(264deg); }
.progress-circle.d37 .value-bar { transform: rotate(263deg); }
.progress-circle.d38 .value-bar { transform: rotate(262deg); }
.progress-circle.d39 .value-bar { transform: rotate(261deg); }
.progress-circle.d40 .value-bar { transform: rotate(260deg); }

.progress-circle.d41 .value-bar { transform: rotate(259deg); }
.progress-circle.d42 .value-bar { transform: rotate(258deg); }
.progress-circle.d43 .value-bar { transform: rotate(257deg); }
.progress-circle.d44 .value-bar { transform: rotate(256deg); }
.progress-circle.d45 .value-bar { transform: rotate(255deg); }
.progress-circle.d46 .value-bar { transform: rotate(254deg); }
.progress-circle.d47 .value-bar { transform: rotate(253deg); }
.progress-circle.d48 .value-bar { transform: rotate(252deg); }
.progress-circle.d49 .value-bar { transform: rotate(251deg); }
.progress-circle.d50 .value-bar { transform: rotate(250deg); }
.progress-circle.d51 .value-bar { transform: rotate(249deg); }
.progress-circle.d52 .value-bar { transform: rotate(248deg); }
.progress-circle.d53 .value-bar { transform: rotate(247deg); }
.progress-circle.d54 .value-bar { transform: rotate(246deg); }
.progress-circle.d55 .value-bar { transform: rotate(245deg); }
.progress-circle.d56 .value-bar { transform: rotate(244deg); }
.progress-circle.d57 .value-bar { transform: rotate(243deg); }
.progress-circle.d58 .value-bar { transform: rotate(242deg); }
.progress-circle.d59 .value-bar { transform: rotate(241deg); }
.progress-circle.d60 .value-bar { transform: rotate(241deg); }


.progress-circle.d61 .value-bar { transform: rotate(240deg); }
.progress-circle.d62 .value-bar { transform: rotate(238deg); }
.progress-circle.d63 .value-bar { transform: rotate(236deg); }
.progress-circle.d64 .value-bar { transform: rotate(234deg); }
.progress-circle.d65 .value-bar { transform: rotate(232deg); }
.progress-circle.d66 .value-bar { transform: rotate(230deg); }
.progress-circle.d67 .value-bar { transform: rotate(228deg); }
.progress-circle.d68 .value-bar { transform: rotate(226deg); }
.progress-circle.d69 .value-bar { transform: rotate(224deg); }
.progress-circle.d70 .value-bar { transform: rotate(222deg); }
.progress-circle.d71 .value-bar { transform: rotate(220deg); }
.progress-circle.d72 .value-bar { transform: rotate(218deg); }
.progress-circle.d73 .value-bar { transform: rotate(216deg); }
.progress-circle.d74 .value-bar { transform: rotate(214deg); }
.progress-circle.d75 .value-bar { transform: rotate(212deg); }
.progress-circle.d76 .value-bar { transform: rotate(210deg); }
.progress-circle.d77 .value-bar { transform: rotate(208deg); }
.progress-circle.d78 .value-bar { transform: rotate(206deg); }
.progress-circle.d79 .value-bar { transform: rotate(204deg); }
.progress-circle.d80 .value-bar { transform: rotate(202deg); }


.progress-circle.d81 .value-bar { transform: rotate(198deg); }
.progress-circle.d82 .value-bar { transform: rotate(196deg); }
.progress-circle.d83 .value-bar { transform: rotate(194deg); }
.progress-circle.d84 .value-bar { transform: rotate(192deg); }
.progress-circle.d85 .value-bar { transform: rotate(190deg); }
.progress-circle.d86 .value-bar { transform: rotate(188deg); }
.progress-circle.d87 .value-bar { transform: rotate(186deg); }
.progress-circle.d88 .value-bar { transform: rotate(184deg); }
.progress-circle.d89 .value-bar { transform: rotate(182deg); }
.progress-circle.d90 .value-bar { transform: rotate(180deg); }
.progress-circle.d91 .value-bar { transform: rotate(178deg); }
.progress-circle.d92 .value-bar { transform: rotate(176deg); }
.progress-circle.d93 .value-bar { transform: rotate(174deg); }
.progress-circle.d94 .value-bar { transform: rotate(172deg); }
.progress-circle.d95 .value-bar { transform: rotate(170deg); }
.progress-circle.d96 .value-bar { transform: rotate(168deg); }
.progress-circle.d97 .value-bar { transform: rotate(166deg); }
.progress-circle.d98 .value-bar { transform: rotate(164deg); }
.progress-circle.d99 .value-bar { transform: rotate(162deg); }
.progress-circle.d100 .value-bar { transform: rotate(160deg); }

.progress-circle.d101 .value-bar { transform: rotate(160deg); }
.progress-circle.d102 .value-bar { transform: rotate(158deg); }
.progress-circle.d103 .value-bar { transform: rotate(156deg); }
.progress-circle.d104 .value-bar { transform: rotate(154deg); }
.progress-circle.d105 .value-bar { transform: rotate(152deg); }
.progress-circle.d106 .value-bar { transform: rotate(150deg); }
.progress-circle.d107 .value-bar { transform: rotate(148deg); }
.progress-circle.d108 .value-bar { transform: rotate(146deg); }
.progress-circle.d109 .value-bar { transform: rotate(144deg); }
.progress-circle.d110 .value-bar { transform: rotate(142deg); }
.progress-circle.d111 .value-bar { transform: rotate(140deg); }
.progress-circle.d112 .value-bar { transform: rotate(138deg); }
.progress-circle.d113 .value-bar { transform: rotate(136deg); }
.progress-circle.d114 .value-bar { transform: rotate(134deg); }
.progress-circle.d115 .value-bar { transform: rotate(132deg); }
.progress-circle.d116 .value-bar { transform: rotate(130deg); }
.progress-circle.d117 .value-bar { transform: rotate(128deg); }
.progress-circle.d118 .value-bar { transform: rotate(126deg); }
.progress-circle.d119 .value-bar { transform: rotate(124deg); }
.progress-circle.d120 .value-bar { transform: rotate(122deg); }

.progress-circle.d121 .value-bar { transform: rotate(120deg); }
.progress-circle.d122 .value-bar { transform: rotate(118deg); }
.progress-circle.d123 .value-bar { transform: rotate(116deg); }
.progress-circle.d124 .value-bar { transform: rotate(114deg); }
.progress-circle.d125 .value-bar { transform: rotate(112deg); }
.progress-circle.d126 .value-bar { transform: rotate(110deg); }
.progress-circle.d127 .value-bar { transform: rotate(108deg); }
.progress-circle.d128 .value-bar { transform: rotate(106deg); }
.progress-circle.d129 .value-bar { transform: rotate(104deg); }
.progress-circle.d130 .value-bar { transform: rotate(102deg); }
.progress-circle.d131 .value-bar { transform: rotate(100deg); }
.progress-circle.d132 .value-bar { transform: rotate(98deg); }
.progress-circle.d133 .value-bar { transform: rotate(96deg); }
.progress-circle.d134 .value-bar { transform: rotate(94deg); }
.progress-circle.d135 .value-bar { transform: rotate(92deg); }
.progress-circle.d136 .value-bar { transform: rotate(90deg); }
.progress-circle.d137 .value-bar { transform: rotate(88deg); }
.progress-circle.d138 .value-bar { transform: rotate(86deg); }
.progress-circle.d139 .value-bar { transform: rotate(84deg); }
.progress-circle.d140 .value-bar { transform: rotate(82deg); }

.progress-circle.d141 .value-bar { transform: rotate(80deg); }
.progress-circle.d142 .value-bar { transform: rotate(78deg); }
.progress-circle.d143 .value-bar { transform: rotate(76deg); }
.progress-circle.d144 .value-bar { transform: rotate(74deg); }
.progress-circle.d145 .value-bar { transform: rotate(72deg); }
.progress-circle.d146 .value-bar { transform: rotate(70deg); }
.progress-circle.d147 .value-bar { transform: rotate(68deg); }
.progress-circle.d148 .value-bar { transform: rotate(66deg); }
.progress-circle.d149 .value-bar { transform: rotate(64deg); }
.progress-circle.d150 .value-bar { transform: rotate(62deg); }
.progress-circle.d151 .value-bar { transform: rotate(60deg); }
.progress-circle.d152 .value-bar { transform: rotate(58deg); }
.progress-circle.d153 .value-bar { transform: rotate(56deg); }
.progress-circle.d154 .value-bar { transform: rotate(54deg); }
.progress-circle.d155 .value-bar { transform: rotate(52deg); }
.progress-circle.d156 .value-bar { transform: rotate(50deg); }
.progress-circle.d157 .value-bar { transform: rotate(48deg); }
.progress-circle.d158 .value-bar { transform: rotate(46deg); }
.progress-circle.d159 .value-bar { transform: rotate(44deg); }
.progress-circle.d160 .value-bar { transform: rotate(42deg); }

.progress-circle.d161 .value-bar { transform: rotate(40deg); }
.progress-circle.d162 .value-bar { transform: rotate(38deg); }
.progress-circle.d163 .value-bar { transform: rotate(36deg); }
.progress-circle.d164 .value-bar { transform: rotate(34deg); }
.progress-circle.d165 .value-bar { transform: rotate(32deg); }
.progress-circle.d166 .value-bar { transform: rotate(30deg); }
.progress-circle.d167 .value-bar { transform: rotate(28deg); }
.progress-circle.d168 .value-bar { transform: rotate(26deg); }
.progress-circle.d169 .value-bar { transform: rotate(24deg); }
.progress-circle.d170 .value-bar { transform: rotate(22deg); }
.progress-circle.d171 .value-bar { transform: rotate(20deg); }
.progress-circle.d172 .value-bar { transform: rotate(18deg); }
.progress-circle.d173 .value-bar { transform: rotate(16deg); }
.progress-circle.d174 .value-bar { transform: rotate(14deg); }
.progress-circle.d175 .value-bar { transform: rotate(12deg); }
.progress-circle.d176 .value-bar { transform: rotate(10deg); }
.progress-circle.d177 .value-bar { transform: rotate(8deg); }
.progress-circle.d178 .value-bar { transform: rotate(6deg); }
.progress-circle.d179 .value-bar { transform: rotate(4deg); }
.progress-circle.d180 .value-bar { transform: rotate(2deg); }


/*trying to update pdf export  */
#pdf_export_button{
	height: 35px;
	width: 46px;
	padding: 0 3px;
	color: black;
	background-color: buttonface !important;
	border: 1px black solid;
}