@font-face {
    font-family: Eau;
    src: url("/eau_sans_book.otf") format("opentype");
    ascent-override: 110%;
}

@font-face {
    font-family: Eau;
    font-weight: bold;
    src: url("/eau_sans_bold.otf") format("opentype");
    ascent-override: 110%;
}

@font-face {
    font-family: Eau;
    font-style: italic;
    src: url("/eau_sans_book_obl.otf") format("opentype");
    ascent-override: 110%;
}

@font-face {
    font-family: Eau;
    font-style: italic;
    font-weight: bold;
    src: url("/eau_sans_bold_obl.otf") format("opentype");
    ascent-override: 110%;
}

:root {
    --ion-color-primary: #FF9483;
    --ion-color-primary-rgb: 255,148,131;
    --ion-color-primary-contrast: #000000;
    --ion-color-primary-contrast-rgb: 0,0,0;
    --ion-color-primary-shade: #e08273;
    --ion-color-primary-tint: #ff9f8f;
}
:root {
    --ion-color-secondary: #6093FD;
    --ion-color-secondary-rgb: 96,147,253;
    --ion-color-secondary-contrast: #000000;
    --ion-color-secondary-contrast-rgb: 0,0,0;
    --ion-color-secondary-shade: #5481df;
    --ion-color-secondary-tint: #709efd;
}
:root {
    --ion-color-tertiary: #43DDCA;
    --ion-color-tertiary-rgb: 67,221,202;
    --ion-color-tertiary-contrast: #000000;
    --ion-color-tertiary-contrast-rgb: 0,0,0;
    --ion-color-tertiary-shade: #3bc2b2;
    --ion-color-tertiary-tint: #56e0cf;
}
:root {
    --ion-background-color: #2D1C54;
    --ion-background-color-rgb: 45,28,84;
    --ion-text-color: #FFF4E8;
    --ion-text-color-rgb: 255,244,232;
    --ion-color-step-50: #38275b;
    --ion-color-step-100: #423263;
    --ion-color-step-150: #4d3c6a;
    --ion-color-step-200: #574772;
    --ion-color-step-250: #625279;
    --ion-color-step-300: #6c5d80;
    --ion-color-step-350: #776888;
    --ion-color-step-400: #81728f;
    --ion-color-step-450: #8c7d97;
    --ion-color-step-500: #96889e;
    --ion-color-step-550: #a193a5;
    --ion-color-step-600: #ab9ead;
    --ion-color-step-650: #b6a8b4;
    --ion-color-step-700: #c0b3bc;
    --ion-color-step-750: #cbbec3;
    --ion-color-step-800: #d5c9ca;
    --ion-color-step-850: #e0d4d2;
    --ion-color-step-900: #eaded9;
    --ion-color-step-950: #f5e9e1;
}
:root {
    --ion-font-family: Eau;
}

ion-input .label-text {
    margin: -0.1em;
}

.loading {
    text-align: center;
}

.loading img{
    margin-top:50%;
    max-width: 60%;
}

    .loading .linear-progress {
        background: var(--ion-text-color);
        width: 50vw;
        margin: 20% auto;
        height: 1rem;
        border-radius: 10rem;
        overflow: hidden;
        position: relative;
    }

        .loading .linear-progress:after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--ion-color-secondary);
            scale: var(--blazor-load-percentage, 0%) 100%;
            transform-origin: left top;
            transition: scale ease-out 0.5s;
        }

.transition-container {
    display: grid;
    grid-template-columns: 100%;
}

.transition {
	/*position: absolute;*/
	/*background: var(--ion-background-color, #fff);*/
	opacity: 0;
	transform: translateX(100%);
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	animation-delay: 0s;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	text-align: center;
}

@keyframes fadeInLeft {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

@keyframes fadeOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.fadeOutLeft {
    animation-name: fadeOutLeft;
}

@keyframes fadeInRight {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

@keyframes fadeOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.fadeOutRight {
    animation-name: fadeOutRight;
}


/* Circle button */
ion-button[shape=circle] {
    --border-radius: 50%;
    width: 3em;
    height: 3em;
}

/* Spinner */
ion-spinner {
    width: 3em;
    height: 3em;
}

ion-content{
    --background:transparent;
}

.ss-language-selector{
    text-align: right;
    padding: 0.5em;
}

.ss-title {
    text-align: center;
    margin: 0 1em;
}

.ss-title > div {
    background-color: var(--ion-color-tertiary);
    color: var(--ion-background-color);
    border-radius: 0.5em;
    padding: 1em 2em;
    display: inline-block;
}

.ss-title h3, .ss-title p{
    margin: 0;
}

.ss-title-over{
    margin-bottom:-3em;
}

h1{
    margin: 0 2em 0 2em;
    font-weight:bold;
}

h2 {
    margin: 0.5em;
    font-weight: bold;
    font-size: 1em;
}

hr {
    border: none;
    border-top: 1px var(--ion-text-color) solid;
    height: 1px;
    margin: 0.5em;
}

.ss-intro {
	margin: 2em;
}


.ss-card {
	display: inline-block;
	background-color: var(--ion-text-color);
	color: var(--ion-background-color);
	border-radius: 1em;
	margin: 0 2.5em 2.5em 2.5em;
	padding: 1.5em;
	text-align: center;
}

    .ss-card h2 {
        font-size:1.25em;
        font-weight:bold;
    }

    .ss-card .ss-input {
        text-align: left;
        margin: 2em 0;
    }

    .ss-card p{
        font-size:small;
    }

    .ss-card ion-button{
        margin: 1em 0;
    }

.solid-bg {
    background-color: background: var(--ion-background-color, #fff);
    height: 100%;
    /*padding: 2em 0;*/
}

.solid-bg-img1 {
    position: absolute;
    top: 250px;
    left: -85px;
    width: 70%;
}

.solid-bg-img2 {
    position: absolute;
    bottom: 20px;
    right: -80px;
    width: 60%;
}

.full-bg {
    background-image: url('/baloons.jpeg');
    background-size: cover;
    background-position: right;
    width: 100%;
    height: 100vh;
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
}

.top-bg {
}

.top-banner {
    background-image: url('/baloons.jpeg');
    background-size: cover;
    background-position: center;
    padding: 2em 0;
}

.tb {
    background-color: #ffffffaa;
    color: var(--ion-background-color);
    padding: 0.75em 1em;
    border-radius: 0.5em;
    display:inline-block;
}


ion-button {
    font-weight: bold;
    /*--box-shadow: none;*/
    text-transform: none;
}

.file-input{
    width: 0;
    height: 0;
}

.file-label {
    background: var(--ion-color-primary, #3880ff);
    margin: 0.5em;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4), 0 3px 10px 0 rgba(0,0,0,0.3);
    background: var(--ion-color-primary, #3880ff);
    min-width: 6em;
    font-size: 1.25em;
    font-weight: bold;
    color: var(--ion-color-primary-contrast, #fff);
    border-radius: 10px;
    padding: 1em;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

    .file-label::after {
        inset: 0px;
        position: absolute;
        content: "";
        opacity: 0;
    }

    .file-label:hover::after {
        background: var(--ion-color-primary-contrast, #fff);
        opacity: .08;
    }

.file-label ion-icon{
    font-size:2.5em;
}

/* Progress bars */

.progres-container {
	width: 100%;
	/*background-color: #666;*/
	margin: 0.15em 0;
	border: 0.15em solid var(--ion-color-secondary, #000);
	border-radius: 5px;
}

.progress-filler {
	min-width: 30px;
	background-color: var(--ion-color-secondary, #000);
	text-align: right;
	padding: 0.15em 0.5em;
	color: #000;
	font-weight: bold;
	transition: width 1s ease-in-out;
	white-space: nowrap;
	color: var(--ion-text-color);
}

/* Modal adaptations */

ion-modal {
	--background: transparent !important;
	--backdrop-opacity: 0.66;
}