/* 
        HOW TO

        we DONT use camelcase in default css! always use "-"
        we use camelcase only for classes that dont get css (using them in JavaScript) WITH an prefix "twyz" => SAMPLE: "twyzMySpecialClass"

        NAMING: "--twyz-" + "usage" + "color" + "additional info"
        SAMPLE: "--twyz-" + "button" + "blue" + "background-color"

*/

:root {
    /**************************
               COLORS
    ***************************/

    /* ------- colored -------*/
    --twyz-green: #00B74A;
    --twyz-lightblue: #EEF6FF;
    --twyz-blue: #1D71B8;
    --twyz-blue-opacity: #1d71b833;
    --twyz-midblue: #38a9dd;
    --twyz-purple: #ebcdfe;
    --twyz-darkpurple: #6e02b1;
    --twyz-darkpurple-opacity: #6e02b133;
    --twyz-yellow: #FFD43B;
    --twyz-orange: #FFC107;
    --twyz-red: #DC3545;
    --twyz-wheat: #F5DEB3;
    --twyz-lightgoldenrodyellow: #fafad2;
    --twyz-lightsalmon: #ffa07a;
    --twyz-lightyellow: #FFDE62;

    /* ------ monochrome ------*/
    --twyz-white: #FFFFFF;
    --twyz-midwhite: #FBFBFB;
    --twyz-darkwhite: #EFEFEF; /* active background & header & footer background */
    --twyz-lightgrey: #DCDCDC;
    --twyz-grey: #9E9E9E; /* windowheader */
    --twyz-darkgrey: #858585;
    --twyz-lightblack: #343A40; /* Schriftfarbe */
    --twyz-black: #000000;

    --twyz-tag-blue: #D0F0FB;
    --twyz-grey-border-form-elements: #AEAEAE; /* Rahmen um z.B. Input-Felder */
    --twyz-lightgrey-hover-background: #F5F5F5; /* Zeilen in den Tabellen beim Hovern */
    --twyz-lightgrey-border: var(--twyz-lightgrey);

    --twyz-color-disabled: var(--twyz-grey);
    --twyz-background-color-disabled: #EEE;
/*    --twyz-background-color-disabled: transparent; */
    --twyz-opacity-disabled: .6;

    /* ------ CSS Filter for svg ------ */
    --twyz-filter-green: invert(58%) sepia(40%) saturate(6365%) hue-rotate(114deg) brightness(94%) contrast(103%);
    --twyz-filter-red: invert(27%) sepia(70%) saturate(2400%) hue-rotate(335deg) brightness(91%) contrast(90%);
    --twyz-filter-wawi: invert(15%) sepia(70%) saturate(7441%) hue-rotate(319deg) brightness(91%) contrast(98%);
    --twyz-filter-blue: invert(31%) sepia(84%) saturate(1177%) hue-rotate(183deg) brightness(94%) contrast(83%);

    /* ------ APP-colors ------*/

    /* App - Intranet: Verwaltung, Berichte, Firma, Anmeldedaten, Erweiterungen, Dateiverwaltung, Journal, Aufgaben, E-Mail, Tapi, Newsletter, Texte, Karte, Dienstleistungen */
    --twyz-app-color-intranet: #95c11f;
    /* App - CRM: Kontakt, DMS, Verträge, News, Login */
    --twyz-app-color-crm: #1d71b8;
    /* App - Wawi: Waren & Artikel, Aufträge, Rechnungen, Wareneingang, Belegbuchungen */
    --twyz-app-color-wawi: #e5087e;
    /* App - PMS: Projekte, Zeiterfassung, Tickets */
    --twyz-app-color-pms: #00a19a;
    /* App - Veranstaltung: Veranstaltungen, Leistungen, Teilnehmer, Hotelverwaltung, Messestände */
    --twyz-app-color-events: #951b81;
    /* App TMS: Fuhrpark, Scahdensmeldung, Touren */
    --twyz-app-color-tms: #229bd7;
    /* DMS - Dokumentenmanagent */
    --twyz-app-color-dms: #e4cf00;
    /* App Sonstige: CMS, Objekte, Facility */
    --twyz-app-color-cms: #899faa;
    /* App-Module: KommunikationAufgaben, E-Mail, TAPI, Newsletter */
    --twyz-app-color-communication: #f39200;


    /* --- background-colors ---*/
    --white-background: var(--twyz-white);
    --white-background-font: var(--twyz-lightblack);

    --lightgrey-background: var(--twyz-midwhite);
    --lightgrey-background-font: var(--twyz-lightblack);

    --darkgrey-background: var(--twyz-grey);
    --darkgrey-background-font: var(--twyz-white);

    --twyz-background-color-main: var(--twyz-white);

    /* --- border-colors --- */
    --twyz-text-input-red-border-color: var(--twyz-red);

    /* -- special-item-colors -- */
    --twyz-active-item-background-color-blue: var(--twyz-lightblue);
    --twyz-active-item-background-color-grey: var(--twyz-darkwhite);
    --twyz-hightlighted-background: var(--twyz-wheat);

    /* --- calendar-colors --- */
    --twyz-calendar-color-weekend: var(--twyz-lightblue);
    --twyz-calendar-color-holiday: var(--twyz-lightgoldenrodyellow);
    --twyz-calendar-color-pseudoholiday: var(--twyz-lightsalmon);
    --twyz-calendar-color-illness: var(--twyz-red);
    --twyz-calendar-color-today: var(--twyz-lightyellow);

    /* ------ box-shadow ------*/
    --twyz-box-shadow-default: 0 10px 15px -3px rgba(0,0,0,.07),0 4px 6px -2px rgba(0,0,0,.05);

    /**************************
                FONT
    ***************************/

    --twyz-font-family: "Roboto", sans-serif;

    --twyz-font-weight-default: 300;
    --twyz-font-weight-bold: 500;

    --twyz-font-size-small: 11px;
    --twyz-font-size-default: 12px;
    --twyz-font-size-big: 14px;
    --twyz-font-size-bigger: 16px;

    --twyz-font-color-white: var(--twyz-white);
    --twyz-font-color-grey: var(--twyz-grey);
    --twyz-font-color-default: var(--twyz-lightblack);
    --twyz-font-color-black: var(--twyz-black);


    /**************************
              ELEMENTS
    ***************************/

    /* ---- input, select ----*/
    --form-element-height-default: 30px;
    --form-element-border-radius: 4px;

    /* ------- buttons -------*/
    --button-grey-background-color: var(--twyz-midwhite);
    --button-grey-border-color: var(--twyz-lightblack);
    --button-grey-font-color: var(--twyz-lightblack);
    --button-grey-font-color-inverted: var(--twyz-lightblack);

    --button-blue-background-color: var(--twyz-blue);
    --button-blue-border-color: var(--twyz-blue);
    --button-blue-font-color: var(--twyz-white);
    --button-blue-font-color-inverted: var(--twyz-black);

    --button-orange-background-color: var(--twyz-orange);
    --button-orange-border-color: var(--twyz-orange);
    --button-orange-font-color: var(--twyz-black);
    --button-orange-font-color-inverted: var(--twyz-black);

    --button-green-background-color: var(--twyz-green);
    --button-green-border-color: var(--twyz-green);
    --button-green-font-color: var(--twyz-white);
    --button-green-font-color-inverted: var(--twyz-black);

    --button-red-background-color: var(--twyz-red);
    --button-red-border-color: var(--twyz-red);
    --button-red-font-color: var(--twyz-white);
    --button-red-font-color-inverted: var(--twyz-black);

    --default-button-height: var(--form-element-height-default);

    --default-button-padding-horizontal: 16px;
    --default-icon-button-width: 44px;

    /* ------- links -------*/
    --link-blue-font-color: var(--twyz-blue);

    /* - dialog header & footer & toolbar - */
    --twyz-toolbar-height-thin: 40px;
    --twyz-toolbar-height-thick: 52px;

    --twyz-header-height-thin: 40px;
    --twyz-header-height-thick: 52px;

    --twyz-footer-height-thin: 40px;
    --twyz-footer-height-thick: 52px;

    /* - headers & navbars -*/
    --twyz-search-bar-height: 41px; /* hard coded for #main-navbar due tue height of burgermenu on frame */
    --header-big-form-element-padding-vertical: calc((var(--twyz-header-height-thick) - var(--form-element-height-default)) / 2); /* (52px - 30px) / 2 */



    /**************************
               ICONS
    ***************************/

    --twyz-icon-size-default: 16px; /* before it was 15px */
    --twyz-icon-size-small: 14px;
    --twyz-icon-size-smaller: 12px;
    --twyz-icon-size-bigger: 21px; /* fa-2x => 2em */
    --twyz-icon-size-table: var(--twyz-icon-size-small);
    --twyz-icon-size-treeview: var(--twyz-icon-size-small);
    --twyz-icon-padding-default: 0 2px;

    /* new-size variables are only for converting the icon-classes */
    --twyz-icon-new-size-small: 12px;
    --twyz-icon-new-size-default: 14px;
    --twyz-icon-new-size-big: 16px;

    --twyz-icon-color-black: var(--twyz-lightblack);
    --twyz-icon-color-blue: var(--twyz-blue);
    --twyz-icon-color-orange: var(--twyz-orange);
    --twyz-icon-color-green: var(--twyz-green);
    --twyz-icon-color-intranet-intranet: var(--twyz-app-color-intranet);


    /**************************
              DISTANCES
    ***************************/

    /* ---- line-height ----- */
    --default-line-height: 1.6; /* same as mdb */

    /* -------- gaps -------- */
    --default-gap: 16px;
    --small-gap: 10px;
    --labels-gap: 5px;
    --icon-to-text-gap-buttons: 8px;

    /* -- bootstrap gutters -- */
    --custom-mdb-gutter-x: var(--default-gap);
    --custom-mdb-gutter-y: var(--small-gap);

    /* -- bootstrap gutters for cardlist -- */
    --custom-cardlist-mdb-gutter-x: 24px;
    --custom-cardlist-mdb-gutter-y: 5px;

    /* ------- padding ------ */
    --default-container-padding-vertical: var(--small-gap);
    --default-container-padding-horizontal: var(--default-gap);
    --default-container-padding: var(--default-gap);

}