:root {
  /* font size */
  --large-header-font-size: 25px;
  --header-font-size: 19px;
  --main-font-size: 13px;
  --small-font-size: 11px;

  /* tab1 font family */
  --tab1-font-family: Syncopate;

  /* colors */
  /*
    using Wino.Web.Base.Components.Layout.ColorVariables...

    the same like:
    C:\Users\scbe\source\repos\wino2\Wino.Web.Base\Components\Layout\ColorVariables.cs
  */
  --main-color-0: #000000;
  --main-color-1: #313537;
  --main-color-2: #444F56;
  --main-color-3: #FFFFFF;
  --secondary-color-1: #D3E7F1;
  --secondary-color-2: #CFDDDB;
  --secondary-color-3: #C6CCDA;
  --secondary-color-4: #C8A1D6;
  --background-color-1: #EBF1F5;
  --background-color-2: #E2E7EC;
  --background-color-3: #BACCD5;
  --calendar-color-1: #FFBC39;
  --calendar-color-2: #1679A1;
  --calendar-color-3: #348D2C;
  --calendar-color-4: #69BA61;
  --calendar-color-5: #D23552;
  --calendar-color-6: #E0E0E0;
  --signal-color-1: #D23552;
  --signal-color-2: #49A341;
  --signal-color-3: #FFBC39;
  --signal-color-4: #FFBBB7;
  --signal-color-5: #C6EAC3;
  --signal-color-6: #FCF5E3;
  --hover-color-1: #348D2C;
  --hover-color-2: #BA2540;

  /* main */
  --main-border-radius: 8px;
  --modal-border-radius: 16px;
  --modal-editor-border-radius: 16px;
  --dialog-border-radius: 24px; /* and Sub-Navbars */
  --contentheight: calc(100vh - 252px);

  /* iconbar */
  --iconbar-icon-margin: 10px 10px;

  /* page */
  --page-content-radius: 12px;
  --page-content-border-radius: 18px;

  /* button radius */
  --button-border-radius: 24px;
  --radiobutton-border-radius: 8px;
  --button-editor-border-radius: 4px;
  --button-small-border-radius: 16px;
  --iconbutton-border-radius: 8px;

  /* button padding */
  --button-padding: 0px 22px;
  --button-small-padding: 0px 18px;
  --button-navstyle-padding: 0px 12px;
  --itemselectbutton-padding: 0px 8px;

  /* form */
  --form-border-radius: 8px;
  --form-padding: 0rem 0.5rem;
  --form-border: 1px solid var(--background-color-3);

  /* dxCalenderWidget */
  --calender-widget-border-radius: 4px;

  /* durations */
  --change-state-duration: .15s; /* for checkbox -> toggle button */
  --change-hover-duration: .15s; /* for button hover effect */
}