/* Formatting search box --- Experimental --- Although currently being used*/
.input-group{
	width: auto;
	/* width: 450px; */
	min-width: 550px;
	position: relative;
	/* display: inline-block; */
	font-size: 14px;
	padding: 15px 0px 0px 0px;
	
}
.input-group input[type="text"]{
	/* height: 20px; */
	height: 23px;
	padding: 5px 10px;
	/* border: 1px solid #CCCCCC; */
	border: 1px solid rgba(181,48,145,0.4);
	font-size: 14px;
}

.resultx{
	position: fixed;        
	z-index: 9999;
	/*top: 100%;*/
	left: 50%;
	transform: translateX(-50%);
	/*background: #f5f5f5d0;*/
	background: rgba(255, 255, 255, 0.5);
	border-radius:10px;	
	width: 70%;
	box-sizing: border-box;
	margin-left:0;
	
    transition: background 2.5s ease-in-out;	
}

.resultx.active {
	background: rgba(255, 255, 255, 0.9);
}

/* Formatting result items */
.resultx a{
	text-decoration:none;
}

.resultx li{
	margin: 5px;
	padding: 0px 0px;
	border: none;
	border-radius:2px;
	cursor: pointer;
	height: auto;
	font-size: 15px;
	list-style-type: none;
	font-family: arial,sans-serif;
	font-weight: bold;
	/* color: #CB34BD; */
	
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.resultx li:hover{
	/* background: #ccddff; */
	background: #D0D0D0;
	/* margin-left: 0; */
	/* font-weight: bold; */
	/* color: #00000; */
	/* color: #ffffff; */
	/*background: #f2f2f2;*/
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: #A9A9A9; */
}

.search-word{
	color: #CB34BD;
	/* font-weight: lighter; */
	font-size: 16px;
	/* font-style: italic; */
}

/* ========================  Formatting search box : Production ======================== */
.search-box{
	width: 350px;
	position: relative;
	display: inline-block;
	font-size: 14px;
	padding: 5px 0px 0px 0px;
	
}
.search-box input[type="text"]{
	height: 30px;
	padding: 5px 10px;
	border: 1px solid #CCCCCC;
	font-size: 14px;
}

/* .search-box input[type="text"], .result{ */
	/* width: 100%; */
	/* box-sizing: border-box; */
/* } */
.search-box input[type="text"]{
	width: 100%;
	box-sizing: border-box;
}

.result{
	position: absolute;        
	z-index: 999;
	top: 100%;
	left: 0;
	/* background: white; */
	/* background: #f0f5f5; */
	background: #F5F5F5;
	border-radius: 6px;	
}

.result{
	width: 200%;
	box-sizing: border-box;
	margin-left:-26%;
	
}
/* Formatting result items */
.result a{
	text-decoration:none;
}

.result li{
	margin: 5px;
	padding: 0px 0px;
	border: none;
	border-radius:3px;
	cursor: pointer;
	height: auto;
	font-size: 16px;
	list-style-type: none;
}
.result li:hover{
	/* background: #ccddff; */
	background: #D0D0D0;
	/* font-weight: bold; */
	/* color: #00000; */
	/* color: #ffffff; */
	/*background: #f2f2f2;*/
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: #A9A9A9; */
}



/* ======================= MENUS ON THE RIGHT OF THE SEARCH BAR ================================== */
.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;	  
  /*font-weight:bold;*/
  /*font-size:20px;*/
}

.dropdown-menu a {
  line-height:20px;
  color:blue;
	/*font-size:0;*/
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.pull-right .dropdown-menu,
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: -15px;
  margin-left: 0px;
  
}

.navbar .sub-menu:before {
  border-bottom: 0px solid transparent;
  border-left: none;
  border-right: 0px solid rgba(0, 0, 0, 0.2);
  border-top: 0px solid transparent;
  left: -7px;
  top: 0px;
}

.navbar .sub-menu:after {
  
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

/* ======================= Search button and Icon ================================== */
span.search-button {
	background: url(../images/search.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	/* background-size: contain; */
	background-size: contain;
	cursor: pointer;
	display: inline-block;
	/* height: 17px; */
	height: 20px;
	/* width: 40px; */
	width: 20px;
}	
/* ======================= ADD MORE STUFF BELOW ================================== */

/* Mobile devices */
@media (max-width: 768px) {
    .resultx {
        width: 90%;
    }

    .resultx li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

}