/* Put your css in here changes:searchlist width,.metbase_selection_div,searchlist,tokensContainer, tokenList*/
.modal-backdrop {
    z-index: 999; /* Sit on top - higher than any other z-index in your site*/
}
.modal {
    z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}


.ui-autocomplete {
	z-index:900;
	background-color: #ffffff;
	border-color: #ccc;
    border-style: solid;
    border-width: 1px;
	max-width:280px;
}
.ui-helper-hidden-accessible { display:none; }

.hr{
	display:block;
	height:1px;
	border:0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
	width:100%;
}

.hr_noline{
	display:block;
	height:1px;
	border:0;
	margin: 1em 0;
	padding: 0;
	width:100%;
}
.search_button
{
	background-:#999;
}
.search_button_refresh
{
	padding: 5px 6px;
	background:#D9534F;
}
<!-- This is the css for all group buttons-->
.btn-group.btn.btn-default.grey_button_group
{
padding: 4px 6px; 
background:white; 
/*color:#DFD7CA;*/ 
color:#98978B;
border:solid thin #DFD7CA;

}

<!-- This is the css for search box-->
.search_text_field
{
 padding: 6px 8px;
}

<!-- This is the css for search icon-->
.search_text_icon
{
 padding: 5px 6px;
}

.btn-float-right
{
	float:right;
}

.metbase_selection_panel
{
	width:20%;
	display:inline-block;
	height:450px;
	text-align:center;
}

.metbase_selection_arrows
{
	width:4%;
	display:inline-block;
	height:450px;
	text-align:center;
}

.metbase_selection_div
{
    /*width:98%;
	width:1200px;*/
	width:91%;
	height:450px;
	overflow-x: auto;
	overflow-y: auto;
    white-space: nowrap;
	text-align:center;
	/*clear:both;
	margin:0 auto;*/
	float:left;
	display:inline-block;
	max-width:1670;


}

.searchlist{
	/*padding-right: 3px;
	padding-left: 3px;*/
    margin-left: 3px;
	margin-right: 3px;
	width:200px;
	/*max-width:230px;
   	min-width:150px;*/
	display:inline-block;
	white-space:normal;
	/*This is for safari to stop inline-blocks from jumping around*/
	vertical-align:top;


}

.multiselect_list, .input-large, 
{
	width:100%;
	margin:auto;
	
	
		
}

.tokensContainer {
    cursor: text;
    padding: 5px 5px 5px 5px;
    height: 80px;
	width:100%;
    overflow-y: auto;
    background-color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	text-align:left;
	border: 1px solid #ccc;
	vertical-align:middle;
	
}
/*
.tokensContainer{display:inline-block;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555555;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;vertical-align:middle;}
.tokensContainer{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*/
.tokenlist{
	width:100%; 
	height:100%;
	white-space:normal;
	margin-top:270px;	
	
} 

.metbase_wrapper_div
{
	width:1250px;
	clear:both;
	margin:0 auto;
	display:block;
	background-color:#FFF;
	margin-top:2px;
}


.metbase_header_div
{
    /*width:98%;*/
	width:1200px;
	height:50px;
	clear:both;
	margin:0 auto;
	display:block;
}

.metbase_filter_div
{
	/*width:98%;*/
	width:1200px;
	overflow-x: auto;
	height:120px;
	margin:0 auto;
	clear:both;	
    white-space: nowrap;
    display:block;
}


.metbase_plot_and_controls_div
{
	width:1200px;
	clear:both;
	margin:0 auto;
	text-align:center;
	overflow-x: auto;
    white-space: nowrap;
}

.metbase_info_div
{
	/*width:98%;*/
	width:1200px;
	clear:both;
	margin:0 auto;
	overflow-x: auto;
    white-space: nowrap;
    display:block;
}

.metbase_reference_div
{
	/*width:98%;*/
	width:1200px;
	clear:both;
	margin:0 auto;
	white-space:normal;


}
.metbase_gallery_div
{
	/*width:98%;*/
	width:93%;
	height:98%;
	clear:both;
	margin:0 auto;
    white-space: normal;
	overflow-y: auto;
	
}

multiselect {
    display:block;
}
multiselect .btn {
    width: 100%;
    background-color: #FFF;
}
multiselect .btn.error{
    border: 1px solid #da4f49 !important;
}

multiselect .dropdown-menu {
	min-height: 250px;
    max-height: 250px;
    overflow-y: auto;
	 overflow-x: auto;
	 z-index:800;
	
}
multiselect .dropdown-menu {
    width: 100%;
    box-sizing: border-box;
    padding: 2px;
	z-index:800;
	
}

multiselect .dropdown-menu > li > a {
    padding: 3px 10px;
    cursor:auto;
	text-transform:none;
	font-style:normal;
	font-size:14px;
	z-index:800;
}


.tokenlistsmall{
	width:210px; 
	height:90px;
	display:inline-block;
	white-space:normal;
	
} 

ul {
    list-style:none;
    margin:1px;
	padding:1px;
}

.token {
    border: 1px solid #ccd5e3;
    background-color: #eff2f7;
    padding: 0 5px;
    line-height: 18px;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	white-space: nowrap;
	display:inline-block;
	
}

.close {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 15px;
    float: right;
    margin: 1px 0 0 5px;
    padding: 0;
    cursor: pointer;
    /*color: #a6b4ce;*/
	color:#F00;
	
}




.placeholder {
    color: #ddd;
    position: absolute;
    line-height: 20px;
    padding: 5px 0 0 5px;
    display: none;
}

.radio_top{
	 height:15px;
     vertical-align:top;
	}
	
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

.tooltip {
  position: absolute;
  width: 200px;
  height: 28px;
  pointer-events: none;
}
.heading {color:#696e6e; letter-spacing: 0.1px;font:300 1.25em 'Roboto', 'sans-serif';}
.tabledata, .tableheader {color:#696e6e; letter-spacing: 0.1px;font:300 1em 'Roboto', 'sans-serif';}
.tableheader{font-weight:bold;}

.textaareainfo {
width: 100%;
max-width: 600px;
min-width: 300px;
height: 100%;
max-height: 300px;
min-height: 100px;
}

.textaareainfosmall {
width: 100%;
max-width: 600px;
min-width: 300px;
height: 100%;
max-height: 100px;
min-height: 50px;
}

#galleria{height:320px}

.no-color{color: transparent !important;}

.green_small_dropdown
{
	width:60px; 
	height:20px; 
	border-radius:10px; 
	background-color:#93C54B;
	color:#FFF;
	text-indent: 10px; 
}

.green_large_dropdown
{
	width:110px; 
	height:30px; 
	border-radius:10px; 
	background-color:#93C54B;
	color:#FFF;
	text-indent: 10px;
	font-size:larger;
}


/*
.input-block-level{display:block;width:100%;min-height:20px; height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*/
.pagination {
margin: 0px !important;
}

.input-block-level{display:block;width:100%;height:40px;};

select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:20px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555555;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;vertical-align:middle;}

.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
.noshadow
{
	 box-shadow: none !important;
	 
}

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}


.input-box-short
{
padding: 6px 6px;
height:35px;
}

.btn-outline-success {
	background-color: transparent;
    border: 1px solid #5cb85c;
    color: inherit;
    transition: all .5s;
	border-radius:15px;
}

.btn-outline-default {
	background-color: transparent;
    border: 1px solid #333;
    color: inherit;
    transition: all .5s;
	border-radius:15px;
}

.btn-success.btn-outline-success {
    color: #5cb85c;
}

.btn-default.btn-outline-default {
    color: #333;
}

.btn.btn-default.btn-grp-grey-xs{
background-color:#98978B;
/*font-size: 90%;*/
}

.btn.btn-default.btn-grp-grey-xs{
background-color:#98978B;
/*font-size: 90%;*/
}


.btn.btn-default.btn-grp-grey-xs.active,
.btn.btn-default.btn-grp-grey-xs:active
{
 background-color:#666
}



.btn-success.btn-outline-success:hover,
.btn-success.btn-outline-success:focus,
.btn-success.btn-outline-success:active,
.btn-success.btn-outline-success.active,
.btn-default.btn-outline-default:hover,
.btn-default.btn-outline-default:focus,
.btn-default.btn-outline-default:active,
.btn-default.btn-outline-default.active
{
    color:#FFF;
}


.stylish-input-group .input-group-addon{
    background: white !important; 
}
.stylish-input-group .form-control{
	border-right:0; 
	box-shadow:0 0 0; 
	border-color:#ccc;
}
.stylish-input-group button{
    border:0;
    background:transparent;
}



.periodic {
  position: relative;
  height: 400px;
  margin-right: -1px;
  text-shadow: none;
}

.periodic-row {
  clear: both;
  height: 10%;
}

.cell {
  float: left;
  position: relative;
  width: 5.55%;
  height: 100%;
  
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 1px;
  right: 1px;
  box-sizing: border-box;
  text-align: center;
  cursor: default;
  pointer-events: none;
  .transition(all 200ms ease);
  background-color: rgba(128,128,128, 1);
  
}

.cell:hover .element {
  
  
  box-shadow: 0px 0px 20px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(3);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(3);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(3);
    transition: all 200ms ease-in;
    transform: scale(3);
}

.at_num,
.at_details,
.at_num_TL,
.at_num_TR,
.at_num_BL,
.at_num_BR
{
  position: absolute;
  font-size: 4px;
  /*color: rgba(255,255,255,0.5);*/
  /*opacity: 0;*/
}

.at_num {
  top: 4px;
  right: 5px;
}

.at_details {
  bottom: 4px;
  left: 0px;
  right: 0px;
}

.at_num_TL {
  top: 4px;
  left: 5px;
  display:inline-block;
  float:left;
  text-align:left;
}

.at_num_TR {
  top: 4px;
  right: 5px;
  display:inline-block;
  float:right;
  text-align:right;
}

.at_num_BL {
  bottom: 4px;
  left: 5px;
  display:inline-block;
  float:left;
  text-align:left;
}

.at_num_BR {
  bottom: 4px;
  right: 5px;
  display:inline-block;
  float:right;
  text-align:right;
}


.symbol {
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  margin-top: -4px;
  font-size: 12px;
  clear:both;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 0 4px rgba(255,255,255,0.5);
  line-height: 12px;
  height: 12px;
    
  /*color: rgba(255,255,255,0.9);*/
}

.symbol_sup
{
	font-size: 10px;
}

.purple_green, .purple, .purple_black, .purple_stripe_blue, .purple_stripe
{
  background-color:rgb(156,158,188);

}

.red, .red_stripe
{
background-color:rgb(211,136,107);

}
.green, .green_stripe
{
background-color:rgb(131,157,151);

}
.yellow, .yellow_stripe
{
background-color:rgb(180,160,108);
}
.white
{
	background-color:rgb(128,128,128);

  
}
.yellow_stripe,.red_stripe,.green_stripe,.purple_stripe_blue, .purple_stripe
{
	  border: 2pt dotted #333;
}

@media screen and (min-width:300px){
  .periodic {
    height: 460px;
    margin-right: -2px;
  }
  
  .element {
    right: 2px;
    bottom: 2px;
  }
  
  .at_num,
  .at_details,
  .at_num_TL,
  .at_num_TR,
  .at_num_BL,
  .at_num_BR,
  .at_details {
    font-size: 3px;
    opacity: 1;
  }
  .at_num_TL {
   top: 1px;
   left: 1px;
  }
	.at_num_TR {
	  top: 1px;
	  right: 1px;
	}
	
	.at_num_BL {
	  bottom: 1px;
	  left: 1px;
	}
	
	.at_num_BR {
	  bottom: 1px;
	  right: 1px;
	}

  .symbol {
	margin-top: -5px;
    font-size: 10px;
    line-height: 10px;
    height: 10px;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
  }
  .symbol_sup
  {
	font-size: 5px;
  }
}

@media screen and (min-width:768px){
  .periodic {
    height: 580px;
  }
  
  .at_num,
  .at_details,
  .at_num_TL,
  .at_num_TR,
  .at_num_BL,
  .at_num_BR,
  .at_details {
    font-size: 4px;
  }
  .at_num_TL {
  top: 2px;
  left: 2px;
}

.at_num_TR {
  top: 2px;
  right: 2px;
}

.at_num_BL {
  bottom: 2px;
  left: 2px;
}

.at_num_BR {
  bottom: 2px;
  right: 2px;
}

  .symbol {
    margin-top: -10px;
    font-size: 18px;
    line-height: 18px;
    height: 18px;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
  }
  
  .symbol_sup
  {
	font-size: 8px;
  }
	
}
@media screen and (min-width:1200px){
	.periodic {
    height: 650px;
  }
  
  .at_num,
  .at_details,
  .at_num_TL,
  .at_num_TR,
  .at_num_BL,
  .at_num_BR,
  .at_details {
    font-size: 6px;
  }
	.at_num_TL {
	  top: 4px;
	  left: 5px;
	}
	
	.at_num_TR {
	  top: 4px;
	  right: 5px;
	}
	
	.at_num_BL {
	  bottom: 4px;
	  left: 5px;
	}
	
	.at_num_BR {
	  bottom: 4px;
	  right: 5px;
	}
	
  .symbol {
    margin-top: -12px;
    font-size: 22px;
    line-height: 22px;
    height: 22px;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
  }
  
  .symbol_sup
  {
	font-size: 12px;
  }
	
}