/*
Form Elements based on StyleSheet V0.1.0
Copyright (C) 2010-26 Santanu Brahma
Developer Portal (W) https://www.santanu.net

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

body {
    --material-theme-font1: var(--font1, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    --material-theme-color1: var(--color1, 33, 150, 243);
    --material-theme-color2: var(--color2, 255, 255, 255);
    --material-theme-color3: var(--color3, 0, 0, 0);
}


/* Text input styling */
.textinput-outlined {
    width: 100%;
    padding-top: 6px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    font-family: var(--material-theme-font1, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 16px;
    line-height: 1.5;
}

/* Dom element layout */
.textinput-outlined>input {
    width: 100%;
    height: inherit;
    margin: 0;
    padding: 15px 13px 15px;
    box-sizing: border-box;
    background-color: transparent;
    box-shadow: none;
    caret-color: rgb(var(--material-theme-color1, 33, 150, 243));
    border: solid 1px;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    border-top-color: transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
    transition: border 0.2s, box-shadow 0.2s;
}

/* Span element layout */
.textinput-outlined>input+span {
    width: 100%;
    max-height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    cursor: text;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    font-size: 75%;
    line-height: 15px;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}

/* Corners border radius */
.textinput-outlined>input+span::before,
.textinput-outlined>input+span::after {
    min-width: 10px;
    height: 8px;
    margin-top: 6px;
    display: block;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px transparent;
    content: "";
    border-top: solid 1px;
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.textinput-outlined>input+span::before {
    margin-right: 4px;
    border-left: solid 1px transparent;
    border-radius: 4px 0;
}

.textinput-outlined>input+span::after {
    margin-left: 4px;
    flex-grow: 1;
    border-right: solid 1px transparent;
    border-radius: 0 4px;
}

/* Hover state style */
.textinput-outlined:hover>input {
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
    border-top-color: transparent;
}

.textinput-outlined:hover>input+span::before,
.textinput-outlined:hover>input+span::after {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
}

/* Placeholder input text */
.textinput-outlined:hover>input:not(:focus):placeholder-shown {
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
}

.textinput-outlined>input:not(:focus):placeholder-shown {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
}

.textinput-outlined>input:not(:focus):placeholder-shown+span {
    font-size: inherit;
    line-height: 68px;
}

.textinput-outlined>input:not(:focus):placeholder-shown+span::before,
.textinput-outlined>input:not(:focus):placeholder-shown+span::after {
    border-top-color: transparent;
}

/* Focus state style */
.textinput-outlined>input:focus {
    outline: none;
    border-color: rgb(var(--material-theme-color1, 33, 150, 243));
    border-top-color: transparent;
    box-shadow: inset 1px 0 var(--material-theme-color1), inset -1px 0 var(--material-theme-color1), inset 0 -1px var(--material-theme-color1);
}

.textinput-outlined>input:focus+span {
    color: rgb(var(--material-theme-color1, 33, 150, 243));
}

.textinput-outlined>input:focus+span::before,
.textinput-outlined>input:focus+span::after {
    border-top-color: var(--material-theme-color1) !important;
    box-shadow: inset 0 1px var(--material-theme-color1);
}

/* Readonly input style */
.textinput-outlined>input:read-only,
.textinput-outlined>input:read-only+span {
    pointer-events: none;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
    border-top-color: transparent !important;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
}

.textinput-outlined>input:read-only+span::before,
.textinput-outlined>input:read-only+span::after {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
}

.textinput-outlined>input:read-only:placeholder-shown,
.textinput-outlined>input:read-only:placeholder-shown+span {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
}

.textinput-outlined>input:read-only:placeholder-shown+span::before,
.textinput-outlined>input:read-only:placeholder-shown+span::after {
    border-top-color: transparent !important;
}

/* Disabled element style */
.textinput-outlined>input:disabled,
.textinput-outlined>input:disabled+span {
    pointer-events: none;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
    border-top-color: transparent !important;
    opacity: 0.75;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
}

.textinput-outlined>input:disabled+span::before,
.textinput-outlined>input:disabled+span::after {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
}

.textinput-outlined>input:disabled:placeholder-shown,
.textinput-outlined>input:disabled:placeholder-shown+span {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
}

.textinput-outlined>input:disabled:placeholder-shown+span::before,
.textinput-outlined>input:disabled:placeholder-shown+span::after {
    border-top-color: transparent !important;
}

/* Safari browser layout */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {

        .textinput-outlined>input,
        .textinput-outlined>input+span,
        .textinput-outlined>input+span::before,
        .textinput-outlined>input+span::after {
            transition-duration: 0.1s;
        }
    }
}


/* Textarea input styling */
.textarea-outlined {
    width: 100%;
    padding-top: 6px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    font-family: var(--material-theme-font1, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 16px;
    line-height: 1.5;
}

/* Dom element layout */
.textarea-outlined>textarea {
    width: 100%;
    max-width: 100%;
    height: inherit;
    margin: 0;
    padding: 15px 13px 15px;
    box-sizing: border-box;
    background-color: transparent;
    box-shadow: none;
    caret-color: rgb(var(--material-theme-color1, 33, 150, 243));
    border: solid 1px;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    border-top-color: transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
    transition: border 0.2s, box-shadow 0.2s;
}

/* Span element layout */
.textarea-outlined>textarea+span {
    width: 100%;
    max-height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    cursor: text;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    font-size: 75%;
    line-height: 15px;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}

/* Corners border radius */
.textarea-outlined>textarea+span::before,
.textarea-outlined>textarea+span::after {
    min-width: 10px;
    height: 8px;
    margin-top: 6px;
    display: block;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px transparent;
    content: "";
    border-top: solid 1px;
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.textarea-outlined>textarea+span::before {
    margin-right: 4px;
    border-left: solid 1px transparent;
    border-radius: 4px 0;
}

.textarea-outlined>textarea+span::after {
    margin-left: 4px;
    flex-grow: 1;
    border-right: solid 1px transparent;
    border-radius: 0 4px;
}

/* Hover state style */
.textarea-outlined:hover>textarea {
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
    border-top-color: transparent;
}

.textarea-outlined:hover>textarea+span::before,
.textarea-outlined:hover>textarea+span::after {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
}

/* Placeholder input text */
.textarea-outlined:hover>textarea:not(:focus):placeholder-shown {
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
}

.textarea-outlined>textarea:not(:focus):placeholder-shown {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
}

.textarea-outlined>textarea:not(:focus):placeholder-shown+span {
    font-size: inherit;
    line-height: 68px;
}

.textarea-outlined>textarea:not(:focus):placeholder-shown+span::before,
.textarea-outlined>textarea:not(:focus):placeholder-shown+span::after {
    border-top-color: transparent;
}

/* Focus state style */
.textarea-outlined>textarea:focus {
    outline: none;
    border-color: rgb(var(--material-theme-color1, 33, 150, 243));
    border-top-color: transparent;
    box-shadow: inset 1px 0 var(--material-theme-color1), inset -1px 0 var(--material-theme-color1), inset 0 -1px var(--material-theme-color1);
}

.textarea-outlined>textarea:focus+span {
    color: rgb(var(--material-theme-color1, 33, 150, 243));
}

.textarea-outlined>textarea:focus+span::before,
.textarea-outlined>textarea:focus+span::after {
    border-top-color: var(--material-theme-color1) !important;
    box-shadow: inset 0 1px var(--material-theme-color1);
}

/* Disabled element style */
.textarea-outlined>textarea:disabled,
.textarea-outlined>textarea:disabled+span {
    pointer-events: none;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
    border-top-color: transparent !important;
    opacity: 0.75;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
}

.textarea-outlined>textarea:disabled+span::before,
.textarea-outlined>textarea:disabled+span::after {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
}

.textarea-outlined>textarea:disabled:placeholder-shown,
.textarea-outlined>textarea:disabled:placeholder-shown+span {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
}

.textarea-outlined>textarea:disabled:placeholder-shown+span::before,
.textarea-outlined>textarea:disabled:placeholder-shown+span::after {
    border-top-color: transparent !important;
}

/* Safari browser layout */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {

        .textarea-outlined>textarea,
        .textarea-outlined>textarea+span,
        .textarea-outlined>textarea+span::before,
        .textarea-outlined>textarea+span::after {
            transition-duration: 0.1s;
        }
    }
}


/* Select input styling */
.selectlist-outlined {
    width: 100%;
    padding-top: 6px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    font-family: var(--material-theme-font1, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 16px;
    line-height: 1.5;
}

/* Dom element layout */
.selectlist-outlined>select {
    width: 100%;
    max-width: 100%;
    height: inherit;
    margin: 0;
    padding: 15px 13px 15px;
    box-sizing: border-box;
    background-color: transparent;
    box-shadow: none;
    caret-color: rgb(var(--material-theme-color1, 33, 150, 243));
    border: solid 1px;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    border-top-color: transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
    transition: border 0.2s, box-shadow 0.2s;
}

/* Span element layout */
.selectlist-outlined>select+span {
    width: 100%;
    max-height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    cursor: text;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    font-size: 75%;
    line-height: 15px;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}

/* Corners border radius */
.selectlist-outlined>select+span::before,
.selectlist-outlined>select+span::after {
    min-width: 10px;
    height: 8px;
    margin-top: 6px;
    display: block;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px transparent;
    content: "";
    border-top: solid 1px;
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.selectlist-outlined>select+span::before {
    margin-right: 4px;
    border-left: solid 1px transparent;
    border-radius: 4px 0;
}

.selectlist-outlined>select+span::after {
    margin-left: 4px;
    flex-grow: 1;
    border-right: solid 1px transparent;
    border-radius: 0 4px;
}

/* Hover state style */
.selectlist-outlined:hover>select {
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
    border-top-color: transparent;
}

.selectlist-outlined:hover>select+span::before,
.selectlist-outlined:hover>select+span::after {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
}

/* Placeholder input text */
.selectlist-outlined:hover>select:not(:focus):placeholder-shown {
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
}

.selectlist-outlined>select:not(:focus):placeholder-shown {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
}

.selectlist-outlined>select:not(:focus):placeholder-shown+span {
    font-size: inherit;
    line-height: 68px;
}

.selectlist-outlined>select:not(:focus):placeholder-shown+span::before,
.selectlist-outlined>select:not(:focus):placeholder-shown+span::after {
    border-top-color: transparent;
}

/* Focus state style */
.selectlist-outlined>select:focus {
    outline: none;
    border-color: rgb(var(--material-theme-color1, 33, 150, 243));
    border-top-color: transparent;
    box-shadow: inset 1px 0 var(--material-theme-color1), inset -1px 0 var(--material-theme-color1), inset 0 -1px var(--material-theme-color1);
}

.selectlist-outlined>select:focus+span {
    color: rgb(var(--material-theme-color1, 33, 150, 243));
}

.selectlist-outlined>textarea:focus+span::before,
.selectlist-outlined>textarea:focus+span::after {
    border-top-color: var(--material-theme-color1) !important;
    box-shadow: inset 0 1px var(--material-theme-color1);
}

/* Disabled element style */
.selectlist-outlined>select:disabled,
.selectlist-outlined>select:disabled+span {
    pointer-events: none;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
    border-top-color: transparent !important;
    opacity: 0.75;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
}

.selectlist-outlined>select:disabled+span::before,
.selectlist-outlined>select:disabled+span::after {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
}

.selectlist-outlined>select:disabled:placeholder-shown,
.selectlist-outlined>select:disabled:placeholder-shown+span {
    border-top-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38) !important;
}

.selectlist-outlined>select:disabled:placeholder-shown+span::before,
.selectlist-outlined>select:disabled:placeholder-shown+span::after {
    border-top-color: transparent !important;
}

/* Safari browser layout */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {

        .selectlist-outlined>select,
        .selectlist-outlined>select+span,
        .selectlist-outlined>select+span::before,
        .selectlist-outlined>select+span::after {
            transition-duration: 0.1s;
        }
    }
}


/* Checkbox input styling */
.checkbox-regular {
    display: inline-block;
    position: relative;
    z-index: 0;
    font-family: var(--material-theme-font1, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 16px;
    line-height: 1.5;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
}

/* Checkbox border style */
.checkbox-regular>input {
    width: 18px;
    height: 18px;
    margin: 3px 1px;
    display: block;
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: solid 2px;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    border-radius: 2px;
    transition: border-color 0.2s, background-color 0.2s;
}

/* Span element layout */
.checkbox-regular>input+span {
    width: inherit;
    padding-left: 30px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
}

/* Checkbox highlight color */
.checkbox-regular>input+span::before {
    width: 40px;
    height: 40px;
    position: absolute;
    top: -8px;
    left: -10px;
    background-color: rgb(var(--material-theme-color3, 0, 0, 0));
    opacity: 0;
    pointer-events: none;
    content: "";
    border-radius: 50%;
    transform: scale(1);
    transition: opacity 0.3s, transform 0.2s;
}

/* Checkbox indicator mark */
.checkbox-regular>input+span::after {
    width: 10px;
    height: 5px;
    display: block;
    position: absolute;
    top: 3px;
    left: 1px;
    z-index: 1;
    box-sizing: content-box;
    content: "";
    pointer-events: none;
    border: solid 2px transparent;
    border-right-width: 0;
    border-top-width: 0;
    transform: translate(3px, 4px) rotate(-45deg);
    transition: border-color 0.2s;
}

/* Checked indeterminate states */
.checkbox-regular>input:checked,
.checkbox-regular>input:indeterminate {
    background-color: rgb(var(--material-theme-color1));
    border-color: rgb(var(--material-theme-color1));
}

.checkbox-regular>input:checked+span::before,
.checkbox-regular>input:indeterminate+span::before {
    background-color: rgb(var(--material-theme-color1));
}

.checkbox-regular>input:checked+span::after,
.checkbox-regular>input:indeterminate+span::after {
    border-color: rgb(var(--material-theme-color2, 255, 255, 255));
}

.checkbox-regular>input:indeterminate+span::after {
    border-left-width: 0;
    transform: translate(4px, 3px);
}

/* Hover focus styles */
.checkbox-regular:hover>input+span::before {
    opacity: 0.04;
}

.checkbox-regular>input:focus+span::before {
    opacity: 0.12;
}

.checkbox-regular:hover>input:focus+span::before {
    opacity: 0.16;
}

/* Active state style */
.checkbox-regular:active>input,
.checkbox-regular:active:hover>input {
    border-color: rgb(var(--material-theme-color1));
}

.checkbox-regular:active>input:checked {
    background-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    border-color: transparent;
}

.checkbox-regular:active>input+span::before {
    opacity: 1;
    transform: scale(0);
    transition: transform 0s, opacity 0s;
}

/* Disabled element style */
.checkbox-regular>input:disabled {
    cursor: initial;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
    opacity: 0.75;
}

.checkbox-regular>input:disabled+span {
    cursor: initial;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
}

.checkbox-regular>input:disabled+span::before {
    transform: scale(0);
    opacity: 0;
}

.checkbox-regular>input:checked:disabled,
.checkbox-regular>input:indeterminate:disabled {
    background-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
    border-color: transparent;
}

/* Radio input styling */
.radioselect-regular {
    display: inline-block;
    position: relative;
    z-index: 0;
    font-family: var(--material-theme-font1, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 16px;
    line-height: 1.5;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.87);
}

/* Radio indicator circle */
.radioselect-regular>input {
    width: 20px;
    height: 20px;
    margin: 2px 0;
    display: block;
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    border: solid 2px;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.6);
    border-radius: 50%;
    transition: border-color 0.2s;
}

/* Span element layout */
.radioselect-regular>input+span {
    width: inherit;
    padding-left: 30px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
}

/* Checkbox highlight color */
.radioselect-regular>input+span::before {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    top: -8px;
    left: -10px;
    background-color: rgb(var(--material-theme-color3, 0, 0, 0));
    content: "";
    opacity: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: scale(0);
    transition: opacity 0.3s, transform 0.2s;
}

/* Checkbox indicator mark */
.radioselect-regular>input+span::after {
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    top: 2px;
    left: 0;
    background-color: rgb(var(--material-theme-color1));
    content: "";
    border-radius: 50%;
    transform: translate(5px, 5px) scale(0);
    transition: transform 0.2s;
}

/* Checked indicator state */
.radioselect-regular>input:checked {
    border-color: rgb(var(--material-theme-color1));
}

.radioselect-regular>input:checked+span::before {
    background-color: rgb(var(--material-theme-color1));
}

.radioselect-regular>input:checked+span::after {
    transform: translate(5px, 5px) scale(1);
}

/* Hover focus styles */
.radioselect-regular:hover>input+span::before {
    opacity: 0.04;
    transform: scale(1);
}

.radioselect-regular>input:focus+span::before {
    opacity: 0.12;
    transform: scale(1);
}

.radioselect-regular:hover>input:focus+span::before {
    opacity: 0.16;
    transform: scale(1);
}

/* Active state style */
.radioselect-regular:active>input {
    border-color: rgb(var(--material-theme-color1));
}

.radioselect-regular:active>input+span::before,
.radioselect-regular:active:hover>input+span::before {
    opacity: 1;
    transform: scale(0);
    transition: transform 0s, opacity 0s;
}

/* Disabled element style */
.radioselect-regular>input:disabled {
    cursor: initial;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
    opacity: 0.75;
}

.radioselect-regular>input:disabled+span {
    cursor: initial;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
}

.radioselect-regular>input:disabled+span::before {
    opacity: 0;
    transform: scale(0);
}

.radioselect-regular>input:disabled+span::after {
    background-color: currentColor;
}


/* Contained button styling */

.button-contained {
    min-width: 64px;
    height: 36px;
    padding: 0 16px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    outline: none;
    cursor: pointer;
    background-color: rgb(var(--material-theme-color1));
    box-sizing: border-box;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    border: none;
    border-radius: 4px;
    font-family: var(--material-theme-font1, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
    text-overflow: ellipsis;
    color: rgb(var(--material-theme-color2));
    transition: box-shadow 0.2s;
}

.button-contained::-moz-focus-inner {
    border: none;
}

/* Highlight ripple effect */
.button-contained::before,
.button-contained::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    opacity: 0;
    border-radius: inherit;
}

.button-contained::before {
    background-color: rgb(var(--material-theme-color2));
    transition: opacity 0.2s;
}

.button-contained::after {
    background: radial-gradient(circle at center, currentColor 1%, transparent 1%) center/10000% 10000% no-repeat;
    transition: opacity 1s, background-size 0.5s;
}

/* Hover focus styles */
.button-contained:hover,
.button-contained:focus {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.button-contained:hover::before {
    opacity: 0.08;
}

.button-contained:focus::before {
    opacity: 0.24;
}

.button-contained:hover:focus::before {
    opacity: 0.32;
}

/* Active state style */
.button-contained:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.button-contained:active::after {
    background-size: 100% 100%;
    opacity: 0.32;
    transition: background-size 0s;
}

/* Disabled element style */
.button-contained:disabled {
    background-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.12);
    box-shadow: none;
    cursor: initial;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
}

.button-contained:disabled::before,
.button-contained:disabled::after {
    opacity: 0;
}

/* Outlined button styling */

.button-outlined {
    min-width: 64px;
    height: 36px;
    margin: 0;
    padding: 0 16px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    box-sizing: border-box;
    border: solid 1px;
    border-color: rgba(var(--material-theme-color3, 0, 0, 0), 0.24);
    border-radius: 4px;
    font-family: var(--material-theme-font1, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 14px;
    font-weight: 500;
    line-height: 34px;
    text-overflow: ellipsis;
    text-align: center;
    color: rgb(var(--material-theme-color1));
}

.button-outlined::-moz-focus-inner {
    border: none;
}

/* Highlight ripple effect */
.button-outlined::before,
.button-outlined::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    opacity: 0;
    border-radius: 3px;
}

.button-outlined::before {
    background-color: rgb(var(--material-theme-color1));
    transition: opacity 0.2s;
}

.button-outlined::after {
    background: radial-gradient(circle at center, currentColor 1%, transparent 1%) center/10000% 10000% no-repeat;
    transition: opacity 1s, background-size 0.5s;
}

/* Hover focus styles */
.button-outlined:hover::before {
    opacity: 0.04;
}

.button-outlined:focus::before {
    opacity: 0.12;
}

.button-outlined:hover:focus::before {
    opacity: 0.16;
}

/* Active state style */
.button-outlined:active::after {
    background-size: 100% 100%;
    opacity: 0.16;
    transition: background-size 0s;
}

/* Disabled element style */
.button-outlined:disabled {
    background-color: transparent;
    cursor: initial;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.38);
}

.button-outlined:disabled::before,
.button-outlined:disabled::after {
    opacity: 0;
}

/* Close button styling */

.button-close {
    width: 5em;
    height: 5em;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    background: #0066ff;
    border: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 150ms;
}

.button-close:hover,
.button-close:focus {
    background: #0052cc;
    transform: rotateZ(90deg);
}

.button-close .cross {
    width: 3em;
    height: 3em;
    margin: 0;
    padding: 0;
    position: relative;
    background: none;
    border: 0;
}

.button-close .cross::before,
.button-close .cross::after {
    height: 0.5em;
    position: absolute;
    top: 1.25em;
    right: 0;
    left: 0;
    background: #fff;
    border-radius: 6px;
    content: "";
}

.button-close .cross::before {
    transform: rotate(45deg);
}

.button-close .cross::after {
    transform: rotate(-45deg);
}

.button-close .hidden {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden;
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px);
}

/* Data table styling */
.datatable-contained {
    width: 100%;
    border-top: 1px solid #86bc25;
    border-right: 1px solid #86bc25;
    border-spacing: 0;
}

.datatable-contained th,
.datatable-contained td {
    margin: 0;
    padding: 5px 8px;
    border-bottom: 1px solid #86bc25;
    border-left: 1px solid #86bc25;
    font-size: 85%;
    text-align: left;
}

.datatable-contained th {
    font-weight: 400;
}

.datatable-contained td {
    font-size: 70%;
    color: gray;
}

.datatable-contained caption {
    padding: 3px;
    display: none;
    border-bottom: 1px solid #86bc25;
    border-left: 1px solid #86bc25;
    font-size: 80%;
    color: #86bc25;
}

.datatable-contained tbody:empty~caption {
    display: block;
}

.datatable-contained tbody:empty~thead {
    display: none;
}

/* Tab selection styling */
.tabs-outlined {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    position: relative;
    font-family: var(--material-theme-font1, "Roboto", "Segoe UI", BlinkMacSystemFont, -apple-system);
    /* Subtle tab track */
    border-bottom: 2px solid rgba(var(--material-theme-color3, 0, 0, 0), 0.06);
    gap: 8px;
}

.tabs-outlined a {
    flex: 1;
    padding: 14px 16px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.45);
    position: relative;
    transition: color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.tabs-outlined a.hidden {
    display: none;
}

.tabs-outlined a:hover {
    color: rgba(var(--material-theme-color3, 0, 0, 0), 0.85);
}

.tabs-outlined a.active {
    color: rgb(var(--material-theme-color1, 33, 150, 243));
    font-weight: 600;
}

.tabs-outlined a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    /* Overlap parent border */
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: transparent;
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.tabs-outlined a.active::after {
    background-color: rgb(var(--material-theme-color1, 33, 150, 243));
    transform: scaleX(1);
    left: 0;
    right: 0;
    box-shadow: 0 -2px 8px rgba(var(--material-theme-color1, 33, 150, 243), 0.4);
}

.tabs-content {
    display: none;
    animation: fadeEffect 0.5s;
}

.tabs-content.active {
    display: block;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}