.inset-0 {
    inset: 0 !important;
}

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

.f-s-17 {
    font-size: 17px !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;
}

.f-900{
    font-weight: 900 !important;
}

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

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

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

.self-center {
    align-self: center;
}

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

.secondary-bg {
    background: var(--mud-palette-surface) !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;
}

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

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

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

.aic{
    align-items : center;
}

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

.br-1px-white {
    border: 1px solid #fff !important;
}

.br-1px-primary {
    border: 1px solid var(--mud-palette-primary);
}

.br-1px-act-def-hover {
    border: 1px solid var(--mud-palette-action-default-hover);
}

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

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

.g-2px{
    gap : 2px;
}

.no-h {
    height: unset !important;
}

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

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

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

.h-std {
    height: var(--standard-height);
}

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

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

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

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

.mr-minus-15px {
    margin-right: -15px !important;
}

/* ============ Margin ===============*/
/* Margin Top */
.mt-5px {
    margin-top: 5px !important;
}
.mt-10px {
    margin-top: 10px !important;
}

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

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

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

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

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

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

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

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

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

/* Margin Right */
.mr-5px {
    margin-right: 5px !important;
}
.mr-10px {
    margin-right: 10px !important;
}

.mr-20px {
    margin-right: 20px !important;
}

.mr-30px {
    margin-right: 30px !important;
}

.mr-40px {
    margin-right: 40px !important;
}

.mr-50px {
    margin-right: 50px !important;
}

.mr-60px {
    margin-right: 60px !important;
}

.mr-70px {
    margin-right: 70px !important;
}

.mr-80px {
    margin-right: 80px !important;
}

.mr-90px {
    margin-right: 90px !important;
}

.mr-100px {
    margin-right: 100px !important;
}

/* Margin Bottom */
.mb-5px {
    margin-bottom: 5px !important;
}

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

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

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

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

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

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

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

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

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

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

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

/* Margin Left */
.ml-5px {
    margin-left: 5px !important;
}

.ml-10px {
    margin-left: 10px !important;
}

.ml-20px {
    margin-left: 20px !important;
}

.ml-30px {
    margin-left: 30px !important;
}

.ml-40px {
    margin-left: 40px !important;
}

.ml-50px {
    margin-left: 50px !important;
}

.ml-60px {
    margin-left: 60px !important;
}

.ml-70px {
    margin-left: 70px !important;
}

.ml-80px {
    margin-left: 80px !important;
}

.ml-90px {
    margin-left: 90px !important;
}

.ml-100px {
    margin-left: 100px !important;
}
/* ============ Margin ===============*/


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

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

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

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

.px-10px {
    padding: 10px 0;
}

.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;
}

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

.bg-info-hover {
    background: var(--mud-palette-info-hover);
}

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

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

.mh-394px {
    max-height: 394px;
}

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

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

.mih-188px {
    min-height: 188px;
}
.mih-200px {
    min-height: 200px;
}

.mih-394px {
    min-height: 394px;
}

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

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

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

.pr-30px {
    padding-right: 30px !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);
}

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

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

.bg-error {
    background: var(--mud-palette-error);
}

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

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

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

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

.br-12px {
    border-radius: 12px;
}

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

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

.bt-none {
    border-top: none !important;
}

.bb-none {
    border-bottom: none !important;
}

.bb-1px-action-default {
    border-bottom: 1px dotted var(--mud-palette-action-default);
}

.br-none {
    border-right: none !important;
}

.bl-none {
    border-left: none !important;
}

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

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

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

.mwcalc-f-34px {
    max-width: calc(100vw - 34px);
}
.mwcalc-f-50px{
    max-width:calc(100% - 50px);
}
.mwcalc-f-65px {
    max-width: calc(100% - 65px);
}
.mwcalc-f-100px {
    max-width: calc(100% - 100px);
}

.mw-180px {
    max-width: 180px;
}

.mw-200px {
    max-width: 200px;
}

.mw-300px {
    max-width: 300px;
}

.mw-340px {
    max-width: 340px;
}

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

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

.miw-0px{
    min-width:0px;
}
.miw-70px{
    min-width:70px;
}
.miw-84px{
    min-width:84px;
}

.miw-100px {
    min-width: 100px;
}

.miw-145px {
    min-width: 145px;
}
.miw-200px {
    min-width: 200px;
}

.miw-340px {
    min-width: 340px;
}

.miw-290px {
    min-width: 290px;
}

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

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

.mobile-only-block {
    display: none;
}

.desk-only-block{
    display : block;
}
.desk-only-flex {
    display: flex;
}

.top-0{
    top : 0;
}
.right-0 {
    right : 0;
}

.right-m-80{
    right : -80px;
}

.bottom-0 {
    bottom: 0;
}
.left-0 {
    left : 0;
}

.z-1000{
    z-index : 1000;
}
.z-1402 {
    z-index: 1402;
}

.z-999{
    z-index : 999;
}

.w-420px{
    width : 420px;
}

.w-full {
    width: 100% !important;
}

.w-half {
    width: 50% !important;
}

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

.h-half {
    height: 50% !important;
}

.h-auto {
    height: auto !important;
}

.h-10px {
    height: 10px !important;
}
.h-12px {
    height: 12px !important;
}

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

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

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

.h-1 {
    height: 10%;
}

.h-2 {
    height: 20%;
}

.h-3 {
    height: 30%;
}

.h-4 {
    height: 40%;
}

.h-5 {
    height: 50%;
}

.h-6 {
    height: 60%;
}

.h-7 {
    height: 70%;
}

.h-8 {
    height: 80%;
}

.h-9 {
    height: 90%;
}

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

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

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

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

.g-20px {
    gap: 20px !important;
}

.w-7 {
    width: 70%;
}

.w-3 {
    width: 30%;
}

.w-65 {
    width: 65%;
}

.w-std {
    width: var(--standard-width);
}

.w-32px {
    width: 32px !important;
}

.wcalc-f-168px {
    width: calc(100% - 168px);
}

.wcalc-f-92px {
    width: calc(100% - 92px);
}

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

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

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

.p-7px {
    padding: 7px !important;
}

.px-15px {
    padding: 0px 15px;
}

.cur-pointer {
    cursor: pointer !important;
}

.cur-def {  
    cursor: default !important;
}

.mxw-380px {
    max-width: 380px !important;
}

.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
/*    max-width: 210px;*/
    width:100%;
}

.dotdot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-break {
    word-break: break-word !important;
    word-wrap: break-word !important;
}

.disable {
    cursor: not-allowed !important;
    opacity: 0.4 !important;
}

.w-10px{
    width : 10px;
}

.w-12px {
    width: 12px !important;
}

.w-100px {
    width: 100px;
}

.w-180px {
    width: 180px;
}

.w-200px {
    width: 200px
}

.w-215px {
    width: 215px;
}

.w-228px {
    width: 228px;
}

.w-230px {
    width: 230px;
}

.w-250px {
    width: 250px;
}

.w-262px {
    width: 262px;
}

.w-300px {
    width: 300px;
}

.w-330px {
    width: 330px !important;
}

.w-350px {
    width: 350px;
}

.w-370px {
    width: 370px;
}

.w-400px {
    width: 400px;
}

.w-420px {
    width: 420px;
}

.w-430px {
    width: 430px;
}

.w-500px {
    width: 500px;
}

.w-600px {
    width: 600px;
}

.w-700px {
    width: 700px;
}

.w-800px {
    width: 800px;
}

.text-ellipsis {
    text-overflow: ellipsis;
}

.custom-card {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: var(--mud-palette-background);
}

.abs-vertical-center{
    top : 50%;
    transform : translateY(-50%);
}

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

.text-capitalize {
    text-transform: capitalize !important;
}