/* ============================================================================
   TheG_dropdown
=============================================================================*/

[type="TheG_dropdown"] ul {
	padding   : 5px 10px 10px 10px;
	margin    : 0px;
	display   : block;
	box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
	border    : 1px solid gray;
}


[type="TheG_dropdown"] li {
	padding: 0px;
	margin: 0px;
	display: block;
	white-space: nowrap;
}

[type="TheG_dropdown"] [role="sep"] {
	padding-top: 5px;
	padding-bottom: 5px;
}

[type="TheG_rid_fld"] [role="fld_display_name"] {
    white-space: nowrap;
	overflow: hidden;
}

[type="TheG_rid_input"] *,
[type="TheG_rid_input"] .form-control[readonly] {
	font-family: Arial;
	font-weight: bold;
}


[role="TheG_rid"] table>tbody>tr>th {
	padding: 8px;
} 

[role="TheG_rid"] [role="grid_toolbar"] {
	background-color: #e5ecf8;
} 

[role="TheG_rid"] table>tbody>tr {
	background-color: #d0d0e0;
} 

[role="TheG_rid"] table>tbody>tr.current{
	background-color: white;
}
 
[role="TheG_rid"] input[type="image"]{
	border: 1px solid black;
} 

[role="TheG_rid"] table>tbody>tr>td {
	padding: 0px;
	border: 1px;
}

[role="TheG_rid"] th {
	color: white;
	background-color: #337ab7;
}

[role="TheG_rid"] .col_row_num {
	padding-left: 5px;
	padding-right: 5px;
	min-width: 49px;
    color: white;
	background-color: #337ab7;
}

[role="TheG_rid"] .current .col_row_num {
	padding-left: 5px;
	padding-right: 5px;
	min-width: 49px;
    color: black;
	background-color: lightyellow;
}

[role="TheG_rid"] [role="TheG_rid_footer"] [type="TheG_rid_input"] .form-control {
	font-style: italic;
	//font-weight: bold;
	background-color: yellow;
}

[role="TheG_rid"] .current .form-control {
	background-color: rgba(255,255,255);
}


[type="TheG_rid_fld"] {
	padding: 2px;
}

[role="grid_ph"] {
	overflow-x: auto;
}

[type="TheG_rid_fld"] [role="fld_display_name"] {
	padding: 2px 2px 2px 2px;	
}

.menu_anchore {
	cursor: pointer;
}

.sort_asc:before {
	content: "▲ ";
	color: yellow;
}

.sort_desc:before {
	content: "▼ ";
	color: yellow;
}

[role="TheG_rid"] th {
    white-space: nowrap;
}

.field_ltr {
	direction: ltr;
}

[dir="rtl"] .field_ltr {
	text-align: right;
}

/* ============================================================================
   TheG_filepreview (not yet completed) TODO: complete
=============================================================================*/

[role="filepage_header"] {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: black;
	color: white;
}

[role="files_preview"] {
	height: 800px;
	background-color: gray;
	margin-top: 10px;
	margin-bottom: 10px;
	cursor: hand;
	overflow: scroll
}

[role="files_preview"] img.fit {
	width: 100%;
}


[button_type="download_file"] {
	width: 26px;
	height: 26px;
	background: white;
}

[button_type="download_file"]:hover {
	background: yellow;
}

.single_file_preview {
	margin-bottom: 20px;
	margin-left:   10px;
	margin-right:  10px;
	-webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.75);
}

[type="TheG_rid_flds_group"] {
	padding-bottom: 25px;
}

[type="TheG_rid_flds_group"] [role="group_title"]{
	background: yellow;
	padding: 5px;
	border-radius: 0px 10px 0px 0px;
	background: linear-gradient(to left, rgba(173, 216, 230, 0.43), rgba(0,0,0,0));	
	color: rgb(3, 29, 2);	
}

/* ============================================================================
   Global Elements Styles
=============================================================================*/
.big_letters{
		font-size: 150%;
}
* {
	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
}

body {
	padding: 0px;
	margin:  0px;
}

header {
    background-color :lightblue;
    color            :white;
    text-align       :center;
    padding          :2px;
	line-height      :10px;
}

table {
	border-collapse: collapse; 
	border-spacing: 0; 
}

td {
	white-space: wrap;
}


caption  {
	font-size: larger; 
	margin: 1em auto; 
}

th, td {
	padding: .25em;
}

table.diff_odd th, table.diff_odd td  {
	padding: .75em;
}

body[dir="rtl"] th {
	text-align: right;
}

th {
	background: linear-gradient(#ccc,##777);
	color: #fff;
}

.counter {
	background: linear-gradient(#ccc,##777);
	color:green;
}


table.diff_odd tr:nth-child(odd) {
	background: #ccc;
}

footer {
	margin:  0px;
	padding: 0px;
	background-color: red;
	position: fixed;
	bottom:  0px;
	width: 100%;
}

.footer_spacer {
	margin:  0px;
	padding: 0px;
	height: 20px;
}


/* ============================================================================
   JQUERY UI manipulations
=============================================================================*/

.ui-datepicker-calendar th{
	color:#F7AF39;
}  

.ui-sortable-helper {
	font-size: 1.2em;
	font-weight: bold;
}

.ui-draggable-dragging {
	padding: 2px 5px 2px 5px;
	border-radius: 5px;
	font-size: 1.2em;
	font-weight: bold;
	background-color: rgba(255,255,255,0.7);
}
  
.ui-datepicker-calendar th{
	color:#F7AF39;
}  

.ui-datepicker .ui-datepicker-title {
	color: initial;
}
 
.ui-menu{		
		height:300px;
		overflow-y: scroll;
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 2em;
    position: relative;
}

.ui-dialog .ui-dialog-title {
	float: none;
}

body[dir="rtl"] .ui-tabs .ui-tabs-nav li {
	float: right;
}

.ui-tabs .ui-tabs-panel {
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 10px;
	padding-bottom: 5px;
}

/* ============================================================================
   Handy styles
=============================================================================*/

.dont_show {
	display: none;
}

.nowrap {
    white-space: nowrap;
}

.underline {
    text-decoration: underline;
}

.unbulleted_list{
     list-style-type: none;
     padding: 0px;
     margin: 0px;
}

.hazard{
	background-color: red;
	color           : white;
}

/* ============================================================================
   Login Form
=============================================================================*/

.login{
    height:30px;
	width : 150px; 
    font-size:16pt;    
}
 
.login_form  tr{
	vertical-align: middle;
}
 	
/* ============================================================================
   Ajax Loading
=============================================================================*/

.loading {
	position  : fixed;
	top       : 0px;
	left      : 0px;
	width     : 100%;
	height    : 100%;
	background: rgba(127,127,127,0.1);
}

.loading_icon {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	background: radial-gradient(rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 60%);
	border-radius: 5px;
	text-align: center;
	line-height: 100px;
	margin-top: -50px;
	margin-left: -50px;
}

.loading IMG {
	vertical-align: middle;
}


/* ============================================================================
   Global Elements Styles
=============================================================================*/

#theg_wapp_topsection {
	background-color: black;
	color:            white;
	height:           37px;
	border-bottom:    1px solid white;
	padding-left:     5px;
	padding-right:    5px;
	padding-top:      7px;
	padding-bottom:   3px;
	font-size:        12px;
    position:         fixed;
    top:              0px;
    width:            100%;
    z-index:          99999;	
}

#content_section {
	margin-top: 40px;
}

#theg_wapp_topsection a {
	color:            white;
	text-decoration:  None;
	font-size:        12px;
}

#theg_wapp_topsection a:hover {
	color:            white;
	text-decoration:  underline;
	font-weight:      bold;
}

#theg_wapp_topsection .user_section {
	display: inline-block;
}

#theg_wapp_topsection .apps_section {
	background-image: url('/images/apps_icon.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 16px;
	width: 16px;
	display: inline-block;
	margin-bottom: -3px;
	filter: grayscale(100%);
}

#theg_wapp_topsection .apps_section:hover {
	filter: None;
}

#theg_wapp_topsection .apps_section:focus {
	filter: None;
}

#theg_wapp_topsection [type="TheG_dropdown"] * {
	background-color: black;
}

#theg_wapp_topsection [type="TheG_dropdown"] [role="sep"] {
	color: lightgray;
}

#content_section {
	min-height: 400px;
}


footer, .footer_spacer {
	color: gray;
	font-size: 16px;
	text-align: center;
	height: 20px;
}

footer {
	background-color: black;
}
@media print {
    #theg_wapp_topsection {
		display: None;
    }
	
	#content_section {
		margin-top: initial;
	}
	
	footer {
		display: None;
	}
	
	.footer_spacer {
		display: None;
	}
}