/*Fonts*/
@font-face {
    font-family: "Gilroy";
    src: url("/_content/Fabric.UIComponents/fonts/Gilroy/Gilroy-Light.otf");
}

@font-face {
    font-family: "Gilroy";
    src: url("/_content/Fabric.UIComponents/fonts/Gilroy/Gilroy-Regular.otf");
    font-weight: 400;
}

@font-face {
    font-family: "Gilroy";
    src: url("/_content/Fabric.UIComponents/fonts/Gilroy/Gilroy-SemiBold.otf");
    font-weight: 600;
}

@font-face {
    font-family: "Gilroy";
    src: url("/_content/Fabric.UIComponents/fonts/Gilroy/Gilroy-Bold.otf");
    font-weight: 700;
}

@font-face {
    font-family: "Gilroy";
    src: url("/_content/Fabric.UIComponents/fonts/Gilroy/Gilroy-ExtraBold.otf");
    font-weight: 800;
}



@font-face {
    font-family: "Lato";
    src: url("/_content/Fabric.UIComponents/fonts/Lato/Lato-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Lato";
    src: url("/_content/Fabric.UIComponents/fonts/Lato/Lato-Regular.ttf");
    font-weight: 400;
}

/* Button sizes */
.button-size-small {
    font-size: 0.75rem;
    padding: 4px 8px;
    height: 32px;
}

.button-size-medium {
    font-size: 0.875rem;
    padding: 6px 16px;
    height: 36px;
}

.button-size-large {
    font-size: 1rem;
    padding: 8px 24px;
    height: 40px;
}

.button-size-extra-large {
    font-size: 1.25rem;
    padding: 10px 32px;
    height: 44px
}

.button-size-extra-extra-large {
    font-size: 1.35rem;
    padding: 14px 36px;
    height: 48px
}

.button-size-fit-content {
    height: fit-content;
}

.button-size-fit-container {
    width: 100%;
    height: 100%;
}

.button-size-full-height {
    height: 100%;
}

/* Touch friendly */
.touch-friendly.button-size-small {
    height: 38px;
    padding: 6px 10px;
}

.touch-friendly.button-size-medium {
    height: 42px;
    padding: 8px 18px;
}

.touch-friendly.button-size-large {
    height: 48px;
    padding: 10px 26px;
}

.touch-friendly.button-size-extra-large {
    height: 54px;
    padding: 12px 34px;
}

.touch-friendly.button-size-extra-extra-large {
    height: 62px;
    padding: 14px 42px;
}

.touch-friendly.mud-nav-item .mud-nav-link {
    padding-top: 16px;
    padding-bottom: 16px;
}

.touch-friendly.mud-nav-group .mud-nav-link {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* Icon sizes */
.icon-size-small .mud-svg-icon {
    font-size: 0.875rem;
}

.icon-size-medium .mud-svg-icon {
    font-size: 1rem !important;
}

.icon-size-large .mud-svg-icon {
    font-size: 1.5rem !important;
}

.icon-size-extra-large .mud-svg-icon {
    font-size: 1.7rem !important;
}

.icon-size-extra-extra-large .mud-svg-icon {
    font-size: 2rem !important;
}

.mud-button {
    flex-wrap: nowrap;
}

.uppercase-text span {
    text-transform: uppercase;
}

.text-nowrap {
    white-space: nowrap;
}

.text-wrap-properly {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* Margins */
.top-margin-large {
    margin-top: 20vh;
}

/* Heights */
.height-extra-extra-small {
    height: 18vh;
}

.height-extra-small {
    height: 20vh;
}

.height-small {
    height: 25vh;
}

.height-medium {
    height: 30vh;
}

.height-large {
    height: 40vh;
}

.height-extra-large {
    height: 70vh;
}

.height-extra-extra-large {
    height: 90vh;
}

.max-height-xxl {
    max-height: 90vh;
}

.rel-height-max {
    height: 100%;
}

.height-fit-content {
    height: fit-content;
}

.shrinkable {
    min-height: 0;
}

.page-nav {
    min-width: fit-content;
}

.mud-tab {
    text-transform: none;
}

.layout {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* Widths */
.width-tiny {
    width: 12vw;
}

.width-extra-extra-small {
    width: 18vw;
}

.width-extra-small {
    width: 20vw;
}

.width-small {
    width: 25vw;
}

.width-medium {
    width: 50vw;
}

.width-large {
    width: 75vw;
}

.width-extra-large {
    width: 90vw;
}

.width-fit-content {
    width: fit-content;
}

.min-width-tiny {
    min-width: 12vw;
}

.min-width-small {
    min-width: 25vw;
}

.min-width-medium {
    min-width: 50vw;
}

.rel-width-medium {
    width: 50%;
}

.rel-width-large {
    width: 75%;
}

.rel-width-max {
    width: 100%;
}

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

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

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

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

/* Larger labels for mudinputs */

/* Adjust the size of the legend that 'blocks' the top border where the label is placed */
.large-label .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    font-size: 0.9rem;
}

/* Make floating labels larger only when shrunk/floating */
.large-label .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.large-label .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol,
.large-label label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-shrink {
    font-size: 1.2rem;
}

.mud-day-label {
    font-size: small !important;
}

.mud-button-date {
    font-size: medium !important;
}