/*************************/
/****** FORM FIELDS ******/
/*************************/

.formField {
    background-color: var(--mud-palette-appbar-background) !important;
    border-radius: var(--mud-default-borderradius);
    /*border-color: transparent !important;*/
    color: var(--mud-palette-text-primary) !important;
    transition: background-color var(--global-transition-time) ease-in-out, background-color var(--theme-toggle-transition-time) linear;
    -webkit-transition: background-color var(--global-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -ms-transition: background-color var(--global-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -o-transition: background-color var(--global-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -ms-transition: background-color var(--global-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
}

    .formField:hover {
        background-color: var(--mud-palette-gray-light) !important;
    }

    .formField:focus-within {
        background-color: var(--mud-palette-appbar-background) !important;
    }

    /*remove the border appearance when exiting thead text field*/
    .formField .mud-input.mud-input-outlined .mud-input-outlined-border {
        transition: none;
        /*border: none;*/
    }

.formInputBorder > .mud-input-control-input-container > .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-color: transparent !important;
}

/**************************/
/****** DATE PICKER *******/
/**************************/

.appDatePicker .mud-input-control-input-container {
    background-color: var(--mud-palette-appbar-background) !important;
    /*border: none !important;*/
    border-radius: var(--mud-default-borderradius);
    /*border: solid 1px var(--mud-palette-text-primary) !important;*/
    transition: background-color var(--global-transition-time) ease-in-out;
    -webkit-transition: background-color var(--global-transition-time) linear;
    -ms-transition: background-color var(--global-transition-time) linear;
    -o-transition: background-color var(--global-transition-time) linear;
    -ms-transition: background-color var(--global-transition-time) linear;
}

    .appDatePicker .mud-input-control-input-container:hover {
        background-color: var(--mud-palette-gray-light) !important;
    }

    .appDatePicker .mud-input-control-input-container > *:first-child * {
        border-color: transparent !important;
    }

    .appDatePicker .mud-input-control-input-container:focus-within {
        background-color: var(--mud-palette-appbar-background) !important;
    }

/*.appDatePicker .mud-input.mud-input-outlined .mud-input-outlined-border {
    transition: none;
}*/

/* MudDatePicker focused red border */
/*.appDatePicker .mud-input.mud-input-outlined.mud-input-focused.mud-input-outlined-border {
    border: solid 1px !important;
    border-color: var(--mud-palette-primary-text) !important;
}*/

.loadingIcon {
    animation: cct-button-spin 1s linear infinite;
}

@keyframes cct-button-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}