.country-coded-field{
   position: relative;
   
}
.country-coded-field input{
   padding-left: 90px;
}
.country-picker{
   transition: all 0.1s ease;
   margin-inline: 5px;
   border-radius: 4px;
}
.country-picker:hover{
   /* background: #65edff21; */
   scale: 1.3;
   /* box-shadow:  inset 0 0 7px #b7ff659f; */
}
.country-picker:hover .country-img{
   box-shadow: -10px 0 5px rgba(251, 251, 57, 0.341), 0 0 12px rgba(59, 59, 59, 0.777);
}
.select-hidden{
   max-height: 0px !important;
}
.country-container{
   position: absolute;
   left: 0px;
   top:0px;
   bottom:0px;
}
.country-selected{
   padding: 3px;
   width: 85px;
}
.country-select{
   position: relative;
   height: 300px;
   max-height:300px;
   margin-top: 0px;
   /* scrollbar-width: thin;
   scrollbar-color: #8C7AF1 #f0f0f0; */
   overflow-y: auto;
   overflow-x: hidden;
   transition: all 0.3s ease-in;
   background: rgb(242, 242, 242);
   z-index: 999;
   box-shadow:  0 0 10px rgba(0, 0, 0, 0.414);
   border-radius: 10px;
   padding: 0px;
}
.country-selected{

}
.country-selected .country-img{
   max-height: 20px;
   max-width: 30px;
   width: unset;
}
.country-selected p{
   color: gray;
   margin-left: 6px;
   padding-top: 1px;
   font-size: 14px;
}
.country-option{
   cursor: pointer;
}

.country-block{
   display: flex;
   justify-content: space-between;
   padding: 5px;
   margin:5px;
   user-select: none;
}
.country-img{
   object-fit: contain;
   width: 30px;
   border-radius: 3px;
   box-shadow:  0 0 8px rgba(59, 59, 59, 0.435);
   background: none;
}
.country-code{
   margin-left: 2px;
}
.avail{
   width: -webkit-fill-available;
}


/* Webkit browsers (Chrome, Safari, Edge) */
.country-select::-webkit-scrollbar {
  width: 10px;  /* szerokość scrollbara */
  border-radius: 10px;
}


.country-select::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);  /* kolor tła paska przewijania */
  border-radius: 10px;
}

.country-select:hover::-webkit-scrollbar-thumb {
  background-color: #b7ff65ce; /* kolor thumba */
  border-radius: 4px;
  border: 2px solid #f0f0f0; /* odstęp wokół thumba */
}

/* Hover efekt na thumb */
.country-select::-webkit-scrollbar-thumb:hover {
  background-color: #2980b9;
}