/*
 * Fonts
 */

@font-face {
    font-family: Ubuntu;
    src: url('font/Ubuntu-Regular.ttf');
}

@font-face {
    font-family: UbuntuMono;
    src: url('font/UbuntuMono-Regular.ttf');
}

@font-face {
    font-family: OpenSans;
    src: url('font/OpenSans-Regular.ttf');
}

.title-font {
    font-family: 'Ubuntu', sans-serif;
    --color: var(--ion-color-header-text);
    white-space: normal;
}

.title-font-mono {
    font-family: 'UbuntuMono', monospace;
}

.mono-font {
    font-family: 'UbuntuMono', monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Ubuntu', sans-serif;
    color: var(--ion-color-header-text);
}

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

ion-toolbar ion-buttons ion-button {
    --color: var(--ion-color-toolbar-text);
    color: var(--ion-color-toolbar-text);
}

ion-button {
    --box-shadow: none;
}

ion-card {
    box-shadow: none;
    border: 1px solid var(--ion-color-step-150);
    border-radius: 8px;
}

/*
 * Global CSS variables
 */

:root {
    --ion-font-family: 'OpenSans', sans-serif;
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);
    --safe-area-right: env(safe-area-inset-right);

    /* Sum of ion-padding-vertical top and bottom */
    --vertical-padding-total: 32px;
    /* Sum of ion-padding-horizontal left and right */
    --horizontal-padding-total: 32px;

    --app-video-player-additional-content-height: 46px;
    --app-video-player-controls-height: 86px;

    --call-page-footer-height: 56px;
    --screen-sharing-button-height: 66px;

    --chat-list-message-page-footer-height: 53.5px;
    --chat-list-message-page-header-height: 48px;

    --filter-toolbar-height: 96px;

    --header-toolbar-height: 56px;
    --header-toolbar-modal-height: 56px;
    --header-toolbar-indicator-height: 28px;
    --header-toolbar-call-indicator-bottom: 23px;

    --level-page-footer-height: 68px;
    --level-page-form-buttons-height: 76px;

    --mood-rating-buttons-height: 124px;
    --mood-graph-controls-height: 182px;

    --settings-page-form-buttons-height: 64px;
    --settings-page-tabs-height: 81px;

    --custom-login-language-select-height: 54px;
    --custom-login-theme-select-height: 54px;
    --custom-login-card-height: 500px;
    --custom-login-card-avatar-height: 128px;
    --custom-login-card-title-height: 50px;
    --login-content-max-width: 1200px;

    --video-recorder-controls-height: 85px;

    --pip-track-height: 150px;
    --pip-track-width: 200px;

    --video-feedback-chart-legends-height: 50px;

    --video-feedback-footer-height: 57px;
    --video-feedback-chart-legends-height: 50px;

    --video-feedback-page-height: calc(
        var(--100vh, 100vh) - var(--header-toolbar-height) -
            var(--video-feedback-footer-height) - var(--safe-area-bottom) -
            var(--safe-area-top)
    );

    --level-page-height: calc(
        var(--100vh, 100vh) - var(--header-toolbar-height) -
            var(--level-page-footer-height) - var(--safe-area-bottom) -
            var(--safe-area-top)
    );

    --parent-child-interaction-content-height: calc(
    var(--100vh, 100vh) - var(--header-toolbar-height) -
        /* Page vertical margin */ 32px -
        /* Non-content vertical elements, margin, and padding within page */ 115px -
        var(--safe-area-bottom) - var(--safe-area-top)
    );

    --app-thank-you-height: calc(
        var(--100vh, 100vh) - var(--header-toolbar-height) -
        /* Page vertical margin */ 32px -
        var(--safe-area-bottom) - var(--safe-area-top)
    );

    /* From iPhone 12 Pro in Chrome devtools */
    --editor-view-width-mobile: 390px;

    body {
        background-color: var(--ion-alt-background-color);
    }
}

/*
 * Custom colors: https://ionicframework.com/docs/theming/colors
 */
.ion-color-text {
    --ion-color-base: var(--ion-color-text);
    --ion-color-base-rgb: var(--ion-color-text-rgb);
    --ion-color-contrast: var(--ion-color-text-contrast);
    --ion-color-contrast-rgb: var(--ion-color-text-contrast-rgb);
    --ion-color-shade: var(--ion-color-text-shade);
    --ion-color-tint: var(--ion-color-text-tint);
}

.ion-color-header-text {
    --ion-color-base: var(--ion-color-header-text);
    --ion-color-base-rgb: var(--ion-color-header-text-rgb);
    --ion-color-contrast: var(--ion-color-header-text-contrast);
    --ion-color-contrast-rgb: var(--ion-color-header-text-contrast-rgb);
    --ion-color-shade: var(--ion-color-header-text-shade);
    --ion-color-tint: var(--ion-color-header-text-tint);
}

.ion-color-background {
    --ion-color-base: var(--ion-color-background);
    --ion-color-base-rgb: var(--ion-color-background-rgb);
    --ion-color-contrast: var(--ion-color-background-contrast);
    --ion-color-contrast-rgb: var(--ion-color-background-contrast-rgb);
    --ion-color-shade: var(--ion-color-background-shade);
    --ion-color-tint: var(--ion-color-background-tint);
}

.ion-color-toolbar {
    --ion-color-base: var(--ion-color-toolbar);
    --ion-color-base-rgb: var(--ion-color-toolbar-rgb);
    --ion-color-contrast: var(--ion-color-toolbar-contrast);
    --ion-color-contrast-rgb: var(--ion-color-toolbar-contrast-rgb);
    --ion-color-shade: var(--ion-color-toolbar-shade);
    --ion-color-tint: var(--ion-color-toolbar-tint);
}

.ion-color-toolbar-text {
    --ion-color-base: var(--ion-color-toolbar-text);
    --ion-color-base-rgb: var(--ion-color-toolbar-text-rgb);
    --ion-color-contrast: var(--ion-color-toolbar-text-contrast);
    --ion-color-contrast-rgb: var(--ion-color-toolbar-text-contrast-rgb);
    --ion-color-shade: var(--ion-color-toolbar-text-shade);
    --ion-color-tint: var(--ion-color-toolbar-text-tint);
}

.ion-color-menu {
    --ion-color-base: var(--ion-color-menu);
    --ion-color-base-rgb: var(--ion-color-menu-rgb);
    --ion-color-contrast: var(--ion-color-menu-contrast);
    --ion-color-contrast-rgb: var(--ion-color-menu-contrast-rgb);
    --ion-color-shade: var(--ion-color-menu-shade);
    --ion-color-tint: var(--ion-color-menu-tint);
}

.ion-color-menu-icon {
    --ion-color-base: var(--ion-color-menu-icon);
    --ion-color-base-rgb: var(--ion-color-menu-icon-rgb);
    --ion-color-contrast: var(--ion-color-menu-icon-contrast);
    --ion-color-contrast-rgb: var(--ion-color-menu-icon-contrast-rgb);
    --ion-color-shade: var(--ion-color-menu-icon-shade);
    --ion-color-tint: var(--ion-color-menu-icon-tint);
}

.ion-color-card {
    --ion-color-base: var(--ion-color-card);
    --ion-color-base-rgb: var(--ion-color-card-rgb);
    --ion-color-contrast: var(--ion-color-card-contrast);
    --ion-color-contrast-rgb: var(--ion-color-card-contrast-rgb);
    --ion-color-shade: var(--ion-color-card-shade);
    --ion-color-tint: var(--ion-color-card-tint);
}

.ion-color-badge {
    --ion-color-base: var(--ion-color-badge);
    --ion-color-base-rgb: var(--ion-color-badge-rgb);
    --ion-color-contrast: var(--ion-color-badge-contrast);
    --ion-color-contrast-rgb: var(--ion-color-badge-contrast-rgb);
    --ion-color-shade: var(--ion-color-badge-shade);
    --ion-color-tint: var(--ion-color-badge-tint);
}

.ion-color-progress-bar {
    --ion-color-base: var(--ion-color-progress-bar);
    --ion-color-base-rgb: var(--ion-color-progress-bar-rgb);
    --ion-color-contrast: var(--ion-color-progress-bar-contrast);
    --ion-color-contrast-rgb: var(--ion-color-progress-bar-contrast-rgb);
    --ion-color-shade: var(--ion-color-progress-bar-shade);
    --ion-color-tint: var(--ion-color-progress-bar-tint);
}

.ion-color-quaternary {
    --ion-color-base: var(--ion-color-quaternary);
    --ion-color-base-rgb: var(--ion-color-quaternary-rgb);
    --ion-color-contrast: var(--ion-color-quaternary-contrast);
    --ion-color-contrast-rgb: var(--ion-color-quaternary-contrast-rgb);
    --ion-color-shade: var(--ion-color-quaternary-shade);
    --ion-color-tint: var(--ion-color-quaternary-tint);
}