#search-content {
position:absolute; /*width:300px;*/ width:280px; margin:0 auto; /* right:10px;*/ /*border:1px solid red;*/
right:10px;
top:0px;
}
#search-right-outside {
position:relative; top:10px; /*right:-265px;*/  height:30px; /*border:1px solid red;*/
}

#acrf {
position:absolute;right:0px; top:112px;
}

#qr-cont {
/*position:relative; width:1150px; margin:0 auto;*/
/*position:relative; width:300px; margin:0 auto; border:1px solid red;top:-100px;*/

}
#qr-code {
/*position:absolute; top:65px; left:-10px;*/
position:absolute; top:110px; left:-300px; /*border:1px solid blue;*/
}
.qr-holder {
float:left;
display: inline;
object-fit: cover;
max-width:300px;
max-height:300px;
width:50%;
height:50%;
border:0;
margin:0;
}

/* Nekih 1600px */
/*
@media screen and (min-width: 1024px) and (max-width: 1500px) {
#search-content {
position:absolute; width:250px; margin:0 auto; right:10px; top:40px;
}
#search-right-outside {
position:relative; top:10px; height:30px;
}
}
 end 1600 */

/* Phone & Small Tablets */
@media screen and (max-width: 767px) {
	/*
	#search-content {
	position:relative; width:250px; margin:0 auto;
	}
	#search-right-outside {
	position:absolute; top:-50px; right:-150px;
	}
	*/
#search-content {
position:absolute; width:200px; margin:0 auto; right:7px; top:0px; /*border:1px solid red;*/
}
#search-right-outside {
position:relative; top:7px; /*right:-265px;*/  height:30px; /*border:1px solid red;*/
}

	#qr-code {
	position:absolute; top:10px; left:-10px; 
	}
	.qr-holder {
	float:left;
	display: inline;
	object-fit: cover;
	max-width:200px;
	max-height:200px;
	min-width:110px;
	min-height:110px;
	width:50%;
	height:50%;
	border:0;
	margin:0;
	}
}
/* End Phone & Small Tablets */

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	/*
	#search-content {
	position:relative; width:300px; margin:0 auto;
	}
	#search-right-outside {
	position:absolute; top:-50px; right:-200px;
	}
	*/
#search-content {
position:absolute; width:200px; margin:0 auto; right:10px; top:0px; /*border:1px solid red;*/
}
#search-right-outside {
position:relative; top:10px; /*right:-265px;*/  height:30px;/*border:1px solid red;*/
}

	#qr-code {
	position:absolute; top:140px; left:-200px; 
	}
}
/* End Tablet */

/* #Grid
================================================== */
@media screen and (max-width: 400px) {

}
/* End Grid */
/* End 400px
================================================== */
#search {

}
.textbox { 
  box-sizing: border-box;
}
/* Mnogo vazno! */
/*
* {box-sizing:border-box;}
*/
#search input[type="text"] {
	/*width: 150px !important;*/
	/*width: 245px !important;*/
	width: 245px !important;
	width: 100%;
    /*padding: 6px 15px 6px 35px;*/
    
    /*background: url(../img/search-crni.png) no-repeat 10px 6px transparent;*/
    /* briemo lupicu i pomeramo text padding
    background: url(../css/search/lupica.png) no-repeat 10px 6px rgba(255, 255, 255, 0.45);
    */
    /*padding: 6px 0px 10px 0px;*/
    height: 28px;
    margin:1px;
    padding: 1px 2px 1px 2px;
    box-sizing: border-box;
    
    
    
    border: 1px solid #d1d1d1;
    /*font: normal 12px Arial,Verdana,Tahoma,Helvetica,Sans-serif;*/
    font: 14px Arial, sans-serif, "HelveticaNeue", "Helvetica Neue", Helvetica;
    color: #000;
    /*
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    */
    
    color: #ccc;
    background: transparent;
    
    
}

#search input[type="text"]:focus {
	/*width: 200px !important;*/
	/*background: url(../img/search-white.png) no-repeat 10px 6px #fcfcfc;*/
	/* background: url(../img/lupica.png) no-repeat 10px 6px #fcfcfc;*/
	/*
	background: url(../css/search/lupica.png) no-repeat 10px 6px #fcfcfc;
	*/
	/*text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);*/
	
	background: #fff;
	
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;

}

input::-moz-selection {
    background-color: #000;/*#2A83ED;*/
    color:#fff;
}

/* NOVI KOD 
 * https://bbbootstrap.com/snippets/expandable-search-bar-12368750
 * https://bootsnipp.com/snippets/PjQN9
 * 
 * https://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/
 * https://jsfiddle.net/solodev/0tn5ggLt/
 * https://www.w3schools.com/howto/howto_css_animated_search.asp
 * 
.search-form .form-group {
  float: right !important;
  transition: all 0.35s, border-radius 0s;
  width: 32px;
  height: 32px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
  border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
  padding-right: 20px;
  border: 0 none;
  background: transparent;
  box-shadow: none;
  display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
  display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
  display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
    display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
  display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
  width: 100%;
  border-radius: 4px 25px 25px 4px;
}
*/

/*
 *  body {
     background: #e8eaed
 }

 .container {
     max-width: 600px;
     margin: 50px auto
 }

 .searchbar {
     position: relative;
     min-width: 50px;
     width: 0%;
     height: 50px;
     float: right;
     overflow: hidden;
     -webkit-transition: width 0.3s;
     -moz-transition: width 0.3s;
     -ms-transition: width 0.3s;
     -o-transition: width 0.3s;
     transition: width 0.3s
 }

 .searchbar-input {
     top: 0;
     right: 0;
     border: 0;
     outline: 0;
     background: #6200EA;
     width: 100%;
     height: 50px;
     margin: 0;
     padding: 0px 55px 0px 20px;
     font-size: 20px;
     color: #fff
 }

 .searchbar-input::-webkit-input-placeholder {
     color: #fff
 }

 .searchbar-input:-moz-placeholder {
     color: #fff
 }

 .searchbar-input::-moz-placeholder {
     color: #fff
 }

 .searchbar-input:-ms-input-placeholder {
     color: #fff
 }

 .searchbar-icon,
 .searchbar-submit {
     width: 50px;
     height: 50px;
     display: block;
     position: absolute;
     top: 0;
     font-family: verdana;
     font-size: 22px;
     right: 0;
     padding: 0;
     margin: 0;
     border: 0;
     outline: 0;
     line-height: 50px;
     text-align: center;
     cursor: pointer;
     color: #fff;
     background: #6200EA;
     border-left: 1px solid white
 }

 .searchbar-open {
     width: 100%
 }
 */

 .searchbar {
     position: relative;
      float: right;
     overflow: hidden;
     margin-left:30px;
     
     min-width: 30px;
     width: 0%;
     height: 30px;
     /*border: 1px solid red;*/
    
     -webkit-transition: width 0.3s;
     -moz-transition: width 0.3s;
     -ms-transition: width 0.3s;
     -o-transition: width 0.3s;
     transition: width 0.3s
     
     
 }
  .searchbar-open {
     width: 100%;
     
 }
 
 .searchbar-input {
    
 }

 .searchbar-input::-webkit-input-placeholder {
     color: #fff
 }

 .searchbar-input:-moz-placeholder {
     color: #fff
 }

 .searchbar-input::-moz-placeholder {
     color: #fff
 }

 .searchbar-input:-ms-input-placeholder {
     color: #fff
 }

 
 .searchbar-submit, .searchbar-icon {
     display: block;
     position: absolute;
     
     width: 30px;
     height: 30px;
     
     top: 0;
     
     box-sizing:border-box;
     
     right: 0;
     padding: 0;
     margin: 0;
     border: 0;
     outline: 0;
     /*
     font-family: Arial,Verdana,Tahoma,Helvetica,Sans-serif;
     */
     /*font-size: 10px;*/
     /*
          line-height: 20px;
     */
     text-align: center;
     cursor: pointer;
     color: #fff;
     /*background: #6200EA;*/
     /*border-left: 1px solid white;*/
     background: transparent;
     
     /*background: url(../css/search/lupica.png) no-repeat 10px 6px rgba(255, 255, 255, 0.45);*/
     background: url(../css/search/lupicaplava.png) no-repeat 6px 6px transparent;
     
     
     border: 1px solid transparent;
     
     
     
     /*
     border-bottom: 1px solid white;
     */
         
    border-right: 1px solid #ccc;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  
 }
 
 
  .searchbar-icon:hover,
 .searchbar-submit:hover {
     /*border: 1px solid #c00;*/
          
 }
 
   .searchbar-icon:active,
 .searchbar-submit:active {
     border-right: 1px solid transparent;
     
 }