@font-face {
  font-family: 'Fontawesome';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-regular-400.woff2") format("woff2"), url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-regular-400.ttf") format("truetype");
}

:root {
	--c-action: #3e97ff;
	--c-action-text: #fff;
	--c-hover: #3e97ff1a;
	--c-button-bg: #f1f1f2;
	--c-button-text: #7e8299;
	--c-border: #f1f1f2;
	--c-input-border: #e1e3ea;
	--c-input-label: #a1a5b7;
	--c-input-text: #5e6278;
	--c-input-invalid: #e64040;
	--c-input-invalid-border: #e85252;
	--c-input-disabled-bg: #f1f1f2;
	--c-input-disabled-text: #5e6278;
	--c-list-color: #a1a5b7;
	--c-context: #a1a5b7;
	--c-context-separator: #f1f1f2;
	--c-context-disabled: #ddd;
	--c-context-bg: #e3e4e9;
	--c-note-bg: #f7f8fb;
	--c-note-user: #747474;
	--c-note-date: #858897;
	--c-note-text: #5e6278;
	--f-body: Proxima-Nova, Arial, Helvetica, sans-serif;
}

html { font-family: var(--f-body); font-size: 14px; }

html { position: relative; height: 100%; }
body { margin: 0; padding: 0; background: #d9d9d9; color: #404040; height: 100%; }

input, textarea, select { font-family: var(--f-body); }
a { text-decoration: none; }

h2 { margin: 0 0 5px 0; font-size: 24px; font-weight: 700; }

.Login { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: grid; align-items: center; justify-items: center; }
.Login .box {}
.Login h2 { margin: 0 20px 3px; font-size: 30px; font-weight: 600; }
.Login form { border-radius: 10px; background: #fff; box-shadow: 0 8px 14px 0 #0f2a511a; padding: 0 20px; }
.Login .item { position: relative; width: 300px; }
.Login .item label { position: absolute; left: 15px; top: 22px; color: var(--c-input-label); font-size: 10px; font-weight: 600; pointer-events: none; }
.Login form input[type=text] { margin: 20px 0 0; box-sizing: border-box; border: 1px solid var(--c-input-border); border-radius: 6px; width: 100%; height: 38px; font-size: 14px; font-weight: 500; padding: 10px 15px 2px; color: var(--c-input-text); outline: none; }
.Login form input[type=password] { margin: 20px 0 10px; box-sizing: border-box; border: 1px solid var(--c-input-border); border-radius: 6px; width: 100%; height: 38px; font-size: 14px; font-weight: 500; padding: 10px 15px 2px; color: var(--c-input-text); outline: none; }
.Login form input[type=submit] { margin: 10px 0 20px; border-radius: 6px; border: none; background: var(--c-action); padding: 10px 20px; color: var(--c-action-text); font-size: 14px; font-weight: 600; }
.Login form a { margin: 10px 0 20px 20px; border-radius: 6px; border: none; background: var(--c-button-bg); padding: 10px 20px; color: var(--c-button-text); font-size: 14px; font-weight: 600; }
.Login .message { font-weight: bold; color: #e64040; }

.Page { height: 100%; display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 74px 1fr;}

.Top { background: #141414; grid-column: 1/3; }
.Top .menu-icon { display: none; float: left; width: 60px; height: 75px; line-height: 75px; text-align: center; font-family: Fontawesome; font-size: 20px; color: #5e6278; cursor: pointer; }
.Top .logo { margin: 10px; font-size: 20px; font-weight: 600; }
.Top .user { margin: 10px; }

.Menu { background: #141414; padding: 20px 15px; }
.Menu a { display: block; padding: 0 5px; color: #5e6278; line-height: 30px; }
.Menu .icon { display: inline-block; padding-right: 5px; width: 20px; text-align: center; font-family: Fontawesome; }
.Menu .current { border-radius: 6px; background: #1f1f25; }
.Menu .separator { height: 10px; }
.Menu .counter { display: inline-block; position: relative; left: 5px; top: -7px; border-radius: 50%; min-width: 15px; line-height: 15px; text-align: center; background: #900; color: #999; font-size: 10px; }

@media (max-width: 650px) {

	.Page { grid-template-columns: 0 1fr; }
	.Top .menu-icon { display: block; }
	.Menu { visibility: hidden; }
	.Menu > div { display: none; }

	.Page.expanded .Menu > div { display: block; visibility: visible; box-sizing: border-box; position: absolute; left: 0; top: 74px; width: 180px; bottom: 0; padding: 10px 5px; background: #141414; z-index: 1; }

}

.Content { display: grid; grid-template-rows: 74px 1fr; }

.Command { margin: 20px 20px 0; border-radius: 10px; background: #fff; padding: 0 10px; display: grid; grid-template-columns: 1fr 1fr; }
.Command .title { padding: 0 10px; align-content: center; font-size: 18px; font-weight: bold; color: #3f4254; line-height: 1.1; }
.Command .buttons { align-content: center; justify-self: end; }
.Command .buttons a { display: inline-block; border-radius: 6px; background: var(--c-action); padding: 8px 20px; color: var(--c-action-text); font-size: 14px; font-weight: 600; line-height: 1.1; }
.Command .buttons a .icon { margin-right: 5px; font-family: Fontawesome; }

.List { position: relative; margin: 20px; border-radius: 10px; background: #fff; padding: 10px 0; color: var(--c-list-color); font-size: 14px; }
.List .header { margin: 0 0 8px 0; padding: 0 30px 0 20px; display: grid; line-height: 25px; text-transform: uppercase; font-size: 12px; }
.List .header .asc, .List .header .desc { position: relative; border-bottom: 2px solid var(--c-action); }
.List .header span { padding: 0 2px; cursor: pointer; }
.List .header span:not(.filter-button):hover { background: var(--c-hover); color: var(--c-action); }
.List .header > *:after { position: absolute; right: 5px; top: 2px; font-family: Fontawesome; }
.List .header .asc:after { content: '\f0d8'; }
.List .header .desc:after { content: '\f0d7'; }
.List .header .num { text-align: right; padding-right: 10px; }
.List .header .num:after { left: 5px; right: unset; }
.List .header .filter-button { margin: 0 2px; border-radius: 6px; background: var(--c-action); color: var(--c-action-text); font-family: Fontawesome; text-align: center; }
.List .filter { padding: 0 34px 0 16px; display: grid; }
.List .filter span { padding: 2px; }
.List .filter input { box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; width: 100%; background: #fafafa; padding: 3px; color: var(--c-list-color); outline: none; }
.List .content {}
.List .content .row { display: grid; padding: 0 30px 0 20px; border-top: 1px solid #e3e4e9; line-height: 30px; cursor: pointer; }
.List .content .row:hover { background: var(--c-hover); }
.List .content .row span { padding: 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.List .content .row .num { padding-right: 10px; text-align: right; }
.List .content .context-menu { display: inline-block; margin-top: 2px; border-radius: 6px; background: var(--c-context-bg); width: 100%; height: 26px; font-family: Fontawesome; text-align: center; line-height: 26px; color: var(--c-context); }

.List .pager { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 3px; }
.List .pager a { width: 20px; height: 28px; color: var(--c-list-color); text-align: center; line-height: 28px; }
.List .pager a.active { border-radius: 6px; background: var(--c-action); width: 28px; color: var(--c-action-text); }
.List .pager .prev, .List .pager .next { font-family: Fontawesome; font-size: 18px; }
.List .pager .disabled { color: #e3e4e9; }

.List .context, .ItemList .context { display: none; position: fixed; left: 0; top: 0; bottom: 0; right: 0; }
.List .context .menu, .ItemList .context .menu { position: absolute; border-radius: 6px; border: 1px solid var(--c-button-bg); background: #fff; width: fit-content; min-width: 220px; padding: 5px; box-shadow: 0 8px 14px 0 #0f2a511a; font-size: 14px; }
.List .context a, .ItemList .context a { display: block; border-radius: 6px; padding: 5px 10px; font-size: 14px; color: var(--c-context); }
.List .context a.disabled, .ItemList .context a.disabled { color: var(--c-context-disabled); }
.List .context a:not(.disabled):hover, .ItemList .context a:not(.disabled):hover { background: var(--c-hover); color: var(--c-action); }
.List .context .separator { height: 1px; background: var(--c-context-separator); }

/*.List.orders .grid { grid-template-columns: 70px 80px 1fr 1fr 1fr 95px 1fr 100px 90px 30px; }*/
/*.List.reports .grid { grid-template-columns: 100px 80px 1fr 150px 120px 120px 30px; }*/
/*.List.persons .grid { grid-template-columns: 1fr 1fr 150px 100px 80px 30px; }*/
/*.List.productgroups .grid { grid-template-columns: 1fr 100px 95px 100px 100px 30px; }*/
/*.List.products .grid { grid-template-columns: 80px 1fr 100px 100px 100px 100px 30px; }*/
/*.List.resellers .grid { grid-template-columns: 1fr 110px 1fr 120px 120px 120px 80px 30px; }*/
/*.List.customers .grid { grid-template-columns: 1fr 1fr 1fr 130px 150px 200px 30px; }*/

.Form { position: relative; margin: 20px; border-radius: 10px; background: #fff; padding: 10px; min-width: 570px; max-width: 1150px; overflow: auto; }
.Form h2 { margin: 5px 20px 0; font-size: 24px; font-weight: 700; }
.Form .info { margin: 0 20px; font-size: 16px; font-weight: 700; color: #a1a5b7; }
.Form .status { position: absolute; top: 20px; right: 20px; border: 1px solid #e1e3ea; border-radius: 6px; padding: 4px; }
.Form .status select { border: none; border-radius: 4px; background: #fcf6df; width: 242px; height: 32px; font-size: 14px; font-weight: 600; padding: 5px 10px 5px; color: #cfa308; outline: none; appearance: none; }
.Form .status select:disabled { background: var(--c-input-disabled-bg); color: var(--c-input-disabled-text); }
.Form .status select:focus { border: 3px solid #9fc8df; padding: 2px 7px 2px; }
.Form .status .arrow { position: absolute; right: 12px; top: 12px; font-family: Fontawesome; font-size: 18px; color: var(--c-input-text); pointer-events: none; }
.Form .status label { margin: 0 5px; }
.Form .status input[type=checkbox] { appearance: none; margin: 0 0 0 5px; vertical-align: -3px; }
.Form .status input[type=checkbox]:after { content: '\e5b0'; font-family: Fontawesome; font-size: 20px; color: var(--c-action); }
.Form .status input[type=checkbox]:checked:after { content: '\e5b1'; }

.Form .form-grid { display: grid; grid-template-rows: 65px 1fr 62px; height: 100%; }
.Form .form-info {}
.Form .form-content { overflow: auto; }

.Form .section { margin: 20px 0 10px 10px; border-radius: 6px; background: #f7f8fb; width: fit-content; padding: 15px 20px; font-size: 15px; font-weight: 700; color: #3f4254; }

.Form .item-group { display: flow-root; }
.Form .item2 { float: left; margin: 10px; display: grid; grid-template-columns: 1fr 1fr; width: 528px; grid-column-gap: 20px; }
.Form .item1 { float: left; margin: 10px; width: 528px; }
.Form .item { position: relative; margin: 0 0 0; overflow: hidden; transition-property: margin,height; transition-duration: 0.1s; }
.Form .item label { position: absolute; left: 15px; top: 2px; color: var(--c-input-label); font-size: 10px; font-weight: 600; pointer-events: none; transition-property: left,top,font-size; transition-duration: 0.05s; }
.Form .item.invalid label { color: var(--c-input-invalid); }
.Form .item select { border: 1px solid var(--c-input-border); border-radius: 6px; width: 100%; height: 38px; font-size: 14px; font-weight: 500; padding: 9px 15px 1px; color: var(--c-input-text); outline: none; appearance: none; }
.Form .item select:focus { border: 2px solid #9fc8df; padding: 8px 14px 0; }
.Form .item select:disabled { background: var(--c-input-disabled-bg); color: var(--c-input-disabled-text); opacity: 1; }
.Form .item.select:after { content: '\f107'; position: absolute; right: 12px; top: 12px; font-family: Fontawesome; font-size: 18px; color: var(--c-input-text); pointer-events: none; }
.Form .item.invalid select { border-color: var(--c-input-invalid-border); color: var(--c-input-invalid); }
.Form .item input[type=text] { box-sizing: border-box; border: 1px solid var(--c-input-border); border-radius: 6px; width: 100%; height: 38px; font-size: 14px; font-weight: 500; padding: 11px 15px 1px; color: var(--c-input-text); outline: none; }
.Form .item input[type=text]:focus { border: 2px solid #9fc8df; padding: 10px 14px 0; }
.Form .item input[type=text]:disabled { background: var(--c-input-disabled-bg); color: var(--c-input-disabled-text); }
.Form .item input[type=text]:read-only { background: var(--c-input-disabled-bg); color: var(--c-input-disabled-text); }
.Form .item.invalid input[type=text] { border-color: var(--c-input-invalid-border); color: var(--c-input-invalid); }
.Form .item textarea { box-sizing: border-box; border: 1px solid var(--c-input-border); border-radius: 6px; width: 100%; height: 130px; font-size: 14px; font-weight: 500; padding: 11px 15px 1px; color: var(--c-input-text); outline: none; resize: none; }
.Form .item textarea:focus { border: 2px solid #9fc8df; padding: 10px 14px 0; }
.Form .item.invalid textarea { border-color: var(--c-input-invalid-border); color: var(--c-input-invalid); }
.Form .item.check { padding: 5px 15px; }
.Form .item.check label { position: relative; left: 0; top: 0; font-size: 14px; color: var(--c-input-text); pointer-events: all; }
.Form .item input[type=checkbox] { appearance: none; margin: 0 0 0 8px; vertical-align: -3px; }
.Form .item input[type=checkbox]:after { content: '\e5b0'; font-family: Fontawesome; font-size: 20px; color: var(--c-action); }
.Form .item input[type=checkbox]:checked:after { content: '\e5b1'; }
.Form .item input[type=checkbox]:disabled:after { color: var(--c-input-disabled-text); }
.Form .item .message { display: none; position: absolute; right: 9px; top: 9px; width: 40px; height: 40px; background: #fff; text-align: center; line-height: 40px; font-family: Fontawesome; font-size: 20px; color: #e85252; cursor: pointer; }
.Form .item.invalid .message { display: block; }
.Form .item .messagebox { display: none; position: absolute; right: 14px; top: 14px; border: 1px solid #808080; border-radius: 5px; background: #fff; padding: 5px 8px; font-size: 14px; color: #808080; cursor: pointer; }
.Form .item.invalid .messagebox { display: block; }
.Form .item .icon { position: absolute; right: 5px; top: 5px; border-radius: 4px; background: var(--c-button-bg); width: 29px; height: 29px; text-align: center; line-height: 29px; color: var(--c-button-text); font-family: Fontawesome; font-size: 16px; }

.Form .buttons { display: flex; padding: 10px; gap: 10px; justify-content: end; }
.Form .buttons a { border-radius: 6px; background: var(--c-button-bg); padding: 10px 20px; color: var(--c-button-text); font-size: 14px; font-weight: 600; }
.Form .buttons a.save { background: var(--c-action); color: var(--c-action-text); }
.Form .buttons a .icon { margin-right: 5px; font-family: Fontawesome; }
.Form .buttons .server-message { color: var(--c-input-invalid); line-height: 40px; font-weight: 600; font-size: 18px; }
.Form .buttons .message { display: none; color: var(--c-input-invalid); line-height: 40px; font-weight: 600; font-size: 16px; }
.Form .buttons .message.show { display: block; }

.Form .tabs { margin: 10px; display: flex; }
.Form .tabs a { border-radius: 6px; padding: 15px 20px; font-size: 15px; font-weight: 700; color: #7e8299; }
.Form .tabs a.active { background: #f7f8fb; color: var(--c-action); }
.Form .tab { display: none; }
.Form .tab.active { display: block; }

.Form .tab .button { border-radius: 6px; background: var(--c-button-bg); padding: 10px 15px; color: var(--c-button-text); font-weight: 600; }

.ItemList { color: var(--c-list-color); }
.ItemList .header { margin: 0 0 8px 0; padding:0 30px; display: grid; line-height: 25px; text-transform: uppercase; font-size: 12px; }
.ItemList .header span { padding: 0 2px; cursor: pointer; }.ItemList {}
.ItemList .content .row { padding: 0 30px; display: grid; border-top: 1px solid #e3e4e9; line-height: 30px; cursor: pointer; }
.ItemList .content .row:hover { background: var(--c-hover); }
.ItemList .content .row span { padding: 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ItemList .content .context-menu { display: inline-block; margin-top: 2px; border-radius: 6px; background: var(--c-context-bg); width: 100%; height: 26px; font-family: Fontawesome; text-align: center; line-height: 26px; color: var(--c-context); }

.ItemList .content input[type=checkbox] { appearance: none; margin: 0 0 0 8px; vertical-align: -3px; }
.ItemList .content input[type=checkbox]:after { content: '\e5b0'; font-family: Fontawesome; font-size: 20px; color: var(--c-action); }
.ItemList .content input[type=checkbox]:checked:after { content: '\e5b1'; }

.ItemList.reseller-persons .grid { grid-template-columns: 1fr 120px 150px 150px 150px 100px 26px; }
.ItemList.reseller-products .grid { grid-template-columns: 1fr 120px 120px 120px 100px 26px; }
.ItemList.product-resellers .grid { grid-template-columns: 1fr 120px 1fr 150px 100px 26px; }
.ItemList.product-criteria .grid { grid-template-columns: 150px 150px 1fr 60px 26px; }

.Notes { display: flex; }
.Notes > * { margin: 10px; width: 528px; }
.Notes .list {}
.Notes .list .note { position: relative; margin-bottom: 10px; border: 1px solid var(--c-note-bg); border-radius: 10px; background: var(--c-note-bg); padding: 5px 15px; min-height: 70px; }
.Notes .list .note .user { display:grid; grid-template-columns: 20px 1fr; font-size: 12px; line-height: 30px; }
.Notes .list .note .user .icon { font-family: Fontawesome; font-size: 14px; color: var(--c-note-user); }
.Notes .list .note .user .name { font-size: 14px; font-weight: 600; color: var(--c-action); }
.Notes .list .note .user .date { padding-left: 5px; font-size: 10px; color: var(--c-note-date); }
.Notes .list .note .text { padding-left: 20px; color: var(--c-note-text); }
.Notes .list .note .cmd { position: absolute; right: 5px; top: 5px; }
.Notes .list .note .cmd a { float: left; border-radius: 6px; width: 25px; height: 25px; line-height: 25px; text-align: center; font-family: Fontawesome; font-size: 14px; color: var(--c-action); cursor: pointer; }
.Notes .list .note .cmd a:hover { background: #eee; }
.Notes .list .note .cmd .delete { color: #df1b1b; }
.Notes .list .note.editing { border-color: var(--c-action); }
.Notes .enter {}
.Notes .enter .buttons { padding: 10px 0; }
.Notes .enter .buttons .cancel-note { display: none; }
.Notes .enter .buttons .save-note { background: var(--c-action); color: var(--c-action-text); }

.Dialog { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #3f425421; }
.Dialog .content { align-self: center; justify-self: center; border: 1px solid var(--c-border); border-radius: 10px; min-width: 250px; max-width: 90%; background: #fff; padding: 20px; box-shadow: 0 8px 14px 0 #0f2a511a; }
.Dialog .content h2 { margin: 0; font-size: 20px; }
.Dialog .content .dialog-buttons { display: flex; padding: 10px 0 0; gap: 10px; justify-content: end; }
.Dialog .content .dialog-buttons a { border-radius: 6px; background: var(--c-button-bg); padding: 10px 20px; color: var(--c-button-text); font-size: 14px; font-weight: 600; }
.Dialog .content .dialog-buttons a.save { background: var(--c-action); color: var(--c-action-text); }
.Dialog .content .item { margin: 10px 0; }

iframe[name=UploadFrame] { display: none; }
.UploadForm { display: none; }

.Upload { max-width: 500px; }
.Upload .file { margin: 10px; display: grid; grid-template-columns: 40px 1fr 26px; grid-template-rows: 20px 20px; font-size: 15px; }
.Upload .file .icon { grid-row: 1/3; font-family: Fontawesome; font-size: 30px; align-self: center; }
.Upload .file .name { font-weight: 700; }
.Upload .file .valid { font-size: 13px; font-weight: 700; }
.Upload .file .valid span { font-weight: normal; }
.Upload .file .context-menu { grid-column: 3; grid-row: 1/3; margin: 5px 0; border-radius: 6px; height: 26px; line-height: 26px; background: var(--c-context-bg); font-family: Fontawesome; text-align: center; align-self: center; color: var(--c-context); }