@charset "UTF-8";

/* Variable CSS */
:root {

    --cevinio-font-family: 'Open Sans', Verdana, sans-serif;

    --cevinio-red: #d41c46;
    --cevinio-white: #fff;

    --indigo-50: #f2f4f6;
    --indigo-100: #ccd2d9;
    --indigo-200: #99a4b4;
    --indigo-300: #66778e;
    --indigo-400: #334969;
    --indigo-500: #001c43;
    --indigo-600: #001636;
    --indigo-700: #001128;
    --kobalt-50: #e7eaf2;
    --kobalt-100: #cfd5e5;
    --kobalt-200: #9faccc;
    --kobalt-300: #6f82b2;
    --kobalt-400: #3f5999;
    --kobalt-500: #0f2f7f;
    --kobalt-600: #0c2666;
    --orange-50: #fbece9;
    --orange-100: #f8d8d2;
    --orange-200: #f0b1a5;
    --orange-300: #e98a78;
    --orange-400: #e1634b;
    --orange-500: #da3c1e;
    --sangria-50: #f5e6e6;
    --sangria-100: #eccccc;
    --sangria-200: #d89999;
    --sangria-300: #c56666;
    --sangria-400: #b13333;
    --sangria-500: #9e0000;
    --saphire-50: #e8eaf7;
    --saphire-100: #d0d6ee;
    --saphire-200: #a1acdd;
    --saphire-300: #7283cc;
    --saphire-400: #4359bb;
    --saphire-500: #1430aa;
    --teal-50: #e6f5f3;
    --teal-100: #ccece8;
    --teal-200: #99d9d1;
    --teal-300: #66c5b9;
    --teal-400: #33b2a2;
    --teal-500: #009f8b;
    --teal-600: #007f6f;
    --yellow-50: #fdf7e6;
    --yellow-100: #fbf0cc;
    --yellow-200: #f7e099;
    --yellow-300: #f3d166;
    --yellow-400: #efc133;
    --yellow-500: #ebb200;
    --violet-50: #f7e8f4;
    --violet-100: #eed1ea;
    --violet-200: #dda3d4;
    --violet-300: #cc75bf;
    --violet-400: #BB47a9;
    --violet-500: #aa1994;

    /* Basic */
    --main-background: #fbfbfe;
    --background: var(--cevinio-white);
    --main-color: var(--indigo-500);
    --main-color-light: var(--cevinio-white);
    --main-icon-color: var(--kobalt-500);
    --main-icon-color-disabled: var(--indigo-100);
    --main-radius: 5px;
    --main-hover: var(--kobalt-50);
    --main-overlay-background: var(--kobalt-500);
    --main-shadow: 0 1px 20px 0 #0F2F7F17;
    --darker-shadow: 0 1px 20px 0 #0F2F7F59;
    --link-color: var(--kobalt-500);
    --link-hover-color: var(--kobalt-500);
    --link-visited-color: var(--kobalt-500);
    --header-text-color: var(--kobalt-500);
    --separator-line: var(--kobalt-50);
    --userAction-info-text: var(--kobalt-400);
    --footer-text-color: var(--indigo-200);

    /* Navigation */
    --main-navigation-icon-color: var(--teal-500);
    --main-navigation-text-color: var(--indigo-500);
    --main-navigation-background: var(--cevinio-white);
    --menu-gradient: linear-gradient(3deg, rgba(232, 234, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);

    /* Buttons */
    --button-primary-background: var(--teal-500);
    --button-primary-background-hover: var(--teal-600);
    --button-primary-background-focus: var(--teal-400);
    --button-primary-text-color: var(--cevinio-white);

    --button-secondary-background: var(--indigo-50);
    --button-secondary-background-hover: var(--indigo-100);
    --button-secondary-background-focus: var(--indigo-200);
    --button-secondary-color: var(--indigo-500);

    --button-login-background: var(--cevinio-red);
    --button-login-text-color: var(--cevinio-white);
    --button-login-alt-text-color: var(--cevinio-red);

    /* Badge */
    --badge-background: var(--cevinio-red);
    --badge-text-color: var(--cevinio-white);
    --badge-alt-background: var(--kobalt-300);
    --badge-alt-text-color: var(--kobalt-300);
    --badge-error-background: var(--sangria-500);
    --badge-warning-background: var(--yellow-500);
    --badge-success-background: var(--teal-500);
    --badge-info-background: var(--kobalt-500);

    /* Card */
    --card-background: var(--cevinio-white);
    --card-header-grid-border: var(--kobalt-100);
    --card-header-grid-label-color: var(--indigo-300);
    --card-footer-text-color: var(--kobalt-500);
    --card-floating-menu-background: var(--kobalt-50);
    --card-floating-divider-color: var(--kobalt-300);

    /* Form */
    --form-field-background: var(--cevinio-white);
    --form-field-border: var(--kobalt-50);
    --form-field-label: var(--indigo-300);
    --form-field-placeholder: var(--indigo-200);
    --form-field-desciption: var(--indigo-300);
    --form-field-checkbox: var(--kobalt-500);
    --form-field-toggle: var(--kobalt-200);
    --form-field-button: var(--kobalt-100);
    --form-field-button-content: var(--kobalt-500);
    --form-field-rating: var(--kobalt-100);
    --form-field-rating-checked: var(--kobalt-500);
    --form-field-rating-hover: var(--kobalt-300);
    --form-field-disabled: var(--indigo-50);
    --form-field-disabled-border: var(--kobalt-200);
    --form-field-text-color: var(--indigo-500);
    --form-field-select-border: var(--kobalt-200);
    --form-field-icon-color: var(--kobalt-100);
    --form-field-selector-background: var(--kobalt-500);
    --form-field-selector-text: var(--cevinio-white);

    /* Tooltip */
    --tooltip-underline: var(--kobalt-500);
    --tooltip-text-color: var(--main-color);
    --tooltip-text-highlight: var(--kobalt-500);
    --tooltip-background: var(--background);
    --tooltip-border: var(--kobalt-50);

    /* Tabs */
    --tab-header-background: var(--kobalt-50);
    --tab-header-text-color: var(--kobalt-500);
    --tab-background: var(--background);

    /* Data records / tables */
    --data-record-active: var(--teal-500);
    --data-record-border: var(--kobalt-50);
    --data-record-border-hover: var(--kobalt-300);
    --data-record-border-focus: var(--kobalt-300);
    --data-record-highlight: var(--kobalt-50);
    --data-record-highlight-border: var(--kobalt-500);
    --data-record-hover: var(--main-background);

    /* Chips */
    --chip-background: var(--saphire-50);
    --chip-color: var(--saphire-500);
    --chip-icon-color: var(--saphire-500);

    /* Loading animation */
    --loading-animation-color-1: var(--cevinio-red);
    --loading-animation-color-2: var(--indigo-500);
    --loading-animation-color-3: var(--teal-500);
}

a,
a:hover,
a:visited {
    color: var(--link-color);
}