html, body
{
  color:#ff340; 
  font-family:Arial,Helvetica,sans-serif; 
  margin: 0px; 
  padding: 0px; 
  width:100%;
  height:100%;
}
body 
{
  background-color:#00ffff; 
  background-repeat: no-repeat,no-repeat,no-repeat;
  background-attachment: fixed,fixed,fixed;
  background-size: auto, auto, auto;
  background-image:url( '../images/bg1.png'),url( '../images/bg2.png'),url( '../images/bg3.png'); 
  background-position: bottom left, bottom left, bottom right;
}
header 
{
    flex-shrink: 0;
}
.body
{
   flex-grow: 1;
   overflow: auto;
}
footer
{
    flex-shrink: 0;
}
h1 
{
  margin: 0px; 
  padding: 0px; 
}
a
{
	text-decoration: none;
	outline: none;
	border: none;
}
.container 
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
#dialogOverlay 
{
	position: absolute;
  	width: 100%;
  	height: 100%;
  	top: 0px;
  	left: 0px;
	right: 0px;
  	bottom: 0px;
  	margin: 0;
  	padding: 0px;
  	cursor: wait;
  	background-color: #2a334088;
	z-index:1001;
	overflow: hidden;
}
.errorHeader
{ 
  	background-color: #ff0000ee !important;	
  	color: #eeeeeeee !important;	
}

.errorHint
{ 
  box-shadow: 0 0 2pt 1pt #ff0000dd !important;
}

.needSaveHint
{ 
	color: #ff0000dd !important;	
   box-shadow: 0 0 2pt 1pt #ff0000dd !important;
}

.warningHint
{ 
   box-shadow: 0 0 2pt 1pt #ff0000dd !important;
}

.selectedHint
{ 
   box-shadow: 0 0 2pt 1pt #00ff00dd !important;
}

.gender{border:10px solid red;background:yellow;}

.messageHeader
{ 
  	background-color: #065f18ee;	
  	color: #eeeeeeee;	
}

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.dialog
{		  
	position: absolute;
 	top: 50%;
  	left: 50%;
	display: none;
	overflow: hidden;
	-webkit-transform: translate(-50%, -50%);	
 	transform: translate(-50%, -50%);
   padding: 0px;
  	margin: 0px;	
  	border: solid 1px steelblue;
  	background-color: #ddddddFF;
  	cursor: default;    
  -moz-border-radius: 6px 6px 4px 4px;
  -webkit-border-radius: 6px 6px 4px 4px;
  border-radius: 6px 6px 3px 3px;    			 
}
.dialog-header
{    
    text-align: left;    
    white-space: nowrap;
    padding: 5px;    
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.02em;
    font-weight: bold;    
    position: relative;
    -moz-border-radius: 4px 4px 0px 0px;   
    -webkit-border-radius: 4px 4px 0px 0px;       
    border-radius: 4px 4px 0px 0px;       
	 cursor: pointer;
}
.dialog-top
{
    -moz-border-radius: 4px 4px 0px 0px;   
    -webkit-border-radius: 4px 4px 0px 0px;       
    border-radius: 4px 4px 0px 0px;       
}
.dialog-bottom
{
    -moz-border-radius: 0 0 3px 3px;   
    -webkit-border-radius: 0 0 3px 3px;   
    border-radius: 0 0 3px 3px;   
}
.dialog-content
{
    padding: 10px;
    overflow: auto;
}
.dialog-statusbar, .dialog-toolbar
{
    background: #eeeeee;
    padding: 5px;
    padding-left: 10px;
    border-top: solid 1px silver;
    border-bottom: solid 1px silver;
    font-size: 0.8em;
}
.dialog-statusbar
{
    -moz-border-radius: 0 0 3px 3px;   
    -webkit-border-radius: 0 0 3px 3px;   
    border-radius: 0 0 3px 3px;   
    padding-right: 10px;
    padding-left: 10px;
    text-align: right;
}
#dialogClose
{
    margin-top: 15px;
} 	

.fillHorizontal
{	
	box-sizing: border-box;
	display: block;
	min-width: 100%;
  	width: 100%;
  	max-width: 100%;  
}

input 
{ 	
	white-space: nowrap;
	font-family:Arial,Helvetica,sans-serif; 	
}	
input:not([type="range"]):not([type="radio"]):not([type="checkbox"]):not(.nostyle), textarea 
{ 
	box-sizing: border-box;
	padding: 8px;		
	border-radius:8px;
	border: 1px solid #2a3340;
	background-color: #ffffffAA;
  	outline: none;	
}	

input[type="date"] 
{ 
	text-align: center;
}

input[type="range"]  {
  	background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  	border: solid 1px #82CFD0;
  	border-radius: 4px;
 	height: 8px;
 	width: 100%;
  	outline: none;
  	transition: background 450ms ease-in;
  	-webkit-appearance: none;
}

input[type="name"] 
{ 
	text-transform: capitalize;
}

.date
{
	width: 60px;
	text-align: center;
}

textarea 
{ 	
	min-height: 60px;
}	
.formularResponser {	
	visibility: hidden;
	display: none;
	width: 0px;
	height: 0px;
}

.toggler
{
	cursor: pointer;
}

.closeHeader
{
	position:relative; 
	width: 100%;
	display: block;
}
.close 
{
	color: #ffffffee;
	width: 20px;
	height: 20px;
	text-align: center;
	visibility: collapse;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding-right: 1px;
	background-color: orange;
	border-radius: 50%;
	position:absolute; 
	right: 0%;
	top: 50%;
	-webkit-transform: translate(0%, -50%);	
 	transform: translate(0%, -50%);
}
.close:hover 
{
	background-color: #ff2222ee;
}
.visible
{
  visibility: visible;
}
.hidden 
{
  visibility:  collapse;
}
.active
{
  background-color: #ddddddAA !important;
  color: #2a3340 !important;
}
.editable
{
}

.button 
{
	background-color: #2a3340AA;
  	color: #eeeeee;				
 	cursor: pointer;
  	transition: 0.4s;
  	text-align: center;
  	border-radius:8px;
  	box-shadow: 0 0 8px 0 rgba(8, 8, 8, 0.4);
  	display: inline-block;
  	padding: 8px;
  	text-decoration: none;
	outline: none;
	border: none;
}
.button:hover 
{
 	background-color: #ffffffAA;
	color: #2a3340;
}
.button.buttonFill 
{
	display: block;
}

.panel
 {
	background-color: #ffffffAA;
  	color: #2a3340;	
  	transition: 0.4s;
  	border-radius:8px;
  	box-shadow: 0 0 8px 0 rgba(8, 8, 8, 0.4); 
  	padding: 8px;
  	text-decoration: none;
	outline: none;
	border: none; 
	vertical-align: top; 	
}
.dark
{
  	background-color: #2a3340AA !important;
  	color: #eeeeeefe  !important;	
}

.menuPanel 
{
  visibility: collapse;
  transition: max-height 0.5s ease-out;
}

.changeDisplayOnHide 
{  
  display: none;
  visibility: visible;
}

.pinCode 
{
	width: 50px;
	height: 50px;
   text-align: center;           
   font-size: 25px;
   border: solid 1px #ccc;
   box-shadow: 0 0 5px #ccc inset;            
   outline: none;
   border-radius: 3px;
   display: inline-block;
}

.progress 
{
  	background-color: #3498DBAA;   
   display: inline-grid;
 	 grid-template-areas: "overflow-content"; 	 
   box-sizing: border-box;	
	border-radius:8px;
	border: 1px solid #2a3340;
  	outline: none;	
  	text-align: center;
}
.progress > #bar 
{
	grid-area: overflow-content;
  	width: 0%;
  	height: 100%;
  	background-color: orange;
	border-radius:8px;
}
.progress > #bar > #secondary 
{
	position: relative;
	height: 100%;
	width: 50%;
	left: 50%;
 	opacity: 0; 
	border-radius:8px;
	background: #ff000000;
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,0,0,1) 80%);
}
.progress > #label 
{
	padding-top: 1px;
	color: #ffffffee;
	grid-area: overflow-content;
	overflow: hidden;
	display: flex;  
  	align-items :center;
  	justify-content: center;
  	z-index: 2;
}


.progressPin
{
	width: 100%;   
	height: 36px;
}

.progressLogout 
{
	width: 100%;   
  	font-size: 66%;
  	background-color: #82CFD0dd;
  	
}
.progressLogout > #bar 
{
  	background-color: #2a3340AA;
}
.progressLogout > #label 
{
	padding-bottom: 1px;
}

.tabTop 
{
	border-bottom-left-radius :0px;
	border-bottom-right-radius :0px;
}
.tabTopContent 
{
	border-top-left-radius :0px;
	border-top-right-radius :0px;
}

.tabBottom 
{
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
.tabBottomContent 
{
	border-radius :0px;
}

.tabLeft 
{
	border-bottom-right-radius :0px;
	border-top-right-radius :0px;
}

.tabRight
{
	border-bottom-left-radius :0px;
	border-top-left-radius :0px;
}

.tabCenter
{
	border-bottom-left-radius :0px;
	border-top-left-radius :0px;
	border-bottom-right-radius :0px;
	border-top-right-radius :0px;
}

.hidden 
{
  visibility: collapse;
  display: none;
}

.contentFrame
{
	position: relative;
	background-color: #ffffffdd;
  	color: #2a3340;	
  	transition: 0.4s;
  	border-radius:8px;
  	box-shadow: 0 0 8px 0 rgba(8, 8, 8, 0.4); 
  	margin: 4px;								  		
	overflow:hidden;   
	border: 1px solid #2a3340;
  	outline: none;	
  	padding: 0px;	
  	background-color: #ffffffcc;
}
.contentFrame .content
{
	overflow:hidden;  
 	object-fit: cover;
	max-height:74px;
	height: 74px;								
	vertical-align: middle;
	border-style: none; 
	border:0 !important;
	border: none !important;
	background: transparent !important	
}

.galleryInfo, .gallery > #frame
{
	position: absolute;
	background-color: #ffffffdd;
  	color: #2a3340;	
  	transition: 0.4s;
  	border-radius:8px;
  	box-shadow: 0 0 8px 0 rgba(8, 8, 8, 0.4); 
  	padding: 4px;								  		
	overflow:hidden;  
}	
.progressGallery
{
	border: none;
}
.progressGallery > #bar 
{
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;	
}
.progressGallery > #bar > #secondary 
{				
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;		
	background: #00ff0000;
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(173,255,47,1) 80%);		
}
.progressGallery > #label 
{
	color: #2a3340;
	padding: 4px;
}							
.gallery
{							  
   overflow: auto;  
   display: grid;  
  	max-height: 280px;	 
  	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  	grid-template-rows: repeat(auto-fill, minmax(140px, 1fr));
  	grid-auto-flow: dense;
}
.gallery > #frame
{				
	position: relative;		
	overflow:hidden;  	
	border: 1px solid #2a3340;
  	outline: none;	
  	padding: 0px;	
  	background-color: #ffffffcc;  
  	align-items :center;
  	justify-content: center;			 	 
}
.gallery > #frame > #dada
{				
	position: absolute;		
	top: 0px;			
	left: 0px;
	width: 100%;
	height: 100%;
	overflow:hidden;  	
	z-index: 2;								
  	outline: none;	
  	padding: 0px;	
}
#dada.dropable 
{
  background: #2a334088;
}
.gallery > #frame > #preview						
{	
	overflow:hidden;  
 	object-fit: cover;
 	max-width: 100%;
	max-height:100%;	
	width: 100%;
	height:100%;				
	vertical-align: middle;
	border-style: none; 
	border:0 !important;
	border: none !important;					
}		
.gallery > #frame > #infoParent				
{	
	position: absolute;								
	top: 0px;			
	left: 0px;	
	min-width: 0%;	
	max-width: 80%;	
	z-index: 2;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;	
	border-bottom-right-radius: 8px;								
  	color: #eeeeeefe  !important;	  
  	background-color: #2a3340cc !important;	  													 
   display: inherit;							
}					
.gallery > #frame > #infoParent > #info					
{	
	margin: 4px;								   
   min-width:0%;
   max-width:100%;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;     
   font-size: 75%;							   
}							
.gallery > #frame > #infoDimension						
{					  	
	position: absolute;
	bottom: 0px;			
	left: 0px;										
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;		
	font-size: 66%;		
	white-space: nowrap;		
	display: inline-block;
}
.gallery > #frame > #infoSize						
{		
	bottom: 0px;			
	right: 0px;		
	padding: 0px;			
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	font-size: 66%;	
	white-space: nowrap;	
}
.gallery > #frame > #remove						
{							  	
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 4px;
	z-index: 8;
	transition: 0.4s;
 	border-bottom-left-radius: 8px;
  	box-shadow: 0 0 8px 0 rgba(8, 8, 8, 0.4); 
  	background-color: #ffffffbb;	
}
.gallery > #frame > #remove:hover					
{		
							  
  	
}
.gallery > #frame > #refresh						
{							  	
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 4px;
}
.gallery > #frame > #refresh:hover					
{				
 	color: orange;
	font-size: 110%;
}
.hint
{
	background-color: greenyellow !important;
}








.centerStyle {
	 z-index: 1;
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 50%;
    right: 50%;
    -webkit-transform: translate(-50%, -50%,-50%, -50%);
    transform: translate(-50%, -50%,-50%, -50%);
}​







						




















.bodyOverlay{
	background: linear-gradient(0deg, rgba(100,100,255,1) 0%, rgba(100,100,255,0) 25%, rgba(100,100,255,0) 75%, rgba(100,100,255,1) 100%);
}
.stickyTop {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.centerTopStyle {
	 z-index: 1;
    position: absolute;
    top: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
}​

.contentStyle {
	background-color: #ff000088;
	position:absolute; 
	width: 100%; 
	height: 100%;
}

.contentPanelStyle {
  visibility: collapse;
  transition: max-height 0.2s ease-out;
}






.menuStyle {}