input:focus {
  outline: none
}

input:not([type="checkbox"]) {
  padding: 7px;
  font-size: 1rem;
  border: 1px solid var(--gray);
  min-width: max-content;
  max-width: 600px;
  min-height: 36px !important;
}

input,
select,
textarea {
  border-radius: 10px;
}

input[readonly]:not([type="file"]),
select[readonly],
textarea[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--graylight3);
  border-color: var(--gray) !important;
  cursor: default;
  pointer-events: none !important;
}

.input-file {
  background-color: unset !important; 
  border: none;
  color: var(--blacklight);
  border: 1px solid var(--graydark);
  padding: 8px !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  position: relative;
}

.input-file::file-selector-button {
  color: var(--white);
  background: var(--blacklight);
  border: none;
  border-radius: 8px;
  padding: 8px;
  text-transform: uppercase;
  font-size: 0.7em;
  cursor: pointer !important;
  position: absolute;
  right: 0px;
  top: 3px;
  transition: all 0.25s;
}

.input-file:hover::file-selector-button {
  background-color: var(--graydark);
  transition: all 0.25s;
}

input::-webkit-input-placeholder {
  color: var(--graylight) !important;
}

input[type="color"] {
  border: none !important;
  width: 48px !important;
  height: 50px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch {
  border-radius: 50%;
}

textarea:focus,
select:focus,
input:focus {
  outline: none
}

input:not([type="checkbox"]) {
  padding: 7px;
  border: 1px solid var(--gray);
  width: 100%;
}

textarea {
  font-size: 1rem;
  padding: 7px;
  border: 1px solid var(--gray);
  width: 100%;
  min-height: 36px !important;
  max-height: 350px !important;
  max-width: 600px;
  resize: vertical;
}

select {
  padding: 7px;
  border: 1px solid var(--gray);
  width: 100%;
  min-height: 36px !important;
  max-width: 600px;
  min-width: 110px;
}

select>option {
  border-radius: 3px;
}

input:required,
textarea:required,
select:required {
  border-left: 2px solid var(--primary-color-light);
  border-right: 2px solid var(--primary-color-light);
}

input[readonly]:required,
textarea[readonly]:required,
select[readonly]:required,
input:disabled:required,
textarea:disabled:required,
select:disabled:required {
  border-left: 2px solid var(--gray) !important;
  border-right: 2px solid var(--gray) !important;
}

/* 
-------------------- TOGGLE
*/

.switch-toggle input[type=checkbox],
.switch-toggle input[type=radio] {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: auto;
}

.switch-toggle label {
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    height: 20px;
    background: var(--graylight);
    display: block;
    border-radius: 100px;
    position: relative;
    font-size: 10px;
    border: 1px solid var(--graylight);
}

.switch-toggle label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--white);
    border-radius: 90px;
    transition: 0.3s;
}

.switch-toggle input:checked+label,
.switch-toggle input:checked+input+label {
    background: var(--toggleColor);
    border: 1px solid var(--toggleColor);
}

.switch-toggle input[readonly]+label,
.switch-toggle input[readonly]+input+label,
.switch-toggle input:disabled+label,
.switch-toggle input:disabled+input+label {
    background: var(--graylight3) !important;
    border: 1px solid var(--graylight2) !important;
    pointer-events: none !important;
    cursor: default !important;
}

.switch-toggle input[checked][readonly]+label,
.switch-toggle input[checked][readonly]+input+label,
.switch-toggle input[checked]:disabled+label,
.switch-toggle input[checked]:disabled+input+label {
    background: var(--primary-color-light) !important;
    border: 1px solid var(--primary-color-light) !important;
}

.switch-toggle input+label:before,
.switch-toggle input+input+label:before {
    position: absolute;
    top: 5px;
    left: 35px;
    width: 16px;
    height: 16px;
    border-radius: 90px;
    transition: 0.3s;
    text-indent: 0;
    color: var(--white);
}

.switch-toggle input:checked+label:before,
.switch-toggle input:checked+input+label:before {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 16px;
    height: 16px;
    border-radius: 90px;
    transition: 0.3s;
    text-indent: 0;
    color: var(--white);
}

.switch-toggle input:checked+label:after,
.switch-toggle input:checked+input+label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

.switch-toggle label:active:after {
    width: 16px;
}

.toggle-switchArea {
    margin: 10px 0 10px 0;
}

.switch-toggle.contrast input:checked+label,
.switch-toggle input:checked+input+label {
    border: 1px solid var(--white);
}

/* radio */

.radio-container {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.radio-container label {
  display: flex;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.radio-container label:disabled {
  cursor: default;
}

.radio-container label input {
  position: absolute;
  left: -9999px;
}

.radio-container label input:checked+span {
  background-color: color-mix(in srgb, var(--white) 90%, var(--radioColor));
  border: 1px solid color-mix(in srgb, var(--white) 60%, var(--radioColor));
  color: var(--radioColor) !important;
  pointer-events: none;
}

.radio-container label input:checked+span:before {
  box-shadow: inset 0 0 0 0.6em var(--radioColor);
}

.radio-container label:has(input:not([type='checkbox']):checked),
.radio-container label:has(input[readonly]){
  pointer-events: none;
}

.radio-container label input[readonly]+span,
.radio-container label input:disabled+span {
  color: var(--gray) !important;
  cursor: default !important;
  pointer-events: none;
}

.radio-container label input[readonly]+span:before,
.radio-container label input:disabled+span:before {
  box-shadow: inset 0 0 0 0.2em var(--graylight4);
  pointer-events: none;
}

.radio-container label input[readonly]:checked+span,
.radio-container label input:disabled:checked+span {
  background-color: var(--graylight4);
  border: 1px solid var(--gray);
  color: var(--graydark) !important;
  pointer-events: none;
}

.radio-container label input[readonly]:checked+span:before,
.radio-container label input:disabled:checked+span:before {
  box-shadow: inset 0 0 0 0.6em var(--graydark);
  pointer-events: none;
}

.radio-container label span {
  display: flex;
  align-items: center;
  border-radius: 99em;
  transition: 0.25s ease;
  padding: 7px;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--graydark2);
  background-color: var(--graylight3);
  border: 1px solid var(--graylight2);
}

.radio-container:not(.wordless) label span {
  padding: 10px 15px;
}

.radio-container label span:before {
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: var(--white);
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.2em var(--graydark);
}

.radio-container:not(.wordless) label span:before {
  margin-right: 10px;
}

.radio-container label span.error {
  border-color: var(--red);
}

#span_error {
  color: var(--reddark);
  font-size: 14px;
  font-weight: bold;
}