.radio, .checkbox {cursor: pointer;line-height: 20px;font-size: 14px;margin: 15px;}
.radio .label, .checkbox .label{display: block;float: left;margin-right: 10px;width: 20px;height: 20px;border: 2px solid #c8ccd4;border-radius: 100%;-webkit-tap-highlight-color: transparent;}
.radio .label:after, .checkbox .label:after {content: "";position: absolute;top: 3px;left: 3px;width: 10px;height: 10px;border-radius: 100%;background: var(--primary);transform: scale(0);transition: all 0.2s ease;opacity: 0.08;pointer-events: none;}
.radio:hover .label:after,.checkbox:hover .label:after {transform: scale(3.6);}
input[type="radio"]:checked + .label,input[type="checkbox"]:checked + .label {border-color: var(--primary);}
input[type="radio"]:checked + .label:after,input[type="checkbox"]:checked + .label:after {transform: scale(1);transition: all 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);opacity: 1;}
.material-radiofield {display: flex;}
.material-checkboxfield {display: flex;flex-direction: column;}
.material-textfield {display: inline-flex;margin-bottom:2rem;}
.material-textfield label {position: absolute;top: 50%;transform: translateY(-50%);padding: 0 0.5rem;margin-left: 1rem;transition: 0.1s ease-out;transform-origin: left top;pointer-events: none;z-index: 99;font-size:0.9rem;}
.material-textfield input:focus,.material-textfield textarea:focus {border: 1px solid var(--primary);border-top: 1px solid var(--highlight);}
.material-textfield input:focus + label,.material-textfield textarea:focus + label {color: var(--primary);}
.material-textfield input:focus + label, .material-textfield input:not(:placeholder-shown) + label, .material-textfield textarea:focus + label, .material-textfield textarea:not(:placeholder-shown) + label {top: 0;transform: translateY(-50%);}
.material-textfield select:not(:placeholder-shown) ~ label {top: 0;z-index: 99;transform: translateY(-50%) scale(.9);font-size: 0.9rem;background:#fff;font-variation-settings: "FILL" 1;}
.material-textfield select:focus ~ label {color: var(--primary);top: 0;transform: translateY(-50%) scale(.9);}
.material-textfield textarea:not(:placeholder-shown), .material-textfield input:not(:placeholder-shown) {background:var(--highlight);}
select:hover {box-shadow: unset;background-color:unset !important;color:unset;}

.material-textfield textarea {padding:1rem var(--spacing-sm);}
.material-textfield textarea:not(:placeholder-shown) + label {top: 0;z-index: 99;transform: translateY(-50%) scale(.9);font-size: 0.9rem;background:linear-gradient(var(--bg-light) 49%, var(--highlight) 70%);}
fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
    padding: clamp(0.5rem, 4vw, 2rem);
    margin: -1rem;
    border: var(--border);
    border-radius: var(--border-radius);
    margin-block-end: 2rem;}
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]{display: inline-block;}
.full-span {display: block;}
.full-width {display: grid;grid-column: 1 / -1;}
.material-checkboxfield input[type="checkbox"] {
    display: none;
   }
   .material-checkboxfield  input[type="checkbox"] + label {
  
    border: 2px solid var(--bg);
      border-radius: 1rem;
      padding: 0.4rem 0.8rem;
      DISPLAY: inline-flex;
   }
   .material-checkboxfield   input[type="checkbox"]:checked + label {
    background:var(--bg-dark);
   }
   .list {grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem 1rem;}