/*The html font size is 10px, change everything inside here to "rem" instead of "em" to affect everything*/
/* .aegov-form-control {
  font-size: 14px;
} */

.aegov-form-control input[type=text],
.aegov-form-control input[type=remail],
.aegov-form-control input[type=url],
.aegov-form-control input[type=password],
.aegov-form-control input[type=number],
.aegov-form-control input[type=date],
.aegov-form-control input[type=datetime-local],
.aegov-form-control input[type=month],
.aegov-form-control input[type=search],
.aegov-form-control input[type=tel],
.aegov-form-control input[type=time],
.aegov-form-control input[type=week],
.aegov-form-control [multiple],
.aegov-form-control textarea,
.aegov-form-control select {
  display: block;
  width: 100%;
  flex: 1 1 0%;
  border-width: 0px;
  background-color: transparent;
  padding: .75rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(93 59 38 / var(--tw-text-opacity, 1))
}

.aegov-form-control.custom-validation .form-control-input:has(.validation) .validation {
  display: none;
}

.aegov-form-control.custom-validation .form-control-input:has(.validation) input{
  padding-inline-end: 3rem;
}

.aegov-form-control.custom-validation .form-control-input:has(.validation)::before {
  content: "\e4e2";
  font-family: "Phosphor" !important;
  position: absolute;
  inset-inline-end: 0.5rem;
  font-size: 2.25rem;
  color: rgb(216 55 49);
}

.aegov-form-control.custom-validation .form-control-input:has(.validation) .control-suffix {
  padding-inline-end: 3rem;
}

.aegov-form-control label {
  margin-bottom: .25rem;
  display: block;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(35 37 40 / var(--tw-text-opacity, 1))
}

.aegov-form-control .form-control-input {
  position: relative;
  display: flex;
  border-radius: .5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(203 163 68 / var(--tw-ring-opacity, 1))
}

.aegov-form-control .form-control-input:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 192 39 / var(--tw-ring-opacity, 1))
}

.aegov-form-control .form-control-input:focus {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.aegov-form-control .form-control-input .control-prefix,
.aegov-form-control .form-control-input .control-suffix {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(158 162 169 / var(--tw-text-opacity, 1))
}

.aegov-form-control .form-control-input .control-prefix {
  padding-inline-start: 1rem
}

.aegov-form-control .form-control-input .control-suffix {
  padding-inline-end: 1rem
}

.aegov-form-control .form-control-input .control-prefix>svg,
.aegov-form-control .form-control-input .control-suffix>svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: currentColor
}

.aegov-form-control.control-secondary .form-control-input {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(121 126 134 / var(--tw-ring-opacity, 1))
}

.aegov-form-control.control-secondary .form-control-input:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(117 219 255 / var(--tw-ring-opacity, 1))
}

.aegov-form-control.control-secondary .form-control-input input[type=date]+.control-suffix svg:focus-within,
.aegov-form-control.control-secondary .form-control-input input[type=datetime-local]+.control-suffix svg:focus-within,
.aegov-form-control.control-secondary .form-control-input input[type=month]+.control-suffix svg:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(117 219 255 / var(--tw-ring-opacity, 1))
}

.aegov-form-control.control-secondary .form-control-input:focus-within .control-prefix {
  --tw-text-opacity: 1;
  color: rgb(27 29 33 / var(--tw-text-opacity, 1))
}

.aegov-form-control.control-secondary .form-control-input:focus-within .control-suffix {
  --tw-text-opacity: 1;
  color: rgb(27 29 33 / var(--tw-text-opacity, 1))
}

.aegov-form-control.control-secondary .form-control-input input[type=search]+.control-suffix:focus-within {
  --tw-text-opacity: 1 !important;
  color: rgb(44 202 255 / var(--tw-text-opacity, 1)) !important;
  outline: 2px solid transparent;
  outline-offset: 2px
}

.aegov-form-control.control-secondary select {
  padding-inline-end: 2.25rem;
  padding-inline-start: 1rem;
  --tw-text-opacity: 1;
  color: rgb(27 29 33 / var(--tw-text-opacity, 1))
}

.aegov-form-control.control-secondary select:where([dir=rtl], [dir=rtl] *) {
  background-position: .5rem
}
/*Omar: Check on the whole system in case of problems, needs to be removed !!!IMPORTANT USED*/
.tahaluf-new-dropdown .select2-choice {
  height: unset !important;
  line-height: unset !important;
  padding: 0.375rem 1rem !important;
}

.tahaluf-new-dropdown .select2-container {
  border-radius: 0.5rem;
}

.tahaluf-new-dropdown .select2-container .select2-choice .select2-chosen button{
  top: 50%;
  transform: translateY(-50%);
}