﻿/** Global **/

/*ion-input {
    //filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.9));
    box-shadow: .1rem .2rem .5rem rgba(255, 255, 255, 0.09);
    --padding-start: 1rem !important;
}

*/
* {
    font-variant-numeric: tabular-nums;
}

input {
    caret-color: var(--ion-color-primary);
}

/*MS Edge specific stuff: Remove the automatic password reveal feature as we have our own */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}

.neu-button:not(.in-toolbar) {
    font-weight: bold;
    --background: linear-gradient(180deg, var(--ion-color-step-50) -60%, var(--ion-background-color) 100%);
    --box-shadow: 0 .5rem .4rem rgba(0,0,0,0.08), 0 -.4rem .5rem rgba(255, 255, 255,1);
    text-transform: uppercase;
    --color: var(--ion-color-primary);
    --border-radius: 1.6rem;
    margin-top: 1rem;
    display: block;
    --background-activated: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.08) 26%);
}

body.dark .neu-button:not(.in-toolbar) {
    --background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, var(--ion-color-step-25) 100%);
    --box-shadow: 0 .5rem .4rem rgba(0,0,0,1), 0 -.4rem .5rem rgba(255, 255, 255, 0.08);
    --background-activated: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.08) 26%);
}

.neu-button.ion-activated {
    --box-shadow: 0 .4rem 1rem rgba(255, 255, 255, 1);
}

body.dark neu-button.ion-activated {
    --box-shadow: 0 .4rem 1rem rgba(255, 255, 255, 0.1);
}

.neu-button:not(.in-toolbar).button-disabled {
    --background: var(--ion-background-color);
    --padding-start: 0;
    --box-shadow: none !important;
    --color: var(--ion-color-step-900);
    --border-style: solid;
    --border-width: .1rem;
    --border-color: var(--ion-color-step-200);
}

.shake {
    animation: shake 0.5s;
}

.overview-header {
    background: var(--ion-color-primary);
    color: var(--ion-color-primary-contrast);
}

.overview-header__buttons {
    color: var(--ion-color-primary-contrast);
    border-color: var(--ion-color-primary-contrast);
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.overview-header__buttons * {
    --color: var(--ion-color-primary-contrast);
    --color-activated: var(--ion-color-primary);
    --border-color: var(--ion-color-primary-contrast);
    --background-activated: var(--ion-color-primary-contrast);
}

.overview-header__buttons .ion-activated {
    color:var(--ion-color-primary);
}

.center-and-expand-vertical {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
}

@keyframes shake {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(3em);
    }

    40% {
        transform: translate(-3em);
    }

    60% {
        transform: translate(3em);
    }

    80% {
        transform: translate(-3em);
    }

    100% {
        transform: translate(0);
    }
}

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

:root {
  --ion-color-primary: #5344f4;
  --ion-color-primary-rgb: 83,68,244;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #493cd7;
  --ion-color-primary-tint: #6457f5;

  --ion-color-secondary: #FF9900;
  --ion-color-secondary-rgb: 255,153,0;
  --ion-color-secondary-contrast: #000000;
  --ion-color-secondary-contrast-rgb: 0,0,0;
  --ion-color-secondary-shade: #e08700;
  --ion-color-secondary-tint: #ffa31a;


    --ion-background-color: #F2F2F3;
  --ion-background-color-rgb: 242,242,243;

  --ion-text-color: #222222;
  --ion-text-color-rgb: 34,34,34;

  --ion-color-step-25: #ededee;


  --ion-color-step-50: #e8e8e9;
  --ion-color-step-100: #ddddde;
  --ion-color-step-150: #d3d3d4;
  --ion-color-step-200: #c8c8c9;
  --ion-color-step-250: #bebebf;
  --ion-color-step-300: #b4b4b4;
  --ion-color-step-350: #a9a9aa;
  --ion-color-step-400: #9f9f9f;
  --ion-color-step-450: #949495;
  --ion-color-step-500: #8a8a8b;
  --ion-color-step-550: #808080;
  --ion-color-step-600: #757576;
  --ion-color-step-650: #6b6b6b;
  --ion-color-step-700: #606061;
  --ion-color-step-750: #565656;
  --ion-color-step-800: #4c4c4c;
  --ion-color-step-850: #414141;
  --ion-color-step-900: #373737;
  --ion-color-step-950: #2c2c2c;
}

/*
 * Dark Colors
 * -------------------------------------------
 */

body.dark {
    --ion-color-primary: #7165F6;
    --ion-color-primary-rgb: 113,101,246;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255,255,255;
    --ion-color-primary-shade: #6359d8;
    --ion-color-primary-tint: #7f74f7;

    --ion-color-secondary: #FF9900;
    --ion-color-secondary-rgb: 255,153,0;
    --ion-color-secondary-contrast: #000000;
    --ion-color-secondary-contrast-rgb: 0,0,0;
    --ion-color-secondary-shade: #e08700;
    --ion-color-secondary-tint: #ffa31a;

    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106,100,255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255,255,255;
    --ion-color-tertiary-shade: #5d58e0;
    --ion-color-tertiary-tint: #7974ff;

    --ion-color-success: #2fdf75;
    --ion-color-success-rgb: 47,223,117;
    --ion-color-success-contrast: #000000;
    --ion-color-success-contrast-rgb: 0,0,0;
    --ion-color-success-shade: #29c467;
    --ion-color-success-tint: #44e283;

    --ion-color-warning: #ffd534;
    --ion-color-warning-rgb: 255,213,52;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0,0,0;
    --ion-color-warning-shade: #e0bb2e;
    --ion-color-warning-tint: #ffd948;

    --ion-color-danger: #ff4961;
    --ion-color-danger-rgb: 255,73,97;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255,255,255;
    --ion-color-danger-shade: #e04055;
    --ion-color-danger-tint: #ff5b71;

    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244,245,248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0,0,0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152,154,162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0,0,0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    --ion-color-light: #222428;
    --ion-color-light-rgb: 34,36,40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255,255,255;
    --ion-color-light-shade: #1e2023;
    --ion-color-light-tint: #383a3e;

    --ion-background-color: #121212;
    --ion-background-color-rgb: 18,18,18;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255,255,255;

    --ion-border-color: #222222;

    --ion-color-step-25: #171717;
    --ion-color-step-50: #1e1e1e;
    --ion-color-step-100: #2a2a2a;
    --ion-color-step-150: #363636;
    --ion-color-step-200: #414141;
    --ion-color-step-250: #4d4d4d;
    --ion-color-step-300: #595959;
    --ion-color-step-350: #656565;
    --ion-color-step-400: #717171;
    --ion-color-step-450: #7d7d7d;
    --ion-color-step-500: #898989;
    --ion-color-step-550: #949494;
    --ion-color-step-600: #a0a0a0;
    --ion-color-step-650: #acacac;
    --ion-color-step-700: #b8b8b8;
    --ion-color-step-750: #c4c4c4;
    --ion-color-step-800: #d0d0d0;
    --ion-color-step-850: #dbdbdb;
    --ion-color-step-900: #e7e7e7;
    --ion-color-step-950: #f3f3f3;

    --ion-item-background: #1e1e1e;

    --ion-toolbar-background: #1f1f1f;

    --ion-tab-bar-background: #1f1f1f;

    --ion-card-background: #1e1e1e;
}

