﻿
.sys_grid_collection td
{
	border-left:  1px solid grey;	
	border-bottom:1px solid grey;	
	padding:3px;
}
.sys_grid_collection tr td:first-child
{
	border-left:  0px solid grey;
}
.sys_grid_collection tr:first-child td
{
	border-left:  0px solid grey;	
	border-bottom:0px solid grey;	
}
.sys_grid_collection tr td:nth-child(2)
{
}
.sys_grid_collection tr:last-child td
{
	border-bottom:0px solid grey;	
}
.sys_grid_collection tr:nth-last-child(2) td
{
}

SELECT
{
    FONT-SIZE: 12px;
    COLOR: #336699
}
INPUT
{
    FONT-SIZE: 12px;
    COLOR: royalblue
}
INPUT::selection 
{
  background: yellow;
}

TEXTAREA
{
    FONT-SIZE: 12px;
    COLOR: royalblue;
    FONT-FAMILY: Arial
}
A
{
    COLOR: #2d4155;
    TEXT-DECORATION: none
}
.detail_table
{
    BORDER-RIGHT: lightslategray;
    BORDER-TOP: lightslategray;
    FONT-SIZE: 12px;
    BORDER-LEFT: lightslategray;
    BORDER-BOTTOM: lightslategray;
    FONT-FAMILY: Arial
}
.list_table
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-SIZE: 11px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px;
    FONT-FAMILY: Arial
}
.list_row
{
    BORDER-RIGHT: lightslategray 1px solid;
    BORDER-TOP: medium none;
    MARGIN: 0px;
    BORDER-LEFT: medium none;
    BORDER-BOTTOM: lightslategray 1px solid
}
.detail_row_name
{
    BORDER-RIGHT: lightslategray 1px solid;
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 5px;
    MARGIN: 20px;
    TEXT-TRANSFORM: capitalize;
    COLOR: #607080;
    PADDING-TOP: 5px;
    BORDER-BOTTOM: cornflowerblue 1px solid;
    FONT-VARIANT: normal
}
.detail_row_value
{
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 5px;
    MARGIN: 20px;
    COLOR: royalblue;
    PADDING-TOP: 5px;
    BORDER-BOTTOM: cornflowerblue 1px solid
}
.stat_row_name
{
    BORDER-RIGHT: lightslategray 1px solid;
    BORDER-TOP: cornflowerblue;
    BORDER-LEFT: cornflowerblue;
    COLOR: royalblue;
    BORDER-BOTTOM: cornflowerblue 1px solid;
    TEXT-ALIGN: center;
    FONT-VARIANT: small-caps
}
.stat_row_value
{
    BORDER-RIGHT: lightslategray 1px solid;
    BORDER-TOP: cornflowerblue 1px;
    BORDER-LEFT: cornflowerblue 1px;
    COLOR: #505f96;
    BORDER-BOTTOM: cornflowerblue 1px solid
}
.stat_table
{
    BORDER-RIGHT: black thin;
    BORDER-TOP: black thin;
    FONT-SIZE: 11px;
    BORDER-LEFT: black thin;
    COLOR: black;
    BORDER-BOTTOM: black thin;
    FONT-FAMILY: Arial
}
A:hover
{
    COLOR: dodgerblue;
    TEXT-DECORATION: underline
}
.list_row_susp
{
    BORDER-RIGHT: lightslategray 1px;
    MARGIN: 0px;
    BORDER-BOTTOM: lightslategray 1px solid;
    BACKGROUND-COLOR: #ffff99
}
.field_value_link
{
    FONT-WEIGHT: bold;
    COLOR: #0066ff
}
.field_value
{
    FONT-WEIGHT: bold;
    COLOR: #0066ff
}
.field_disabled
{
    COLOR: #c0c0c0
}
.list_head
{
    BORDER-RIGHT: lightslategray 1px solid;
    BORDER-TOP: medium none;
    FONT-WEIGHT: bold;
    MARGIN: 0px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: medium none;
    COLOR: #0066cc;
    BORDER-BOTTOM: lightslategray 1px solid;
}
.list_row_0
{
    BORDER-RIGHT: lightslategray 1px solid;
    BORDER-TOP: 1px;
    MARGIN: 0px;
    BORDER-LEFT: 1px;
    BORDER-BOTTOM: lightslategray 1px solid;
    BACKGROUND-COLOR: #F7F9FF
}

.list_row_1
{
    BORDER-RIGHT: lightslategray 1px solid;
    BORDER-TOP: lightslategray;
    MARGIN: 0px;
    BORDER-LEFT: lightslategray;
    BORDER-BOTTOM: lightslategray 1px solid
}

.list_row_button
{
    BORDER: lightslategray 0px solid;
    MARGIN: 0px;
    background-color: white;
}



.sys_search_grid_button_filter
{
	position:relative;
	float:left;
	width:120px;
	padding-left:5px;
	padding-bottom:4px;
	border-left:1px dotted #abd;
	border-bottom:1px solid #abd;
}

.sys_search_grid_button_icon
{
	width:auto;
	text-align:center;
	border-right:1px #0055FF solid;
}

.sys_search_grid_button_link 
{
	padding-left:5px;
	padding-right:5px;
	border-left:1px dotted grey;
}


        .sys-frame
		{
		  position: relative;
          padding:5px;
		  margin:3px;
		  
		  background-color: #FFFFFF;
		  
		  box-shadow:  0px 0px 5px 1px #889;
		  
		  border-style: outset ;
          border-top:   0px #CCD solid;
		  border-right: 1px #CCD solid;
		  border-left:  1px #CCD solid;
		  border-bottom:1px #CCD solid;
		  
		  border-radius:5px;
		}
		
		.sys-select
		{
		  width: 160px;
		}
		

		.sys-tabs-container
		{
          background-color: #99CCFF;
          border: 1px solid #98C0F0;
          padding-top:    10px;
          padding-bottom: 10px;
          padding-left:   10px;
          padding-right:  10px;
          width:  calc(100% -5px);
          min-height: 100px;
          height: auto;
		  box-shadow:  inset 0px 0px 3px 0px #889;
  		  border-radius:3px;

		  align-items: center;
		}
		
		.sys-tabs-frame-cyan
		{
          background-color: #99CCFF;
          border: 1px solid #98C0F0;
          padding-top:    10px;
          padding-bottom: 10px;
          padding-left:   10px;
          padding-right:  10px;
          width:  calc(100% -5px);
          min-height: 100px;
          height: auto;

		  align-items: center;
		}

		.sys-tabs-frame
		{
          background-color: #9AC2E6;
          border: 1px solid #98C0F0;
          padding-top:    10px;
          padding-bottom: 10px;
          padding-left:   10px;
          padding-right:  10px;
          width:  calc(100% -5px);
          min-height: 100px;
          height: auto;

		  align-items: center;
		}

        .sys-tabs-caption-label
		{
		  font-weight: bold;
		  font-family: verdana;
		  font-size: 16px;
          color: white;
          text-shadow: 0px 0px 2px #224;
		}
        .sys-tabs-caption
		{
		  position: relative;
		  width: 100%;
          height: auto;
          border: 0px solid red;
		  text-align:center;
          margin-top: -5px;
          padding-bottom: 5px;
		}

		
		.sys-tabs-headers
		{
          border: 0px solid green;
          width: 100% -16px;
		  padding-left:  13px;
          padding-right: 3px;

          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: stretch; 
          align-content: center;
  
        }
        .sys-tab-header
		{
		  position: relative;
          min-width:  30px ;
          min-height: 20px ;
          margin-right: 10px;
 		  padding-left:  5px;
          padding-right: 5px;
          padding-top:   5px;
          padding-bottom:10px;
          flex-grow:1;
          flex-shrink: 1;
 
		  display:     flex;
          align-items: top;
		  text-align:  center;
		  justify-content: center;
        
		  font-family:verdana;
		  font-size:  11px;
		  background-color: #FFFFFF;
		  border-top:   2px #CCD solid;
		  border-right: 2px #EEF solid;
		  border-left:  1px #AAB solid;
		  border-bottom:0px #CCD solid;
		  border-radius:7px 8px 0px 0px;
		  border-style: outset ;
		  box-shadow:  -2px -3px 3px -1px #777;
		  
        }
        .sys-tabs-body
		{
		  position: relative;
		  top: 0px;
		  background-color: #FFFFFF;
          padding:5px;
		  box-shadow:  0px 0px 5px 1px #445;
		  border-style:outset ;
          border-top:   0px #CCD solid;
		  border-right: 1px #CCD solid;
		  border-left:  1px #CCD solid;
		  border-bottom:1px #CCD solid;
		  border-radius:5px;
		}
        .sys-tabs-selected
		{
		  position: relative;
		  top:0px;
		  z-index:10;
		  font-weight:bold;
		  color:black;
		}
        .sys-tabs-unselected
		{
		  position: relative;
		  top:3px;
		  z-index:0;
		  font-weight:normal;
		  color:black;
		}
		
		
        .sys-tabs-baseline
		{
		  position: relative;
		  background-color: #FFFFFF;
          width: 100%;
          height: 7px;
		  box-shadow:  1px -3px 3px 0px grey;
		}
		.sys-tabs-box
		{
		  background-color: #fff;
		  position: relative;
          padding:13px;
		  text-align: center;
		  height: auto;
          width: 100% -4px;
		  border:2px #CCD solid;
		  border-radius:0px;
		  border-style:outset ;
		  box-shadow:  1px 0px 5px grey;
		}

		.sys-grid-field-name_OLD
		{
		  color:#aab;
		  font-size:12px;
		  font-weight:bold;
		}
		.sys-grid-field-name
		{
		  color:#445;
		  font-size:12px;
		  font-weight:bold;
		}

		.sys-grid-field-surname_OLD
		{
		  color:#59F;
		  font-size:14px;
		  font-weight:bold;
		}
		.sys-grid-field-surname
		{
		  color:#36D;
		  font-size:14px;
		  font-weight:bold;
		}

		
		.sys-grid-field-organization
		{
		  color:#287233;
		  font-size:13px;
		  font-weight:bold;
		}

		.sys-grid-field-label
		{
		  color:#36F;
		  font-size:13px;
		  font-weight:bold;
		}

		.sys-grid-field-title
		{
		  color:#123;
		  font-size:12px;
		  font-style:italic;
		}

		.sys-grid-field-undef
		{
		  color:#E12;
		  font-size:12px;
		  font-weight:bold;
		}
		
.sys_button_arrow
{
	position: relative;
	
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 10px 10px 10px 0;
	border: 1px solid #6DB;
	
	-webkit-box-shadow: 1px 1px 10px #006400;
	-moz-box-shadow: 1px 1px 10px #006400;
	box-shadow: 1px 1px 5px #007700;
	
	background-color: #4C8;
	padding: 10px;
	
	color: #006400;
	font-family: Arial,Verdana, Geneva, sans-serif;
	font-size: 14pt;
	font-weight: bold;
	text-shadow: 0px 0px 2px #224;
	text-align: center;
	outline: 0px solid #FFFFFF;

	transition: all 0.5s;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;

	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
}

.sys_button_arrow:hover
{
  color:black;
  border-radius: 10px 10px 10px 10px;
  
}

.sys_button_arrow:active {
  transform: translateY(1px);
}

.sys_button_sample {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  margin: 5px;
}

.sys_button_arrow span
{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.sys_button_arrow span:after
{
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.sys_button_arrow:hover span {
  padding-right: 25px;
}

.sys_button_arrow:hover span:after {
  opacity: 1;
  right: 0;
}

.sys_button_arrow:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
.sys_button_arrow:after {
  content: "";
  background: #90EE90;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}
.sys_button_blue:after 
{
  background: #36D;
}

.sys_button_blue
 {
	-webkit-box-shadow: 1px 1px 10px #002255;
	-moz-box-shadow: 1px 1px 10px #002255;
	box-shadow: 1px 1px 5px #003388;
	border: 1px solid #36E;
	background-color: #69E;
	color: #fff;
	outline: 0px solid #FFFFFF;
    padding: 5px;

}
.sys_button_grey
 {
	-webkit-box-shadow: 1px 1px 10px #002255;
	-moz-box-shadow: 1px 1px 10px #002255;
	box-shadow: 1px 1px 5px #005533;
	
	border: 1px solid #cde;
	background-color: #bdc;
	
	color: #fff;
	outline: 0px solid #FFFFFF;
    padding: 5px;
}
.sys_button_red
 {
	-webkit-box-shadow: 1px 1px 10px #552200;
	-moz-box-shadow: 1px 1px 10px #552200;
	box-shadow: 1px 1px 5px #553300;
	border: 1px solid #F71;
	background-color: #D50;
	color: #fff;
	outline: 0px solid #FFFFFF;
    padding: 5px;
}

.sys_button_white
 {
	-webkit-box-shadow: 1px 1px 10px #556 !important;
	-moz-box-shadow: 1px 1px 10px #556 !important;
	box-shadow: 1px 1px 5px #556 !important;
	border: 1px solid #cde;
	background-color: #FFF !important;
	color: #100;
	outline: 0px solid #FFFFFF ;
    padding: 5px;
}




.sys_button_cyan:after 
{
  background: #36D;
}
.sys_button_cyan
 {
	-webkit-box-shadow: 1px 1px 10px #002255;
	-moz-box-shadow: 1px 1px 10px #002255;
	box-shadow: 1px 1px 5px #003388;
	border: 1px solid #8CF;
	background-color: #7BF;
	color: #fff;
	outline: 0px solid #FFFFFF;
    padding: 7px;

}
.sys_button_docking_left
 {
	border-radius: 12px 10px 12px  0;
	float:left;
}

.sys_button_docking_right
 {
	border-radius: 12px 10px  0 12px;
	float:right;
}
		
.sys_input_text_expand_left
{
	width:78px;
	height:17px;
	position: relative;
	border-radius: 2px 2px 2px 2px;
	transition: all 0.5s;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.sys_input_text_expand_left:focus 
{
  z-index: 1000;
  background: #FFFFDD;
  margin-left: -56px!important;
  transition: all 1s;
  
  width:134px;
}

.sys_input_text_expand_left:after 
{
  z-index: 1000;
  background: #FFFFFF;
  margin-left: 0px!important;
  
  width:78px;
}
			.dba_contents_menu
			{
				
				margin-left: 0px;
			}
			.dba_contents_menu_sub
			{
				//border-bottom: 1px #aaa dotted;
				
				margin: 0px;
				padding: 0px;
			}
			.dba_contents_menu td
			{
				//border-bottom: 1px #aaa dotted;
			}
			.dba_contents_submenu td
			{
				font-weight:bold;
				font-size:11px;
				color:#375;
			}
			
			.dba_contents_container
			{
				position:relative;
				width:98%;
				height:82px;
				line-height: 10px;
				padding: 0px;
				paddin-bottom:1px;
				margin-bottom:1px;
				border-bottom:1px dotted #9ac2e6;
				
			}
			
			.dba_contents_container_tree
			{
				position:relative;
				width:100%;
				height:auto;
				paddin-left:2px;
				paddin-bottom:1px;
				margin-bottom:1px;
				border-top: 1px #9ac2e6 solid;
				
			}
			
			.dba_contents_container_subtree
			{
				position:relative;
				width:100%;
				height:auto;
				paddin-left:2px;
				paddin-bottom:1px;
				margin-bottom:1px;
				//border-bottom:1px dotted #9ac2e6;
				
			}
			.dba_contents_container_sub, .dba_contents_container_sub_last
			{
				position:relative;
				width:98%;
				height:78px;
				padding: 0px;
				
				paddin-bottom:1px;
				margin-bottom:1px;
				border-top:1px dotted #ddd;
				
			}
			
			.dba_contents_container_sub
			{
				background-image: url("https://hyperapps.it/res/tree_wire_I.png");
				background-repeat: no-repeat;
				background-position: left bottom;
			}
			
			.dba_contents_buttons_add_form_subgroup
			{
				position:relative;
				float:right;
				z-index:1000;
				margin-right:4px;
			}
			
			.dba_contents_buttons_add_form_group
			{
				position:relative;
				float:right;
				z-index:1000;
				margin-right:12px;
			}
			
			.dba_contents_menu_title
			{
				font-weight:bold;
				font-size:13px;
				color:#357;
			}
			.dba_contents_menu_label,.dba_contents_menu_label_disabled
			{
				position:relative;
				display:block;
				width:auto;
				padding-left:4px;
				margin-bottom:2px;
				font-weight:bold;
				font-size:12px;
			}
			
			.dba_contents_menu_label_min
			{
				position:relative;
				display:block;
				width:auto;
				padding-left:4px;
				margin-bottom:2px;
				font-weight:normal;
				font-size:11px;
				font-style:none;
				text-decoration:none;
				//text-decoration:underline;
				color:#79a;
			}
			.dba_contents_menu_label
			{
				text-decoration:none;
				//text-decoration:underline;
				color:#37D;
			}
			
			.dba_contents_submenu_label
			{
				text-decoration:none;
				//text-decoration:underline;
				color:#379;
				font-weight:bold;
				font-size:11px;
			}
			.dba_contents_menu_label_disabled
			{
				text-decoration:none;
				color:#aaa;
			}
			
			.dba_contents_submenu_label_disabled
			{
				text-decoration:none;
				color:#aaa;
				font-weight:bold;
				font-size:11px;
			}
			.dba_contents_icon_label
			{
				position:relative;
				display:inline;
				float:left;
				z-index:1000;
				//border:1px solid blue;
			}
			.dba_contents_icon
			{
				position:relative;
				display:inline;
				float:right;
				//border:1px solid blue;
			}
			
			.dba_forms_icon_label
			{
				position:relative;
				display:inline;
				float:left;
				//border:1px solid blue;
			}
			.dba_forms_icon
			{
				position:relative;
				display:inline;
				float:right;
				//border:1px solid blue;
			}
			
			.dba_contents_menu_descr
			{
				position:relative;
				display:inline;
				font-weight:normal;
				font-size:9px;
				color:#678;
				//border:1px solid red;
				margin-left:3px;
			}
			.dba_contents_menu_sublabel
			{
				font-weight:bold;
				font-size:11px;
				color:#123;
			}
			.dba_calendar
			{
				text-align:center;
				border-left:  1px #bbb solid;
				border-top: 1px #bbb solid;
				font-size:10px;
			}
			.dba_calendar td
			{
				text-align:center;
				border-right:  1px #bbb solid;
				border-bottom: 1px #bbb solid;
				font-size:10px;
			}
			.dba_calendar_header td
			{
				font-weight:bold;
			}
			.dba_calendar_weekdays td
			{
				font-weight:bold;
			}
			.search_replace_frame
			{
				  padding:3px;
				  height: auto;
				  margin-right:3px;
				  font-family:arial;
				  font-size:11px;
				  border:1px #CCD solid;
				  border-radius:7px;
				  box-shadow:  inset 0 0 5px #445566;
				  background-color: #9AC2E6;
				  text-align: center;
				  justify-content: center;
			
			}
			
			.search_find_cell
			{
				
			}
			.search_replace_cell
			{
				font-weight:bold;
				color:#EE2244;
			}
		 
		    .widget_movable
			{
			}
		 
		 
		 
  .form_title_row 
   {
	  background-color:#7bf; 
	  text-align:center; 
	  color:#fff; 
	  font-weight:bold;
   }

   .form_title_row, .form_title_row_void, .form_title_row_disabled
   {
      background-color:#7bf; 
      text-align:center; 
      color:#fff; 
      font-size:18px; 
	  font-weight:bold;
	  
	  text-shadow: #236 0 0 3px;

	  border-left:2px solid #c6def4;
	  border-top:2px solid #CDF;
	  
	  border-right:2px solid #48A;
	  border-bottom:2px solid #48A;
   }

   .form_title_row_disabled 
   {
      background-color:#ddd; 
   }

   .form_title_row_void 
   {
      background-color:#bef; 
	  border-right:2px solid #5AD;
	  border-bottom:2px solid #5AD;
   }

   .label_readonly 
   {
      text-align:center; 
      color:#25D; 
      font-size:15px; 
	  font-weight:bold;
   }

   .label_readonly_2
   {
      text-align:center; 
      color:#000; 
      font-size:15px; 
	  font-weight:bold;
   }

   .radio_option_sel .radio_label
   {
      font-size:14px; 
	  font-weight:bold;
   }
   
   .radio_option_unsel .radio_label
   {
      color:#000; 
      font-size:14px; 
	  font-weight:normal;
   }
   
   .radio_option_true
   {
      color:#2B5; 
   }
   
   .radio_option_false
   {
      color:#D13; 
   }

   .radio_option_unsel 
   {
      color:#000;
   }
   

   .warningbar 
   {
      color:#fff;
      background-color:#9AC2E6;
	  padding: 3px;
   }
   
  .form_field_label
   {
	color:black;
	font-weight: bold;   
   }
   
   .sys_carved_grey_box 
     {
	   background-color:bcd#;
	   border-left: 1px solid #789;
	   border-top: 1px solid #789;
	   border-right: 1px solid #cde;
	   border-bottom: 1px solid #cde;
   }
   
   
      .ui-datepicker-trigger
	  {
	     width:36px;
		 vertical-align:middle;
		 cursor:pointer;
	  }
	  
	  .sys_date_input_error
	  {
	     outline: 2px dashed red  !important;
	     outline-offset: 2px  !important;
	     font-weight: bold !important;
	     color: #E23 !important;
		 
		 animation-delay: 2s;
	  }
	  
	  
	  .sys_date_ok
	  {
	     outline:1px solid #7A3  !important;
	     border: 1px solid #7A3  !important;
	     outline-offset: 0px  !important;
	     font-weight: bold !important;
	     color: #7A3 !important;
		 
		 animation-delay: 2s;
	  }
	  
	  .sys_date_tip_ok:after
	  {
		background: #7A3 !important;
	  }
	  
	  
	  .ui-tooltip, 
	  .sys_date_tip_error:after,
	  .sys_date_tip_ok:after
	  {
		background: red;
		border: 2px solid white;
	  }
	  
	  .ui-tooltip 
	  {
		padding: 10px 20px;
		color: white;
		border-radius: 20px;
		font: bold 14px "Helvetica Neue", Sans-Serif;
		text-transform: uppercase;
		box-shadow: 0 0 7px black;
	  }
	  
	  .sys_date_tip_error ,
	  .sys_date_tip_ok
	  {
		width: 70px;
		height: 16px;
		overflow: hidden;
		position: absolute;
		left: 50%;
		margin-left: -35px;
		bottom: -16px;
		
		opacity:1 !important;
	  }
	  
	  .sys_tooltip_class
	    { 
			opacity: 1 !important; 
			filter:  alpha(opacity=100) !important; 
	  }
	  
	  .sys_date_tip_error.top,
	  .sys_date_tip_ok.top	  
	  {
		top: -16px;
		bottom: auto;
	  }
	  
	  .sys_date_tip_error.left,
	  .sys_date_tip_ok.left
	  {
		left: 20%;
	  }
	  
	  .sys_date_tip_error:after,
	  .sys_date_tip_ok:after
	  {
		content: "";
		position: absolute;
		left: 20px;
		top: -20px;
		width: 25px;
		height: 25px;
		box-shadow: 6px 5px 9px -9px black;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	  }
	  
	  .sys_date_tip_error.top:after ,
	  .sys_date_tip_ok.top:after 
	  {
		bottom: -20px;
		top: auto;
	  }
	  
	  
     .ui-datepicker-trigger
	  {
	     width:36px !important;
		 vertical-align:middle !important;
		 cursor:pointer !important;
	 }
	  
	 input.sys_validation_error_msg 
	  {
	    border: 1px dashed transparent  !important;
	    outline:2px dashed red  !important;
	    outline-offset: -1px  !important;
     }
	  
	 .sys_validation_error_msg,
	 .sys_validation_error_msg input
	  {
	    font-weight:bold !important;	  
	    color:#E23 !important;  
     }
	  
	  
	  /*******************************************************************/
	  
	  
.zoom_image 
{
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

.zoom_image:hover 
{
  transform: scale(1.1); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}  
   
.zoom_image_10
{
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

.zoom_image_10:hover 
{
  transform: scale(1.1); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
} 
.zoom_image_20
{
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

.zoom_image_20:hover 
{
  transform: scale(1.2); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    margin-top: 4px;
} 

.zoom_image_30
{
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

.zoom_image_30:hover 
{
  transform: scale(1.3); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* ---------------------------------------------------------------------- */

.greyed_image, 
img.greyed_image 
{
    -webkit-filter: brightness(1.0) grayscale(1) opacity(0.7) !important;
       -moz-filter: brightness(1.0) grayscale(1) opacity(0.7) !important;
         -o-filter: brightness(1.0) grayscale(1) opacity(0.7) !important;
        -ms-filter: brightness(1.0) grayscale(1) opacity(0.7) !important;
            filter: brightness(1.0) grayscale(1) opacity(0.7) !important;
}

/* ---------------------------------------------------------------------- */

.v_align
{
	vertical-align: top;
}
.dba_added_item
   
			   
{
 color:red !important;	
}

.box_rounded_inset_blue
{
	padding:3px;
	height: auto;
	margin-right:3px;
	font-family:arial;
	font-size:11px;
	border:1px #CCD solid;
	border-radius:7px;
	box-shadow:  inset 0 0 5px #445566;
	background-color: #9AC2E6;
	text-align: center;
	justify-content: center;
}

.box_rounded_outset_white
{
	padding:1px;
	height: auto;
	margin-right:3px;
	font-family:arial;
	font-size:11px;
	border:1px #CCD solid;
	border-radius:7px;
	border-style:outset ;
	box-shadow: 1px 1px 2px grey;
	text-align: center;
	justify-content: center;
}

.shadowed_image_1 {  -webkit-filter: drop-shadow(1px 1px 1px #222);  filter: drop-shadow(1px 1px 1px #222); }
.shadowed_image_2 {  -webkit-filter: drop-shadow(2px 2px 2px #222);  filter: drop-shadow(2px 2px 2px #222); }
.shadowed_image_3 {  -webkit-filter: drop-shadow(3px 3px 3px #222);  filter: drop-shadow(3px 3px 3px #222); }
.shadowed_image_4 {  -webkit-filter: drop-shadow(4px 4px 4px #222);  filter: drop-shadow(4px 4px 4px #222); }
.shadowed_image_5 {  -webkit-filter: drop-shadow(5px 5px 5px #222);  filter: drop-shadow(5px 5px 5px #222); }

.shadowed_box_1 {  -webkit-box-shadow:  1px 1px 5px 1px #777;  -moz-box-box-shadow:  1px 1px 5px 1px #777; box-shadow:  1px 1px 5px 1px #777; }
				  
						  
	
   
			   
.shadowed_box_2 {  -webkit-box-shadow:  2px 2px 5px 2px #777;  -moz-box-box-shadow:  2px 2px 5px 2px #777; box-shadow:  2px 2px 5px 2px #777; }
					 
			   
					  
											   
							
.shadowed_box_3 {  -webkit-box-shadow:  3px 3px 5px 3px #777;  -moz-box-box-shadow:  3px 3px 5px 3px #777; box-shadow:  3px 3px 5px 3px #777; }
.shadowed_box_4 {  -webkit-box-shadow:  4px 4px 5px 4px #777;  -moz-box-box-shadow:  4px 4px 5px 4px #777; box-shadow:  4px 4px 5px 4px #777; }
.shadowed_box_5 {  -webkit-box-shadow:  5px 5px 5px 5px #777;  -moz-box-box-shadow:  5px 5px 5px 5px #777; box-shadow:  5px 5px 5px 5px #777; }


/*=========== TIME LINE ============*/

.timeline_grid
{
    font-family: Arial, Tahoma;
    font-size: 14px;
	z-index:1;
}
.timeline_row
{
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center stretch;
  /*background-color: #F5F5DC;
  border-bottom: 1px solid orange;*/
}
.timeline_header
{
    font-weight: bold !important;
    font-size: 17px !important;
}
.timeline_head:first-child, .timeline_cell:first-child
					 
{ 
  border-left: 0;
}
.timeline_link
{ 
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 2px;
}
.timeline_head
{
  border-bottom: 1px solid #36B !important;
  align-items: center !important;
  /*background-color: #FED !important;*/
}


.timeline_today
{
  color:darkred !important;
  border-left: 2px solid #C32 !important;	
}
.timeline_today .timeline_head_day
{
  color:#F42 !important;
}
.timeline_today .timeline_head_month
{
  color:#C32 !important;
}
.timeline_today + .timeline_cell 
{
  border-left: 2px solid #C32 !important;	
}



.timeline_sunday
{
  color:orange !important;
  border-left: 2px solid orange !important;	
}
.timeline_sunday .timeline_head_day
{
  color:orange !important;
}
.timeline_sunday .timeline_head_month
{
  color:darkorange !important;
}
.timeline_sunday + .timeline_cell 
{
  border-left: 2px solid orange !important;	
}



.timeline_head_day
{
  color:#2A8;
  font-size:19px;
  margin-right: 4px;
}
.timeline_head_month
{
  color:#030;
  font-size:19px;
  margin-right: 4px;
  font-weight: normal !important;
}
.timeline_cell_zoomout
{
  min-width: 48px !important;
}

.timeline_cell_selected_to_book
{
  background-color:#39F !important;
}

.timeline_cell
{
  min-width: 96px !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center stretch;
  
  border-bottom: 1px solid darkgrey;
  border-left: 2px solid #36B;
  text-align: center;
  /*background-color: aqua;*/
}

.timeline_cell > .timeline_quad
{
  flex: 1;
}
.timeline_quad
{
   border-right: 1px dotted grey;  
}
.timeline_quad:last-child
{
   border-right: 0;  
   background-color: #EEE;
}
.timeline_quad:first-child
{
  background-color: #EEE;
}
.timeline_timer
{
  height: 20px;
  display: flex;
  flex-direction: row;
  font-size: 9px;
}
.timeline_quad_timer
{
   justify-content: space-evenly;
}
.timeline_quad_timer > .timeline_quad_timespan
{
  flex: 1;
}
.timeline_quad_timespan
{
   align-self: flex-end;
   border: 0px solid red;  
}
.timeline_quad_timespacer
{
  width: 7px !important;
  border-bottom: 1px solid #39E;  
}


.timeline_row_marker
{
  font-weight: bold;
  font-size:  18px;
  color: #39E;
}

.timeline_head:first-child, .timeline_cell:first-child, .timeline_quad_timer:first-child
						   
{
	min-width:160px !important;
}
.timeline_image_marker
{
	display:relative;
}
.timeline_image_spec
{
	display:relative;
}

.timeline_item > span, timeline_label
{
	opacity: 1.0 !important;
	font-weight:bold;
    font-size:  14px;
    color:   #000;
	padding:2px;
}

.timeline_item
{
	/*width:196px;*/
	height:50px;
	background-color:orange;
	z-index:1000;
	opacity: 0.8;
}

.timeline_before
{
	border-left: 3px red dotted !important;
	opacity: 0.8;
}

.timeline_after
{
	border-right: 3px red dotted !important;
	opacity: 0.8;
}

.timeline_item_brown {	background-color:sienna !important;}

.timeline_item_yellow {	background-color:orange !important;}
.timeline_item_orange {	background-color:orange !important;}

.timeline_item_red  {	background-color:#F42 !important;}

.timeline_item_green{	background-color:#2B7 !important;}

.timeline_item_darkgrey{	background-color:#445 !important;}
.timeline_item_grey{	background-color:#999 !important;}
.timeline_item_litgrey{	background-color:#BBB !important;}

.timeline_item_blue{	background-color:#39E !important;}

.timeline_item_azure{	background-color:#6CE !important;}

.timeline_item_cyan{	background-color:#9CF !important;}

.timeline_item_purple{	background-color:purple !important;}

.timeline_item_pink{	background-color:pink !important;}

.timeline_item_magenta{	background-color:magenta !important;}

.timeline_item_violet{	background-color:violet !important;}

.ui-resizable-helper { border: 1px dotted #F00; }

.sys_grid_cell_editable
{
	color: #39D;
    font-weight: normal;	
    font-size: 13px;
    padding:3px;	
    padding:2px;	
    padding-left:6px;	
    padding-right:6px;	
}

.sys_grid_cell_editable
{
	color: #39D;
    font-weight: normal;	
    font-size: 13px;
    padding:3px;	
    padding:2px;	
    padding-left:6px;	
    padding-right:6px;	
}



/*=========== ORIENTAMENTO ORIZZONTALE 
              N.B. ogni mm corrisponde a 4 px
			  quindi in un A4 con orientamento orizzontale 
			  29,7 cm = 297 mm = 1188px   e
			  21,0 cm = 210 mm =  840px   mentre 
			   1,0 cm =  10 mm =   40px   é il margine destro e sinistro di 1 cm, quindi
			  28,7 cm = 287 mm = 1108px   é l'area utile del corpo di elaborazione della pagina e
			  20,0 cm = 200 mm =  760px   é l'altezza 
			   
=========================================================*/

.paging_frame.landscape_orientation
{
	width : 1238px !important;
	height:  890px !important;
}
.paging_doc.landscape_orientation
{
	width : 1188px !important;
	height:  840px !important;
}
.paging_page.landscape_orientation
{
	width : 1108px !important;
	height:  760px !important;

	left:40px !important;
	top :40px !important;
}



/*=========== DOC PAGE ============*/

.paging_offset
{
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	
	width:100% ;
	height:100% ;
}
.paging_frame
{
	display: flex;
	position:relative;
	align-items: center !important;
	justify-content: center !important;
    font-family: Arial, Tahoma;
    font-size: 14px;
	z-index:0;
	border:1px lightgrey solid;
	background-color: #EEE;
	
	width :  890px;
	height: 1238px;
}
.paging_doc
{
	display: flex;
	position: absolute;
 	align-self: center !important;
	justify-self: center !important;
    font-family: Arial, Tahoma;
    font-size: 14px;
	z-index:1;
	border:1px grey solid;
	background-color: #FFF;
	
	width :  840px;
	height: 1188px;
}
.paging_page
{
	display: flex;
	position: relative;
    font-family: Arial, Tahoma;
    font-size: 14px;
	z-index:2;
	border:1px #39E dotted;
	
	width :  760px;
	height: 1108px;
	left:40px;
	top :40px;
}

/*=========== STAMPA ============*/

@media print
{
  body * 
  {
    visibility: hidden;
  }
  .paging_doc, .paging_doc * 
  {
    visibility: visible;
  }
  .paging_doc 
  {
    position: absolute;
    left: 0;
    top: 0;
  }
	  
	.doc_table_included tr td
	{
		  border-right: 1px dotted #555 !important;
		  font-size: 10px !important;
		  overflow:hidden !important;
	}
	.doc_table_included tr:first-child td
	{
		  border-top: 1px solid #555 !important;
		  border-bottom: 1px solid #555 !important;
		  height: 20px !important;

		  font-size: 10px !important;
		  font-weight: bold !important;
		  overflow:hidden !important;
	}
}

/*=========== DIVIDERS ============*/

.paging_divider
{
	display:show;
}
.paging_divider_hidden
{
	display:none;
}

.paging_divider_vertical_25     {	left:   25% !important; }
.paging_divider_vertical_75     {	left:   75% !important; }
.paging_divider_vertical_inner  {	border-left:1px #ADB dashed !important; }
.paging_divider_vertical
{
	position:absolute;
	border-left:1px #CDF dashed;
	left:    50%;
	height: 100% ;
}


.paging_divider_horizontal_25   {	top:    25% !important; }
.paging_divider_horizontal_75   {	top:    75% !important; }
.paging_divider_horizontal_inner{	border-top:1px #ADB dashed !important; }
.paging_divider_horizontal
{
	position:absolute;
	border-top:1px #CDF dashed;
	top:    50%;
	width: 100%;
}

/*=========== DOC ITEMS ============*/

.doc_item_draggable
{
	/*border: 1px grey dotted;
	background-color:#EEE;*/
	
	        box-shadow: inset 0px 0px 1px 1px #eee;
	-webkit-box-shadow: inset 0px 0px 1px 1px #eee;
	   -moz-box-shadow: inset 0px 0px 1px 1px #eee;
	     -o-box-shadow: inset 0px 0px 1px 1px #eee;
}
.doc_item_content
{
	padding:     2px;
}
.doc_item
{
	min-width:  30px;
	min-height: 20px;
}
.doc_item_frame
{
	overflow:   hidden;
}
.doc_item_image
{
	transition: width 0.5s, height 0.5s;
}
.doc_item_hilighted
{

	        box-shadow: inset 0px 0px 1px 1px #E30 !important;
	-webkit-box-shadow: inset 0px 0px 1px 1px #E30 !important;
	   -moz-box-shadow: inset 0px 0px 1px 1px #E30 !important;
	     -o-box-shadow: inset 0px 0px 1px 1px #E30 !important;
}
.doc_item_clicked
{

	        box-shadow: inset 0px 0px 1px 1px #39D !important;
	-webkit-box-shadow: inset 0px 0px 1px 1px #39D !important;
	   -moz-box-shadow: inset 0px 0px 1px 1px #39D !important;
	     -o-box-shadow: inset 0px 0px 1px 1px #39D !important;
}
.doc_table_included tr td
{
      border-right: 1px dotted #555 !important;
      font-size: 11px !important;
}
.doc_table_included tr:first-child td
{
      border-top: 1px solid #555 !important;
      border-bottom: 1px solid #555 !important;
	  height: 20px !important;

      font-size: 11px !important;
      font-weight: bold !important;
}