*::-webkit-scrollbar {
    width : 6px;
}

*::-webkit-scrollbar-track {
    background-color : transparent;
}

*::-webkit-scrollbar-thumb {
    background : #ccc;
}

.clamp-3 {
    -webkit-box-orient : vertical;
    display            : -webkit-box;
    -webkit-line-clamp : 3;
    overflow           : hidden;
}

.cursor-pointer {
    cursor : pointer;
}

.alerts {
    display       : none;
    margin-bottom : 1rem;
}

.alerts > .alert {
    border-radius : 0.4rem;
    padding       : 0.5rem;
}

.alert.danger {
    background : rgba(193, 59, 51, 0.15);
    border     : 1px solid rgba(193, 59, 51, 0.5);
    color      : #c13b33;
    display    : none;
}

button {
    background          : #09f;
    border              : none;
    border-radius       : 0.5rem;
    color               : #fff;
    cursor              : pointer;
    font-size           : 0.75rem;
    opacity             : 0.85;
    padding             : 0.75rem;
    text-transform      : uppercase;
    text-decoration     : none;
    transition-duration : 0.3s;
    transition-property : all;
}

button.btn-sm {
    border-radius : 0.35rem;
    font-size     : 0.6rem;
    padding       : 0.4rem;
}

button:hover {
    opacity : 1;
}

.checkbox, .radio {
    align-items : stretch;
    column-gap  : 0.25rem;
    cursor      : pointer;
    display     : flex;
    flex-wrap   : nowrap;
    line-height : 25px;
    height      : 25px;
    user-select : none;
    width       : max-content;
}

.checkbox input, .radio input {
    display : none;
}

.checkbox .c-check,
.radio .c-check {
    display : none;
}

.checkbox input:checked + span .c-uncheck,
.radio input:checked +span .c-uncheck {
    display : none;
}

.checkbox input:checked + span .c-check,
.radio input:checked + span .c-check {
    display : block;
}

.checkbox:has(input:disabled) *,
.radio:has(input:disabled) * {
    color : #bbb;
}

.checkbox:has(input:disabled) svg,
.radio:has(input:disabled) svg {
    fill : #bbb;
}

label {
    display       : block;
    font-family   : "Roboto Medium", serif;
    margin-bottom : 0.4rem;
}

label.required::after {
    color   : #c13b33;
    content : ' *';
}

input[type="text"] {
    border              : 1px solid #ccc;
    border-radius       : 0.4rem;
    display             : block;
    font-family         : "Roboto Regular", serif;
    outline             : none;
    padding             : 0.75rem;
    transition-duration : 0.3s;
    transition-property : all;
    width               : calc(100% - 1.5rem);
}

input[type="text"]:focus {
    border : 1px solid #aaa;
}

input.is-invalid {
    border-color : #c13b33 !important;
    color        : #c13b33 !important;
}

input.is-invalid + .invalid-feedback {
    display : block;
}

.invalid-feedback {
    color      : #c13b33;
    display    : none;
    font-size  : 0.9rem;
    margin-top : 0.25rem;
}