/*
    !IMPORTANT:
    Due to the nature of blazor and telerik code generation, CSS isolation is not working correctly when combining these components.
    Therefore the best practice we state that all CSS is to be defined in global CSS classes.
    This should work in all situations however keep in mind, when using global CSS classes be wary of conflicts with existing CSS tags.

    For more info see: https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation
*/

/* Flex Layouts */
.flex-expand-row {
    display: flex;
    flex-direction: row;
}

.flex-expand-column {
    display: flex;
    flex-direction: column;
}

.flex-expand-column-top-padding {
    display: flex;
    flex-direction: column;
    padding-top: 7px;
}

.grid-layout-col-6040 {
    display: grid;
    grid-template-columns: 60% 40%;
}
.grid-layout-col-5050 {
    display: grid;
    grid-template-columns: 50% 50%;
}
.grid-layout-col-4060 {
    display: grid;
    grid-template-columns: 40% 60%;
}
.grid-layout-col-2080 {
    display: grid;
    grid-template-columns: 20% 80% 30px;
}

/* Additional Features */
.font-14 {
    font-size: 14px !important;
}

.gap-10 {
    gap: 10px !important;
}

.gap-25 {
    gap: 25px !important;
}

.validation-valid {
    color: #28a745;
}
.validation-invalid {
    color: #dc3545;
}