.defaultcolor{
    color:#DA70D6;
}
.pink{
        color:#DA70D6;
    
}
    
    
  .seperator {
    height: 1px;
    background-color: #DA70D6;
    margin: 5px 0;
    width: 75%; /* Set the width to 75% */
    border: none;
    border-top: 1px dotted #DA70D6;
}  

.defaultcolor{
    color:#DA70D6;
}
.title active{
    color:#fff;
}
.spanImage{
    background-image: url("../images/plate.png");
    background-repeat: no-repeat; 
}
.iconinfo { 
  height: 16px;
  width: 16px;
  display: inline; margin-right:-8px} 
 
 .partnerformlabel { color:#DA70D6;
 margin-top:25px !important;
 margin-bottom:25px !important;
  font-size: 15px; } 
 
 .gm-ui-hover-effect {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 28px !important;
    height: 28px !important;
    top: 6px !important;
    right: 6px !important;
    opacity: 1 !important; z-index: 99;
}

/* Recolor the “X” icon */
.gm-ui-hover-effect > span {
    filter: brightness(0) saturate(100%) invert(33%) sepia(79%) saturate(2082%) hue-rotate(273deg) brightness(93%) contrast(106%) !important;
    /* Above filter = purple (#DA70D6) */
    width: 20px !important;
    height: 20px !important;
    margin: 4px !important;
}
 .popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 175px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  font-size:11px;
  font-weight:400;
  left: 50%;
  height: 100px;
  margin-left: -150px;
}
 .finnishFlag {
     
     
      display: inline-block;
            width: 16px;
            height: 16px;
         background-image: url('../images/bg/finnish.png'); 
            background-size: cover; /* Adjust as needed */
            margin-right: 5px; /* Adjust margin as needed */
     
      
        } 
        .britishFlag {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('..//images/bg/uk.png');  
            background-size: cover; /* Adjust as needed */
        }
/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
 
 
 
 
 
 
 
 
 
 
 
* {
  box-sizing: border-box;
}

.price {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #DA70D6;
  display: flex;
  align-items: center;
  color: #fff;
  }

.price, .price * {
  margin: 0;
  padding: 0;
  color: #fff;
}
    
.price p {
  font-size: 18px;
  display: flex;
  margin: 0 auto;
  color: #fff;
 }
 
 .price p sup {
  font-size: 13px;
  color: #fff;
 }

.selectbtn{
    margin-top: -30px; margin-right:4px;
}

@media(max-width: 700px){
.selectbtn {
    
    margin-top: -2px; margin-right:4px;
}
}

@-webkit-keyframes pulse {
  0% { box-shadow:0 0 8px #DA70D6, inset 0 0 8px #DA70D6; }
  50% { box-shadow:0 0 16px #DA70D6, inset 0 0 14px #DA70D6; }
  100% { box-shadow:0 0 8px #DA70D6, inset 0 0 8px #DA70D6; }
}
 

@media(min-width: 900px){
.inner {
  background-color:transparent;
  width:100px;
  position: relative;
 top: 70%;
    right: 30%;
  height:100px;
  border-radius:50px;
  box-shadow: 0 0 8px #DA70D6, inset 0 0 8px #DA70D6;
  -webkit-animation: pulse 2s linear 1s infinite;
}
}

@media(max-width: 800px){
.inner {
  background-color:transparent;
  width:100px;
  position: relative;
  
 top: 60%;  
    left: -40%;
  height:100px; 
  border-radius:50px;
  box-shadow: 0 0 8px #DA70D6, inset 0 0 8px #DA70D6;
  -webkit-animation: pulse 2s linear 1s infinite;
}
}

.inner p {
  display:block;
  text-align: center;
  line-height: 100px;
  font-family:sans-serif;
  font-weight:100;
  font-size:24px;
  color: #000;
  text-shadow: 0 0 4px #DA70D6; 
}


@media(min-width: 900px){
.innner {
  background-color:transparent;
  width:100px;
  position: fixed; 
 top: 70%;
    right: 40%;
  height:100px;
  border-radius:50px;
  box-shadow: 0 0 8px #DA70D6, inset 0 0 8px #DA70D6;
  -webkit-animation: pulse 2s linear 1s infinite;
}
}

@media(max-width: 720px){
.innner {
  background-color:transparent;
  width:100px;
  position: fixed;
   
   
 top: 60%;  
    left: 5px;
  height:100px;  
  border-radius:50px;
  box-shadow: 0 0 8px #DA70D6, inset 0 0 8px #DA70D6;
  -webkit-animation: pulse 2s linear 1s infinite;
}
}
 .innner p {
  display:block;
  text-align: center;
  line-height: 100px;
  font-family:sans-serif;
  font-weight:100;
  font-size:24px;
  color: #000;
  text-shadow: 0 0 4px #DA70D6; 
}

 



.radio-group {
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/*@media (max-width: 48em) {
  .radio-group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    text-align: left;
  }
}*/

.radio-group-label {
  display: block;
  width: 100%;
  margin: 10px 0;
}

.radio-label {
  position: relative;
  display: inline-block;
  margin: 10px;
}
@media (max-width: 48em) {
  .radio-label {
    display: block;
    margin: 10px 0;
  }
}
.radio-label input {
  opacity: 0;
  position: absolute;
  background-color: #DA70D6;
}
.radio-label .inner-label {
  position: relative;
  display: inline-block;
  padding-left: 40px; color:#333; font-weight:400; font-size:13px;
}
.radio-label .inner-label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 25px;
  border-bottom: 1px dashed #DA70D6;
  width: 30px;
  -webkit-transition: border-bottom 0.5s ease;
  transition: border-bottom 0.5s ease;
}
.radio-label input:focus ~ .inner-label:before {
  border-bottom: 1px solid #DA70D6;
}
.radio-label input:checked ~ .inner-label:after {
  content: '\2713';
  color: #DA70D6;
  position: absolute;
  font-size: 15px; font-weight:bold;
  left: 12px;
  top: 1px;
}


  .plate{ 
      text-transform:uppercase; 
  height: 50px;  
  line-height: 1.5; 
  text-align: center; 
  border: 1px solid #ddd;
  border-radius: 4px;
    width: 100%; 
    color:#fff;
  


    background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px; 
    outline: none;
    font-size: 18px; 
    letter-spacing: 1px;
	color-scheme: dark;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}

			 /*  Maps */
.plate::placeholder {
  color: #ccc;
}			 
			 
 .typeahead{
  width: 100%;
}

h3 small {
  display: block;
  font-size: 12px;
}

button {
  margin-top: 40px;
}
.mapside{
  margin-left: 25%;
}
.sidebar{
  width: 26%;
  float: left; margin-left:-1%;
}

.plateimage{
    background-image: url("../images/plate.png");
    background-repeat: no-repeat; background-color:transparent;  
}

 .formfieldset{ margin-top:-45%;
 }
 
 .toplabel{  color: #DA70D6; font-weight:bold; font-size:12
} 
.btn-orange { 
    border: 1px solid #DA70D6;  /* make sure border is visible */
    background: none;
    color: #DA70D6 !important;
    border-radius: 6px;         /* optional rounded corners */
    padding: 8px 16px;          /* optional padding */
    cursor: pointer;
    transition: all 0.3s ease;  /* smooth hover transition */
}   

.btn-orange:hover { 
    border-color: #DA70D6;
    background: #DA70D6;
    color: white !important;
}

  
.sbtn{
    width: 60%;
    height: 35px;
    border: none; 
    border-radius: 50px;
    position: absolute;
    z-index: 5;
    margin-top: -9%;
    font-size: 15px;
    font-weight: bold;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #DA70D6;
color: white !important;
  } 
   
.twobuttons {
justify-content: center !important;
    align-items: center !important;   
    text-align: center !important; 
      margin-top:2% !important;
    }
 
.hori1 {
    display: inline-block;
    vertical-align: left; 
    width: 40% !important;  
}
.hori2{
    display: inline-block;
    vertical-align: right; 
    width: 40% !important;  
}

/* Smoke */
  /* Page overlay when menu is open */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5); /* tinted background */
    display: none;
    z-index: 5;
  }

  /* Hamburger button */
  .hamburger {
    position: fixed;
    top: 12px;
    right: 20px;
    z-index: 10;
    cursor: pointer;
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .hamburger div {
    width: 100%;
    height: 4px;
    background-color: #DA70D6;
    transition: all 0.3s ease;
  }
.hamburger:hover div {
  background-color: #BF40BF;
}

  /* Hamburger animation when active */
  .hamburger.active div:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  .hamburger.active div:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active div:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  /* Menu container */
  .hamburgernav {
    position: fixed;
    top: 0;
    right: -250px; /* hidden initially */
    width: 250px;
    height: 100%;
    background-color: #111;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease;
    z-index: 9;
  }

  .hamburgernav.active {
    right: 0;
  }

  .hamburgernav a {
 color: #fff;
    text-decoration: none;
    font-size: 16px;
    margin: 10px 0;
    transition: color 0.3s;
  }

  .hamburgernav a:hover {
    color: #DA70D6;
  }

 

    @media (min-width: 768px) and (orientation: portrait)  {
  
  
.sbtn{
    width: 60%;
    height: 35px;
    border: none; 
    border-radius: 50px;
    position: absolute;
    z-index: 5;
    background: #DA70D6;
color: white;
    margin-top: -5%;
    font-size: 15px;
    font-weight: bold;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  
  
     .formfieldset{ margin-top:-43%;
 }
 
  .twobuttons{    justify-content: center !important;     text-align: center !important; 
  width: 100% !important;
    align-items: center; 
      margin-top:2% !important;
  margin-bottom:2% !important;
  margin-left:10% !important;
 }
 .hori1 {
    display: inline-block; 
    width: 40% !important;  
}
.hori2{
    display: inline-block; 
    width: 40% !important;  
}

}
   
   
   
@media screen and (min-width: 150px) and (max-width: 800px) and (orientation: portrait) {
  
.infoservice{ 
    margin-top:1%;
}
  .sidebar{
  display: none;
}
.searchMap{
  display: none !important;
}
.topside{
  display: block !important;
}


.infobutton {
 
   margin-top: -16px;  margin-right: 15%;  width:10%
}
.alignrightbutton {
 
   margin-left: 33%;  
} 


.twobuttons{   
  margin-left:10% !important;
      margin-top:2% !important;
  justify-content: center !important;    
text-align: center !important; 
  width: 100% !important;  
 }
 .hori1 {
    display: inline; 
    width: 100% !important;  
}
.hori2{
    display: inline; 
    width: 45 !important;  
}










.mapside{
  margin-left: 0%;
}
.form{
 
 
 
    width: 95% !important;
    text-align: center !important;
  
    background: #ffffffd6 !important;
 
    font-size: 11px !important;
	color: black; 
    display: block; 
    position: absolute;
    z-index: 5;
    margin: 1% !important; 
    height: 120vh !important; 
    padding-top: 10%;
    border-radius: 10px;
   
   /* margin-top: 26% !important; */
}  
.formcontent{
	
    margin-top: 30%;
	} 
	
 
   

.btn{
  font-weight: bold; 
    height: 36px;
    width: 35% !important; 
    /*border: none;
    background: orange; */
    border-radius: 20px;
    color: white; float:left;
	padding:3px; 
    text-align: -webkit-center;
margin: 0 auto;
display: inline !important;  
}

 
.twobuttons{
    margin-top:2%;  
}


 
	
	
#map_canvas {
  height: 650px !important;

}

.showlist{
display: block !important;
}
.test{
border:none !important;
}
.showmap{
display: block !important;
}
}
 

 



@media screen and (min-width: 512px)  and (max-width: 1200px)  and (orientation: landscape) {
    
    .formfieldset{ margin-top:-26%;
 }
    .mapside{
  margin-left: 35%;
}
.sidebar{
  width: 35%; 
  float: left; margin-left:-1%;
}
#map_canvas {
  height: 700px !important;
  width: 100%;
}
.sample{
  display: block;
    width: 110%;
    height: 470px !important;
    border: 1px solid #e9e9e9;
    overflow: scroll;
}
.infoservice{ 
    margin-top:-15%;
}
.form{
 
 
 
    width: 55% !important;
    text-align: center !important;
  
    background: #ffffffd6 !important;
 
    font-size: 11px !important;
	color: black; 
    display: block; 
    position: absolute;
    z-index: 5;
    margin: 1% !important; 
    height: 130vh !important; 
    padding-top: 10%;
    border-radius: 10px;
   
   /* margin-top: 26% !important; */
}  
/*

.hxjePz{font-family:S Bonus UX,Helvetica Neue,Arial,sans-serif;font-size:0.75rem;font-weight:400;line-height:15px; margin-right:45%;}
data-styled.g413[id="sc-111bf21a-2"]{content:"hxjePz,"}
.DGKyC{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly; margin-bottom:1rem;margin-left:30%;}
*/

}



 





@media screen and (min-width: 500px) and (max-width: 1000px)  and (orientation: landscape)   {
    
       .formfieldset{ margin-top:-26%;
 }
    
   .form{
 
 
 
    width: 45% !important;
    text-align: center !important;
  
    background: #ffffffd6 !important;
 
    font-size: 11px !important;
	color: black; 
    display: block; 
    position: absolute;
    z-index: 5;
    margin: 1% !important; 
    height: 200vh !important; 
    padding-top: 10%;
    border-radius: 10px;
   
   /* margin-top: 26% !important; */
}   
}



@media screen and (min-width: 1200px) and (max-width: 2000px)  and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    
       .formfieldset{ margin-top:-26%;
 }
    
   .form{
 
 
 
    width: 45% !important;
    text-align: center !important;
  
    background: #ffffffd6 !important;
 
    font-size: 11px !important;
	color: black; 
    display: block; 
    position: absolute;
    z-index: 5;
    margin: 1% !important; 
    height: 130vh !important; 
    padding-top: 10%;
    border-radius: 10px;
   
   /* margin-top: 26% !important; */
}   
}


@media screen and (min-width: 951px)  and  (max-width: 1300px) and (orientation: landscape) {
    .mapside{
  margin-left: 35%;
}
.sidebar{
  width: 35%; 
  float: left; margin-left:-1%;
}
#map_canvas {
  height: 680px !important;
  width: 100%;
}
.sample{
  display: block;
    width: 120%;
    height: 500px !important;
    border: 1px solid #e9e9e9;
    overflow: scroll;
}


/*
.hxjePz{font-family:S Bonus UX,Helvetica Neue,Arial,sans-serif;font-size:0.75rem;font-weight:400;line-height:15px; margin-right:45%;} 
data-styled.g413[id="sc-111bf21a-2"]{content:"hxjePz,"} 
.DGKyC{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly; margin-bottom:1rem;margin-left:45%;} 
*/
}


/*
@media only screen and (min-width:600px) and (orientation: landscape){
    .DGKyC .sc-111bf21a-0{ margin-right:80%;}
    #resetFilter{
	margin-top: 4% !important;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: #DA70D6;
    border: none;
    border-radius: 50px;
    width: 40%;
    height: 28px;
    font-size: 14px;
    font-weight: bold;	color: white;
} 
}*/

@media screen and (min-width: 801px)  and (orientation: portrait) {
    .mapside{
  margin-left: 35%;
}
.sidebar{
  width: 35%; 
}
#map_canvas {
  height: 675px !important;
  width: 100%;
}
.sample{
  display: block;
    width: 120%;
    height: 490px !important;
    border: 1px solid #e9e9e9;
    overflow: scroll;
}



/*
.hxjePz{font-family:S Bonus UX,Helvetica Neue,Arial,sans-serif;font-size:0.75rem;font-weight:400;line-height:15px; margin-right:45%;} 
data-styled.g413[id="sc-111bf21a-2"]{content:"hxjePz,"} 
.DGKyC{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly; margin-bottom:1rem;margin-left:30%;} 
*/
    
    
}




.showmap{
display: none;
}
.showlist{
display: none ;
}



.topside{
  display: none;
}

#map_canvas {
  height: 730px;
  width: 100%;
}
#searchMap{
	text-align: center; 
}
input{
	padding: 7px;
    padding-left: 3%;
    border: 2px solid #d4d4d4;
    border-radius: 50px;
    margin-top: 3%;
    width: 95%;
    height: 50px;
    box-shadow: 3px 3px 4px 0px #d2d2d2;
	color: black;
    font-size: 16px;
}

.sample{
  display: block;
    width: 110%;
    height: 540px;
    border: 1px solid #e9e9e9;
    overflow: scroll;
}
  /*  
.btn{
  font-weight: bold;
    margin-top: 0;
    height: 36px;
    width: 90%;
    border: none; 
    background: none;
    font-size: 12px;
    border-radius: 20px;
    color: white;
	padding:5px;
    margin-right: 4%;
    text-align: -webkit-center;
} */

.form{
	color: black;
    background: #ffffffd6;
    width: 28%;
    display: block;
    /* margin-left: auto; */
    position: absolute;
    z-index: 5;
    right: 2%;
    height: 105vh;
    margin-top: 1%;
    font-size: 30px;
    text-align: center;
    padding-top: 10%;
    border-radius: 10px;

}

.alerts {
  color: #DA70D6;
  display: none;
  font-size: 13px;
  font-weight: 400;
  &.is-visible {
    display: block;
  }
}
h3{
	font-size: 12px !important;
    margin: 0 !important;
    text-align: center !important;
	color: black !important;
}
.filter-select {
    margin-left: auto;
    width: 100%;
    margin-right: auto;
}
 #resetFilter{
	margin-top: 4% !important;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: #DA70D6;
    border: none;
    border-radius: 50px;
    width: 40%;
    height: 28px;
    font-size: 14px;
    font-weight: bold;	color: white;
} 
.info{
	color: white;
}

.inrow{
  display: flex;
    flex-direction: row;
    /* position: relative; */
    margin-left: 20%; 
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-evenly;
}
.inrowlable{ 
    flex-direction: row;
    
display: inline !important;   
    align-content: stretch;
    justify-content: space-evenly;
}
.title{
  color: black;
    font-size: 20px;
    font-weight: bold;
    margin-left: 5%;
    margin: 0;
    margin-left: 5%;
    margin-top: 2%;
}
.cat{
  color: #333;
    font-size: 14px;
    /* font-weight: bold; */
    margin-left: 5%;
    margin: 0;
    margin-left: 5%;
	margin-top: 7px; margin-bottom: 7px
}


.infoWindow {
            overflow: hidden !important;width:30rem;
        }
     
@media screen and (min-width: 380px)  and (orientation: portrait)  {


  .infoWindow {
            overflow: hidden !important;
            width:100rem !important;
        } 
}
        
        
		#map_canvas .card-header.bg-success.text-white {
  text-align: center; background-color:#DA70D6;
    font-weight: bold;
    font-size: 20px;
}
#map_canvas .card-header {
    padding: 0.45rem 1.25rem !important;
  }
 #map_canvas .text-muted {
    text-align: center;
    color: #6c757d!important;
    margin-bottom: 5px;
    margin-top: 5px;
}
 li.list-group-item { 
    padding: 10px !important;
    width:100% !important;
	color: black;
} 
.infobutton {
   
   margin-top: -16px;  margin-right: 10%;  width:25%
}
 .radio-container {
    display: inline-flex; 
    align-items: center;  
    margin-top: 10px;  
    margin-bottom: 10px;  
    margin-right: 10px;  
}

.radio-container label {
    color: grey;
    font-size: 12px;
    display: flex;
    align-items: center; /* Center the label content vertically */
}

.radio-container input[type="radio"] {
    transform: scale(1.0); /* Adjust the size of the radio button */
    margin-right: 5px; /* Add some space between the radio button and label */
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* For older versions of webkit-based browsers */
    border: 1px solid #DA70D6; /* Add a simple border */
    border-radius: 50%; /* Make the border circular */
    width: 16px; /* Set a specific width for the radio button */
    height: 16px; /* Set a specific height for the radio button */
    background-color: #fff; /* Set a background color for the radio button */
    outline: none; /* Remove the outline when focused */
}

/* Style radio buttons when checked */
.radio-container input[type="radio"]:checked {
    background-color: #DA70D6; /* Change the background color when checked */
}






.name{
  color: #DA70D6;
    font-size: 15px;
    font-weight: bold;
    margin-left: 5%;
    margin: 0;
    margin-left: 5%;
}
hr{
  margin-bottom: 10px !important;
    border: 0;
    border-top: 2px solid #f1f1f1 !important;
    width: 95% ;
    margin-top: 10px !important;
}

.tt-menu {
  border: 1px solid transparent;
  border-color: transparent lightgrey lightgrey lightgrey;
  background: white;
  width: 100%;


  .tt-dataset {
   .tt-suggestion {
      color: darkgrey;
      cursor: pointer;
      padding: 1rem;
      user-select: none;

     &.tt-cursor, &:hover {
        background: lightgrey;
        color: white;
      }
  
         & + .tt-suggestion {
          border-top: 1px solid lightgrey;
        }
    }
  }
}

.sc-111bf21a-1.hyioVG {
  border: 1px solid #DA70D6 !important;
  border-radius: 2px; /* adjust this value to taste */
}



.ghKgBE{ margin-right:35px; color:black; display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/
data-styled.g411[id="sc-111bf21a-0"]{content:"ghKgBE,"}/*!sc*/ 
data-styled.g412[id="sc-111bf21a-1"]{content:"hyioVG,"}/*!sc*/
.hxjePz{font-family:S Bonus UX,Helvetica Neue,Arial,sans-serif;font-size:0.75rem;font-weight:400;line-height:15px; margin-right:20%;}/*!sc*/
data-styled.g413[id="sc-111bf21a-2"]{content:"hxjePz,"} 

/*
.DGKyC{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly; margin-bottom:1rem;margin-left:30%;} 
.DGKyC .sc-111bf21a-0{width:calc(100% / 5);} 
@media only screen and (min-width:1024px){.DGKyC .sc-111bf21a-0{width:48px;margin-right:30%;}}
@media only screen and (min-width:768px){.DGKyC{width:60%;}}  
data-styled.g427[id="sc-46e51f1d-0"]{content:"DGKyC,"}
*/


.ghKgBE {
  margin-left: auto; /* Align buttons to the right */
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
}

  @media only screen and (max-width: 680px) {
   
.ghKgBE {   
  margin-top: 100px;
}
  }
.hxjePz {
  font-family: 'S Bonus UX', Helvetica Neue, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 15px;
  margin-right: 20%;
}

.DGKyC {
  display: flex;
  justify-content: center; /* Center buttons */
  margin-bottom: 1rem;
  margin-left: 5%; 
  margin-top: 20%; 
}

.DGKyC .sc-111bf21a-0 {
  width: calc(100% / 5);
}

@media only screen and (min-width: 768px) {
  .DGKyC {
    /* Adjust width as needed */
    margin-left: auto; /* Center buttons */
    margin-right: auto;
     width: 90%; 
  }
}

@media only screen and (max-width: 767px) {
  .DGKyC { width: 90%;
 
    justify-content: center;
  }
}

.sc-111bf21a-1.hyioVG {
  margin: 5px; /* Adjust spacing between buttons */
 }

.sc-111bf21a-1.hyioVG img {
  width: 24px;
  height: 24px;
}






















.sc-111bf21a-1.active {
    border: 2px solid #DA70D6;
    /* Add other styles as needed */
}

.showcheckbox{ content: "";
      display: inline-block;
         position: relative;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}

.infoservice{
    width:25px; margin-left:5px; 
    margin-right:5px;  
}



.containersel {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .select-container {
            flex: 1;
            margin-right: 10px;
        }
        
       select {
        text-transform: capitalize;
        height: 50px;
        line-height: 1.5; 
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 100%;
        color: #fff;
        background: rgba(0, 0, 0, 0.5) !important;
        padding: 4px 12px;
        outline: none;
        font-size: 12px;
        letter-spacing: 1px;
        color-scheme: dark;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    }

    select:focus,
    select:hover {
        background: rgba(0, 0, 0, 0.7) !important;
    }

    select option {
        color: #fff; /* Change this to your desired option text color */
    }



  /* Base button style */
.sc-111bf21a-1.hyioVG {
  border: 1px solid #DA70D6;
  background-color: #f5f5f5; /* light grey */
  color: #333;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover effect */
.sc-111bf21a-1.hyioVG:hover {
  background-color: #ffe6de;   /* soft red-tinted grey */
  border-color: #e34c20;       /* darker red on hover */
  transform: translateY(-2px); /* slight lift effect */
}

/* Active (clicked) state */
.sc-111bf21a-1.hyioVG.active {
  background-color: #fff;  /* red fill */
  color: #fff;                /* white text/icons */
  border-color: #DA70D6;      /* same red border */
  transform: translateY(0);   /* reset any hover lift */
}

.filter-select {
    display: flex; 
    overflow-x: scroll;    /* ensures scrollbar always appears */
    width: 100%; 
    scroll-behavior: smooth;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 4px;
}
@media (min-width: 780.98px) {
  .filter-select {
  
    margin-top: -14px;
  }
/* Webkit browsers (Chrome, Safari, Edge) */
.filter-select::-webkit-scrollbar {
    height: 1px;             /* visible but not too thick */
}

.filter-select::-webkit-scrollbar-track {
    background: #f0f0f0;     /* light grey track */
    border-radius: 2px;
}

.filter-select::-webkit-scrollbar-thumb {
    background-color: orchid; /* thumb color */
    border-radius: 1px;
}

/* Firefox */
.filter-select {
    scrollbar-width: auto;      /* always show */
    scrollbar-color: orchid #f0f0f0;
}

/* Items spacing */
.filter-select .ghKgBE {
    flex: 0 0 19%;      /* 5 items visible */
    max-width: 19%;
    margin-right: 1px;  /* small spacing between icons */
}

.filter-select .ghKgBE:last-child {
    margin-right: 0;
}