:root {

    --1px: 0.0625rem;
    --2px: 0.125rem;
    --3px: 0.1875rem;
    --4px: 0.25rem;
    --5px: 0.3125rem;
    --6px: 0.375rem;
    --7px: 0.4375rem;
    --8px: 0.5rem;
    --9px: 0.5625rem;
    --10px: 0.625rem;
    --11px: 0.688rem;
    --12px: 0.75rem;
    --13px: 0.8125rem;
    --14px: 0.875rem;
    --15px: 0.9375rem;
    --16px: 1rem;
    --17px: 1.0625rem;
    --18px: 1.125rem;
    --19px: 1.1875rem;
    --20px: 1.25rem;
    --21px: 1.3125rem;
    --22px: 1.375rem;
    --23px: 1.4375rem;
    --24px: 1.5rem;
    --25px: 1.5625rem;
    --26px: 1.625rem;
    --27px: 1.6875rem;
    --28px: 1.75rem;
    --29px: 1.8125rem;
    --30px: 1.875rem;
    --31px: 1.9375rem;
    --32px: 2rem;
    --33px: 2.0625rem;
    --34px: 2.125rem;
    --35px: 2.1875rem;
    --36px: 2.25rem;
    --37px: 2.3125rem;
    --38px: 2.375rem;
    --39px: 2.4375rem;
    --40px: 2.5rem;

    --42px: 2.625rem;
    --43px: 2.6875rem;
    --46px: 2.875rem;
    --48px: 3rem;
    --50px: 3.125rem;
    --54px: 3.375rem;
    --65px: 4.0625rem;
    --70px: 4.375rem;
    --76px: 4.75rem;
    --80px: 5rem;
    --90px: 5.625rem;
    --94px: 5.875rem;
    --95px: 5.9375rem;
    --100px: 6.25rem;
    --120px: 7.5rem;
    --128px: 8rem;
    --150px: 9.375rem;
    --164px: 10.25rem;
    --168px: 10.5rem;
    --180px: 11.25rem;
    --190px: 11.875rem;
    --200px: 12.5rem;
    --220px: 13.75rem;
    --232px: 14.5rem;
    --240px: 15rem;
    --246px: 15.375rem;
    --256px: 16rem;
    --260px: 16.25rem;
    --300px: 18.75rem;
    --340px: 21.25rem;
    --400px: 25rem;
    --500px: 31.25rem;
    --512px: 32rem;
    --550px: 34.375rem;
    --600px: 37.5rem;
    --640px: 40rem;
    --740px: 46.25rem;
    --900px: 56.25rem;
    --1300px: 81.25rem;
    --1440px: 90rem;

    --font-family: Inter, sans-serif;
    --font-family-monospace: JetBrainsMono, monospace;

    --font-size-base: var(--14px);
    --font-size-large: var(--18px);
    --font-size-small: var(--12px);

    --line-height-base: 1.571429;
    --line-height-large: 1.3333333;
    --line-height-small: 1.5;

    --line-height-computed: var(--22px);

    --table-cell-padding: var(--8px);
    --table-cell-less-padding: var(--3px);

    --container-max-width: var(--1440px);
    --record-grid-max-width: var(--1300px);

    // Internal. Not to be used directly.
    --container-max-width-normal: var(--1440px);


    // Internal. Not to be used directly.
    --container-max-width-wide: calc(var(--1440px) + var(--340px));

    //Also set in a CSS variable.
    --navbar-width: var(--232px);
    --navbar-minimized-width: var(--50px);

    --navbar-height: var(--40px);
    --navbar-header-height: var(--65px);
    --navbar-tab-vertical-padding: var(--9px);
    --navbar-tab-left-padding: var(--16px);
    --navbar-tab-right-padding: var(--20px);
    --navbar-tab-text-left-padding: var(--36px);

    --top-bar-height: var(--32px);
    --logo-width: var(--164px);
    --footer-height: var(--26px);

    --grid-gutter-width: var(--16px);

    --container-padding: var(--15px);

    --panel-padding: var(--14px);

    --form-group-margin-bottom: var(--12px);

    --padding-base-vertical: var(--6px);
    --padding-base-horizontal: var(--10px);
    --padding-small-vertical: var(--5px);
    --padding-small-horizontal: var(--10px);
    --padding-large-vertical: var(--10px);
    --padding-large-horizontal: var(--16px);

    --modal-inner-padding: var(--panel-padding);
    --modal-title-padding: var(--padding-base-horizontal);
    --modal-title-line-height: var(--27px);

    --popover-arrow-width: var(--10px);

    // @todo Compute by adding font-size, two vertical paddings and two borders?
    --input-height-base: var(--36px);
    --input-height-small: var(--30px);
    --input-height-large: var(--46px);

    --grid-column-width-xxsmall: var(--100px);
    --grid-column-width-xsmall: var(--190px);
    --grid-column-width-small: var(--246px);
    --grid-column-width-medium: var(--340px);

    // computed
    --popover-arrow-width-negative: calc(var(--popover-arrow-width) * -1);
    --popover-arrow-outer-width: calc(var(--popover-arrow-width) + var(--1px));
    --popover-arrow-outer-width-negative: calc(var(--popover-arrow-outer-width) * -1);

    --navbar-padding-vertical: calc((var(--navbar-height) - var(--line-height-computed)) / 2);
    --line-height-computed-half: calc(var(--line-height-computed) / 2);
    --table-cell-padding-half: calc(var(--table-cell-padding) / 2);
    --grid-gutter-width-half: calc(var(--grid-gutter-width) / 2);

    --minus-1px: calc(var(--1px) * -1);
    --minus-2px: calc(var(--2px) * -1);
    --minus-3px: calc(var(--3px) * -1);
    --minus-4px: calc(var(--4px) * -1);
    --minus-5px: calc(var(--5px) * -1);
    --minus-6px: calc(var(--6px) * -1);
    --minus-7px: calc(var(--7px) * -1);
    --minus-8px: calc(var(--8px) * -1);
    --minus-9px: calc(var(--9px) * -1);
    --minus-10px: calc(var(--10px) * -1);
    --minus-11px: calc(var(--11px) * -1);
    --minus-12px: calc(var(--12px) * -1);
    --minus-13px: calc(var(--13px) * -1);
    --minus-14px: calc(var(--14px) * -1);
    --minus-15px: calc(var(--15px) * -1);
    --minus-16px: calc(var(--16px) * -1);

    // color and style

    --body-bg: @body-bg-value;
    --panel-bg: @panel-bg-value;
    --main-gray: @main-gray-value;

    --white-color: @white-color-value;

    --white-color-3: darken(@white-color-value, 3%);
    --white-color-5: darken(@white-color-value, 5%);

    // @todo Move values to theme variables.
    --tooltip-bg: #000;
    --tooltip-color: #FFF;

    --gray-base: @gray-base-value;
    --gray-soft: @gray-soft-value;
    --gray-dark: @gray-dark-value;
    --gray-light: @gray-light-value;
    --gray-lighter: @gray-lighter-value;
    --gray: @gray-value;

    --gray-light-5: darken(@gray-light-value, 5%);
    --gray-light-7: darken(@gray-light-value, 7%);
    --gray-light-10: darken(@gray-light-value, 10%);
    --gray-light-12: darken(@gray-light-value, 12%);
    --gray-light-17: darken(@gray-light-value, 17%);
    --gray-light-25: darken(@gray-light-value, 25%);
    --gray-light-40: darken(@gray-light-value, 40%);

    --gray-dark-5: darken(@gray-dark-value, 5%);
    --gray-dark-7: darken(@gray-dark-value, 7%);
    --gray-dark-10: darken(@gray-dark-value, 10%);
    --gray-dark-12: darken(@gray-dark-value, 12%);
    --gray-dark-17: darken(@gray-dark-value, 17%);
    --gray-dark-25: darken(@gray-dark-value, 25%);
    --gray-dark-40: darken(@gray-dark-value, 40%);

    --gray-dark-25l: lighten(@gray-dark-value, 25%);

    --gray-lighter-5: darken(@gray-lighter-value, 5%);
    --gray-lighter-7: darken(@gray-lighter-value, 7%);
    --gray-lighter-10: darken(@gray-lighter-value, 10%);
    --gray-lighter-12: darken(@gray-lighter-value, 12%);
    --gray-lighter-17: darken(@gray-lighter-value, 17%);
    --gray-lighter-25: darken(@gray-lighter-value, 25%);
    --gray-lighter-40: darken(@gray-lighter-value, 40%);

    --gray-lighter-orange-mix: @gray-lighter-orange-mix-value;

    --gray-lighter-orange-mix-5: darken(@gray-lighter-orange-mix-value, 5%);
    --gray-lighter-orange-mix-7: darken(@gray-lighter-orange-mix-value, 7%);
    --gray-lighter-orange-mix-10: darken(@gray-lighter-orange-mix-value, 10%);
    --gray-lighter-orange-mix-12: darken(@gray-lighter-orange-mix-value, 12%);
    --gray-lighter-orange-mix-17: darken(@gray-lighter-orange-mix-value, 17%);
    --gray-lighter-orange-mix-25: darken(@gray-lighter-orange-mix-value, 25%);
    --gray-lighter-orange-mix-40: darken(@gray-lighter-orange-mix-value, 40%);

    --brand-primary: @brand-primary-value;
    --brand-danger: @brand-danger-value;
    --brand-info: @brand-info-value;
    --brand-success: @brand-success-value;
    --brand-warning: @brand-warning-value;

    --main-gray-5: darken(@main-gray-value, 5%);
    --main-gray-7: darken(@main-gray-value, 7%);
    --main-gray-10: darken(@main-gray-value, 10%);
    --main-gray-12: darken(@main-gray-value, 12%);
    --main-gray-17: darken(@main-gray-value, 17%);
    --main-gray-25: darken(@main-gray-value, 25%);
    --main-gray-40: darken(@main-gray-value, 40%);
    --main-gray-lighten-40: lighten(@main-gray-value, 40%);

    --brand-primary-text: @brand-primary-text-value;
    --brand-primary-5: darken(@brand-primary-value, 5%);
    --brand-primary-10: darken(@brand-primary-value, 10%);
    --brand-primary-lighten-10: lighten(@brand-primary-value, 10%);
    --brand-primary-lighten-30: lighten(@brand-primary-value, 30%);
    --brand-primary-lighten-50: lighten(@brand-primary-value, 50%);

    --brand-danger-10: darken(@brand-danger-value, 10%);
    --brand-danger-lighten-20: lighten(@brand-danger-value, 20%);
    --brand-success-10: darken(@brand-success-value, 10%);
    --brand-warning-10: darken(@brand-warning-value, 10%);

    --state-default-bg: @state-default-bg-value;
    --state-default-text: @state-default-text-value;

    --state-primary-bg: @state-primary-bg-value;
    --state-primary-text: @state-primary-text-value;
    --state-primary-border: @state-primary-border-value;

    --state-danger-bg: @state-danger-bg-value;
    --state-danger-text: @state-danger-text-value;
    --state-danger-border: @state-danger-border-value;

    --state-info-text: @state-info-text-value;
    --state-info-bg: @state-info-bg-value;
    --state-info-border: @state-info-border-value;

    --state-success-text: @state-success-text-value;
    --state-success-bg: @state-success-bg-value;
    --state-success-border: @state-success-border-value;

    --state-warning-bg: @state-warning-bg-value;
    --state-warning-text: @state-warning-text-value;
    --state-warning-border: @state-warning-border-value;

    --state-danger-bg-5: darken(@state-danger-bg-value, 5%);
    --state-danger-bg-10: darken(@state-danger-bg-value, 10%);
    --state-danger-text-10: darken(@state-danger-text-value, 10%);
    --state-danger-text-10l: lighten(darken(@state-danger-text-value, 10%), 20);

    --brand-info-10: darken(@brand-info-value, 10%);

    --state-info-text-10: darken(@state-info-text-value, 10%);
    --state-info-bg-5: darken(@state-info-bg-value, 5%);
    --state-info-bg-10: darken(@state-info-bg-value, 10%);

    --state-success-bg-5: darken(@state-success-bg-value, 5%);
    --state-success-text-10: darken(@state-success-text-value, 10%);
    --state-success-text-10l: lighten(darken(@state-success-text-value, 10%), 20);

    --state-warning-text-10: darken(@state-warning-text-value, 10%);
    --state-warning-text-10l: lighten(darken(@state-warning-text-value, 10%), 20);
    --state-warning-bg-5: darken(@state-warning-bg-value, 5%);
    --state-warning-bg-10: darken(@state-warning-bg-value, 10%);

    --btn-default-bg: @btn-default-bg-value;
    --btn-default-border: @btn-default-border-value;
    --btn-default-color: @btn-default-color-value;
    --btn-default-hover-bg: @btn-default-hover-bg-value;
    --btn-default-hover-border: @btn-default-hover-border-value;
    --btn-default-active-bg: @btn-default-active-bg-value;
    --btn-default-active-border: @btn-default-active-border-value;

    --btn-primary-bg: @btn-primary-bg-value;
    --btn-primary-border: @btn-primary-border-value;
    --btn-primary-color: @btn-primary-color-value;
    --btn-primary-hover-bg: @btn-primary-hover-bg-value;
    --btn-primary-hover-border: @btn-primary-hover-border-value;
    --btn-primary-active-bg: @btn-primary-active-bg-value;
    --btn-primary-active-border: @btn-primary-active-border-value;

    --btn-success-bg: @btn-success-bg-value;
    --btn-success-border: @btn-success-border-value;
    --btn-success-color: @btn-success-color-value;
    --btn-success-hover-bg: @btn-success-hover-bg-value;
    --btn-success-hover-border: @btn-success-hover-border-value;
    --btn-success-active-bg: @btn-success-active-bg-value;
    --btn-success-active-border: @btn-success-active-border-value;

    --btn-danger-bg: @btn-danger-bg-value;
    --btn-danger-border: @btn-danger-border-value;
    --btn-danger-color: @btn-danger-color-value;
    --btn-danger-hover-bg: @btn-danger-hover-bg-value;
    --btn-danger-hover-border: @btn-danger-hover-border-value;
    --btn-danger-active-bg: @btn-danger-active-bg-value;
    --btn-danger-active-border: @btn-danger-active-border-value;

    --btn-warning-bg: @btn-warning-bg-value;
    --btn-warning-border: @btn-warning-border-value;
    --btn-warning-color: @btn-warning-color-value;
    --btn-warning-hover-bg: @btn-warning-hover-bg-value;
    --btn-warning-hover-border: @btn-warning-hover-border-value;
    --btn-warning-active-bg: @btn-warning-active-bg-value;
    --btn-warning-active-border: @btn-warning-active-border-value;

    --btn-info-bg: @btn-info-bg-value;
    --btn-info-border: @btn-info-border-value;
    --btn-info-color: @btn-info-color-value;
    --btn-info-hover-bg: @btn-info-hover-bg-value;
    --btn-info-hover-border: @btn-info-hover-border-value;
    --btn-info-active-bg: @btn-info-active-bg-value;
    --btn-info-active-border: @btn-info-active-border-value;

    --btn-text-color: @btn-text-color-value;
    --btn-active-box-shadow: @btn-active-box-shadow-value;

    --btn-xs-wide-width: @btn-xs-wide-width-value;
    --btn-s-wide-width: @btn-s-wide-width-value;
    --btn-wide-width: @btn-wide-width-value;
    --btn-x-wide-width: @btn-x-wide-width-value;
    --btn-xx-wide-width: @btn-xx-wide-width-value;

    --navbar-bg: @navbar-bg-value;
    --navbar-link-color: @navbar-link-color-value;
    --navbar-link-icon-color: @navbar-link-icon-color-value;
    --navbar-link-hover-color: @navbar-link-hover-color-value;
    --navbar-link-hover-bg: @navbar-link-hover-bg-value;
    --navbar-link-active-bg: darken(@navbar-bg-value, 10%);
    --navbar-box-shadow: @navbar-box-shadow-value;
    --navbar-border-width: @navbar-border-width-value;

    --navbar-inverse-color: @navbar-inverse-color-value;
    --navbar-inverse-bg: @navbar-inverse-bg-value;
    --navbar-inverse-link-color: @navbar-inverse-link-color-value;
    --navbar-inverse-link-active-bg: @navbar-inverse-link-active-bg-value;
    --navbar-inverse-border: @navbar-inverse-border-value;
    --navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg-value, 10%);
    --navbar-inverse-bg-7: darken(@navbar-inverse-bg-value, 7%);
    --navbar-inverse-link-hover-color: @navbar-inverse-link-hover-color-value;
    --navbar-inverse-link-hover-bg: @navbar-inverse-link-hover-bg-value;
    --navbar-inverse-link-disabled-color: @navbar-inverse-link-disabled-color-value;
    --navbar-inverse-link-disabled-bg: @navbar-inverse-link-disabled-bg-value;
    --navbar-inverse-link-icon-color: @navbar-inverse-link-icon-color-value;
    --navbar-inverse-link-icon-hover-color: @navbar-inverse-link-icon-hover-color-value;

    --input-color: @input-color-value;
    --input-bg: @input-bg-value;
    --input-border: @input-border-value;
    --input-border-focus: @input-border-focus-value;
    --input-box-shadow: @input-box-shadow-value;
    --input-border-focus-rgba: rgba(
        red(@input-border-focus-value),
        green(@input-border-focus-value),
        blue(@input-border-focus-value),
        .6
    );
    --input-bg-disabled: @input-bg-disabled-value;
    --input-color-disabled: @input-color-disabled-value;
    --input-border-width: @input-border-width-value;

    --modal-backdrop-bg: @modal-backdrop-bg-value;
    --modal-backdrop-filter: @modal-backdrop-filter-value;
    --modal-header-border-color: @modal-header-border-color-value;
    --modal-header-bg: @modal-header-bg-value;
    --modal-footer-bg: @modal-footer-bg-value;
    --modal-content-bg: @modal-content-bg-value;
    --modal-box-shadow: @modal-box-shadow-value;
    --modal-border-color: @modal-border-color-value;
    --modal-border-width: @modal-border-width-value;

    --text-color: @text-color-value;
    --text-white-color: @text-white-color-value;
    --text-muted-color: @text-muted-color-value;
    --text-gray-color: @text-gray-color-value;
    --text-solid-color: @text-solid-color-value;

    --link-color: @link-color-value;
    --link-hover-color: @link-hover-color-value;

    --link-record-color: @link-record-color-value;
    --link-record-hover-color: @link-record-hover-color-value;

    --text-link-color: @text-link-color-value;
    --text-link-hover-color: @text-link-hover-color-value;

    --table-bg: @table-bg-value;
    --table-bg-accent: @table-bg-accent-value;

    --code-bg: @code-bg-value;
    --code-border-color: @code-border-color-value;
    --code-color: @code-color-value;

    --blockquote-border-color: @blockquote-border-color-value;

    --border-radius: @border-radius-value;
    --border-radius-small: @border-radius-small-value;

    --dropdown-border-radius: @dropdown-border-radius-value;
    --dropdown-border-width: @dropdown-border-width-value;

    --default-heading-bg-color: @default-heading-bg-color-value;
    --default-border-color: @default-border-color-value;

    --badge-border-radius-value: @badge-border-radius-value;

    --warning-bg: @warning-bg-value;

    --panel-border-radius: @panel-border-radius-value;
    --panel-border-width: @panel-border-width-value;

    --panel-default-bg: @panel-default-bg-value;
    --panel-primary-bg: @panel-primary-bg-value;
    --panel-success-bg: @panel-success-bg-value;
    --panel-danger-bg: @panel-danger-bg-value;
    --panel-warning-bg: @panel-warning-bg-value;
    --panel-info-bg: @panel-info-bg-value;

    --panel-default-text: @panel-default-text-value;
    --panel-primary-text: @panel-primary-text-value;
    --panel-success-text: @panel-success-text-value;
    --panel-danger-text: @panel-danger-text-value;
    --panel-warning-text: @panel-warning-text-value;
    --panel-info-text: @panel-info-text-value;

    --panel-default-border: @panel-default-border-value;
    --panel-primary-border: @panel-primary-border-value;
    --panel-danger-border: @panel-danger-border-value;
    --panel-success-border: @panel-success-border-value;
    --panel-warning-border: @panel-warning-border-value;
    --panel-info-border: @panel-info-border-value;

    --panel-heading-height: @panel-heading-height-value;
    --panel-heading-font-size: @panel-heading-font-size-value;

    --login-panel-heading-bg: @login-panel-heading-bg-value;

    --site-footer-bg: @site-footer-bg-value;
    --site-footer-color: @site-footer-color-value;

    --popover-bg: @popover-bg-value;

    --dropdown-bg: @dropdown-bg-value;
    --dropdown-link-color: @dropdown-link-color-value;
    --dropdown-link-hover-color: @dropdown-link-hover-color-value;
    --dropdown-link-hover-bg: @dropdown-link-hover-bg-value;
    --dropdown-border: @dropdown-border-value;
    --dropdown-divider-bg: @dropdown-divider-bg-value;
    --dropdown-box-shadow: @dropdown-box-shadow-value;
    --dropdown-link-active-bg: @dropdown-link-active-bg-value;

    --calendar-today-bg: @calendar-today-bg-value;
    --calendar-border: @calendar-border-value;
    --calendar-busy-bg: @calendar-busy-bg-value;

    --select-item-text-color: @select-item-text-color-value;
    --select-item-bg: @select-item-bg-value;
    --select-item-active-text-color: @select-item-active-text-color-value;
    --select-item-active-bg: @select-item-active-bg-value;
    --select-item-border: @select-item-border-value;

    --label-color: @label-color-value;
    --label-default-bg: @label-default-bg-value;

    --well-bg: @well-bg-value;
    --well-border: @well-border-value;

    --scroll-bg: @scroll-bg-value;
    --scroll-thumb-bg: @scroll-thumb-bg-value;
    --scroll-width: @scroll-width-value;
    --scroll-border-width: @scroll-border-width-value;

    --collapsed-modal-bg: @collapsed-modal-bg-value;
    --collapsed-modal-text-color: @collapsed-modal-text-color-value;

    --default-box-shadow: @default-box-shadow-value;
    --top-bar-box-shadow: @top-bar-box-shadow-value;

    --vertical-gap: @vertical-gap-value;

    //

    --icon-size-base: var(--16px);
    --icon-line-height-base: var(--21px);

    --icon-size-small: var(--12px);
    --icon-line-height-small: var(--18px);

    --btn-icon-width: var(--36px);
    --btn-icon-width-small: var(--32px);
}