body {
    font-family: Poppins, Helvetica, Arial, Sans-Serif, serif !important;
}

/* width */
.w-25 {
    width: 25% !important;
}

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

.w-75 {
    width: 75% !important;
}

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

.w-25vw {
    width: 25vw !important;
}

.w-50vw {
    width: 50vw !important;
}

.w-75vw {
    width: 75vw !important;
}

.w-100vw {
    width: 100vw !important;
}

.w-min-25 {
    min-width: 25% !important;
}

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

.w-min-75 {
    min-width: 75% !important;
}

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

.w-min-25vw {
    min-width: 25vw !important;
}

.w-min-50vw {
    min-width: 50vw !important;
}

.w-min-75vw {
    min-width: 75vw !important;
}

.w-min-100vw {
    min-width: 100vw !important;
}

.w-max-25 {
    max-width: 25% !important;
}

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

.w-max-75 {
    max-width: 75% !important;
}

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

.w-max-25vw {
    max-width: 25vw !important;
}

.w-max-50vw {
    max-width: 50vw !important;
}

.w-max-75vw {
    max-width: 75vw !important;
}

.w-max-100vw {
    max-width: 100vw !important;
}

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

.w-min-auto {
    min-width: auto !important;
}

.w-max-auto {
    max-width: auto !important;
}

/* height */

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

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

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

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

.h-25vh {
    height: 25vh !important;
}

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

.h-75vh {
    height: 75vh !important;
}

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

.h-min-25 {
    min-height: 25% !important;
}

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

.h-min-75 {
    min-height: 75% !important;
}

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

.h-min-25vh {
    min-height: 25vh !important;
}

.h-min-50vh {
    min-height: 50vh !important;
}

.h-min-75vh {
    min-height: 75vh !important;
}

.h-min-100vh {
    min-height: 100vh !important;
}

.h-max-25 {
    max-height: 25% !important;
}

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

.h-max-75 {
    max-height: 75% !important;
}

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

.h-max-25vh {
    max-height: 25vh !important;
}

.h-max-50vh {
    max-height: 50vh !important;
}

.h-max-75vh {
    max-height: 75vh !important;
}

.h-max-100vh {
    max-height: 100vh !important;
}

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

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

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

.image-holder {
    width: 100%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* samo visine */
.ih-lg {
    height: 400px;
}

.ih-md {
    height: 250px;
}

.ih-sm {
    height: 150px;
}


/* Hero */
.hero {
    height: 320px;
    display: flex;
    align-items: center;
}

.hero-gradient {
    background: radial-gradient( 1100px 360px at 50% -20%, color-mix(in oklab, var(--mud-palette-primary) 22%, transparent), transparent ), linear-gradient( 135deg, color-mix(in oklab, var(--mud-palette-primary) 10%, transparent), color-mix(in oklab, var(--mud-palette-secondary) 10%, transparent) );
    border: 1px solid var(--mud-palette-lines-default);
}

/* Kartice */
.card-large {
    min-height: 260px;
}

.avatar-xl {
    width: 72px !important;
    height: 72px !important;
}

.placeholder-image-box {
    height: 140px;
    background: #F0F1F3;
    border-radius: 12px;
}

/* Mud Balzor */
body.mud-theme-light {
    --mud-elevation-3: 0px 10px 60px rgb(226 236 249 / 50%) !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-filled {
    transform: translate(5px, -25px) scale(0.85) !important;
    height: 20px;
}

.mud-input-control.mud-focused > .mud-input-control-input-container > .mud-input-label-filled {
    transform: translate(5px, -25px) scale(0.85) !important;
    height: 20px;
}

.mud-input-control.mud-input-control-margin-dense > .mud-input-control-input-container > .mud-input-label-filled {
    transform: translate(5px, -22px) scale(0.85) !important;
    height: 20px;
}

.mud-input-control.mud-input-control-margin-dense.mud-focused > .mud-input-control-input-container > .mud-input-label-filled {
    transform: translate(5px, -22px) scale(0.85) !important;
    height: 20px;
}

.mud-input-control.mud-input-filled-with-label {
    margin-top: 29px;
}

.mud-input-control.mud-input-control-margin-dense{
    margin-top: 26px;
}


.mud-input > input.mud-input-root.mud-input-root-filled,
div.mud-input-slot.mud-input-root.mud-input-root-filled {
    padding-top: 16px;
    padding-bottom: 16px;
}


.mud-input > input.mud-input-root.mud-input-root-filled.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-margin-dense{
    padding-top: 10.5px;
    padding-bottom: 10.5px;
}

.mud-input.mud-input-filled {
    border-radius: 10px;
    border: 1px solid transparent;
}

.mud-input.mud-input-filled:hover {
    border-radius: 10px;
    /*border: 1px solid;*/
}

.mud-input.mud-input-filled.mud-input-underline:before,
.mud-input.mud-input-filled.mud-input-underline:after,
.mud-input.mud-input-filled.mud-input-underline.mud-input-error:after {
    border-bottom: none;
}

.mud-input.mud-input-filled.mud-input-underline:hover:before,
.mud-input.mud-input-filled.mud-input-underline:hover:after {
    border-bottom: none !important;
}

.mud-input-error .mud-input.mud-input-filled {
    border: 1px solid var(--mud-palette-error);
}