/*
    Page is centered and has max width 1280px
*/
/* Radzen
    xs - Extra Small ≥ 576px
    sm - Small ≥ 768px
    md - Medium ≥ 1024px    
    lg - Large ≥ 1280px
    xl - Extra Large ≥ 1920px
    xx - Extra Extra Large ≥ 2560px
*/
/*
    Mud Blazor
 Extra small	xs	Small to large phone	< 600px
 Small	sm	Small to medium tablet	600px > < 960px  (rz : 768 - 1024)
 Medium	md	Large tablet to laptop	960px > < 1280px (rz : 1024 - 1280)

 Large	lg	Desktop	1280px > < 1920px
 Extra Large	xl	HD and 4k	1920px > < 2560px
 Extra Extra Large	xxl	4k+ and ultra-wide	>= 2560px*
*/

:root {
    --mud-appbar-height: 100px;
    --rz-menu-top-item-color: #102C56;
    --rz-menu-top-item-selected-color: #000;
    --max529-orange: #F5822A;
    --max529-navy: #102C56;
    --max529-default-text-color: #353738;
    --rz-text-font-family: "Roboto", sans-serif;
    --roboto-font: "Roboto", sans-serif;
    --roboto-condensed-font: "Roboto Condensed", sans-serif;
    /* H3 - 3rem - 48px,   1.875 - 30px H4 Bold wt 700, H5 - 24px wt 400, H6 - 20px wt 500, body1 - 16px/400, body2 - 14px/400
        subtitle1 - 16px/400, , subtitle2 - 14px/400
    */
    --rz-primary: #8DAF50;
    --rz-primary-lighter: rgba(141, 175, 80, 0.12);
    --rz-on-primary-lighter: #8DAF50;
    --rz-secondary: rgba(250,157,55,1);
    --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary);
    --rz-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 1.875rem);
    --rz-text-h4-font-size: clamp(1.75rem, 2.361vw, 1.875rem);
    --rz-checkbox-width: 1.25rem;
    --rz-checkbox-height: 1.25rem;
    --rz-checkbox-checked-background-color: #8DAF50;
    --rz-tabs-tab-color: #222222;
    --rz-tabs-border: 1px solid #707070;
    --rz-tabs-border-radius: 9px;
    --rz-tabs-tab-font-size: 2rem;
    --rz-tabs-tab-font-weight: 400;
    --rz-tabs-tab-text-transform: capitalize;
    --rz-tabs-tab-selected-background-color: #fff;
    --rz-tabs-tab-selected-color: #222222;
    --rz-tabs-tab-selected-top-border-color: #707070;
    --rz-tabs-background-color: #fff;
    --rz-dropdown-item-padding: 0.5rem 1rem;
    --rz-input-font-size: 1.25rem;
    --rz-switch-checked-background-color: var(--rz-primary);
    --rz-switch-checked-circle-background-color: #fff;
    --rz-dialog-zindex: 900;
    --rz-dialog-mask-zindex: 899;
    --rz-menu-top-item-hover-color: var(--rz-primary);
    --rz-link-color: #304E91;
    --rz-link-hover-color: #304E91;
    /*    --rz-switch-background-color: var(--rz-base-400);
    --rz-switch-checked-background-color: var(--rz-primary-lighter);
    --rz-switch-box-shadow: var(--rz-shadow-1);
    --rz-switch-circle-background-color: var(--rz-text-contrast-color);
    --rz-switch-checked-circle-background-color: var(--rz-on-primary-lighter);
    --rz-switch-focus-outline: var(--rz-outline-focus);
    --rz-switch-focus-outline-offset: var(--rz-outline-offset);*/
}

/**
{
    -webkit-tap-highlight-color: transparent;
}*/
/* begin - on iphone tapping button turns it to white*/
button {
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

    button:active {
        background-color: inherit;
    }

    button:focus {
        outline: none;
        box-shadow: none;
    }

.rz-button {
    -webkit-tap-highlight-color: transparent !important;
}

    .rz-button:active {
        /*background-color: var(--rz-primary) !important;*/
    }
/* on iphone tapping button turns it to white
    the same code is in mudblazor.min.css*/
@media(hover: none) {
    .max529-button-black:hover {
        background-color: #555555 !important;
    }

    .max529-button-orange-round:hover {
        background-color: #F5822A !important;
    }

    .max529-button-orange:hover {
        background-color: #F5822A !important;
    }

    .max529-button-red:hover {
        background-color: red !important;
    }

    .max529-button-green:hover {
        background-color: #8EC63F !important;
    }

    .mud-button-filled.mud-button-filled-error:hover {
        background-color: var(--mud-palette-error) !important;
    }

    .mud-button-filled.mud-button-filled-primary:hover {
        background-color: var(--mud-palette-primary) !important;
    }

    .mud-button-filled.mud-button-filled-secondary:hover {
        background-color: var(--mud-palette-secondary) !important;
    }

    .mud-button-filled.mud-button-filled-dark:hover {
        background-color: var(--mud-palette-dark-darken) !important;
    }

    button:hover, .mud-button-root:hover, .mud-primary-hover:hover, .mud-button-root.mud-icon-button:hover {
        /*background-color: inherit !important;*/
        /*transition: none !important*/
    }
}

/* end - on iphone tapping button turns it to white*/


.rz-tabview-panels {
    border-start-end-radius: var(--rz-tabs-border-radius) !important;
}

body, .rz-application {
    font-family: 'Roboto', 'sans-serif';
}


/* hide on extra small screens (less than 576px) */
@media (max-width: 576px) {
    .hide-xs {
        display: none !important;
    }
}


/* hide on small screens (less than 768px) */
@media (max-width: 768px) {
    .hide-sm {
        display: none !important;
    }
}


/*font size 1 rem*/
div.max529-fs-1 label.rz-form-field-label {
    font-size: 1rem !important;
}

.max529-title-green {
    font-family: var(--roboto-condensed-font);
    font-optical-sizing: auto;
    font-weight: 700; /*bold*/
    font-style: normal;
    color: #8DAF50;
}

/*text below page header*/
.max529-title-text {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #333333;
    line-height: 36px;
}

.max529-text-condense-light {
    font-family: "Roboto Condensed", sans-serif !important;
    font-weight: 300 !important
}

.max529-title-orange {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700; /*bold*/
    font-style: normal;
    color: #F5822A;
}

.max529-bodytext {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400; /*regular*/
    color: #353738;
    line-height: 28px;
}

.max529-icontitle {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500; /*medium*/
    font-style: normal;
    color: #102C56;
    font-size: var(--rz-text-body2-font-size) !important;
    display: flex;
    flex: 1;
    align-items: center;
    margin: 0 !important;
    justify-content: center;
}

@media(min-width: 576px) {
    .max529-icontitle {
        line-height: 22px;
        font-size: var(--rz-text-h6-font-size) !important;
        min-width: 126px;
    }
}

@media(min-width: 0px) {
    .max529-addstudent-icon {
        width: 80px;
        height: 80px
    }

    .max529-icon-image {
        width: 60px;
        height: 45px
    }

    .max529-iconcard {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 2px;
        padding-right: 2px;
        cursor: pointer;
        width: 105px;
        height: 95px;
        border-radius: 15px;
        border: 1px solid #707070;
        aspect-ratio: 1
    }
}

@media(min-width: 576px) {
    .max529-icon-image,
    .max529-addstudent-icon {
        max-width: 100px;
        max-height: 100px
    }

    a:has(div.max529-iconcard) {
        width: 100%;
        height: 100%;
    }

    .max529-icon-image {
        width: 100px;
        height: 75px
    }

    .max529-iconcard {
        padding: 1rem;
        cursor: pointer;
        width: 100%;
        height: 100%;
        max-width: 180px;
        max-height: 160px;
        border-radius: 15px;
        border: 1px solid #707070;
        aspect-ratio: 1
    }
}

.max529-iconcard-large {
    padding: 1rem;
    cursor: pointer;
    width: 210px;
    height: 190px;
    border-radius: 15px;
    border: 1px solid #707070;
}

/*size 18px*/
.max529-topnav-link {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: #102C56; /*#102C56*/
    font-size: 18px
}

.max529-nav-name {
    font-family: "Roboto", sans-serif;
    font-weight: 700; /*bold*/
    color: #FFFFFF;
    width: 100%;
    min-width: 100px;
    white-space: break-spaces
}

/* Default is H4 - for small screen change to H5*/
@media (max-width: 576px) {
    .max529-nav-name {
        font-size: var(--rz-text-h5-font-size) !important;
    }
}

@media (max-width: 576px) {
    .max529-small-h4 {
        font-size: var(--rz-text-h4-font-size) !important;
    }
}

@media (min-width: 576px) {
    .max529-nav-name {
        font-family: "Roboto", sans-serif;
        font-weight: 700; /*bold*/
        color: #FFFFFF;
        width: 150px;
        white-space: break-spaces
    }
}

.max529-nav-account-title {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    color: #FFFFFF
}

.max529-profile-image-div {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid white;
    overflow: hidden
}

@media (min-width: 576px) {
    .max529-profile-image-div {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: 3px solid white;
        overflow: hidden
    }
}

/*Manage profile images*/
.max529-profile-image-dialog-div {
    width: 100px;
    height: 100px;
    border-radius: 0%;
    border: 1px solid grey;
    overflow: hidden
}

.max529-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
    object-position: center;
}

.max529-profile-image-landing-page-div-size {
    /* width: 210px !important;
    height: 140px !important;*/
}

.max529-profile-image-landing-page-div:not(.max529-profile-image-landing-page-div-size) {
    width: 100px;
    height: 100px;
}

.max529-profile-image-landing-page-div {
    min-width: 100px;
    min-height: 100px;
    border-radius: 0%;
    /*border: 1px solid grey;*/
    overflow: hidden;
}

.max529-reel-image-landing-page-size {
    /* width: 210px !important;
    height: 140px !important;*/
}

.max529-reel-image-landing-page:not(.max529-reel-image-landing-page-size) {
    height: 100%;
}

.max529-reel-image-landing-page {
    width: 100%;
    border: 1px solid grey;
    padding: 4px;
    object-fit: cover;
    text-align: center;
    object-position: center;
}

img.max529-reel-image-landing-page[src$="avatars-5.png"] {
    object-fit: contain !important;
}

img.max529-reel-image-landing-page.max529-reel-image-landing-page-size[src$="avatars-5.png"] {
    width: 210px !important;
    height: 140px !important;
}

.max529-profile-image-landing-page {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    text-align: center;
    object-position: center;
}
/*Used on add student dialog*/
.max529-dialog-header {
    font-family: "Roboto", sans-serif;
    color: #333333;
    font-weight: 700
}

@media (max-width: 576px) {
    .max529-dialog-header {
        font-size: var(--rz-text-h5-font-size) !important;
    }
}
/*font size 20 px - H6*/
.max529-dialog-header-title {
    font-family: "Roboto", sans-serif;
    color: #333333;
    font-weight: 400
}

.max529-button-orange-round {
    background-color: #F5822A !important;
    color: white !important;
    border-radius: 20px
}

.max529-button-orange {
    background-color: #F5822A !important;
    color: white !important;
    /* border-radius: 1px;*/
    border: 1px solid #707070;
    height: 2.5rem !important /* same as rz-input-height */
}

.max529-button-red {
    background-color: red !important;
    color: white !important;
    /* border-radius: 1px;*/
    border: 1px solid #707070;
    height: 2.5rem !important /* same as rz-input-height */
}

.max529-journey-gallery-button {
    background-color: #8EC63F !important;
    color: white !important;
    border: 1px solid #707070;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2rem;
    width: 100%;
    max-width: 120px !important;
    font-size: 0.75rem;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}
/*@media (max-width: 576px) {
    .max529-journey-gallery-button {
    }
}*/
@media (min-width: 400px) {
    .max529-journey-gallery-button {
        height: 2rem !important;
        width: 100% !important;
        max-width: 150px !important;
        font-size: 1rem;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
}

@media (min-width: 576px) {
    .max529-journey-gallery-button {
        height: 4.5rem !important;
        width: 320px !important;
        max-width: 320px !important;
        font-size: 1.5rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

.max529-journey-header-image {
    width: 120px !important;
    height: 90px !important;
    border-radius: 4px
}

.max529-journey-header-blank-image {
    width: 120px !important;
    height: auto !important;
    border-radius: 0px;
    border: none
}

@media (min-width: 576px) {
    .max529-journey-header-image {
        width: 240px !important;
        height: 120px !important;
        border-radius: 0px
    }

    .max529-journey-header-blank-image {
        width: 240px !important;
        height: auto !important;
        border-radius: 0px;
        border: none
    }
}

.max529-button-green {
    background-color: #8EC63F !important;
    color: white !important;
    /* border-radius: 1px;*/
    border: 1px solid #707070;
    height: 2.5rem !important /* same as rz-input-height */
}

.max52-button-lg {
    height: 4.5rem !important;
    width: 250px !important;
    font-family: Roboto, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.max529-button-black {
    background-color: #555555 !important;
    color: white !important;
    /*border-radius: 1px;*/
    border: 1px solid #707070;
    height: 2.5rem !important /* same as rz-input-height */
}

@media (max-width: 400px){
    .max529-scholarship-button {
        height: auto !important;
    }

    .max529-scholarship-button span.rz-button-text {
        font-size: 1rem !important;
    }
}

.max529-button-white {
    background-color: #fff !important;
    color: var(--max529-default-text-color) !important;
    /*border-radius: 1px;*/
    border: 1px solid #707070;
    height: 2.5rem !important /* same as rz-input-height */
}

.max529-scholarship-button span.rz-button-text {
    font-size: 1.5rem;
    text-transform: none;
}

.max529-button-filter-alpha {
    background-color: white !important;
    color: #102C56 !important;
    font-family: "Roboto", sans-serif;
    font-weight: 500; /*medium*/
    padding: 6px !important;
    font-size: 20px;
    line-height: 40px
}

.max529-button-orange-small {
    background-color: #F5822A !important;
    color: white !important;
    border-radius: 20px;
    padding: 2px;
    font-size: 12px;
    text-transform: capitalize;
}

.max529-dialog {
    top: 50% !important;
    /*left: 50% !important;*/
    transform: translate(-50%, -50%) !important;
    border-radius: 10px
}

.max529-filled-icon {
    font-variation-settings: 'FILL' 1;
}
/*font size 40 px - H4*/
.max529-card-title {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: #102C56
}

.max529-rz-tab {
    font-family: "Roboto Condensed", sans-serif !important;
}

li.max529-rz-tab:not(:first-child) {
    margin-left: 20px !important;
}

.max529-rz-tab.rz-tabview-selected {
    border-top-width: 1px !important;
    border-bottom: none !important;
}

.max529-rz-formfield {
    width: 100%;
    /* these are causing content from one column to push the other column down */
    /*  height: 100%;*/
    justify-content: flex-end;
}

    .max529-rz-formfield label.rz-form-field-label {
        font-family: "Roboto", sans-serif;
        font-size: 1.25rem !important;
        font-weight: 400 !important;
        color: #333333 !important;
        /*to show label at top of the input field*/
        transform: translate(0, -100%) !important;
        inset-block-start: 0px !important;
        inset-inline-start: 0px !important;
        background-color: transparent !important;
        pointer-events: all !important;
        height: 1.5rem
    }

.max529-rz-label {
    font-family: "Roboto", sans-serif;
    color: #333333;
    text-align: left;
    font-weight: 400;
    font-size: 1.25rem !important;
}

.max529-rz-input-field {
    font-size: 1.25rem !important;
    font-weight: 500;
}

.max529-rz-textbox {
    font-family: "Roboto", sans-serif;
    color: #333333;
    text-align: left;
    font-weight: 400;
}

.max529-rz-textboxarea {
    font-size: 1.25rem !important;
    font-family: "Roboto", sans-serif;
    color: #333333;
    text-align: left;
    font-weight: 500;
    resize: none
}

.max529-rz-formfield.rz-state-focused .rz-form-field-content {
    border-color: #8DAF50 !important;
    box-shadow: inset 0 0 0 1px #8DAF50 !important;
}
/* .max529-rz-input-field:not(:disabled):not(.rz-state-disabled):focus {
        border-color: #8DAF50 !important;
        box-shadow: inset 0 0 0 1px #8DAF50 !important;
    }*/
.max529-rz-card-main {
    border-radius: 15px;
    padding: 18px 18px 40px 18px;
}

@media (min-width: 576px) {
    .max529-rz-card-main {
        border-radius: 15px;
        padding: 36px 36px 80px 36px;
    }
}

.max529-search-textbox {
    min-width: 120px;
    width: 300px;
    max-width: 300px;
}

@media (min-width: 576px) {
    .max529-search-textbox {
        min-width: 150px;
        width: 300px;
        max-width: 300px;
    }
}

.max529-rz-card-grey {
    background-color: #F8F8F8 !important;
    border: 1px solid #707070 !important;
    padding: 24px 24px 24px 24px;
}
/*xs*/
div.max529-green-arrow {
    border: 3px solid orange !important;
    /*Slightly increase size - original is 56px*/
    width: 60px;
    height: 60px;
}
/*larger than xs*/
@media (min-width: 576px) {
    /*Green arrow - means it is selected */
    div.max529-green-arrow {
        border: 3px solid orange !important;
        /*Slightly increase size - original is 90px*/
        width: 100px;
        height: 100px;
    }

        div.max529-green-arrow::before {
            /*content: "";
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-top: 40px solid #555;
            position: fixed;
            border-top-color: #FFFFFF;
            transform: translateY(170px) translateX(5px);*/ /* width (85 px - 15px - 15 px)/2*/
            /*background-image: none;
            opacity: 1;
            top: unset;
            left: unset;*/
        }

        div.max529-green-arrow::after {
            /*content: "";
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 30px solid #555;
            position: fixed;
            border-top-color: #8DAF51;
            transform: translateY(170px) translateX(15px);*/ /* width (85 px - 15px - 15 px)/2*/
            /*background-image: none;
            opacity: 1;
            top: unset;
            left: unset;*/
        }
}

.max529-rz-card {
    border-radius: 15px;
    padding: 16px 20px 16px 20px
}

@media (min-width: 576px) {
    .max529-rz-card {
        border-radius: 15px;
        padding: 36px 60px 36px 60px
    }
}

.max529-rz-dg-table {
    border: none !important;
    max-height: 305px;
}

td.max529-rz-dg-cell, td.max529-rz-dg-cell-bold {
    border-bottom: 1px solid #707070 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

th.max529-rz-dg-header {
    border-bottom: 1px solid #707070 !important;
    /* padding-top: 8px !important;
    padding-bottom: 8px !important;*/
}

.max529-rz-dg-header, .max529-rz-dg-header span {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 1.25rem; /*1 rem = 16 pm mostly */
}

.max529-rz-dg-cell, .max529-rz-dg-cell span {
    font-family: "Roboto", sans-serif; /*used instead of Circular Std Book which is not free as Google Fonts*/
    font-weight: 400;
    font-size: 1.25rem !important;
}

.max529-rz-dg-cell-bold, .max529-rz-dg-cell-bold span {
    font-family: "Roboto", sans-serif; /*used instead of Circular Std Book which is not free as Google Fonts*/
    font-weight: 500;
    font-size: 1.25rem !important;
}

.max529-rz-dg-cell i, .max529-rz-dg-cell span {
    vertical-align: middle;
}

.vertical-bar {
    display: inline-block;
    width: 1px;
    background-color: #D5D0D0;
    height: 30px;
}

@media (max-width: 768px) {
    div:has(div.toolbar-separator), div:has(div.toolbar-end) {
        padding: 0rem !important;
    }

    .toolbar-separator, .toolbar-end {
        display: inline-block;
        width: 100%;
        height: 2px;
        background-color: #ccc;
        margin: 0px;
        vertical-align: middle;
        padding: 0rem !important;
    }

    .max529-topnav-link {
        font-size: 1.5rem !important;
        border-left: 2px solid #ccc;
    }

    /* .toolbar-end {
        display: none !important;
        width: 0px
    }*/
}
/*768 to 1024*/
@media (min-width: 769px) {
    .toolbar-separator {
        display: inline-block;
        width: 1px;
        height: 24px;
        background-color: #ccc;
        margin: 0px;
        vertical-align: middle;
    }

    .max529-mobile {
        display: none !important;
        width: 0px;
    }
}

@media (min-width: 1024px) {
    .toolbar-separator {
        display: inline-block;
        width: 1px;
        height: 24px;
        background-color: #ccc;
        margin: 0 12px;
        vertical-align: middle;
    }

    .toolbar-end {
        width: 4px
    }

    .max529-mobile {
        display: none !important;
        width: 0px;
    }
}

.student-nav-container {
    overflow-x: auto;
    white-space: nowrap;
    /*background: #84c441;*/ /* Radzen 'success' background */
    /*padding-bottom: 1rem;*/
}

.student-nav-list {
    display: flex;
    gap: 2rem;
    align-items: center;
    /*padding: 1rem;*/
    /*min-width: max-content;*/
}

.student-nav-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.dot-leader {
    flex: 1;
    border-bottom: 1px dotted #999;
    margin: 0 8px;
    height: 12px; /* aligns nicely with text */
}

@media (min-width: 576px){
    .dot-leader-min{
        min-width: 100px;
    }
}

div.square-orange {
    min-width: 15px;
    min-height: 15px;
    width: 15px;
    height: 15px;
    background-color: #FA9D37;
}

.max529-landing-header {
    font-family: var(--roboto-condensed-font) !important;
    font-size: 3rem;
    font-weight: 700;
    color: #8DAF50;
    white-space: pre-wrap;
}

.max529-rz-switch {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    height: 2rem !important;
}

    .max529-rz-switch .rz-switch-circle:before {
        width: 1.5rem !important;
        height: 1.5rem !important;
        inset-inline-start: .375rem !important;
        margin-block-start: -0.75rem !important;
        border-radius: calc(5*var(--rz-border-radius) - 3px) !important;
    }

.rz-datatable-emptymessage span {
    font-size: 1.25rem;
}
/* Override Radzen dropdown popup width */
.rz-dropdown-panel {
    min-width: unset !important; /* remove default restriction */
    /*width: auto !important;*/ /* auto-size to fit content */ /*commeneted as it width of dropdown is not same as control size*/
    /* max-width: 200px;*/ /* optional safety limit */ /*commeneted as it width of dropdown is not same as control size*/
}

@media (max-width: 576px) {
    .rz-carousel-prev {
        inset-inline-start: 0.25rem !important;
        min-width: 2rem !important;
    }

    .rz-carousel-next {
        inset-inline-end: 0.25rem !important;
        min-width: 2rem !important;
    }
}

.max529-displayonly-html a {
    pointer-events: none;
    cursor: default;
    color: inherit; /* optional: make it look like normal text */
    text-decoration: none; /* optional: remove underline */
}

.max529-displayonly-htmlcontent {
    max-height: 70vh; /* 70% of viewport height */
    overflow-y: auto; /* scroll vertically if content is taller */
    overflow-x: hidden; /* prevent horizontal scroll */
    padding: 1rem; /* optional: add spacing */
    box-sizing: border-box;
}

.max529-link-pointer {
    cursor: pointer
}

.max529-responsive-stack {
    flex-direction: column !important;
}

@media(min-width: 576px) {
    .max529-responsive-stack {
        flex-direction: row !important;
    }
}

.max529-reports-tab-left {
    height: 100%;
    border-bottom: solid 1px #707070;    
    
}

.max529-reports-tab-left-last {
    height: 100%;    
}

@media(min-width: 576px) {
    .max529-reports-tab-left, .max529-reports-tab-left-last {
        border-right: solid 1px #707070;
    }
}

.max529-reports-tab-right {
    height: 100%;
/*    border-bottom: solid 1px #707070;*/
}

@media (min-width: 576px) {
    .max529-add-student-featurelist {
        border-right: solid 1px grey
    }
}

.max529-networktab-image {
    width: 100%;
}

@media (min-width: 576px) {
    .max529-networktab-image {
        width: 205px;
        height: 170px
    }
}

@media (min-width: 768px) {
    .max529-networktab-image {
        width: 280px;
        height: 235px
    }
}

@media (min-width: 1024px) {
    .max529-networktab-image {
        width: 380px;
        height: 320px
    }
}

@media (max-width: 768px) {
    .rz-datatable-reflow .rz-data-row {
        border-bottom: 2px solid var(--mud-palette-grey-default)
    }
    /* .rz-datatable-reflow {
        border: 1px solid var(--mud-palette-grey-default) !important;
    }*/
}

.max529-file-input-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

@media (max-width: 576px) {
    .max529-journey-header-text {
        font-size: 1.5rem;
    }
}

.max529-journey-header-text {
    font-weight: 500;
}

.max529-imagecard-name {
    color: black;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.max529-dashboard-container {
    display: grid;
    row-gap: 1rem;
    column-gap: 0.5rem;
    justify-items: center; /* horizontal */
}
/* Desktop / large screens */
/*@media (min-width: 1280px) {
    .max529-dashboard-container {
        grid-template-columns: repeat(4, 1fr);
    }
}*/
/* Tablets / small desktops */
/*@media (min-width: 1024px) and (max-width: 1279px) {
    .max529-dashboard-container {
        grid-template-columns: repeat(3, 1fr);
    }
}*/
/* Tablets / large phones */
@media (min-width: 577px) {
    .max529-dashboard-container {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* Mobile */
@media (max-width: 576px) {
    .max529-dashboard-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.max529-link-resend.mud-link-disabled {
    cursor: not-allowed !important;
    color: var(--mud-palette-info) !important
}

.max529-button-fit {
    min-width: fit-content;
}


/*@media (max-width: 400px){
    .rz-row {
        gap: 0.5rem !important;
    }
}*/

@media (max-width: 500px){
    .max529-flex-column-lt-500 {
        flex-direction: column;
        row-gap: 0.5rem;
    }
}

.max529-rz-tab span.rz-tabview-title {
    font-size: 1.75rem;
    letter-spacing: 0.25px;
    font-weight: 500;
}

@media (max-width: 576px){
    .max529-rz-tab span.rz-tabview-title {
        font-size: 1rem;
    }

    li.max529-rz-tab a {
        padding-block: 0.25rem !important;
        padding-inline: 0.5rem !important;
    }

    li.max529-rz-tab:not(:first-child) {
        margin-left: 10px !important;
    }

    .max529-gap-xs-10{
        gap: 10px !important;
    }
}