html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.navbar-brand img {
    max-height: 4rem;
}

.body-content {
    margin-top:1rem;
}

.canSelect{
    cursor:pointer;
}

.paging-input-width-form-control{
    max-width:80px;
}

/******** Busy indicator ******************************/
.busy-indicator-wrapper {
    padding: 4rem;
}

.busy-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
}

    .busy-indicator img {
        max-height: 100px;
        animation: rotation 2s infinite linear;
        margin-right: 10px;
    }

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
/***** end busy indicator **********************/

/*Blazored Toast overrides*/
.position-topright {
    top: 5px !important;
}

.blazored-toast-container {
    z-index: 10000 !important;
}
/***********************************/

.valid.modified:not([type=checkbox]):not([type=radio]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.hover:hover {
    background-color: lightgray !important;
}

[data-bs-theme=dark] .hover:hover {
    background-color: dimgray !important;
}

.toolbar-logo {
    display:inline;
}

.toolbar-logo-dark {
    display: none;
}

[data-bs-theme=dark] .toolbar-logo {
    display: none;
}

[data-bs-theme=dark] .toolbar-logo-dark {
    display: inline;
}

/* *********************** Card animation ***********************/
.card:has(.card-body-grid:not(.show)) .card-header {
    border-bottom: 0;
    transition: border-bottom 300ms ease;
}

.card:has(.card-body-grid.show) .card-header {
    transition: border-bottom 300ms ease;
}

.card .card-body-grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 400ms;
}

    .card .card-body-grid.show {
        grid-template-rows: 1fr;
    }

.card .card-body-grid > div {
   overflow:hidden;
}

/************************ lightbox ********************************/
.lightbox {
    /* Default to hidden */
    display: none;
    /* Overlay entire screen */
    position: fixed;
    z-index: 19000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* A bit of padding around image */
    padding: 1em;
    /* Translucent background */
    background: rgba(0, 0, 0, 0.8);
}

    .lightbox span {
        /* Full width and height */
        display: block;
        width: 100%;
        height: 100%;
        /* Size and position background image */
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
/****************************************************************/

.home-page-image
{
    max-height: min(400px, 45vh);
    margin:10px;
}

/************************** Gallery *******************************/
.gallergy-card {
}

.video-iframe {
    height: max(300px, 60%);
    aspect-ratio: 16 / 9;
}

.image-add-edit {
    max-height: 400px;
    max-width: 600px;
}

/* container based css **********************************************************/
@container (min-width: 576px) {
    .ct-text-sm-start {
        text-align: start;
    }

    .ct-text-sm-end {
        text-align: end;
    }

    .ct-text-sm-center {
        text-align: center;
    }

    .ct-d-sm-none {
        display: none !important;
    }

    .ct-d-sm-block {
        display: block !important;
    }
}

@container (min-width: 768px) {
    .ct-text-md-start {
        text-align: start;
    }

    .ct-text-md-end {
        text-align: end;
    }

    .ct-text-md-center {
        text-align: center;
    }

    .ct-d-md-none {
        display: none !important;
    }


    .ct-d-md-block {
        display: block !important;
    }
}

@container (min-width: 992px) {
    .ct-text-lg-start {
        text-align: start;
    }

    .ct-text-lg-end {
        text-align: end;
    }

    .ct-text-lg-center {
        text-align: center;
    }

    .ct-d-lg-none {
        display: none !important;
    }

    .ct-d-lg-block {
        display: block !important;
    }
}

@container (min-width: 1200px) {
    .ct-text-xl-start {
        text-align: start;
    }

    .ct-text-xl-end {
        text-align: end;
    }

    .ct-text-xl-center {
        text-align: center;
    }

    .ct-d-xl-none {
        display: none !important;
    }

    .ct-d-xl-block {
        display: block !important;
    }
}

@container (min-width: 1400px) {
    .ct-text-xxl-start {
        text-align: start;
    }

    .ct-text-xxl-end {
        text-align: end;
    }

    .ct-text-xxl-center {
        text-align: center;
    }

    .ct-d-xxl-none {
        display: none !important;
    }

    .ct-d-xxl-block {
        display: block !important;
    }
}