/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/
@import url(Components/_Components.css);
@import url(Utilities/_Utilities.css);


/************************/
/* GLOBAL ELEMENT RULES */
/************************/

/*don't highlight the H1 element*/
h1:focus {
    outline: none;
}


hr {
    border: none;
    background-color: rgba(0, 0, 0, .08);
    height: 1px;
    margin: 1rem 0;
}

/* show red asterisk after label text */
label[data-required-field="true"]::after, label[data-required-field="True"]::after {
    font-weight: bold;
    color: #d00;
    content: " * ";
}


/**********************/
/* GLOBAL CLASS RULES */
/**********************/

.content {
    padding-top: 1.1rem;
}

/*When an input has been touched and is valid, show as green, except checkboxes, and buttons, and icons*/
.valid.modified:not([type=checkbox]) :not(.rz-button) :not(.rz-select-button) :not(.rzi) {
    outline: 1px solid #26b050 !important;
}

.invalid {
    outline: 1px solid red !important;
}

.validation-message {
    color: red;
}


/********************************/
/* GLOBAL BLAZOR OVERRIDE RULES */
/********************************/

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}


/********************************/
/* GLOBAL RADZEN OVERRIDE RULES */
/********************************/
/* applying this globally, but if we don't want to apply it globally than what we can do 
    is make a custom class like .voyager-scroll-table and apply it manually on all the datagrids 
    that we want it on. but let's try globally first and see if anything brakes or shouldn't have it.
    340px because 160px + 180px for Heading, Breadcrumbs and Row of Buttons To Manage data */
@media (min-width: 768px) and (min-height: 600px) {
    .rz-data-grid {
        max-height: calc(100vh - 340px)
    }
}

/* always force form field inputs to stretch to full 
    width of their parent container */
.rz-form-field {
    width: 100% !important;
}

/* When tabs go off the screen, wrap them 
    instead of letting them go off the screen. */
ul[role=tablist] {
    flex-wrap: wrap;
}

/* use hand icon for radzen split button 
    drop down items just like buttons themselves */
.rz-menuitem:hover {
    cursor: pointer;
}

/* remove the top margin around the form field so that it is 
    correctly aligned vertically */
.rz-form-field-content {
    margin-top: 0 !important;
}

/* make DISABLED inputs more distinct */
input:disabled, textarea:disabled {
    box-shadow: none !important;
    background-color: #f4f5f9 !important;
    border: 1px solid #e9eaed !important;
    opacity: 0.5 !important;
}

/* make DISABLED input label text gray instead of black */
.rz-state-disabled .rz-form-field-content > label.rz-form-field-label {
    color: #8d8e80 !important;
}

.rz-text-body2-disabled {
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-text-body2-font-size);
    line-height: var(--rz-text-body2-line-height);
    font-weight: var(--rz-text-body2-font-weight);
    letter-spacing: var(--rz-text-body2-letter-spacing);
    color: #adadad !important;
}

/* make Dropdown appear disabled like other elements */
.rz-dropdown.rz-state-disabled {
    background-color: #f4f5f9 !important;
    border: 1px solid #e9eaed !important;
    opacity: 0.5 !important;
}


/**************************/
/* VOYAGER SPECIFIC RULES */
/**************************/

/* make header text break to new line 
    instead of overflowing container */
.voyager-header {
    white-space: normal;
}

.voyager-member-head-shot {
    max-width: 120px;
    max-height: 120px;
    width: 100%;
}

.voyager-sidebar-footer {
    background-color: transparent !important;
    color: inherit !important;
}

/* make buttons float on large screens */
@media (min-width: 768px) and (min-height: 600px) {
    .voyager-floating-button {
        font-weight: 900 !important;
        padding-top: 1em !important;
        padding-bottom: 1em !important;
        margin: 0 0 0 auto;
        z-index: 1000;
        position: sticky;
        bottom: 0;
        right: 2em;
        width: 10em;
    }
}

/*************************/
/* HEADER & NAVBAR RULES */
/*************************/

.voyager-navbar-sidebar-container {
    width: 50px;
}

.voyager-navbar-brand-container {
    text-align: left;
}

.voyager-navbar-brand {
    cursor: pointer;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .voyager-navbar-brand-container {
        text-align: center;
        width: 100%;
    }
}

.voyager-navbar-image {
    display: inline-block;
    max-width: 100%;
    padding: 1rem;
    width: auto;
}

@media (max-width: 576px) {
    .voyager-navbar-image {
        margin: 1rem 0;
        padding: 0;
        width: 190px;
    }
}

@media (max-width: 400px) {
    .voyager-navbar-image {
        width: 140px;
    }
}

@media (max-width: 320px) {
    .voyager-navbar-image {
        width: 120px;
    }
}

.voyager-navbar-user-menu {
    justify-content: right;
}


/*************************************/
/* LOADING INDICATOR COMPONENT RULES */
/*************************************/

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}


/********

Checker board background
 */
.checkered {
    background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background-repeat: repeat, repeat;
    background-position: 0px 0, 5px 5px;
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-background-origin: padding-box, padding-box;
    background-origin: padding-box, padding-box;
    -webkit-background-clip: border-box, border-box;
    background-clip: border-box, border-box;
    -webkit-background-size: 10px 10px, 10px 10px;
    background-size: 10px 10px, 10px 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
    transform: scaleX(1) scaleY(1) scaleZ(1);
}

/*******************************/
/* SIGNATURE PAD CUSTOMIZATION */
/*******************************/

.voyager-signature-pad {
    border: 0.25rem dashed var(--rz-primary);
    width: 100%;
    height: 150px;
    max-width: 450px;
}

@media (min-width: 768px) {
    .voyager-signature-pad {
        height: 225px;
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    .voyager-signature-pad {
        height: 300px;
        max-width: 100%;
    }
}

/*************/
/* BOOTSTRAP */
/*************/

.position-absolute {
    position: absolute !important;
}

.rounded-pill {
    border-radius: 50rem;
}

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

.voyager-badge {
    cursor: grab;
}

.voyager-h1 {
    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
}

.voyager-h2 {
    font-size: 36px;
    font-weight: 300;
}


/**************
Hide radzen datetime Time filter selectors
these hide specifically based on PAGE, but we COULD change it to be the specific columns on the pages
***************/

body div:has(div[member-app-list]),
body div:has(div[communications-history]),
body div:has(div[receipt-list-table]),
body div:has(div[month-close-table])
{
    &#app ~ .rz-grid-date-filter .rz-timepicker{
        display: none
    }
    
    &#app ~ .rz-datepicker-popup-container .rz-hour-picker  {
        display: none
    }
    &#app ~ .rz-datepicker-popup-container .rz-minute-picker  {
        display: none
    }
    &#app ~ .rz-datepicker-popup-container .rz-separator  {
        display: none
    }

    
    
}