/* Style the SREARCH tab */
.tab {  overflow: hidden;  border: 0px;}
/* Style the buttons inside the tab */
.tab button  { background-color: inherit;  float: left;  border: none;  outline: none;  cursor: pointer;  transition: 0.3s;  font-size: 17px;  background-color:#676767; color:white; padding: 6px 6px; }
.tab button a {color:white; background-color:#676767;  transition: 0.3s; padding: 15px 30px; display:block}
.tableft { border-top-left-radius:20px; }
.tabright { border-top-right-radius:20px; }
/* Change background color of buttons on hover */
.tab button:hover { background-color:white;  color: var(--textColor);}
.tab button:hover a { background-color:white;  color: var(--textColor); }
/* Create an active/current tablink class */
.tab button.active, .tab button.active a {  background-color:white ; color: var(--textColor);}
/* Style the tab content */
.tabcontent { padding: 6px 12px;  border: 0px;  border-top: none;  background-color:white;  border-top-right-radius:20px;  border-bottom-left-radius:20px;  border-bottom-right-radius:20px;  padding:20px 25px 20px 25px;  height:auto;  }


/*search form*/
:root {   
    --srcBgCol:#F0F0F0;
	--srcBgColDarker:#e3e3e3;
	--inptRadius:10px;	
	--areaWidth:600px;/*520px;*/	
}
.srchContFull {background-color: var(--srcBgCol); border-top:#666 0px solid}
.srchCont {    }
.srchContIns{ height:80px;}
.srchContInsOpen { height:136px;} 
.frmCont { display:flex; align-items:flex-start;   }
.frmCont2 { display:flex; align-items:flex-end;  margin-top:30px;   }
.synRelativ, .catRelativ {  margin-right:20px; padding-right:20px;  background-image:url(img/vert-line.png); background-repeat:no-repeat; background-position:top right; min-height:80px; /* vert-line image height*/}
.synRelativ { width:220px; }
.catRelativ { width:230px; }
.codRelativ  { margin:0 0 0 10px ;  }
.submtRelativ { margin:0; display:flex; flex-wrap:wrap; justify-content:center;   }
.areaCont, .srcAreaList  { width: var(--areaWidth); height:auto; position:relative; }
.areaRelativ { width: var(--areaWidth); position:relative; height:80px;  }
.areaAbs { position:absolute; top:0; left:0; z-index:10; width:100%; }
 .areaCont  { overflow-x: hidden; overflow-y: hidden; display:flex;   flex-wrap: wrap;    align-items:flex-start; align-items:flex-start;  margin:0 3px 0 0;  background-color: #d1d1d1;  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);*/ } 
#srcAreaList  { display:none;   /* border-radius:20px;  border:#0FF 1px solid; */    /* background-color: var(--srcBgColDarker);  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);  */  z-index:300;}
.firstSel { font-size:11pt;}
 #dotArea  {text-align:right; position:absolute; top:9px; right:5px; cursor:pointer;    }
#imDotArea {z-index:100; display:none;}
 #spnContArea {width:100%; cursor:pointer; background-color:#f0f0f0; padding:4px 12px;      }
.fxAreaDv { display:flex; flex-wrap: wrap; }
.areaCont, #spnContArea {  border-radius:20px; /* height:52px; */ }
.fldCapt {padding:0 0 1px 0;color: #A1A1A2; font-size:12pt}
.fldCaptSm { font-size:11pt}
.frmCaptDark { font-size:10.5pt}
.inpArea, .inpSrcSm { background: var(--srcBgCol);border:none; font-size: 10pt;  height: 30px; padding: 2px;	width:97%;}
.inpArea {  padding: 2px; height:40px;width:auto; background-color: transparent; }
.inpSrcSm {  margin-right:2px; background: var(--srcBgCol);  border-radius: var(--inptRadius); border: 1px solid #eeeeee; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);  -moz-appearance: textfield; border:#066 0px solid;}
.inpSrcSm:focus{ outline:none;}
.inpArea:focus { outline:none;}
.inpEmvad   { box-sizing: border-box; height:30px; width:80px; }
.inpCode    {  height:30px; margin-bottom:9px; width:150px ;    }
#infoAreaInpt {display:none; color:#666; font-style: italic; font-size:11pt; margin:0 0 0 10px;  }
.tm_en, .tm_gr   { background-repeat:no-repeat; background-position:right; padding-right:20px;}
.tm_en { background-image:url(img/icon_tm_en.png);}
.tm_gr { background-image:url(img/icon_tm_gr.png);}
.spSelArea { display:inline-block; background-color:white;  border-radius: 7px; border: 1px solid white;  font-size:11pt; padding: 5px 8px; margin:1px;}
.spSelArea img  { margin-left:2px; cursor:pointer; vertical-align:middle }
.spFirst { background-color:transparent; padding:0; margin:0; border:0px; display:none}
.btnArrowList { position:absolute;  right:3px; top:8px; cursor:pointer;  }
/* 
		 .areaCont  { z-index:4;  }
		 .dvSrcEmv  { z-index:3;  }
		 #dvPlots   { z-index:2;  }
		 .dvSrcCode { z-index:1;  }
*/	 
 .dvEmvRow { display:inline-block; margin-bottom:5px;}
#scrlAreaDv  { min-height:100px; padding:15px; height:auto; /* overflow-y: scroll; */ }
.sSynItem , .sCatItem {     display:block; margin:1px 0; padding:7px 35px 7px 12px;   background-image:url(img/icon_check_off.png); background-position: 97% center; background-repeat:no-repeat; background-color:white;  cursor:pointer; color:#000; font-size:10.5pt; } 
 .sItem {   display:block; padding:7px 32px 7px 8px; margin:3px; border-radius: 7px;  background-image:url(img/icon_check_off.png); background-position: right 2px center; background-repeat:no-repeat; background-color:white;  cursor:pointer; color:#000; font-size:10.5pt; } 
a.sItem:link, a.sSynItem:link , a.sCatItem:link,
a.sItem:visited, a.sSynItem:visited , a.sCatItem:visited,
a.sItem:active, a.sSynItem:active , a.sCatItem:active, 
a.sItem:hover, a.sSynItem:hover , a.sCatItem:hover  { background-color: var(--cokLight);}
.itemSel, .itemSynSel, .itemCatSel { background-image: url(img/icon_check_on.png); background-color:#d9cfb2; } 
.hovered, .hoveredSyn , .hoveredCat  { background-color:#f7f7f7;  }
.emvRelativ { margin-right:25px;}
#dvPlots { display:none; } 
.flxPlots { display:flex; align-items:flex-start; }
.groundHalf {	 /* padding:0 15px 0 15px; */ padding:0;    border-left:#D4D4D4  0px solid;  background-image:url(img/vert-line.png); background-repeat:no-repeat; background-position:top left; }
 .groundHalfNoLine { background-image:none; } 
 .dvOr { color: var(--grayBlack); padding:42px 10px 0 3px; color: #A1A1A2;  font-size: 11pt;} }
 #openListAreas { position:absolute; bottom:3px;display:none; padding:6px; background-color:#4a4a4a; border-radius:var(--inptRadius); cursor:pointer; color:#FFF; width:98%;  box-sizing: border-box;}
.selAreaNext { background-color: var(--srcBgColDarker); }
.srcBtn {text-align: center; color: #FFFFFF ; font-size: 12pt; letter-spacing: 1.2px; background-color: var(--colMainBth);  border-radius: var(--inptRadius); border: none;   cursor: pointer; margin:0 0 9px 10px; padding:12px; width:155px;}
.bthDark {background-color: var(--colMainDark); }
.srcBtn:hover { background-color: var(--grayBlack);  }
.srcfrmtitlenew {  margin-bottom: 20px; color: #EEEEEE;   font-size: 13px;  }
.srcfrmtitlenew > * {  vertical-align:middle; margin-right:5px }
/* open close serach form */
#scrMobOpenTog {cursor:pointer; }
#scrMobArrowTog { display: inline-block;  }
.rotateTogImg { transform: rotate(-180deg); transition: .3s;  }
.rotateTogImg-reset { transform: rotate(0deg); transition: .3s; }
 /* new styles */
.srCategFlx, .srSynalFlx { cursor:pointer;display:flex;justify-content:space-between;  align-items:center;font-weight:bold; font-size:11pt;}
.srCategList, .srSynalList {background-color:#FFFFFF;  height:auto; min-width:230px; position:absolute; display:none;border-radius:20px;  padding:15px 0;z-index:500000;  box-shadow: -1px 30px 50px 0px rgba(0,0,0,0.25);  -webkit-box-shadow: -1px 30px 50px 0px rgba(0,0,0,0.25);    -moz-box-shadow: -1px 30px 50px 0px rgba(0,0,0,0.25);}
.srSynalList { padding-top:15px; }
.imArrowOpenClose { cursor:pointer; margin-left:3px;}
.srCatImList, .srSynalImList { width:17px; margin-right:7px; vertical-align: baseline;}
.srListTitle { padding:5px 12px 5px 17px;background-color:#d9cfb2; font-size:12.5pt; color:white;  text-transform: uppercase; border-bottom:1px solid white}

/*filtra*/
#dvFltr { display:none;  background-color:#d8d8d8;  border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
#dvFltrBtn { position:absolute; top:0px; right:0}
#bthFilter { cursor:pointer;}
.fltTxt { padding:5px 30px; }
.tgsCatTitle {  display:inline-block; margin:25px 10px 0 0; font-size:13pt; font-weight:bold;}
.tgsChTxt {  display:inline-block;  margin:4px 5px 4px 0;  /* background-color:white; padding:5px 10px 5px 15px; border-radius: 16px; */}
.dvTgCtInactiv { opacity:.3;}
.fltrIcon {   margin-right:4px; width:22px; height:22px; }

/*CUSTOM CHECKBOX*/
 /* Customize the label (the container) */
.labTgs {
  display:flex;justify-content:space-between;
  position: relative;   
  cursor: pointer;
   
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  background-color:white; 
  padding:5px 34px 5px 10px; 
  border-radius: 16px;
  font-size:11.7pt;
}

/* Hide the browser's default checkbox */
.labTgs input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.tgsChMark {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 24px;
  width: 24px;
  background-color: #ededed; border:#9d9d9d 1px solid;
  border-radius: 23px;
}

/* On mouse-over, add a grey background color */
.labTgs:hover input ~ .tgsChMark {  background-color: #736e5d; }
.labTgs:hover { background-color: #a3987e;}

/* When the checkbox is checked, add a checkbox background */
.labTgs input:checked ~ .tgsChMark{
  background-color: #736e5d;
}

 

.labSelected {  background-color: #a3987e; color:white; }


/* Create the checkmark/indicator (hidden when not checked) */
.tgsChMark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked   */
.labTgs input:checked ~ .tgsChMark:after {
   display: block; 
} 

/* Style the checkmark/indicator */
.labTgs .tgsChMark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 
/*END CUSTOM CHECKBOX*/



/*search reasponsive*/
@media screen and (max-width: 1300px) {
     .srchCont, .srchContIns, .srchContInsOpen {height:auto}
     .frmCont {  flex-direction: column; justify-content:flex-start; }
     .areaRelativ, .catRelativ, .synRelativ { position:relative;  width:100%;  }
     .codRelativ  { margin:0 ;  }
     .areaCont, .catCont , .synCont { position:absolute; width:100%;    }
     .emvRelativ  { position:relative;   margin: 15px 0;   }
     .codRelativ { position:relative; height:70px; width:100%;   }
     .dvSrcEmv  {  display:flex;justify-content: space-between;   }
     .dvSrcEmv span { width:50%; }
      .dvSrcEmv span:last-of-type  { text-align:right}  
     .inpGrnd    { width:74px;   }
      .inpCode    { width:99%;  }
     #dvPlots { margin:0 0 12px 0;   }
 
	 .synRelativ, .catRelativ { background-color:#f1f1f1; margin:5px 0; padding:15px 15px 0 15px; border-radius:20px;}
	  
	 .tabcontent { padding:10px; }
	 .mob-pad { padding:10px; }
	 .submtRelativ { margin-top:30px; }
	 .codRelativ { margin-top:30px; }
	 .frmCont2 { flex-direction: column; align-items: center; width:100%; justify-content: center}
	 .synRelativ, .catRelativ {background-image:none;}
	 .flxPlots {flex-direction: column;   width:100%}
	 .groundHalf { display:inline-block; margin:0; padding:0; width:100%;}
	 .flxPlotDinat {  display:flex; justify-content:space-between}
	 .dvEmvRow:first-child { margin-right:0px;}
	 .inpEmvad { width:50%;}
	 .groundHalf { background-image:none;}
	/* #dotArea { display:none;} */
	 #dvSpace { height:50px; }
	 .dvOr { padding:10px;}
	 
	 .tgsCatTitle {  display:block; }
}