.ti-wrapper{
  display:inline-block;

}

.ti-ib-wrapper{
  width:20px;
  height:20px;
  margin-right:-35px;
  display:inline-block;
  top:5px;
  z-index:2;
  position:relative;
}

.ti-ia-wrapper{
  top:5px;
  width:20px;
  height:20px;
  margin-left:-35px;
  display:inline-block;
  z-index:2;
  position:relative;
}

.ti-label{
  position:relative;
  
}

.input-default input{
  width:275px;
  border-radius:6px;
  border:1px solid var(--ac-bd-primary-default);
  height:32px;
  display:inline-block;
  padding-left:32px;
  outline:none;
  box-shadow:var(--shadow-soft-xsmall);
}

.input-default input:focus{
  border:1px solid var(--ac-bd-primary-click);
}

.input-default input:hover{
  border:1px solid var(--ac-bd-primary-hover);
}

.input-default svg{
  stroke:var(--ac-bd-primary-hover);
}


.input-inline input{
  width:275px;
  border-radius:16px;
  border:1px solid var(--ac-bd-primary-default);
  height:32px;
  display:inline-block;
  padding-left:32px;
  outline:none;
  box-shadow:var(--shadow-soft-xsmall);
}

.input-inline input:focus{
  border:1px solid var(--ac-bd-primary-click);
}

.input-inline input:hover{
  border:1px solid var(--ac-bd-primary-hover);
}

.input-inline svg{
  stroke:var(--ac-bd-primary-hover);
}


/*TAGS*/

.tag-s{font-size:15px;padding:4px 8px 4px 8px;border-radius:var(--brlarge); display:inline-block;} .tag-s span{display:inline-block;}
.tag-m{font-size:15px;padding:4px 8px 4px 6px;border-radius:var(--brlarge); display:inline-block;} .tag-m span{display:inline-block;}
.tag-l{font-size:15px;padding:4px 4px 4px 8px;border-radius:var(--brlarge); display:inline-block;} .tag-l span{display:inline-block;}
.t-i-wrapper{
  margin-left:5px;
  display:inline-block;
  height:16px;
}

.t-gray{  background-color:var(--bg-neutral-xlight);  color:var(--fg-neutral-xmedium);  border:1px solid var(--bd-neutral-xmedium); }
.t-blue{  background-color:var(--bg-primary-xlight);  color:var(--fg-primary-xmedium);  border:1px solid var(--bd-primary-xmedium);  }
.t-green{  background-color:var(--bg-success-light);  color:var(--fg-success-light);  border:1px solid var(--bd-success-light);  }
.t-orange{  background-color:var(--bg-warning-light);  color:var(--fg-warning-light);  border:1px solid var(--bd-warning-light); }
.t-red{  background-color:var(--bg-error-light);  color:var(--fg-error-medium);  border:1px solid var(--bd-error-medium);  }

.t-gray svg{stroke:var(--bd-neutral-xmedium);}
.t-red svg{stroke:var(--bd-error-medium);}
.t-blue svg{stroke:var(--bd-primary-xmedium);}
.t-orange svg{stroke:var(--bd-warning-light);}
.t-green svg{stroke:var(--bd-success-light);}

/*BUTTONS*/

.b-wrapper{
  display:inline-flex;
  justify-content: space-between;
  width:fit-content;
  font-size:var(--fsButton);
  font-weight: var(--fwButton);
  cursor: pointer;
  outline:none;
  user-select:none;
}
.b-wrapper span{
  margin-right:5px;
}

.b-primary{
  border:1px solid var(--ac-bd-primary-default);
  background-color:var(--ac-bg-primary-default);
  color:var(--ac-fg-base);
  box-shadow:var(--shadow-soft-xsmall);
}

.b-primary:hover{
    border:1px solid var(--ac-bd-primary-hover);
  background-color:var(--ac-bg-primary-hover);
}
.b-primary:active{
  border:1px solid var(--ac-bd-primary-click);
  background-color:var(--ac-bg-primary-click);
}
.b-primary .svg-icon{
  stroke:var(--ac-fg-base);
}




.b-gray{
  border:1px solid var(--ac-bd-neutral-light-default);
  background-color:var(--ac-bg-neutral-light-default);
  
  box-shadow:var(--shadow-soft-xsmall);
}
.b-gray span{
  color:var(--ac-fg-neutral-default);
}
.b-gray:hover{
    border:1px solid var(--ac-bd-neutral-light-hover);
  background-color:var(--ac-bg-neutral-light-hover);
  color:var(--ac-fg-neutral-hover);
}
.b-gray:active{
  border:1px solid var(--ac-bd-neutral-light-click);
  background-color:var(--ac-bg-neutral-light-click);
  color:var(--ac-fg-neutral-click);
}
.b-gray .svg-icon{
  stroke:var(--ac-fg-neutral-default);
}
.b-gray .svg-icon:hover{
  stroke:var(--ac-fg-neutral-hover);
}
.b-gray .svg-icon:active{
  stroke:var(--ac-fg-neutral-click);
}


.b-shadow{
  border:1px solid var(--ac-bd-neutral-light-default);
  background-color:var(--ac-bg-neutral-light-default);
  background-color:transparent;
  
  box-shadow:var(--shadow-soft-xsmall);
  
}
 .b-shadow span{
  color:var(--ac-fg-neutral-default);
 }
.b-shadow:hover{
    border:1px solid var(--ac-bd-neutral-light-hover);
  zbackground-color:var(--ac-bg-neutral-light-hover);
  box-shadow:var(--shadow-soft-small);
 }
.b-shadow:active{
  border:1px solid var(--ac-bd-primary-default);
  zbackground-color:var(--ac-bg-neutral-light-click);
    box-shadow:var(--shadow-soft-small);
}
.b-shadow .svg-icon{
  stroke:var(--ac-fg-neutral-default);
}
.b-shadow .svg-icon:hover{
  stroke:var(--ac-fg-neutral-hover);
}
.b-shadow .svg-icon:active{
  stroke:var(--ac-fg-primary-default);
}

.b-dis{
  border:1px solid var(--ac-bg-neutral-light-disabled);
  background-color:var(--ac-bg-neutral-light-disabled);
  color:var(--ac-fg-neutral-disabled);
  stroke:var(--ac-fg-neutral-disabled);
  box-shadow:none;
}

.b-dis:active{
  border:1px solid var(--ac-bg-neutral-light-disabled);
  background-color:var(--ac-bg-neutral-light-disabled);
  color:var(--ac-fg-neutral-disabled);
  stroke:var(--ac-fg-neutral-disabled);box-shadow:none;
}

.b-dis:hover{
  border:1px solid var(--ac-bg-neutral-light-disabled);
  background-color:var(--ac-bg-neutral-light-disabled);
  color:var(--ac-fg-neutral-disabled);
  stroke:var(--ac-fg-neutral-disabled);box-shadow:none;
}
.b-dis span{
  color:var(--ac-fg-neutral-disabled);
}

.b-dis svg{
   stroke:var(--ac-fg-neutral-disabled);
}



.b-large{
    padding:var(--pblarge) ;
    height:var(--hblarge);  
    border-radius:var(--brlarge);
}

.b-large .b-ib-wrapper{  margin-right:5px;  height:20px;}
.b-large .b-wrapper span{  margin-right:5px;}
.b-large .b-ia-wrapper{ height:20px;}


.b-medium{
    padding:var(--pbmedium) ;
    height:var(--hbmedium);  
    border-radius:var(--brlarge);
}

.b-medium .b-ib-wrapper{  margin-right:5px;  height:20px;}
.b-medium .b-wrapper span{  margin-right:5px;}
.b-medium .b-ia-wrapper{ height:20px;}


.b-small{
    padding:var(--pbsmall) ;
    height:var(--hbsmall);  
    border-radius:var(--rbsmall);
}
.b-small .b-ib-wrapper{  margin-right:4px;  height:16px;}
.b-small .b-wrapper span{  margin-right:4px;}
.b-small .b-ia-wrapper{ height:16px;}




.bshrink span, .bshrink .b-ia-wrapper{
  display:none;
}
.bshrink .b-ib-wrapper{
  margin-right:0;
}