﻿a.mud-button{
    font-weight: bold;
    border-radius: 28px;
    padding: 16px 32px;
}

button.mud-button {
    font-weight: bold;
    border-radius: 28px;
    padding: 16px 32px;
}
.mud-button-outlined-size-small,
.mud-button-filled-size-small,
.mud-button-text-size-small
{
    font-weight: bold !important;
    font-size: 14px !important;
    border-radius: 28px !important;
    padding: 12px 24px !important;
}

.mud-button-outlined-size-small.xs,
.mud-button-filled-size-small.xs,
.mud-button-text-size-small.xs
{
    font-weight: normal !important;
    font-size: 12px !important;
    border-radius: 28px !important;
    padding: 8px 16px !important;
}


.mud-typography {
    font-family: 'Inter', sans-serif !important;
}

.mud-progress-circular {
    box-sizing: content-box;
}

:root{
    --primary-hover: #23054B;
    --secondary-darken: #5B5FC7;
    --secondary-hover: rgba(201, 203, 238, 0.7);
    --secondary-lighten: #DEDCFB;
    --grey: #F4F4F4;
    --grey-border: #D2D2D2;
    --gray-border-hover: #B0B0B0;
    --black-100: #14181F;
    --black-90: #4a4a4a;
    --black-80: #6c6c6c;
    --black-70: #8e8e8e;
    --black-60: #b0b0b0;
    --black-50: #d2d2d2;
    --black-30: #EBEBEB;
    --black-20: #f4f4f4;
    --black-10: #FAFAFA;
    --LightPurple-200: #AFB0E6;
    --disabled-opacity: 0.38;
    --mud-appbar-total-height: calc(var(--mud-appbar-height) + 41px);
    --footer-height: 140px;
    --mud-typography-h1-size: 24px !important;
    --mud-typography-h1-weight: 700 !important;
    --mud-typography-h1-lineheight: 1.5 !important;
    --mud-typography-h1-letterspacing: -0.305px !important;
    
    --mud-typography-h2-size: 20px !important;
    --mud-typography-h2-weight: 700 !important;
    --mud-typography-h2-lineheight: 1.5 !important;
    --mud-typography-h2-letterspacing: -0.272px !important;
    
    --mud-palette-error-text: rgba(80, 0, 0, 1) !important;
}

@media (min-width: 600px) {
    :root {
        --footer-height: 96px;
    }
}

.mud-button-filled {
    box-shadow: unset !important;
}

/*Outlined buttons*/
.mud-button-outlined {
    border: 1px solid var(--grey-border) !important;
}
.mud-button-outlined:hover{
    border: 1px solid var(--gray-border-hover) !important;
}
.mud-button-outlined-secondary {
    color: var(--secondary-darken) !important;
}
.mud-button-outlined:disabled{
    opacity: var(--disabled-opacity) !important;
}
.mud-button-outlined-default:disabled{
    color:var(--mud-palette-default) !important;
}
.mud-button-outlined-primary:disabled{
    color:var(--mud-palette-primary) !important;
}
.mud-button-outlined-secondary:disabled{
    color:var(--secondary-darken) !important;
}
.mud-button-outlined-tertiary:disabled{
    color:var(--mud-palette-tertiary) !important;
}
.mud-button-outlined-info:disabled{
    color:var(--mud-palette-info) !important;
}
.mud-button-outlined-warning:disabled {
    color: var(--mud-palette-warning) !important;
}
.mud-button-outlined-success:disabled {
    color: var(--mud-palette-success) !important;
}
.mud-button-outlined-error:disabled {
    color: var(--mud-palette-error) !important;
}
.mud-button-outlined-dark:disabled {
    color: var(--mud-palette-dark) !important;
}


/*Filled buttons*/
.mud-button-filled-secondary {
    background-color: var(--secondary-lighten) !important;
    color: var(--mud-palette-primary) !important;
}
.mud-button-filled:disabled{
    opacity: var(--disabled-opacity) !important;
    color: white !important;
}
.mud-button-filled-primary:disabled {
    background-color: var(--primary-hover) !important;
    color: white !important;
}
.mud-button-filled-secondary:disabled {
    background-color: var(--secondary-lighten) !important;
    color: var(--mud-palette-primary) !important;
    opacity: var(--disabled-opacity) !important;

}
.mud-button-filled-tertiary:disabled{
    background-color:var(--mud-palette-tertiary) !important;
}
.mud-button-filled-info:disabled{
    background-color:var(--mud-palette-info) !important;
}
.mud-button-filled-warning:disabled {
    background-color: var(--mud-palette-warning) !important;
}
.mud-button-filled-success:disabled {
    background-color: var(--mud-palette-success) !important;
}
.mud-button-filled-error:disabled {
    background-color: var(--mud-palette-error) !important;
}
.mud-button-filled-dark:disabled {
    background-color: var(--mud-palette-dark) !important;
}
.mud-button-filled-secondary:hover {
    background-color: var(--secondary-hover) !important;
    color: var(--mud-palette-secondary) !important;
}

/*Text buttons*/
.mud-button-text-secondary {
    color: var(--secondary-darken) !important;
}
.mud-button-text:disabled{
    opacity: var(--disabled-opacity) !important;
}
.mud-button-text-primary:disabled {
    color: var(--mud-palette-primary) !important;
}
.mud-button-text-secondary:disabled {
    color: var(--secondary-darken) !important;
}
.mud-button-text-tertiary:disabled{
    color:var(--mud-palette-tertiary) !important;
}
.mud-button-text-info:disabled{
    color:var(--mud-palette-info) !important;
}
.mud-button-text-warning:disabled {
    color: var(--mud-palette-warning) !important;
}
.mud-button-text-success:disabled {
    color: var(--mud-palette-success) !important;
}
.mud-button-text-error:disabled {
    color: var(--mud-palette-error) !important;
}
.mud-button-text-dark:disabled {
    color: var(--mud-palette-dark) !important;
}

/*Icon buttons*/
.mud-icon-button:disabled{
    opacity: var(--disabled-opacity) !important;
}
.mud-icon-button.mud-primary-text:disabled .mud-icon-root, .mud-disabled .mud-icon-button.mud-primary-text .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}
.mud-icon-button.mud-secondary-text:disabled .mud-icon-root, .mud-disabled .mud-icon-button.mud-secondary-text .mud-icon-root {
    color: var(--secondary-darken) !important;
}
.mud-icon-button.mud-tertiary-text:disabled .mud-icon-roo, .mud-disabled .mud-icon-button.mud-tertiary-text .mud-icon-roott{
    color:var(--mud-palette-tertiary) !important;
}
.mud-icon-button.mud-info-text:disabled .mud-icon-roo, .mud-disabled .mud-icon-button.mud-info-text .mud-icon-roott{
    color:var(--mud-palette-info) !important;
}
.mud-icon-button.mud-warning-text:disabled .mud-icon-root, .mud-disabled .mud-icon-button.mud-warning-text .mud-icon-root {
    color: var(--mud-palette-warning) !important;
}
.mud-icon-button.mud-success-text:disabled .mud-icon-root, .mud-disabled .mud-icon-button.mud-success-text .mud-icon-root {
    color: var(--mud-palette-success) !important;
}
.mud-icon-button.mud-error-text:disabled .mud-icon-root, .mud-disabled .mud-icon-button.mud-error-text .mud-icon-root {
    color: var(--mud-palette-error) !important;
}
.mud-icon-button.mud-dark-text:disabled .mud-icon-root, .mud-disabled .mud-icon-button.mud-dark-text .mud-icon-root {
    color: var(--mud-palette-dark) !important;
}


.mud-icon-root.mud-secondary-text{
    fill: var(--secondary-darken) !important;
}

.mud-avatar-filled.mud-avatar-filled-tertiary{
    background-color: var(--grey) !important;
}

.mud-avatar-filled.mud-avatar-filled-secondary{
    background-color: var(--secondary-lighten);
}

footer.mud-appbar {
    border-top: 1px solid var(--grey-border) !important;
}
header.mud-appbar {
    border-bottom: 1px solid var(--grey-border) !important;
}



.mud-popover-open:has(.mud-list-padding:has(.account-menu)) {
    margin-right: 32px;
    border-radius: 8px;
}

.mud-list-padding:has(.account-menu),
.account-menu .mud-list-item {
    padding: 16px 16px;
}

.mud-input-error {
    white-space: pre;
}

.body3 {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.subtitle3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0em;
    line-height: 18px;
}

.fill-red {
    fill: #FF4500 !important;
}

.bg-black-100 {
    background-color: var(--black-100);
}

.bg-black-90 {
    background-color:var(--black-90);
}

.bg-black-80 {
    background-color:var(--black-80);
}

.bg-black-70 {
    background-color:var(--black-70);
}

.bg-black-60 {
    background-color:var(--black-60);
}

.bg-black-50 {
    background-color:var(--black-50);
}

.bg-black-30 {
    background-color:var(--black-30);
}

.bg-black-20 {
    background-color:var(--black-20);
}

.bg-black-10 {
    background-color: var(--black-10);
}

.text-black-100 {
    color: var(--black-100);
}

.text-black-90 {
    color:var(--black-90);
}

.text-black-80 {
    color:var(--black-80);
}

.text-black-70 {
    color:var(--black-70);
}

.text-black-60 {
    color:var(--black-60);
}

.text-black-50 {
    color:var(--black-50);
}

.text-black-30 {
    color:var(--black-30);
}

.text-black-20 {
    color:var(--black-20);
}

.text-black-10 {
    color: var(--black-10);
}

.mud-expand-panel.mud-disabled>.mud-expand-panel-header>svg.mud-expand-panel-icon {
    opacity: var(--disabled-opacity) !important;
}

.mud-divider {
    border: 1px solid var(--black-50)
}

.mud-chip.mud-chip-filled.mud-chip-color-success {
    background-color: #e3fcec;
    color: #477b58 ;
}
.mud-chip.mud-chip-filled.mud-chip-color-success:hover {
    background-color: #b5f7cd;
}
.mud-chip.mud-chip-filled.mud-chip-color-warning {
    background-color: #fcedcf;
    color: #856e47 ;
}
.mud-chip.mud-chip-filled.mud-chip-color-warning:hover {
    background-color: #f9db9f;
}
.mud-chip.mud-chip-filled.mud-chip-color-error {
    background-color: #fadbdb;
    color: #993333 ;
}
.mud-chip.mud-chip-filled.mud-chip-color-error:hover {
    background-color: #f4aeae;
}

.popup-with-icon-menu-item .mud-list-item-icon {
    min-width: 36px;
}
.popup-with-icon-menu-item .mud-list-item-text {
    padding-right: 50px;
}

.mud-icon-root.icon-24{
    width: 24px !important;
    height: 24px !important;
}

/* CSS isolation won't work, if we inherit another component, so this is a workaround */
.contact-avatar.mud-avatar.mud-avatar-medium {
    width: 32px;
    height: 32px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.014px;
}

.mud-snackbar.mud-alert-filled-success{
    background-color: var(--mud-palette-success);
}

.mud-expand-panel.mud-panel-expanded {
    margin-top: 0;
    margin-bottom: 0;
}

.mud-popover.mud-popover-open {
    z-index: calc(var(--mud-zindex-appbar) + 2) !important;
}

.mud-switch-base:not(.mud-checked) .mud-switch-button {
    color: #d9d9d9;
}

.mud-switch-base:not(.mud-checked) .mud-switch-track {
    background-color: var(--black-60);
}

.mud-popover.mud-popover-open {
    box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.2) !important;
}

.mud-input-helper-text {
    white-space: pre-wrap;
}

.break-spaces {
    white-space: break-spaces;
}