@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: 'Inter', sans-serif !important;
}

.mud-snackbar {
    font-family: "Inter", sans-serif;
}

.mud-alert-filled-normal
{
    .mud-snackbar-icon {
        color: #116BBF;
    }
    background-color: #C2DAF0;
    color: #141F33;
}

.mud-alert-filled-info
{
    .mud-snackbar-icon {
        color: #116BBF;
    }
    background-color: #C2DAF0;
    color: #141F33;
}

.mud-alert-filled-warning
{
    .mud-snackbar-icon {
        color: #905009;
    }
    background-color: #F6DA9F;
    color: #141F33;
}

.mud-alert-filled-error
{
    .mud-snackbar-icon {
        color: #CD0B21;
    }
    background-color: #F9E6E8;
    color: #141F33;
}

.mud-alert-filled-success
{
    .mud-snackbar-icon {
        color: #005C2E;
    }
    background-color: #E6F2EC;
    color: #141F33;
}

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

:root {
    --noto-serif: "Noto Serif", serif;
    --inter: "Inter", sans-serif;
    --inter-bold-weight: 700;
    --inter-regular-weight: 400;
    --inter-medium-weight: 500;
    --white-color: #fff;
}

body {
    background-color: #FAFAFA;
}

hr {
    height: 1px;
    background-color: #ccc;
}

.bg-white {
    background-color: var(--white-color);
}

.font-bold {
    font-weight: bold !important;
}

.font-bolder {
    font-weight: bolder;
}

.font-normal {
    font-weight: normal;
}

.full-height-grid {
    height: 100vh;
}

.full-height-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.no-margins {
    margin: 0;
}

.content {
    max-width: 60%;
    margin: auto;
}

.sticky-footer {
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background-color: #FFFFFF; 
    border-top: 1px solid #E2E1DE;
    z-index: 1000;
}

@media (max-width: 992px) {
    .content {
        max-width: 100%;
    }
}

.custom-bg {
    background-color: #FAFAFA;
}

.custom-border {
    border-left: 1px solid #ccc;
    box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);
    clip-path: inset(0px -2px 0px 0px);
}

.bordered {
    border: 1px solid #E2E1DE;
    border-radius: 16px;
}

.chip-status {
    border-radius: 200px;
}

.chip-status--open {
    background-color: #E6F2EC;
}

.chip-status--canceled {
    background-color: #F9E6E8;
}

.chip-status--closed {
    background-color: #E2E1DE;
}

.custom-small-font {
    font-size: .75rem;
}

.medium-font {
    font-size: 1rem;
}

.small-font {
    font-size: .75rem;
}

.bottom-border {
    border-bottom: 1px solid #E2E1DE;
}

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

.custom-card {
    border: 1px solid transparent;
    height: 100%;
}

.custom-card:hover {
    border: 1px solid #2446BF;
    background-color: #EEF1FD;
}

.custom-card.selected-card {
    border: 1px solid #2446BF;
    background-color: #EEF1FD;
}

.mud-avatar-outlined {
    border: 2px solid #E2E1DE;
}

.mud-avatar-outlined:before {
    font-size: 16px !important;
    font-weight: 700;
    color: #404856 !important;
}

.mud-avatar-outlined-primary {
    border: 2px solid #2446BF !important;
}

.mud-avatar-outlined-primary:before {
    color: #2446BF !important;
}

.mud-stepper-header {
    flex-direction: row !important;
    gap: 8px !important;
    
    .mud-typography-body1 {
        .mud-typography-body1 {
            b {
                color: #2446BF !important;
            }
        }
    }
}

.mud-caption {
    font-family: var(--inter);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: var(--inter-regular-weight);
    line-height: 1.25rem;
    letter-spacing: 0.15px;
}

.mud-stepper-header.mud-stepper-header-non-linear:hover {
    background-color: transparent;
}

.mud-progress-linear.horizontal {
    display: none !important;
}

/* Reset the counter on the parent container */
div[style*="grid-column-start:1"] {
    counter-reset: step-counter;
}

    /* Basic styles for the circle */
    div[style*="grid-column-start:1"] > div .mud-avatar {
        position: relative;
        counter-increment: step-counter;
    }

        /* Style the number */
        div[style*="grid-column-start:1"] > div .mud-avatar::before {
            content: counter(step-counter);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            font-weight: bold;
            color: var(--mud-palette-primary);
        }

        /* Initially hide the checkmark icon */
        div[style*="grid-column-start:1"] > div .mud-avatar .mud-icon-root {
            display: none;
        }

    /* Style the completed step */
    div[style*="grid-column-start:1"] > div.mud-stepper-completed .mud-avatar {
        background-color: var(--mud-palette-primary); /* Fill with blue */
    }

        /* Style the checkmark icon in completed step*/
        div[style*="grid-column-start:1"] > div.mud-stepper-completed .mud-avatar::before {
            content: ''; /* Remove the number */
        }

        div[style*="grid-column-start:1"] > div.mud-stepper-completed .mud-avatar .mud-icon-root {
            display: block;
            color: white; /* White checkmark */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
        }

.mud-typography-body1 {
    font-family: var(--inter) !important;
    font-weight: var(--inter-regular-weight) !important;
    font-size: 1rem !important;
}

.mud-typography-body2 {
    font-family: var(--inter) !important;
    font-weight: var(--inter-regular-weight) !important;
    font-size: 0.875rem !important;
}

.mud-capitalize {
    text-transform: capitalize !important;
    font-weight: 500;
    font-size: 14px !important;
}

.custom-width {
    width: 60%;
}

.custom-actions {
    width: 100%;
    position: sticky;
    bottom: 0;
    background-color: #fff;
    z-index: 10;
    padding: 10px;
}

.custom-actions > div:first-of-type {
    flex-grow: 1;
}

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

.lower-text {
    text-transform: lowercase;
}

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

.normal-text {
    text-transform: initial;
}


.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: transparent;
}

.mud-nav-link-text {
    color: #000;
}

.mud-nav-link.active:not(.mud-nav-link-disabled)
{
    font-weight: normal !important;
}

.custom-field-helper-text {
    font-size: 0.625rem !important;
    text-transform: capitalize;
}

.mud-list-item-multiselect-extended {
    padding-right: 0 !important;
}


.list {
    list-style: initial;
}

.carousel-and-thumbnails {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.relative-carousel {
    position: relative;
}

.main-image {
    width: 100%;
    max-width: 800px;
    height: 100% !important;
    object-fit: cover;
}

.thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: start; /* Align images to the start of the container */
    max-height: 500px; /* Set a max height for the container */
    overflow-y: auto; /* Apply vertical scrolling if content exceeds the height */
    gap: 10px; /* Optional: Adds space between the images */
}

.thumbnail-image {
    width: 100px; /* Adjust the size of the image */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* Optional: Change cursor on hover */
}
.align-bottom-image {
    vertical-align: bottom;
}

.align-center-image {
    vertical-align: middle;
}

.header-bg {
    background-color: #EEF1FD;
}

.custom-container {
    border: 1px solid #ddd; 
    border-radius: 25px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    background-color: white; 
    overflow: hidden; 
}

.lowercase-s::after {
    content: "(s)";
    text-transform: lowercase;
}

.container-border {
    box-shadow: 0px 2px 4px 0px #E2E1DE;
    border: 2px solid #E2E1DE;
    border-radius: 8px; 
    padding: 40px 32px !important; 
}

.admin-table {
    border: 1px solid #E2E1DE;
}

.cta {
    padding: 10px 24px;
}

/* Default tab style */
.tab-panel {
    padding: 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

/* Selected tab style */
.tab-panel-selected {
    background-color: #EEF1FD; 
    color: #2446BF;
    font-weight: bold;
    border-left: 4px solid #2446BF; 
}

.mud-tab.mud-tab {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #6F7276;
}

.mud-tab.mud-tab-active {
    color: #2446BF;
}

/* Apply styles only when all specified classes are present */
.mud-tab.mud-tab-active.mud-ripple {
    width: 289px;
    min-width: 200px;
    max-width: 300px;
    background-color: #EEF1FD;
}

/* Remove borders and shadows from MudTable and MudTd */
.no-border-shadow .mud-table {
    border: none !important;
    box-shadow: none !important;
}

.no-border-shadow .mud-th,
.no-border-shadow .mud-td {
    border: none !important;
    box-shadow: none !important;
}


/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .custom-width {
        width: 90%; /* Adjust as needed */
    }
}

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .custom-width {
        width: 80%; /* Adjust as needed */
    }
}

/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .custom-width {
        width: 70%; /* Adjust as needed */
    }
}

/* Large devices (large desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .custom-width {
        width: 65%; /* Adjust as needed */
    }
}

/* Extra large devices (extra large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .custom-width {
        width: 60%; /* Adjust as needed */
    }
}

.text-default{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4286;
}

.text-small-100 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.text-small-200 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.text-title-small-200 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}

.btn-default {
    width: 144px;
    height: 40px;
}

.btn-large-200{
    width: 186px;
    height: 40px;
}
.btn-large-300{
    width: 196px;
    height: 40px;
}

.btn-large{
    width: 100%;
    height: 52px;
    border-radius: 200px
} 

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

.custom-arrows-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.custom-arrow-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    pointer-events: auto;
    z-index: 1000;
}

.left-arrow {
    left: 16px;
}

.right-arrow {
    right: 16px;
}

.custom-arrow-button ::deep .mud-icon-button {
    background-color: white !important;
}

.custom-arrow-button:hover {
    background-color: #f5f5f5 !important;
}

.preview-container {
    border: 1px solid #6F7276;
}

.preview-content {
    pointer-events: none;
    opacity: 0.6;
    filter: grayscale(25%);
    padding-bottom: 50px;
}