body {
 background: linear-gradient(90deg, rgb(63, 63, 63) 21px, transparent 1%) center,
  linear-gradient(rgb(63, 63, 63) 21px, transparent 1%) center, gray !important;
 background-size: 22.5px 22.5px!important;
  
/*background: linear-gradient(90deg, white 21px, transparent 1%) center, linear-gradient(white 21px, transparent 1%) center, #d5d5d5 !important;

background-size: auto, auto, auto;
background-size: 23px 23px !important;*/


  font-family: 'Changa', sans-serif;
  font-size:15px;
  
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}
#formMySQl,#allColumns{
  -webkit-user-select: text; /* Safari */
  -ms-user-select: text; /* IE 10+ and Edge */
  user-select: text; /* Standard syntax */
}
/*start billing CSS*/
.paginator{
  text-align:right;
  padding-top: 15px;
  margin-right:15px;  
  color:gray;
}
.paginator span{  
  margin-right: 10px;
  font-size:14px;
}
.paginator i{
  cursor:pointer;
  padding-left: 13px;
  padding-right: 13px;
  font-size: 20px;
  font-weight:700;
  margin-left: 10px;
}
.fila{
  display: flex;
  border-bottom: 1px solid #606060;
  padding-bottom: 16px;
}
.fila div{  
  margin: 5px;
  
}
.fila[data-i=com] div{
  width: 100px;
  margin: 5px;
  
}
.filaCentro{
  flex-grow: 8;
  padding-top:5px;
  max-width: 600px;
  width:100%;
}

/*end billing CSS*/

.optCellDesignLoaded{
	display:none;
}
.cellDesignLoaded:hover .optCellDesignLoaded{
	display:block;
}
#previewText{
width: 100%;
background-color: #555454;
border: none;
color: white;
font-size: 17px;
height: 250px;
resize: none;
}
#tablaResultadoQuery{
  border: 1px solid gray;
  border-collapse: collapse;
}
#mysqlText{
width: 100%;
background-color: #555454;
border: none;
color: white;
font-size: 17px;
resize: none;
}
.bdTitle{
position: absolute;
top: -17px;
left: -2px;
font-size: 12px;
color: white;
/*background-color: gray;*/
padding: 0px 5px;
display:none;
}
.menuConect{
width:0px;
height:98%;
border:none;
position: fixed;
background-color:#3a3c35;
z-index: 6000;
cursor: default;
left:0px;
transition: width 0.3s;
overflow:hidden;
}
#tables{
display: block;
height: 295px;
overflow: hidden;
overflow-y: auto;
color: white;
list-style-type: none;
margin-left: -21px;
}
#tables li{
margin-top: 5px;
cursor: all-scroll;
padding: 7px 4px;
}
#tables li:hover{
background-color:gray;
}
.plug{
 -ms-transform: rotate(-45deg); /* IE 9 */
  transform: rotate(-45deg);
}
.menuBar{
height: 57px;
width: 100%;
background-color:#3a3c35f0;
top:0px;
left:0px;
position:fixed;
z-index:7;
}
.fromToField{
  padding:6px 15px;
  border-bottom: 1px solid #595959;	
}
.entity_fields_listed li[data-related='yes']::before {
  content: 'rel';
  color: yellow;
  margin-right: -22px;
  font-size: 13px;
  margin-left: 4px;
}
.entity_id_fields_listed li[data-related='yes']::before {
  content: 'rel';
  color: yellow;
  margin-right: 6px;
  font-size: 13px;
  margin-left: 4px;
}
#msgLabel,#msgLabelSelect{
position: relative;
top: -19px;
color: red;
display: none;
}
.fromToField:hover{
 background-color:#8080803d;
	
}
#formEntityBody svg{
	cursor:pointer;
}
.menuConect input{
 /*border: 1px solid #4286f4;*/
 border: 1px solid gray;
 background: transparent;
 border-radius: 5px;
 height: 25px; 
 padding-left: 9px;
 color: #bbb;	
 font-size:14px;
 margin: 7px;
 width: 218px;
}
#bodyFields tr[data-active=si],
#bodyFilterFieldsSelect tr[data-active=si],
#bodyFilterFields tr[data-active=si],
#bodyFilterFieldsGroup tr[data-active=si],
#bodyFilterFieldsHaving tr[data-active=si],
#bodyFilterFieldsOrder tr[data-active=si]{
background-color:#8080803d;	
}
#formEntityBody select option,#formTable select option,#confirmCSV select option,#graphicQuery select option{
background:#464646;
}
#formEntityBody  select,#formTable select,#confirmCSV select,#graphicQuery select{
 /*border: 1px solid #4286f4;*/
 border: 1px solid gray;
 background: transparent;
 border-radius: 5px;
 height: 25px; 
 padding-left: 9px;
 color: #bbb;	
 font-size:14px;
 margin-top: 7px;
 width: 133px;
}
#formTable input[type=checkbox]{
	width:50px;
}
#fieldSelectTable{	
 /*margin-left: -58px;*/	
}
.switch-lab_labelSmall {
    top: -16px !important;
	color:white;
}
.markAll{
border-bottom: 1px solid gray;
margin-bottom: 15px;
}
.acordeonTables{
margin-bottom: 16px;
cursor: pointer;
background: #4d4d4d;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 9px;
}
.containerTables{
  border-bottom: 1px solid gray;
  height: 40px;
  overflow: hidden;
  transition: height 0.3s ease-out 0s;
}

#formEntityBody input,#formTable input,#formMySQl input{
 /*border: 1px solid #4286f4;*/
 border: 1px solid gray;
 background: transparent;
 border-radius: 5px;
 height: 25px; 
 padding-left: 9px;
 color: #bbb;	
 font-size:14px;
 margin: 7px;
 width: 218px;
}
.body_entity{
overflow-x: hidden;
position: absolute;
width:100%
}
.menuConect select{
/*border: 1px solid #4286f4;*/
border: 1px solid gray;
background: transparent;
border-radius: 5px;
height: 32px;
padding-left: 9px;
color: #bbb;
font-size: 14px;
margin: 7px;
width: 230px;

}
.menuConect select option{
background:#464646;
}
.relatedHover{
	background-color:#ffff009c!important;
}

#aiField,#pkField,#fkField,#nlField{
 display: inline;
 top: 10px;
 position: relative;
 left: 5px;	
}
.entity_fields_listed,.entity_id_fields_listed{
color:white;
list-style-type:none;
margin-left: -33px;
min-width: 300px;
}
.fromToField span:nth-child(1){
  margin-right:10px;
  color:white;  
}
.fromToField span:nth-child(2){
  color:#888;
  font-size: 11px;	
}
.entity_fields_listed span:nth-child(1),.entity_id_fields_listed span:nth-child(1){
width: 22px;
/*border: 1px solid red;*/
position: relative;
height: 20px;
display: inline-block;
margin-right: 4px;
color:lime;
font-size: 13px;
/*border-right: 1px dashed gray;*/
}
.entity_fields_listed span:nth-child(2),.entity_id_fields_listed span:nth-child(2){
/*border: 1px solid red;*/
position: relative;
height: 20px;
display: inline-block;
margin-right: 2px;
}
.entity_fields_listed span:nth-child(3),.entity_id_fields_listed span:nth-child(3){
color:#888;
font-size: 11px;
}
.entity_fields_listed span:nth-child(4),.entity_id_fields_listed span:nth-child(4){
color:#888;
font-size: 10px;
display: inline !important;
}
#bodyFields tr{
 cursor:pointer;
}
.formButtonContainer{
display: flex;
justify-content: flex-end;
margin-top: 25px;
margin-right: 20px;	
}

#formEntityBody table,#formTable table {
  width:100%;
  margin-top:8px;
  font-size:13px;
}
#formEntityBody table, th, td, #formTable table, th, td {
  border: 1px solid gray;
  border-collapse: collapse;
}
#formEntityBody th, td, #formTable th, td {
  padding: 7px;
  text-align: left;
}

.addField{
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
color: #fff !important;
background-color: #2196F3 !important;
border-radius: 50px;
}

#pkContainer,#aiContainer,#fkContainer{
 width:110px; 
}
#nlContainer{
	margin-left: -13px;
}
.logo{
color: white;
font-size: 19px;
margin-left: 40px;
margin-top: 10px;
position:fixed;
z-index:3000;
}
.btn{
 border-radius: 100%;
 border: medium none;
 height: 40px;
 width: 40px;
 position: relative;
 /*background-color:white;*/ 
 background-color:#3a3c35; 
 z-index: 114;
 cursor: pointer;
 /*top: 10px;*/
 display: inline-block;
 margin-left:10px; 
}
.btn span{
 color:white;
}
.entity{
 
}

.header_entity{
 text-align: center;
 padding-top: 9px;
 padding-bottom: 8px;
 /*border-bottom: 2px solid #4286f4;*/
 color:white; 
  overflow-x: hidden;
}
.loaderBD{
text-align: center;
margin: 12px 7px;
color: lime;
visibility: hidden;
width: 236px;
}
.loaderTables{
color: white;
margin-left: 13px;
width: 236px;
font-size:12px;
display:none;
}
.optionsContainer{
  width:710px;  
  margin:0 auto;
  background-color: #3a3c35;
  border-radius: 50px;
  top: 4px;
  position:fixed;
  left: 267px;
  z-index:3000;
}
.svg{
 width:4000px;
 height:4000px;
 /*border:1px solid blue;*/ 
 position:absolute;
 overflow:hidden;
}
.padre{
 width:4000px;
 height:4000px;
 /*border:1px solid red;*/
 /*left:120px;*/
 position:relative;
 overflow:hidden;
 top:80px;
 transition: margin-left 0.3s;
}
.innerContainer{
 position:absolute;
 width: 100%;
 height: 100%;
 overflow-y: hidden;
}
.context-menu{
 /*background-color: white;*/
 background-color: #4d4d4d;
 color: white;
 display: block;
 top: -10px;
 position: absolute;
 list-style-type: none;
 padding-left: 0px;
 width: 165px;
 font-size: 14px;
 cursor:pointer;
 z-index:3000;
}
.context-menu li{
 padding:8px;
}
.context-menu li:hover{
 background-color:#646363;
 border-right:5px solid lime;
}
.resizable {
  background: transparent;
  background: #3a3a3ab0;
  /*background: #ffffff5e;*/
  width: 260px;
  height: 183px;
  position: absolute;
  /*top: 100px;
  left: 100px;*/
  cursor:all-scroll;
  border: 2px solid #4286f4;
}
.resizable:hover > .bdTitle{ 
  display:block; 
}
.blocker{
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
}
#bodyFields tr:hover,
#bodyFilterFieldsSelect tr:hover,
#bodyFilterFields tr:hover,
#bodyFilterFieldsGroup tr:hover,
#bodyFilterFieldsHaving tr:hover,
#bodyFilterFieldsOrder tr:hover{
 background-color:#8080803d;
 cursor:all-scroll;
}


.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.resizable .resizers{
  /*width: 100%;
  height: 100%;
  border: 2px solid #4286f4;*/
  /*border:none;*/
  box-sizing: border-box;
}
.resizable .resizers .resizer{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: lime;
 /* border: 3px solid #4286f4;*/
  position: absolute;
}
.resizable .resizers .resizer.left {
  left: -5px;
  top: calc(50% - 5px/1);
  cursor: e-resize; /*resizer cursor*/
  display:none;
}
.resizable .resizers .resizer.right {
  right: -5px;
  top: calc(50% - 5px/1);
  cursor: e-resize;
  display:none;
}
.resizable .resizers .resizer.top-left {
  left: -5px;
  top: -5px;
  cursor: nwse-resize; /*resizer cursor*/
  display:none;
}
.resizable .resizers .resizer.top {
  left: calc(50% - 5px/1);
  top: -5px;
  cursor: n-resize; /*resizer cursor*/
  display:none;
}
.resizable .resizers .resizer.top-right {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
  display:none;
}
.resizable .resizers .resizer.bottom-left {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
  display:none;
}
.resizable .resizers .resizer.bottom {
  left: calc(50% - 5px/1);
  bottom: -5px;
  cursor: n-resize;
  display:none;
}
.resizable .resizers .resizer.bottom-right {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
  display:none;
}
.resizable .resizers .resizer.draggable {
  right: 10px;
  top: -5px;
  cursor: nesw-resize;
  display:none;
}

.loaderpage {
  position: fixed;
  left: calc(50% - 90px/2);
  top: calc(50% - 90px/2);
  z-index: 10000;
  width: 40px;
  height: 40px;
  border: 3px solid #e0dede;
  border-radius: 50%;
  border-top: 3px solid #00c3ed;
  -webkit-animation: spin 0.6s linear infinite;
  animation: spin 0.6s linear infinite;
  display:none;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}