@font-face {
  font-family: 'Avenir Next Font';
  src: url('../font/avenirnextltpro-regular-webfont.woff2') format('woff2'),
       url('../font/avenirnextltpro-regular-webfont.woff') format('woff'),
       url('../font/AvenirNextLTPro-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir Next Font';
  src: url('../font/avenirnextltpro-bold-webfont.woff2') format('woff2'),
       url('../font/avenirnextltpro-bold-webfont.woff') format('woff'),
       url('../font/AvenirNextLTPro-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
body {
  font-size: 13px;
}
#nahiroimap_meta_box div.inside{
    position: relative;
        padding-bottom: 40px;
}
#nahiroimap_meta_box, #nahiroimap_map_preview-meta_box .postbox-header{
font-family: "Avenir Next Font", sans-serif;
font-weight: 500;
}
/* Style the tab */
.tab {
overflow: hidden;
background-color: #f1f1f1;
}
.tablinks .dashicons{
font-size:16px;
}
/* Estilo base para la flecha */
#nahiroimap_meta_box .dashicons-before:before {
  content: '\f140'; /* Código Unicode de la flecha */
  font-family: 'Dashicons'; /* Fuente Dashicons */
  display: inline-block;
  width: 20px; /* Ajusta según el tamaño de tu flecha */
  height: 20px; /* Ajusta según el tamaño de tu flecha */
  font-size: 20px; /* Ajusta según el tamaño de tu flecha */
  color: #4b4b4b; /* Color de la flecha inicialmente mirando hacia la derecha */

  /* Transición para la rotación */
  transition: transform 0.3s ease-in-out;
}

/* Estilo para la flecha cuando está activa (girando hacia abajo) */
.tablinks.tbl-active .dashicons-before:before {
  transform: rotate(90deg); /* Rotación de 90 grados en sentido horario */
}
.main-config{
display: flex;
justify-content: center;
font-weight: 500;
border: 1px solid #ccc;
background-color: #f5f5f5;
}

.main-config .tablinks {
flex: 1 0 20%;
max-width: 200px;
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px; 
margin: 0px;
}
  
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}

.tablinks{
color:#000;
font-weight:400;
}

.tablinks {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.tablinks.tbl-active {
  color: #000;
  font-weight: 800;
}
.tablinks::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #ff350c;
  transition: all 0.35s ease-in-out;
}

.tablinks.tbl-active::after {
  left: 0;
  width: 100%;
}

.tablinks.tbl-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #ff350c;
  transition: all 0.3s ease-in-out;
}
/*tabs-container*/
tabs-container{
min-height:280px;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 3px 12px;
border: 1px solid #ccc;
border-top: none;
display: flex;
flex-direction: column;
gap: 20px;
/*hereda el min-height del padre*/
min-height:inherit;
}
.tabcontent.inactive {
display: none;

}

.tabcontent.active {
  display: block;
  /* jo 16 jul */
  animation: appear 0.3s ease-in-out;
}
/* jo 16 jul keyframe adicional*/
@keyframes appear{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

.tabcontent p {
display: flex;
align-items: center;
gap: 20px; /* Espacio entre el label y el selector/input */
}
/**input fields inside tabcontent**/
.tbc-form-field label {
width: 200px; /* Ancho fijo para los labels */

}

.tbc-form-field {
display: flex;
align-items: center;
gap: 20px; /* Espacio entre el label y el selector/input */
}
/*normalize field height*/
.tbc-form-field p{
  height:30px;
}  
.tbc-form-field #map_country{
min-width:164px;
}

#map_width_cont.size-input {
width: 60px;
}
/*////////////////////////////////////*/
/*////// Estilos de Pin //////////////*/
/*////////////////////////////////////*/

/*/////// START Accordition///////////*/
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.7s;
}

.active_1, .accordion:hover {
  background-color: #ccc; 
}

.pin-accordion{
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.acordeon {
  margin-bottom: 10px;
}

.acordeon-btn {
  background-color: #f0f0f0;
  border: none;
  outline: none;
  padding: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

#acordeon.active .acordeon-btn {
background-color: #e0e0e0;
}

.acordeon-content {
display: none;
padding: 10px;
}

#acordeon.active .acordeon-content {
  display: block;
}
/*/////// FINISH Accordition///////////*/

/*///////////////////////////////////////*/
/*/////// Pins Main Container///////////*/
/*/////////////////////////////////////*/
.pin-accordion, div.card-repeater{
  display: block;
  margin-bottom: 10px;
  padding-top: 10px;
  position: relative;
}

.pin-accordion p {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pin-accordion label,
.pin-accordion input {
  margin-bottom: 5px;
  width: 200px;
}
.card-repeater label{
  margin-bottom: 5px;
  width: 146px;
  margin-left: 12px;
}
input.icolor {
  width: 55px;
}
.dashicons dashicons-arrow-right-alt2{
  color: #08104c;
}

/*////// columnas para pin $ //////////////*/
.pin-item .pin-positions{
  display: flex;
  align-items: center;
  gap: 20px; 
}
/*////// pin $ labels & inputs //////////////*/
.pin-item .pins-input,
.pin-item .pins-label{
  width: 200px; /* Ancho fijo para los labels */
}
div.pin-item {
  position: relative;
  margin-top: 0px;
}

/*/////////////////////////////////////////////////////////////*/
/*///////////// Botones de add pin & remove pin  //////////////*/
/*/////////////////////////////////////////////////////////////*/

/*////// Ubicacion de add pin & remove pin  //////////////*/
div#pin-coordinates-repeater button#add-pin-item{
    position: absolute;
    top: auto;
    right: auto;
    left: auto;
    bottom: 9px;
    /* width: 95%; */
    /* jo 11-07-24 */
    width: calc(100% - 24px);
}
.pin-item .remove-circle-coordinate{
  position: absolute;
  top: 17px;
  right: 24px;
  left: auto;
  bottom: auto;
}
/* Add Pin*/
button#add-pin-item {
  text-align: center;
  border-radius: 6px;
  color: white;
  background-color: #003366;
	cursor:pointer;
  width: 116px;
	border: none;
	display: flex;
  align-items: center;
	justify-content: center;
  padding: 5px;
  /* jo 11-07-24 */
  padding-block: 7px;
  transition: background-color 0.3s ease-in-out;
}
button#add-pin-item:hover {
  background-color: #003366;
  /* background-color: #08104c; */
}

/* Remove Pin*/
button.remove-circle-coordinate {
  text-align: center;
  border-radius: 6px;
  color: white;
	  background-color: #ff350b;
	cursor:pointer;
  width: 53px;
		border: 1px solid #ff350b;
  display: flex;
  align-items: center;
  justify-content: center;
}
button.remove-circle-coordinate:hover {
  text-align: center;
  border-radius: 6px;
  color: #ff350b;
  background-color: white;
	cursor:pointer;
  width: 53px;
		border: 1px solid #ff350b;
}
/*////// Colores en los iconos de + & -  //////////////*/
.dashicons dashicons-minus {
  color:#08104c;

}
/*/////////////////////////////////////////////////////////////*/
/*////// FINISH Botones de add pin & remove pin  /////////////*/
/*///////////////////////////////////////////////////////////*/

/*////// Botones de Add Card & remove   //////////////*/
.card-repeater button.add-card{
  text-align: center;
  border-radius: 6px;
  color: white;
  background-color: #08104c;
	cursor:pointer;
  width: 116px;
	border: 1px solid #08104c;
	display: flex;
  align-items: center;
	justify-content: center;
  margin-left: 10px;
  padding: 4px 0px;
}
.card-repeater button.add-card:hover{
  text-align: center;
  border-radius: 6px;
  color: #08104c;
  background-color: white;
  cursor:pointer;
  width: 116px;
	border: 1px solid #08104c;
  padding: 4px 0px;
}

.card-repeater button.remove-card{
  text-align: center;
  border-radius: 6px;
  color: white;
	  background-color: #ff350b;
	cursor:pointer;
  width: 116px;
		border: 1px solid #ff350b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0px;
}
.card-repeater button.remove-card:hover {
  text-align: center;
  border-radius: 6px;
  color: #ff350b;
  background-color: white;
	cursor:pointer;
  width: 116px;
	border: 1px solid #ff350b;
  padding: 4px 0px;
}

div.card-item{
  padding: 10px;
  border: 1px solid #dedede;
  border-radius: 3px;
  margin: 0px;
  margin-bottom: 13px;
}
.pin-accordion {
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.pin-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
/*Ajustes en el tamaño del container y su desplazamiento*/
.accordion.active_1 + .pin-accordion {
  max-height: 2000px !important;
}
div.pin-accordion{
    margin-bottom: 0px;
    padding-bottom: 0px;
	padding-top: 0px;
}
div.pin-accordion h4 {
  padding-left: 11px;
  margin-bottom: 0px;
}
/**
 EXTRA ADDED ON 12-07-24 by supp4
*/
.pin-item{
  padding: 0px;
      border: 1px solid #dedede;
    /*border-radius: 7px;*/
      margin-block: 14px;
  display: flex;
    flex-direction: column;
    gap: 0px;
      position: relative;
  }
  .card-repeater{
      padding-block: 16px;
      padding-inline: 10px;
      padding-top: 0px;
  }
/*/////////////////////////////////////////////////////////////*/
/*///////////// IMG previewing fields             ////////////*/
/*///////////////////////////////////////////////////////////*/
.nahiro-img-control{
  border: 0px;
  width: 200px;
  height: 100px;
  background-color: #dbdbdb !important;
  outline: none;
  color: transparent;
  position: relative;
}
.nahiro-img-control:hover{
  background-color: #cdcdcd !important;
}
.nahiro-img-control::after {
  
 content: 'Choose an Image';
 font-size: 11px;
 position: absolute;
 bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  width: 100%;
  background-color: rgba(46, 46, 46, 0.70);
  height: 24px;
  padding-top: 7px;
  color: #fff;
  font-family: 'Avenir Next Font', sans-serif;
  opacity: 0;
  transition: all 0.3s;
}
.nahiro-img-control:hover::after{
  opacity: 1;
}
.nahiro-img-control::after:hover{
  background-color: rgba(46, 46, 46, 0.87);
  background-color: red;
}

.nahiro-img-control img{
  object-fit: contain !important;
}
.nahiro-img-preview{
  position: relative;
}
.nahiro-img-preview img{
  width: 200px;
  height: 100px;
  object-fit: cover;
  object-position: top;
  -o-object-fit: cover;
  -o-object-position: top;
}
.image-form-control{
  display: flex;
  align-items: center;
  gap: 20px;
}
.nahiro-img-control:hover  .nahiro-img-delete{
  opacity: 1;
}
/**don't show the control if there is no image */
.nahiro-img-control:hover  .nahiro-img-delete.hidden{
  opacity: 1;
  display: none;
}
a.nahiro-img-delete{
  all:unset;

  opacity: 0;
  position: absolute;
  top:4px;
  right: 4px;
  padding: 4px 6px;
  background-color: rgba(46, 46, 46, 0.70);
  transition: all 0.3s;
  color:#fefefe;
  text-decoration: none;
  border-radius: 4px;
}
a.nahiro-img-delete:hover{
  background-color: rgba(46, 46, 46, 0.87);
}
a.nahiro-img-delete span{
  font-size: 15px;
  display: inline;
}
.nahiro-control-desc{
  margin-top:8px;
  font-size: 10px;
  color:gray;
  font-style: italic;
}

/*/////////////////////////////////////////////////////////////*/
/*///////////// End IMG previewing fields         ////////////*/
/*///////////////////////////////////////////////////////////*/

/*////////////////////////////////////////////////////*/
/*/////////////         Tooltips         ////////////*/
/*//////////////////////////////////////////////////*/
.nahiro-tooltip-container{
  padding-inline:16px;
  padding-block: 10px;
}
.nahiro-tooltip-container .trigger{
border: 1px solid rgba(204, 204, 204, 0.46);
background-color: rgba(204, 204, 204, 0.46);
border-radius: 100%;
font-weight: bold;
padding: 3px;
padding-block: 0px;
position: relative;
font-size: 0.9em;
}
.nahiro-tooltip-container:hover .tooltip {
display:block;
}

.tooltip {
  display: none;
  color: #2e2e2e;
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: rgba(240, 240, 240, 0.95);
  top: -50px;
  left: 20px;
  width: 200px;
  z-index: 1000;
  font-weight:300;
  font-style: italic;
  padding: 10px 15px
}