.f-s-18{
    font-size : 18px !important;
}

.f-s-16{
    font-size : 16px !important;
}

.f-s-11 {
    font-size: 11px !important;
}

.f-s-12 {
    font-size: 12px !important;
}

.f-s-13 {
    font-size: 13px !important;
}

.f-s-15 {
    font-size: 15px !important;
}

.f-s-20 {
    font-size: 20px !important;
}

.f-s-24{
    font-size : 24px;
}

.f-s-30{
    font-size : 30px !important;
}

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

.text-gray{
    color : gray !important;
}

.text-white {
    color: #fff !important;
}

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

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

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

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

.approve-color {
    color : var(--approve-color) !important;
}

.act-dis-color {
    color: var(--mud-palette-action-disabled);
}

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

.aic{
    align-items : center;
}

.btn-none{
    outline : none;
    border : none;
    background : none;
}

.flex-center{
    display : flex;
    align-items : center;
    justify-content : center;
}

.flex-wrap{
    flex-wrap : wrap;
}

.mb-25px{
    margin-bottom : 25px !important;
}

.h-60px{
    height : 60px !important;
}

.h-50px {
    height: 50px !important;
}

.h-40px {
    height: 40px !important;
}

.hcal-f-40px {
    height: calc(100% - 40px) !important;
}

.hcal-f-20px {
    height: calc(100% - 20px) !important;
}

.mt-10px{
    margin-top : 10px !important;
}

.mt-m-10px {
    margin-top: -10px !important;
}

.gray-dark-color {
    color: var(--mud-palette-gray-dark);
}

.pa-20px{
    padding : 20px !important;
}

.pa-5px {
    padding: 5px !important;
}

.bg-surface {
    background-color: var(--mud-palette-surface) !important;
}

.bg-action-def-hov {
    background: var(--mud-palette-action-default-hover) !important;
}

.bg-mud-gray {
    background: var(--mud-palette-background-gray) !important;
}

.mh-100px{
    min-height : 100px !important;
}

.mh-600px {
    min-height: 600px !important;
}



.mh-auto {
    min-height: auto !important;
}



.pb-20px {
    padding-bottom: 20px !important;
}

.pt-20px {
    padding-top: 20px !important;
}

.pl-20px {
    padding-left: 20px !important;
}

.pr-20px {
    padding-right: 20px !important;
}

.pt-45px{
    padding-top : 45px !important;
}

.pb-15px {
    padding-bottom: 15px !important;
}
.pt-15px {
    padding-top: 15px !important;
}
.pl-15px {
    padding-left: 15px !important;
}
.pr-15px {
    padding-right: 15px !important;
}

.pb-10px {
    padding-bottom: 10px !important;
}

.pt-10px {
    padding-top: 10px !important;
}

.pl-10px {
    padding-left: 10px !important;
}

.pr-10px {
    padding-right: 10px !important;
}

.pb-8px {
    padding-bottom: 8px !important;
}

.pt-8px {
    padding-top: 8px !important;
}

.pl-8px {
    padding-left: 8px !important;
}

.pr-8px {
    padding-right: 8px !important;
}

.pb-5px {
    padding-bottom: 5px !important;
}

.pt-5px {
    padding-top: 5px !important;
}

.pl-5px {
    padding-left: 5px !important;
}

.pr-5px {
    padding-right: 5px !important;
}

.pb-0px {
    padding-bottom: 0px !important;
}

.pt-0px {
    padding-top: 0px !important;
}

.pl-0px {
    padding-left: 0px !important;
}

.pr-0px {
    padding-right: 0px !important;
}

.success-color {
    color: var(--mud-palette-success);
}

.transition-eio-03{
    transition : all ease-in-out 0.3s;
}

.column-reverse{
    flex-direction : row-reverse;
}

.br-20px{
    border-radius : 20px !important;
}

.br-5px{
    border-radius : 5px !important;
}

.right-5px{
    right : 5px;
}

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

.mw-400px {
    max-width: 400px !important;
}

.mw-500px {
    max-width: 500px !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mr-auto{
    margin-right  : auto !important;
}