:root {

    --sl-focus-ring-color: #272727;  /* Removes blue glow on focus */
    --sl-input-focus-ring-color: transparent;  /* Removes input focus blue outline */
    --sl-color-primary-600: #272727; /* Change default primary color (e.g., buttons) */
    
    --sl-color-primary-50: rgb(249 249 250);
    --sl-color-primary-100: rgb(236 236 237);
    --sl-color-primary-200: rgb(221 222 223);
    --sl-color-primary-300: rgb(205 207 208);
    --sl-color-primary-400: rgb(184 186 189);
    --sl-color-primary-500: rgb(157 160 163);
    --sl-color-primary-600: rgb(128 132 137);
    --sl-color-primary-700: rgb(50, 53, 56);
    --sl-color-primary-800: rgb(84 90 96);
    --sl-color-primary-900: rgb(57 64 71);
    --sl-color-primary-950: rgb(34 39 44);

    --sl-font-size-label: 1.5rem;
    --sl-input-help-text-font-size-medium: 1.5rem;
    --sl-input-help-text-color: red;
    --sl-line-height-looser : 3.4rem;

}



/* ` Switch container -------------------------------------------------------------------------- */

    .switch-container {
        display: grid;
        align-content: center;
        width: 100%;
        grid-template-columns: 12% 73% 5% 10%;

        .switch-icon {
            font-size: 2em;
        }
        .switch-text {
            font-size: 1.2em;
            font-style: italic;
            color: #272727;
        }

    }




/*` -------------------------------------------------------------------------------------------- */

sl-button {
    width: 100%;
}


sl-input:invalid::part(base),
sl-input[invalid]::part(base) {
  border: 1px solid red;
}

sl-input:invalid::part(form-control-help-text),
sl-input[invalid]::part(form-control-help-text) {
  color: red !important;
}


sl-switch[checked]::part(control){
        background-color: var(--confirm-blue);
        border-color: var(--confirm-blue);
}

sl-checkbox::part(control--checked){
    background-color: var(--confirm-blue);
        border-color: var(--confirm-blue);
}


sl-switch::part(form-control-help-text){
        color:var(--grey)
}


sl-input::part(input) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

sl-card{
height:100%;
}
sl-card::part(base){
    height:100%;
}

sl-card::part(body){
    overflow-y: auto;
    height: 100%;
}



::part(form-control-label) {
    font-weight: bold;
}


sl-select {
    --sl-input-label-font-size-large: var(--sl-font-size-label);
}


sl-select::part(combobox) {
    font-size: var(--sl-font-size-x-large);
    line-height: var(--sl-line-height-looser);
/* font-weight:bold; */
}

sl-option::part(base) {
    font-size: var(--sl-font-size-x-large);
/* font-weight:bold; */
}

sl-select::part(display-input)::placeholder {
    font-style:italic;
/* font-weight:bold; */
}

/* -------------------------------------------------------------------------- */


sl-input {
    --sl-input-height-medium: 3.6rem;
    --sl-input-font-size-medium: 1.5rem;
    --sl-input-label-font-size-medium : var(--sl-font-size-label);
}