@font-face {
    font-family: 'Montserrat';
    src: url(/fonts/Montserrat.ttf) format('truetype');
}

html {
    font-size: 14px;
}

.hx-inv-indicator {
    display: initial;
}
.hx-indicator {
    display: none;
}
.htmx-request .hx-inv-indicator {
    display: none;
}
.htmx-request .hx-indicator {
    display: initial;
}

ion-spinner{
    height: 1rem;
}

.header-md{
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.footer-md{
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

@media screen and (max-width: 768px) {
    ion-content::part(scroll)::-webkit-scrollbar {
        display: none;
    }

    ion-content::part(scroll) {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

ion-title{
    --color: var(--ion-color-text-primary);
}

ion-button{
    --border-radius: var(--ion-border-radius);
}

ion-item{
    --background-hover: var(--ion-color-background-hover);
}

ion-item.input{
    --padding-end: 0px;
    --inner-padding-end: 0px;
    --background: transparent;

    &::part(native){
        flex-direction: column;
        align-items: flex-start;
    }

    ion-label{
        width: 100%;
        font-weight: 500;
        font-size: 0.9rem !important;
        --color: var(--ion-color-text-label) !important;
        margin-bottom: 8px;
    }

    &:not(:first-child){
        margin-top: 8px;
    }

    &:first-child{
        margin-bottom: 0;
    }

    ion-input{
        --placeholder-color: var(--ion-color-text-placeholder);
        --border-radius: var(--ion-border-radius);
        --padding-start: 16px;
        --padding-end: 12px;
        --color: var(--ion-color-text-primary);

        .input-wrapper{
            border-radius: var(--ion-border-radius);
            border: 1px solid var(--ion-color-border);
        }

        .input-bottom{
            border: none;
        }
    }

    ion-select{
        --placeholder-color: var(--ion-color-text-placeholder);
        --padding-start: 16px;
        --padding-end: 12px;
        --color: var(--ion-color-text-primary);
        border-radius: var(--ion-border-radius);
        border: 1px solid var(--ion-color-border);
    }

    .ion-invalid{
        .input-wrapper{
            border: 1px solid var(--ion-color-danger);
        }
    }
    
    .ion-valid{
        .input-wrapper{
            border: 1px solid var(--ion-color-success);
        }
    }
}

ion-row.input-row:not(:first-child){
    margin-top: 8px;
}

ion-searchbar{
    --placeholder-color: var(--ion-color-text-placeholder);
    /* --padding-start: 16px; */
    /* --padding-end: 12px; */
    --color: var(--ion-color-text-primary);
    
    .searchbar-input-container{
        --background: var(--ion-color-background-input);
        border-radius: var(--ion-border-radius);
        border: 1px solid var(--ion-color-border);
    }
}

ion-back-button {
    display: block;
 }

ion-back-button::part(text){
        display: none;
}

ion-modal.modal-sheet{
    &::part(content){
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
}

ion-modal:not(.modal-sheet){
    --border-radius: 10px;
}

.required-text{
    color: var(--ion-color-text-primary);
    font-size: 0.87rem;
    font-weight: 500;
}

.required-star{
    color: var(--ion-color-danger);
}

ion-grid[fixed]{
    --ion-grid-width-xs: 100%;
    --ion-grid-width-md: 384px;
    --ion-grid-width-lg: 480px;
    --ion-grid-width-xl: 570px;
}

#loading-spinner{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;

    ion-spinner{
        width: 72px;
        height: 72px;
        --color: var(--ion-color-secondary)
    }
}

.jsonEdit {
    --jse-theme-color: var(--ion-color-warning);
    --jse-theme-color-highlight: var(--ion-color-warning-contrast);
    word-break: initial;
    white-space: initial;
}

.ion-color-text-primary {
	--ion-color-base: var(--ion-color-text-primary);
}

.ion-color-text-secondary {
	--ion-color-base: var(--ion-color-text-secondary);
}

.ion-color-text-label {
	--ion-color-base: var(--ion-color-text-label);
}

.ion-color-text-placeholder {
	--ion-color-base: var(--ion-color-text-placeholder);
}

.ion-color-background {
	--ion-color-base: var(--ion-color-background);
}