/*******************************************************************
// TIMESTAMP
*******************************************************************/
@timestamp: "?v=`( new Date() ).getTime()`";

/*******************************************************************
// PATHS
*******************************************************************/
@path-design: '/web/public/admin/images';
@path-font: '/web/public/admin/fonts';


/*******************************************************************
// FONTS
*******************************************************************/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('@{path-font}/Roboto400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Roboto";
  src: local("Roboto"), local("Roboto-Regular"), url('@{path-font}/Roboto500.ttf') format("truetype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url('@{path-font}/Roboto500.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Roboto";
  src: local("Roboto Medium"), local("Roboto-Medium"), url('@{path-font}/Roboto500.ttf') format("truetype");
  font-style: normal;
  font-weight: 500;
}

@font: "Roboto", Arial, Helvetica, sans-serif;

@font-size: 13px;


/*******************************************************************
// SIZES
*******************************************************************/
@calc-base: 99.99%;
@width-web: 100%;
@min-width-web: 1200px;
@width-panel: 210px;
@width-panel-small: 50px;

@width-content: 100%;

@height-header: 64px;
@height-fixed-bar-mobile: 86px;
@height-fixed-bar: 32px;

@item-gap: 25px;
@content-gap: 25px;

@radius: 3px;

/*******************************************************************
// COLORS
*******************************************************************/
@color-0: #000;
@color-1: #111;
@color-2: #222;
@color-29: #292929;
@color-3: #333;
@color-4: #444;
@color-5: #555;
@color-6: #666;
@color-7: #777;
@color-8: #888;
@color-9: #999;
@color-a: #aaa;
@color-b: #bbb;
@color-c: #ccc;
@color-d: #ddd;
@color-e: #eee;
@color-f: #fff;

@color-fa: #fafafa;

@color-grey: #aeb4ba;
@color-grey-light: #f7f8fc;
@color-grey-dark: #364353;
@color-grey-middle: #76808a;

@color-blue: #012798;
@color-light-blue: #009AFF;
@color-green: #00CDBE;
@color-orange: #FCBD46;
@color-red: #dc3d3d;
@color-yellow: #FFDD0E;

// context colors
@color-base: #495563;
@color-desc: @color-5;

@color-primary: @color-blue;
@color-additional: @color-green;

@color-info: @color-green;
@color-alert: @color-red;
@color-warning: @color-orange;

@color-link: @color-blue;
@color-link-hover: @color-base;

@color-alterlink: @color-f;
@color-alterlink-hover: @color-yellow;

@color-darklink: #818d92;
@color-darklink-hover: @color-blue;

@color-border: #dce2ea;
@color-border-light: #f7f7f8;
@color-border-dark: #CCD0D4;
@color-border-darker: #C1CDD1;
@color-border-blue: @color-blue;

@color-inactive: #BCC2C5;
@color-hint: @color-grey;
@color-action: @color-base;
@color-action-hover: @color-blue;
@color-move: #818d92;
@color-title: #252525;

@bg-web: #f3f3f3;
@bg-page: #f3f3f3;
@bg-box: @color-f;
@bg-window: @bg-page;
@bg-table: @color-f;
@bg-stripe: @color-f;
@bg-primary: @color-primary;
@bg-primary-dark: #0573a0;
@bg-primary-darker: #0487bc;
@bg-bread: #E1E8EB;
@bg-input-icon: #EBECED;
@bg-upload: @bg-page;
@bg-dark: #dee4e7;

@bg-success: #dff0d8;
@bg-info: @bg-page;
@bg-warning: #fcf8e3;
@bg-alert: #FFEDED;
@bg-light: #f8f8f8;
@bg-edit: #faffd7;

// message colors
@color-message-alert: #ffd1d3;
@color-message-alert-text: #9e0008;
@color-message-alert-border: #ff9ea3;

@color-message-warning: #ffeed1;
@color-message-warning-text: #9e6400;
@color-message-warning-border: #ffdb9e;

@color-message-info: #d1f0ff;
@color-message-info-text: #076fa2;
@color-message-info-border: #9edfff;

@color-message-success: #d1ffd8;
@color-message-success-text: #009e18;
@color-message-success-border: #9effad;


/*******************************************************************
// OTHER
*******************************************************************/
@transition-type: cubic-bezier(.61, .20, .48, 1.0);
@transition-time: 0.3s;
@transition: @transition-time @transition-type;

@postfixes: -tablet, -mobile, -mobile-small;


/*******************************************************************
// POPUP WINDOWS
*******************************************************************/
@window-width: 400px;
@window-height: 116px;

@window-preview-width: 650px;
@window-preview-height: 150px;

@window-wide-width: 900px;
@window-wide-height: auto;

@window-wide-float-width: 600px;
@window-wide-float-height: 250px;
/*******************************************************************
// RESPONSIVE POINTS
*******************************************************************/
@respons-1: 320px;
@respons-1-a: (@respons-1 - 1);
@respons-2: 480px;
@respons-2-a: (@respons-2 - 1);
@respons-3: 600px;
@respons-3-a: (@respons-3 - 1);
@respons-4: 768px;
@respons-4-a: (@respons-4 - 1);
@respons-5: 1200px;
@respons-5-a: (@respons-5 - 1);

/*******************************************************************
// MEDIA QUERIES
*******************************************************************/
@query-xs: ~"only screen and (min-width: @{respons-1})";
@query-sm: ~"only screen and (min-width: @{respons-2})";
@query-md: ~"only screen and (min-width: @{respons-3})";
@query-lg: ~"only screen and (min-width: @{respons-4})";
@query-xl: ~"only screen and (min-width: @{respons-5})";

@query-mobile-xs: ~"only screen and (max-width: @{respons-2-a})";
@query-mobile: ~"only screen and (max-width: @{respons-3-a})";
@query-tablet: ~"only screen and (max-width: @{respons-4-a})";
@query-tablet-only: ~"only screen and (min-width: @{respons-3}) and (max-width: @{respons-4-a})";
@query-not-large-desktop: ~"only screen and (max-width: @{respons-5-a})";