/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.tb2b-shortcode,
.tb2b-scope {
/*  --brand-primary: #215fa8;*/
  --brand-primary: hsl(212.44deg 67.16% 39.41%);
  --brand-primary-dark: #194880;
  --brand-primary-light: #3f86d9;
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-blue-100: oklch(93.2% .032 255.585);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-900: oklch(21% .034 264.665);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-white: #fff;
  --spacing: .25rem;
  --radius: .5rem;
  --spacing: .10rem;
  --text-base: 1rem;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
}

.tb2b-shortcode,
.tb2b-scope{
  color: var(--color-gray-600);
  font-size: 16px;
  font-family: 'Inter', sans-serif;
}
.tb2b-shortcode button, .tb2b-scope button, .tb2b-shortcode input, .tb2b-scope input, .tb2b-shortcode textarea, .tb2b-scope textarea,
.tb2b-scope button, .tb2b-scope button, .tb2b-scope input, .tb2b-scope input, .tb2b-scope textarea, .tb2b-scope textarea{
  font-family: 'Inter', sans-serif;
}

.tb2b-shortcode h1, .tb2b-shortcode h2, .tb2b-shortcode h3,.tb2b-shortcode h4,.tb2b-shortcode h5,.tb2b-shortcode h6,
.tb2b-scope h1, .tb2b-scope h2, .tb2b-scope h3,.tb2b-scope h4,.tb2b-scope h5,.tb2b-scope h6{
  font-family: 'Barlow', sans-serif;
}

.tb2b-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.tb2b-table__container{
  overflow-x: auto;
}
.tb2b-table{
  text-align:left;
  border-spacing: 0;
  box-shadow: 0 1px 3px 0 #0000001a;
  border-radius: var(--radius);
  width: 100%;
  overflow: hidden;
}
.tb2b-table thead{
  background-color: var(--color-gray-50);
}
.tb2b-table th,
.tb2b-table td{
  padding: 12px 24px;
  border-bottom:1px solid color-mix(in oklab, #215fa8 50%, transparent);
  border-bottom:1px solid #0000001a;
}
.tb2b-table th{
  color: var(--color-gray-500);
  font-size: .75rem;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.tb2b-button{
  color: var(--color-white);
  line-height: 1.5;
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  border: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  background-color: var(--brand-primary);
/*  border: 1px solid oklch(87.2% .01 258.338);*/
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 6);
  transition-property: background-color;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}
.tb2b-button:hover {
  color: var(--color-white);
  background-color: var(--brand-primary-dark);
  transition-property: background-color;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}
.tb2b-button__icon svg{
  display: block;
}
a.tb2b-button,
.tb2b-scope a.tb2b-button,
div.tb2b-scope a.tb2b-button,
.tb2b-shortcode a.tb2b-button{
  text-decoration: none;
}
.tb2b-button-default{
  border:0;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}
.tb2b-button-secondary{
  color: var(--brand-primary);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  background-color: var(--color-white);
  border: 1px solid oklch(87.2% .01 258.338);
  transition-property: background-color;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
  border-radius: var(--radius);
}
.tb2b-button-secondary:hover{
  color: var(--brand-primary);
  background-color: var(--brand-primary-light);
  transition-property: background-color;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}
.tb2b-button__hidden{
  display: none;
}
.tb2b-loader{
  display: flex;
  justify-content: center;
  align-items: center;
}

.tb2b-shortcode .tb2b-notice{
  border-left-style: solid;
  border-left-width: 4px;
  border-radius: var(--radius);
  border-color: var(--color-white);
  padding: calc(var(--spacing) * 8);
}
.tb2b-shortcode .tb2b-success{
  border-color: var(--brand-primary);
}
.tb2b-shortcode .tb2b-error{
  border-color: var(--color-red-600);
}

.tb2b-popup__container{
  position: fixed;
  z-index: 150;
  background-color: #00000080;
  inset: calc(var(--spacing) * 0);

  display: none;
}
.tb2b-popup__container.shown{
  display: flex;
  justify-content: center;
  align-items: center;
}
.tb2b-popup{
  background-color: var(--color-white);
  padding: 24px;
  border-radius: var(--radius);
  width: 440px;
  max-width: 100%;
}
.tb2b-popup__header{
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.tb2b-popup__header h2{
  margin: 0;
}
.tb2b-popup__close{
  border: 0;
  padding: 8px;
  background: transparent;
  cursor: pointer;
  margin-right: -8px;
}
.tb2b-popup__close-text{
  display: none;
}

.tb2b-form input[type="text"],
.tb2b-form input[type="email"],
.tb2b-form select{
  font-size: 1rem;
  line-height: 1.5;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
  border: 1px solid oklch(87.2% .01 258.338);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.tb2b-form label{
  font-size: 0.875rem;
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
  margin-bottom: calc(var(--spacing) * 1);
}
.tb2b-form input[type="text"],
.tb2b-form input[type="email"]{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.tb2b-form select{
  width: 100%;
}

.tb2b-form .tb2b-form__item{
  margin-bottom: calc(var(--spacing) * 3);
}
.tb2b-form .tb2b-form__item label{
  display: block;
}
.tb2b-form .tb2b-form__actions{
  display: flex;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 6);
}
.tb2b-form .tb2b-form__actions button{
  flex-grow: 1;
  cursor: pointer;
}

.tb2b-shortcode{
  max-width:100%;
}

.tb2b-users-management-shortcode .tb2b-users__headings{
  margin-bottom: 16px;
}
@media (min-width: 48rem) {
  .tb2b-users-management-shortcode .tb2b-users__headings{
    display: flex;
    align-content: space-between;
    align-items: center;
  }
}
.tb2b-users-management-shortcode .tb2b-users__heading{
  flex-grow: 1;
}
.tb2b-users-management-shortcode .tb2b-users-groups{
  display: grid;
  margin-bottom: 24px;
}
@media (min-width: 48rem) {
  .tb2b-users-management-shortcode .tb2b-users-groups{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
}
.tb2b-users-management-shortcode .tb2b-users-group{
  padding: calc(var(--spacing) * 6);
  box-shadow: 0 1px 3px 0 #0000001a;
  border-radius: var(--radius);
}
.tb2b-users-management-shortcode .tb2b-users-group__icon{
  background-color: var(--color-blue-100);
  padding: calc(var(--spacing) * 4);
  border-radius: var(--radius);
  display: block;
}
.tb2b-users-management-shortcode .tb2b-users-group__icon svg{
  display: block;
}
.tb2b-users-management-shortcode .tb2b-users-group__text{
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.tb2b-users-management-shortcode  .tb2b-users-group__number{
  font-size: 1.875rem;
}
.tb2b-users-management-shortcode .tb2b-users{
  margin-bottom: 24px;
}
.tb2b-users-management-shortcode .tb2b-user{
  position: relative;
}
.tb2b-users-management-shortcode .tb2b-users__actions button{
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 12);
}
.tb2b-users-management-shortcode .b2b-user__field-name{
  display: flex;
  gap: calc(var(--spacing) * 3);
  align-items: center;
}
.tb2b-users-management-shortcode .b2b-user__initials{
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  border-radius: 100%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background-color: var(--brand-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}
.tb2b-users-management-shortcode .tb2b-user__name{
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}
.tb2b-users-management-shortcode .b2b-user__email,
.tb2b-users-management-shortcode .b2b-user__role,
.tb2b-users-management-shortcode .b2b-user__last-login,
.tb2b-users-management-shortcode .tb2b-users button{
  font-size: .875rem;
}

.tb2b-users-management-shortcode .tb2b-user__actions{
  display: flex;
  gap: calc(var(--spacing) * 3);
}
.tb2b-users-management-shortcode .tb2b-users .tb2b-button-trigger{
  padding: calc(var(--spacing) * 2);
}
.tb2b-users-management-shortcode .tb2b-users .tb2b-button-trigger svg{
  color: var(--color-blue-600);
  width: 16px;
  height: 16px;
}
.tb2b-users-management-shortcode .tb2b-user__action-remove{
  padding: calc(var(--spacing) * 2);
}
.tb2b-users-management-shortcode .tb2b-user__action-remove svg{
  stroke: var(--color-red-600);
  width: 16px;
  height: 16px;
}

.tb2b-users-management-shortcode .b2b-user__current{
  font-size: var(--text-sm);
}
.tb2b-users-management-shortcode .tb2b-user .tb2b-loader__container{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #0000001a;
}
.tb2b-users-management-shortcode .tb2b-user .tb2b-loader__container{
  height: 100%;
}
.tb2b-users-management-shortcode .tb2b-user .tb2b-loader{
  height: 100%;
}

.tb2b-users-management-shortcode .tb2b-users-roles{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
}