/* Text Colors */
.text-grey {
    color: #777777 !important;
}

.text-primary {
    color: var(--mud-palette-primary) !important;
}

.text-secondary {
    color: var(--mud-palette-secondary) !important;
}

.text-loud {
    color: #0099CC !important;
}

.text-white {
    color: #FFF !important
}

.text-error {
    color: var(--mud-palette-error) !important;
}

.text-warning {
    color: var(--mud-palette-warning) !important;
}

/* Background Colors */
.bg-primary {
    background-color: #003366 !important;
}

.bg-secondary {
    background-color: #FF6600 !important;
}

.bg-loud {
    background-color: #0099CC !important;
}

.bg-grey {
    background-color: #F0EFEF !important;
}

.bg-light {
    background-color: #F8F8F8 !important;
}

.bg-white {
    background-color: #FFFFFF !important;
}

/* Borders */
.border {
    border: 1px solid #E5E5E5 !important;
}

.border-alert {
    border: 1px solid #FF6600 !important;
}

.border-info {
    border: 1px solid #0099CC !important;
}

border-bottom-primary {
    border-bottom: 1px solid #003366 !important;
}

border-bottom-secondary {
    border-bottom: 1px solid #FF6600 !important;
}

border-bottom-loud {
    border-bottom: 1px solid #0099CC !important;
}

/* Width and Height */
.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.w-unset {
    width: unset !important;
}

.w-contain {
    width: contain !important;
}

.w-fit-content {
    width: fit-content !important;
}

/* Flex */
.flex-1 {
    flex: 1;
}

/* Font Weights */
.font-weight-light {
    font-weight: 300;
}

.font-weight-normal {
    font-weight: 400;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-bold {
    font-weight: 700;
}

/* Line Heights */
.line-height-extralarge {
    line-height: 160%;
}

.line-height-large {
    line-height: 140%;
}

.line-height-medium {
    line-height: 120%;
}

.line-height-normal {
    line-height: 110%;
}

.line-height-small {
    line-height: 100%;
}

/* Font Sizes */
.text-extralarge {
    font-size: 28px;
}

.text-large {
    font-size: 26px;
}

.text-medium {
    font-size: 20px;
}

.text-normal {
    font-size: 18px;
}

.text-small {
    font-size: 16px;
}

.text-extrasmall {
    font-size: 14px;
}
.text-smaller {
    font-size: 10px;
}
    .text-smaller::placeholder {
        font-size: 10px; 
        color: #777777; 
    }

@media (max-width: 960px) {
    .text-extralarge {
        font-size: 22px;
    }

    .text-large {
        font-size: 20px;
    }

    .text-medium {
        font-size: 18px;
    }

    .text-normal {
        font-size: 16px;
    }

    .text-small {
        font-size: 15px;
    }

    .text-extrasmall {
        font-size: 13px;
    }
}

/* Letter Spacing */
.letter-spacing-1 {
    letter-spacing: 1px;
}

.no-letter-spacing {
    letter-spacing: 0;
}

/* Text Transformations */
.text-uppercase {
    text-transform: uppercase;
}

/* Visibility Hidden Classes */
.hidden-xs {
    display: none !important;
}

@media (min-width: 600px) {
    .hidden-xs {
        display: block !important;
    }
}

.hidden-sm {
    display: none !important;
}

@media (min-width: 960px) {
    .hidden-sm {
        display: block !important;
    }
}

.hidden-md {
    display: none !important;
}

@media (min-width: 1280px) {
    .hidden-md {
        display: block !important;
    }
}

.hidden-lg {
    display: none !important;
}

@media (min-width: 1920px) {
    .hidden-lg {
        display: block !important;
    }
}

.hidden-xl {
    display: none !important;
}

@media (min-width: 2560px) {
    .hidden-xl {
        display: block !important;
    }
}

.hidden-xxl {
    display: none !important;
}

/* Visibility Visible Classes */
.visible-xs {
    display: block !important;
}

@media (min-width: 600px) {
    .visible-xs {
        display: none !important;
    }
}

.visible-sm {
    display: block !important;
}

@media (min-width: 960px) {
    .visible-sm {
        display: none !important;
    }
}

.visible-md {
    display: block !important;
}

@media (min-width: 1280px) {
    .visible-md {
        display: none !important;
    }
}

.visible-lg {
    display: block !important;
}

@media (min-width: 1920px) {
    .visible-lg {
        display: none !important;
    }
}

.visible-xl {
    display: block !important;
}

@media (min-width: 2560px) {
    .visible-xl {
        display: none !important;
    }
}

.visible-xxl {
    display: block !important;
}

.box-shadow {
    -webkit-box-shadow: 0px 2px 6px -1px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 6px -1px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 6px -1px rgba(0,0,0,0.15);
}

/* Font weight */
.font-weight-light {
    font-weight: 300;
}

.font-weight-normal {
    font-weight: 400;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-bold {
    font-weight: 700;
}

/* Text alignments */
.text-align-center {
    text-align: center;
}

.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}