@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url(../fonts/Icons.css);

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

*, *::before, *::after { box-sizing: border-box; }

:root {
  --color: rgb(255, 255, 255, 1);
  --input-bg: rgba(17, 18, 34, 1);
  --input-border: 1px solid rgba(48, 52, 77, 1);
  --input-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.05);
  --button-color: rgba(255, 255, 255, 0.8);
  --button-bg: rgba(37, 41, 67, 1);
}

html {}
body {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  background: rgba(13, 14, 24, 1);
  color: var(--color);
  letter-spacing: -0.22px;
}
a { text-decoration: none; color: rgba(19, 130, 255, 1); }
button, input, select { 
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
input {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 12px;
  background: var(--input-bg);
  border: var(--input-border);
  height: 32px;
  line-height: 32px;
  border-radius: 6px;
  color: var(--color);
  box-shadow: var(--input-shadow);
  transition: 100ms ease;
}
input::placeholder, textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
input:not(:disabled):hover, textarea:not(:disabled):hover {
  background: rgba(24, 26, 47, 1);
  cursor: pointer;
}
input:not(:disabled):active, input:not(:disabled):focus, textarea:not(:disabled):active, textarea:not(:disabled):focus {
  background: rgba(26, 28, 52, 1);
  border: 1px solid rgba(4, 115, 253, 1);
  cursor: text;
}
input:disabled, button:disabled, textarea:disabled, textarea:disabled {
  opacity: 0.5;
  cursor: default;
}
input:valid {}
input:invalid { border: 1px solid rgba(206, 55, 82, 1); }

input[type="checkbox"], input[type="checkbox"]:focus {
  width: 16px;
  cursor: pointer;
}

.errorField { border: 1px solid rgba(206, 55, 82, 1) }
.error {
  white-space: nowrap;
  color: rgba(206, 55, 82, 1);
}

textarea {
  font-family: inherit;
  display: flex;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--input-bg);
  border: var(--input-border);
  box-shadow: var(--input-shadow);
  color: var(--color);
  outline: none;
  resize: none;
  overflow-y: auto;
}

button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  height: 32px;
  padding: 0 12px;
  opacity: 1;
  transition: 100ms ease;
  color: var(--button-color);
  background: var(--button-bg);
  border: var(--input-border);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
  transition: 100ms ease;
  user-select: none;
  white-space: nowrap;
}
button:not(:disabled):hover {
  color: var(--color);
  background: rgba(44, 49, 77, 1);
  border: var(--input-border);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}
button:not(:disabled):active { background: rgba(36, 40, 64, 1); }
button:disabled {
  color: var(--button-color);
  border: var(--input-border)
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
  opacity: 0.5;
}
button.icon-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid rgb(0,0,0,0);
  border-radius: 4px;
  transition: 100ms ease;
  cursor: pointer;
}
button.icon-cross:hover {
  background: rgba(37, 41, 67, 1);
  border-color: rgba(48, 52, 77, 1);
}
.blue {
  color: var(--color);
  background: rgba(4, 115, 253, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
}
.blue:not(:disabled):hover {
  background: rgba(19, 130, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}
.blue:not(:disabled):active {
  background: rgba(14, 109, 221, 1);
}
.blue:disabled {
  background: rgba(3, 120, 253, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
  opacity: 0.5;
}

.red {
  color: var(--color);
  background: rgba(206, 55, 82, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
}
.red:not(:disabled):hover {
  background: rgba(255, 67, 101, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}
.red:not(:disabled):active {
  background: rgba(242, 41, 77, 1);
}
.red:disabled {
  background: rgba(206, 55, 82, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
  opacity: 0.5;
}

.red .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* --- LOGIN --- */
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  min-width: 300px;
  padding: 6px;
}
.login .wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}
.login .fields {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}
.login .wrap {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  position: relative;
  gap: 8px;
}
.passview { 
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 8px;
}
.passview .password-control {
  font-family: 'Icons' !important;
  position: absolute;
  top: 5px;
  right: 11px;
  font-size: 18px;
  color: var(--button-color);
}
.passview .password-control:hover { color: rgba(19, 130, 255, 1); }
.passview .password-control:after { content: '\e010'; }
.passview .password-control.view:after { content: '\e001'; }
.login svg {
  border-radius: 10px;
  box-shadow: 0px 0px 32px -2px rgba(0, 113, 255, 0.25);
}
.login .title {
  font-size: 16px;
  letter-spacing: -2%;
}
.login label {
  width: 100%;
  font-size: 12px;
}
.login input {
  width: 100%;
}
.login button {
  justify-content: center;
  width: 100%;
  height: 32px;
}

#captcha_code { 
  text-align: center;
}
/* ---SIDEBAR --- */

.sidebar {
  flex: 0 0 80px;
  height: calc(100% - 32px);
  display: flex;
  align-content: space-between;
  flex-direction: column;
  margin: 16px 0;
  padding: 16px 0;
}
.sidebar .header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0;
  padding: 1px;
}
.logo svg {
  border-radius: 6px;
  box-shadow: 0px 0px 32px -2px rgba(0, 113, 255, 0.55);
}
.sidebar .center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 16px;
}
.sidebar .menu {
  display: flex;
  flex: 1;
  align-content: space-between;
  align-items: center;
  flex-direction: column;
  background: #191A2B;
  border: 1px solid #252533;
  border-radius: 10px;
  padding: 14px 0;
  gap: 20px;
  font-size: 26px;
}
.sidebar .menu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(180deg, rgba(226, 238, 255, 0.5) 0%, rgba(164, 187, 221, 0.5) 94.12%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sidebar .menu a .icon:before { text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); }
.sidebar .menu a:hover .icon:before, .sidebar .menu a.active .icon:before { text-shadow: 0px 2px 12px rgba(255, 255, 255, 0.2); }
.sidebar .menu a:hover, .sidebar .menu a.active {
  background: linear-gradient(180deg, #E2EEFF 0%, #A4BBDD 94.12%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sidebar .menu a.active:after {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 2px;
  height: 16px;
  border-radius: 0 1px 1px 0;
  background: #0473FD;
  box-shadow: 0px 0px 12px 0px rgba(4, 115, 253, 1);
}
.sidebar .footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0;
}

/*--- dropmenu ---*/

.usermenu, .dropmenu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
}
.usermenu {
  background: #191A2B;
  border: 1px solid #252533;
}
.dropmenu {
  opacity: 0;
  font-size: 14px;
  font-weight: 300;
  color: var(--button-color);
  background: var(--button-bg);
  border: var(--input-border);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
}
.dropmenu:hover {
  background: rgba(44, 49, 77, 1);
  border: var(--input-border);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}
.dropmenu:active { background: rgba(36, 40, 64, 1); }
.table .row:hover .dropmenu { opacity: 1 }
.usermenu a, .dropmenu a {
  width: 100%;
  height: 24px;
  padding: 0 6px;
}
.usermenu .icon.icon-gear {
  font-size: 20px;
  width: 32px;
  height: 32px;
  background: linear-gradient(180deg, rgba(226, 238, 255, 0.5) 0%, rgba(164, 187, 221, 0.5) 94.12%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.usermenu .icon-gear:before { text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); }
.usermenu:hover .icon-gear, .usermenu.open .icon-gear { 
  background: linear-gradient(180deg, #E2EEFF 0%, #A4BBDD 94.12%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.usermenu:hover .icon-gear:before, .usermenu.open .icon-gear:before { text-shadow: 0px 2px 12px rgba(255, 255, 255, 0.2); }
.usermenu.open:after {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 2px;
  height: 16px;
  border-radius: 0 1px 1px 0;
  background: #0473FD;
  box-shadow: 0px 0px 12px 0px rgba(4, 115, 253, 1);
}
.usermenu ul, .dropmenu ul { 
  position: absolute;
  z-index: 100;
  min-width: 192px;
  display: none;
  backdrop-filter: blur(5px);
  background: rgba(41, 41, 61, 0.8);
  border: 1px solid rgba(37, 37, 51, 1);
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 8px;
  user-select: none;
  cursor: default;
}
.usermenu ul { top: auto; bottom: calc(100% + 6px); left: 0; }
.dropmenu ul { top: calc(100% + 6px); bottom: auto; right: 0; }
.last3 ul { top: auto; bottom: auto; right: calc(100% + 6px); }
.last2 ul { top: auto; bottom: auto; right: calc(100% + 6px); }
.last1 ul { top: auto; bottom: calc(100% + 6px); right: 0; }
.usermenu li, .dropmenu li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  border-radius: 4px;
  transition: 70ms ease;
  cursor: pointer;
}
.usermenu li:last-child, .dropmenu li:last-child { margin-bottom: 0; }
.usermenu a, .dropmenu a {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  color: var(--color);
}

.usermenu .icon, .dropmenu .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 15px;
}
.usermenu li:hover, .dropmenu li:hover { background: rgba(4, 115, 253, 1); }
.usermenu .logout:hover, .dropmenu .delete:hover { background: rgba(206, 55, 82, 1); }
.usermenu .logout a, .dropmenu .delete a { color: rgba(206, 55, 82, 1); }
.usermenu .logout:hover a, .dropmenu .delete:hover a { color: var(--color); }
.usermenu .submenu ul:after {
  position: absolute;
  content: '';
  top: 0;
  left: -5px;
  width: 4px;
  height: 100%;
}
.usermenu .submenu ul {
  width: 144px;
  top: 31px;
  bottom: auto;
  margin-left: 4px;
  left: calc(100% - 8px);
  z-index: 101;
}
.usermenu .submenu:hover ul { display: block; }

/* --- CONTENT --- */

.content {
  flex: 1;
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  margin: 16px 16px 16px 0;
  background: #191A2B;
  border: 1px solid #252533;
  border-radius: 12px;
  padding: 16px;
  gap: 16px;
}
.content .header {
  display: flex;
  flex: 0;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}
.content .header .category {
  display: flex;
  align-items: center;
  gap: 8px;
}
.content .header .category, .content .header .center, .content .header .options { width: 33.3333%; }
.content .header .category .title {
  display: flex;
  flex: 0;
  white-space: nowrap;
  align-items: center;
  background: rgba(29, 29, 49, 1);
  border: 1px solid rgba(37, 37, 51, 1);
  border-radius: 6px;
  height: 32px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
}
.content .header .category .arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.content .header .category .icon { font-size: 16px; }
.content .header .category .add-new .icon, .content .header .category .import .icon { margin-left: 6px; }
.content .header .category button { 
  height: 32px;
  padding-left: 12px;
  padding-right: 10px;
}
.content .header .center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .header .center input {
  width: 272px;
  padding-left: 34px;
  padding-right: 12px;
}
.content .header .search { position: relative; }
.content .header .search:before {
  font-family: 'Icons' !important;
  content: '\e003';
  font-size: 16px;
  color: var(--button-color);
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.content .header .options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.content .center, #inner_content {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content .center .table {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(37, 37, 51, 1);
  border-radius: 6px;
  height: 100%;
}
.table .row.head {
  height: 40px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(129, 131, 161, 1);
  background: rgba(0, 0, 0, 0.2);
}
.table .rows {
  display: block;
  height: 100%;
}
.table .row {
  display: flex;
  width: 100%;
  height: 48px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -2%;
  padding: 4px 16px;
  gap: 16px;
  border-bottom: 1px solid rgba(28, 28, 41, 1);
}
.table .rows .row:last-child { border-bottom: none; }
.table .rows .row:hover { background: rgba(29, 29, 49, 1); }
.table .rows .row {
  transition: 70ms ease;
}

/* --- size column --- */
.licenses .item_1 { width: 16.67%; }
.licenses .item_2 { width: 16.67%; }
.licenses .item_3 { width: 44.76%; }
.licenses .item_4 { width: 9.52%; justify-content: center; }
.licenses .item_5 { width: 9.52%; justify-content: center; }
.licenses .item_6 { width: 2.86%; }

.activation .item_1 { width: 16.99%; }
.activation .item_2 { width: 16.99%; }
.activation .item_3 { width: 16.99%; }
.activation .item_4 { width: 16.99%; }
.activation .item_5 { width: 9.71%; justify-content: center; }
.activation .item_6 { width: 9.71%; justify-content: center; }
.activation .item_7 { width: 9.71%; justify-content: center; }
.activation .item_8 { width: 2.91%; }

.products .item_1 { width: 87.96%; }
.products .item_2 { width: 9.26%; justify-content: center; }
.products .item_3 { width: 2.78%; }
.products .names { background: rgba(25, 26, 43, 1); border-bottom: 1px solid rgba(28, 28, 41, 1); }
.products .names .icon-cube { margin-right: 8px; font-size: 15px; }
.products .modes .arrow .icon { margin: 0 10px; font-size: 15px; }
.products .modes .mode .icon { margin-right: 10px; }
.products .row .title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.agents .item_1 { width: 48.61%; }
.agents .item_2 { width: 48.61%; }
.agents .item_3 { width: 2.78%; }

.users .item_1 { width: 43.91%; }
.users .item_2 { width: 43.91%; }
.users .item_3 { width: 9.33%; justify-content: center; }
.users .item_4 { width: 2.80%; }

.table .row .col:last-child { justify-content: flex-end; } 
.table .col { display: flex; align-items: center; }
.table .functional, .table .blocked {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 24px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 300;
}
.table .functional {
  color: rgba(107, 173, 255, 1);
  background: rgba(4, 115, 253, 0.05);
  border: 1px solid rgba(4, 115, 253, 0.25);
}
.table .blocked {
  color: rgba(206, 55, 82, 1);
  background: rgba(253, 52, 88, 0.05);
  border: 1px solid rgba(253, 52, 88, 0.25);
}

.table .no_result {
  position: relative;
  top: -32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  flex: 1;
}

.table .no_result .image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

.table .no_result .title {
  margin-top: 16px;
}
.table .no_result .descr {
  margin-top: 8px;
  font-weight: 200;
}

/* --- FOOTER --- */

.content .footer {
  display: flex;
  justify-content: space-between;
  flex: 0;
}
.footer .navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.footer .navigation button {
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.footer .navigation input {
  width: 56px;
  text-align: center;
}
.footer .navigation input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.footer .navigation input[type="number"]::-webkit-outer-spin-button,
.footer .navigation input[type="number"]::-webkit-inner-spin-button {
  display: none;
}
.footer .navigation .pages {
  font-size: 12px;
  color: rgba(129, 131, 161, 1);
  margin-left: 8px;
}
.footer .copy {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer .version, .footer .copyright {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 0 12px;
  border-radius: 4px;
  font-size: 12px;
  height: 24px;
}

.toast {
  position: absolute;
  right: 49px;
  bottom: 99px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.25);
  padding: 8px 8px 8px 12px;
  z-index: 9999;
}

.toast .icon { font-size: 16px; }
.toast .icon-cross { cursor: pointer; }
.toast .message {
  padding-right: 32px;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  transform: translateY(-50%);
  z-index: 9999;
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}