/*  GENERIOC STYLING ***************************/

body {
	margin : 0px ;
	background-color: #-_PageBackColor-#;
	overflow-x : hidden ;
	overflow-y : visible ;
}
		
ul { line-height:200%; }

p, a {
	line-heigth: 1.2 ;
	margin-top : 0.2em ;
	margin-bottom : 0.2em ;
	font-weight: normal ;
	font-size:100%;  /* ------- MERGED ------------*/
}

a:link { text-decoration:none; }

.clickable { cursor: pointer; }
.draggable { cursor: move; }

/*	GENERIC COLORs ***************************/

.color1 			{ color: #669BC6; }
.backColor1 		{ background-color: #669BC6; }
.color2 			{ color: #999999; }
.backColor2 		{ background-color: #999999; }
.color3 			{ color: #F3F3F3; }
.backColor3 		{ background-color: #F3F3F3; }
.color4 			{ color: #F5DFB6; }
.backColor4 		{ background-color: #F5DFB6; }
.color5				{ color: #4EBBC7; }
.backColor5 		{ background-color: #4EBBC7; }

.colorBrick 		{ color: #893C29; }
.backColorBrick 	{ background-color: #893C29; }
.colorDarkGrey 		{ color: #808080; }
.backColorDarkGrey 	{ background-color: #808080; }
.colorLigthGreen 	{ color: #ECF4DC; }
.backColorDragGreen { background-color: #ECF4DC; }

/* ALIGNEMNETS ***************************/

/* -----------TEXT ALIGNEMNETS -------------*/
.alignTextLeft 		{ text-align: left ;}
.alignTextCenter 	{ text-align: center ;}	
.alignTextRight 	{ text-align: right ;}
.alignTextJustify 	{ text-align: justify ;}

/* -----------FLEX ALIGNEMNETS -------------*/
.alignFlexCenter 	{ display: flex; justify-content: center;}
.alignFlexRight 	{ display: flex; justify-content: flex-end;}
.alignFlexLeft 		{ display: flex; justify-content: flex-start;}

/* -----------BLOCK ALIGNEMNETS -------------*/
.alignBlockCenter 	{ margin: auto; }
.alignBlockLeft 	{ margin-left: 0px; margin-right: auto; }
.alignBlockRight 	{ margin-right: 0px; margin-left: auto; }

/* -----------VERTICAL ALIGNEMNETS NOT IN USE -------------*/
.alignMidleLeft		{ top: 50%; left: 0% ; position: absolute; transform: translate(0%, -50%);  }
.alignMidleCenter 	{ top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); }
.alignMidleRight 	{ top: 50%; right:0% ; position: absolute; transform: translate(0%, -50%); }

.alignBottomLeft 	{ bottom: 0%; left: 0% ; position: absolute; }
.alignBottomCenter 	{ bottom: 0%; left:50% ; position: absolute; transform: translate(-50%, 0%); }
.alignBottomRight 	{ bottom: 0%; right:0% ; position: absolute; }

/* GENERIC CONTAIONERS ***************************/

section, aside {
   margin: 0px;
   padding: 0px;
}     

div.fixedTop {
	position: fixed ;
	top : 0px ;
	width : 100% ;
	overflow : hidden ;
	}

div.basePanel {
	width:auto;
	padding:2px;
}

div.container {
    width: 100%;
    padding: 0px;
}

div.standardPanel {
/*	width:auto;
	padding:2px; */
    width: auto;
	height: auto;
	overflow-X:hidden;	
	min-width: fit-content;
}

div.sectionPanel, div.pagePanel {
	background-color: white;
	width:auto;
	overflow-X:hidden;	
}
  
/* HLs RELATED ***************************/
.baseHL,.HLheader,.HLfooter ,p.HLtitle {
    padding: 2px;
}

.HLheader {   
	background-color: #-bkcolor-#;
    padding-top: 4px;
    padding-bottom: 2px;
    padding-left: 4px;
	padding-right: 4px;
    width: auto;
}

.HLbody { padding:5px 20px 20px 20px; }

p.HLtitle {
  color: #669BC6;
  padding-top: 2px;
  padding-bottom: 1px;
  padding-left: 4px;
}

p.HLsubtitle {
  color: grey;
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 1px;
  padding-left: 4px;
}

.HLfooter {
    background-color: #-bkcolor-#;
    padding: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* TEXT RELATED ***************************/

p.title {
  	color: #669BC6;
  	margin: 0px;
  	font: 145% bold arial, sans-serif;
}

p.description {
	color: grey;
  	margin: 0px;
  	margin-top: 4px;
  	font: 125% bold arial, sans-serif;
}

.boldText { font-weight: bold; }

/*	Effects RELATED ***************************/

.roundEffect { border-radius: 20px; }
.circularEffect { border-radius: 50%; }
.borderEffect { border: 1px solid #aaaaaa; }
.shadowEffect { box-shadow: 0px 2px 5px #292929; }

/* BUTTON RELATED ***************************/

.btnBase{
  border: none;
  text-decoration: none;
  cursor: pointer;
  width:100%;
  height:100%;
}

.btnShadow{
	 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* IMAGE RELATED ***************************/

img.HLimage	{ margin: 8px; }

.smallOptionImage {
	margin-top: 3px ;
	margin-bottom : 3px;
	margin-left : 2px;
	margin-right : 2px ;
	height: 20px;
	width: 20px;
	cursor:pointer;
	}

.nanoOptionImage {
	margin-top: 1px ;
	margin-bottom : 1px;
	margin-left : 1px;
	margin-right : 1px ;
	height: 14px;
	width: 14px;
	cursor:pointer;
	}

img.loaderImage {
	margin: 10px;
	height: 30px;
	width: 30px;
	}

img.coverX 	{ width: 100%; height: auto; }
img.coverY 	{ width: auto; height: 100%; }
img.coverXY { width: 100%; height: 100%; }

.backimage	{
  background-repeat: no-repeat;  /* repeat-x ou repeat-y */
  background-attachment: scroll; /* fixed or scroll */
  background-size: cover; /* 100% 100% */
  background-position : 50% 50% ;
} 

 /* Option Bar related ***************************/

div.itemsWrap {
	flex-wrap: wrap ;
}

div.flowH, div.barH {
display: flex ;
align-items: center ;
}

div.flowV, div.barV {
display: block ; 
}

div.barH , div.barV {
width: max-content ;
}

div.barV div.barV , div.barH div.barV {
	width: auto ;
}

div.optionsBar {
  color: #888888;
  overflow: hidden;
  cursor: pointer; 
  height: max-content ;
}

div.barOption {
	padding: 5px; 
}

div.barOption img { 
 margin: 8px 5px 8px 5px; 
 align-self: center ;
}

div.barOption label {
  text-decoration: none;
  padding: 14px 16px; 
  align-self: center ;
  width: 100% ;
  cursor : pointer ;
}

div.effectUDL label {/* Only Underline Efect */
  padding: 0px 16px;
  margin: 14px 0px 12px 0px;
  border-bottom: 2px solid transparent;
}

div.effectBKG div.barOption:hover {background: #ddd; color: black; }

div.effectUDL label:hover { border-bottom: 2px solid currentColor; }

.bar-area {
  display: none; 
  background-color: #FFFFFF;
  transition: 0.6s;
  cursor: auto ;
}

.expand-area {
  display: none; 
  background-color: #FFFFFF;
  transition: 0.6s;
}

.dropdown-area {
  display: none; 
  background-color: #FFFFFF;
  transition: 0.6s;
  position: fixed ;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;
  overflow-x : hidden ;
  overflow-y: auto;	
  width: max-content ;
  min-width:100px;
}

.smart-dropdown {}

.smart-dropdown:hover .dropdown-area { display: block; }
	
/* --------- ToolBar related ***************************/
/*
div.toolbar {
  color: #888888;
  overflow: hidden;
  background-color: #333;
  width: 100%;
}

.toolbar img { 
 padding: 14px 2px; 
 float: left;
}
*/

/********************************************************************************
**********************************************************************************/
/*-------------------- TO REVIEW --------------------------------------------*/

/* TABLE RELATED  ***************************/
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

.table {
  margin: 0 0 0 0;
   border: 0px solid black;
  width: 100%;
/*  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);*/
  display: table;
}

.row {
  display: table-row;
  background: #fafafa;
}
.row:nth-of-type(odd) {
  background: #fefefe;
}
.row.header {
  font-weight: 900;
  color: #ffffff;
  background: #ea6153;
}
.row.green {
  background: #27ae60;
}
.row.blue {
  background: #2980b9;
}

.cell {
  padding: 6px 12px;
  display: table-cell;
  border: 0px solid green;
}

/* ---------------- To DELETE AFTER ALKEMY CHANGE ---------------- */
/* Common both effects */
/*div.hormenubarBG , div.hormenubarSU {
  color: #888888;
  overflow: hidden;
  background-color: #333;
  width: 100%;
}
div.hormenubarBG label , div.hormenubarSU label, div.hormenubarBG input, div.hormenubarSU input, div.hormenubarBG img, div.hormenubarSU img{
  float: left;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
div.hormenubarBG img, div.hormenubarSU img {   padding: 14px 2px; }
div.hormenubarBG input, div.hormenubarSU input {   font-size: unset ; }*/

/* Only BackColor Efect 
div.hormenubarBG label, div.hormenubarBG input {   padding: 14px 16px; }
div.hormenubarBG label:hover {
  background: #ddd;
  color: black;
}
*/
/* Only Underline Efect 
div.hormenubarSU label, div.hormenubarSU input {
  padding: 0px 16px;
  margin: 14px 0px 12px 0px;
  border-bottom: 2px solid transparent;
}
div.hormenubarSU label:hover { border-bottom: 2px solid currentColor; }


/*

*footer.poweredBy {
    color: #669BC6;
    padding-right: 10px;
  	text-align: right;
    clear: left;
	font: 115% bold arial, sans-serif;
}
 .SplashBase { background-image:url("images/#-DefaultSplashImage-#"); 


img.iconOptionImage {
	margin: 4px;
    height: 20px;
    width: 20px;
	cursor:pointer;
	}

.optionImage {
	background-color: #ffffff;
    margin-top: 15px;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 10px;     
}

img.optImage {
    heigth: 10px;
    width: 55px;
    margin: 0px;
}*/
*/

/*.center 	{ display: flex; justify-content: center;} 
.rigthAlign { display: flex; justify-content: flex-end;	}*/

/* -----------DUPLICATED -------------
.alignDefault { margin: auto; }
.alignTopLeft { margin-left: 2px; margin-rigth: auto;}
.alignTopRight { margin-right: 2px; margin-left: auto;}*/