@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');
@import url('../fontawesome/css/fontawesome.css');
@import url('../fontawesome/css/solid.css');
/* @import url('../fontawesome/css/light.css'); */

/*******************************************************************************

  SHELL STYLES

*******************************************************************************/

:root {
  --text-main: #000;
  --text-info: #666;
  --text-blue: #344F77;
  --text-red: #B4401C;
  --bg-body: #fff;
  --bg-header: #1F2D3B;
  --bg-menu: #EBECF3;
  --bg-menu-hover: #DCDFF0;
  --bg-button: #B4401C;
  --bg-button-gray: #DCDFF0;
  --bg-button-blue: #344F77;
  --bg-table-head: #EBECF3;
  --bg-table-border: #dBdCe3;
  --bg-table-filtered: #DCDFF0;
  --spacing-main: 20px;
  --input-border: #1F2D3B;
  --spacing-gap: 4px;
}

body, menu, dl, dt, dd, input, textarea, button, p, h1, h2, h3, h4, h5, li {
  margin: 0;
  padding: 0;
}
ul, ol, li, menu {
  list-style-type: none;
}
input, textarea, a {
  outline: none;
}
body {
  min-height: 100vh;
  background: var(--bg-body);
  color: var(--text-main);
}
body, input, textarea {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 14px;
}
m-box {
  min-height: 100vh;
  position: relative;
  display: block;
}

m-action {
  display: block;
  cursor: pointer;
}
m-action[disabled],
m-action.disabled {
  opacity: .2;
  filter: grayscale();
}
m-toggle {
  cursor: pointer
}
.inactive {
  display: none !important;
}

/* icons */
.icon {
  line-height: 20px;
}
.icon i {
  width: 20px;
  height: 20px;
  font-size: 10px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  line-height: 20px;
}
.icon span {
  display: inline-block;
  margin-left: 2px;
}
.icon.white {
  color: #fff;
}
.icon.blue {
  color: var(--text-blue);
}
.icon.red {
  color: var(--text-red);
}

/* button */
.button {
  cursor: pointer;
  display: block;
  height: 30px;
  padding: 0 15px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: var(--bg-button);
  white-space: nowrap;
  /* text-transform: uppercase; */
}
.button.gray {
  background-color: var(--bg-button-gray);
  color: var(--text-blue);
}
.button.blue {
  background-color: var(--bg-button-blue);
}

/* loader */
@keyframes changeOpacity {
  0% {
    background-color: rgba(255,255,255,0);
  }
  100% {
    background-color: rgba(255,255,255,0.6);
  }
}
@keyframes changeWidth {
  0% {
    width: 0;
    left: calc(50% - 50px);
  }
  50% {
    width: 100px;
    left: calc(50% - 50px);
  }
  100% {
    width: 0;
    left: calc(50% + 50px);
  }
}
m-box.loading:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  animation-duration: 1s;
  animation-name: changeOpacity;
  animation-fill-mode: forwards;
}
m-box.loading:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  height: 10px;
  z-index: 1001;
  border-radius: 5px;
  background-color: rgba(100,100,100,.2);
  animation-duration: 3s;
  animation-name: changeWidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/*******************************************************************************

	  MAGIC ELEMENTS STYLES

*******************************************************************************/

.field input,
.field textarea,
.field .input,
m-checkbox.field {
  display: block;
  outline: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  width: 100%;
  padding: 4px 10px;
  min-height: 30px;
  line-height: 20px;
  box-sizing: border-box;
  border-width: 0;
  border-radius: 0;
  transition: ease-in-out all 200ms;
  background-color: #fff;
  border: 1px solid var(--input-border);
  color: #111;
}
.field textarea:focus,
.field input:focus {
  background-color: #fff;
  color: #111;
}
.field textarea:placeholder,
.field input:placeholder {
  color: #666;
}
.field {
  display: block;
  position: relative;
  width: 100%;
}
.field menu {
  display: none;
  position: absolute;
  z-index: 3;
  min-width: 100%;
  word-wrap: break-word;
  background-color: #202026;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  max-height: 180px;
  overflow-y: auto;
  left: 0;
  margin: 0;
  padding: 0;
}
m-search.field:not(.multiple):before,
m-select.field:not(.multiple):before {
  content: "\f107";
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-family: 'Font Awesome 5 Pro';
  font-weight: 700;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  text-align: center;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #666;
  cursor: pointer;
}
.field.multiple li,
.field menu li {
  display: inline-block;
  cursor: pointer;
  outline: none;
  list-style-type: none;
  padding: 6px 10px;
  border-width: 0px;
  line-height: 1.5;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  margin: 0;
  color: #fff;
}
.field span {
  color: #999;
}
.field.multiple li.active,
.field menu li:hover,
.field menu li.hover {
  background-color: #404046;
  color: #da6983;
}
.field menu {
  display: none;
}
.field.active menu {
  display: block;
}
.field.multiple {
  height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
}
.field.multiple li:hover,
.field.multiple li.hover {
  color: #666;
}

/* CHECKBOX */
m-checkbox.field {
  width: auto;
  padding-left: 26px;
  background-color: transparent;
  display: inline-block;
  margin-right: 20px;
  line-height: 26px;
  min-height: 20px;
}
m-checkbox.field.inline {
  display: inline-block;
  width: auto;
}
m-checkbox.field:before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0px;
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  background-color: #fff;
}
m-checkbox.field.active:after {
  content: "";
  display: block;
  position: absolute;
  top: 9px;
  left: 4px;
  width: 8px;
  height: 8px;
  background-color: #111;
}

/* QUICK CHECKBOX */
m-checkbox.check {
  min-width: 20px;
  height: 20px;
  display: block;
  position: relative;
  line-height: 20px;
  color: #fff;
  cursor: pointer;
}
m-checkbox.check:before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #fff;
  box-sizing: border-box;
}
m-checkbox.check.active:after {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  background-color: #fff;
}
m-checkbox.check.right {
  padding-right: 30px;
}
m-checkbox.check.right:before {
  left: auto;
  right: 2px;
}
m-checkbox.check.right.active:after {
  left: auto;
  right: 6px;
}

/* SWITCH FIELD */
m-select.switch {
  display: flex;
}
m-select.switch li {
  flex-grow: 1;
  padding: 5px 10px;
  line-height: 20px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  color: #666;
  cursor: pointer;
  text-align: center;
  background-color: rgba(255,255,255,.1);
}
m-select.switch li.active {
  background-color: #fff;
  color: #111;
}

/* schedule field */
m-schedule {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
ms-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
ms-line {
  display: flex;
  gap: 5px;
}

/*******************************************************************************

	  SHELL STYLES

*******************************************************************************/

shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 65px 1fr;
  min-height: 100vh;
}

/* head */
s-head {
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-header);
  grid-column: 1 / 3;
  padding: 18px 40px;
}
sh-logo {
  width: 191px;
  height: 29px;
  background: url(../img/logo.png) no-repeat center center / contain;
}
sh-user {
  margin-top: 4px;
}

/* page styles */
s-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* menu */
s-menu {
  background-color: var(--bg-menu);
  padding: var(--spacing-main);
}
s-menu m-action {
  padding: 10px;
}
s-menu m-action.active:not(.skipped) {
  background-color: var(--bg-menu-hover);
}

/* submenu */
s-submenu {
  /* margin-left: 40px; */
}

/* body */
s-body {
  padding: var(--spacing-main);
}

/* title */
s-title {
  display: flex;
  justify-content: space-between;
}
st-text {
  line-height: 30px;
  font-size: 24px;
  font-weight: 300;
}
st-menu {
  display: flex;
  gap: 10px;
}

/* navigator */
s-navigator {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}

/* editor */
s-editor textarea {
  min-height: 300px !important;
}

/* preview */
s-preview {
  min-height: 300px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid var(--input-border);
}

/*******************************************************************************

	  TABLES STYLES

*******************************************************************************/

s-table {
  display: flex;
  flex-direction: column;
  /* margin-top: var(--spacing-main); */
}
st-head {
  display: grid;
  background-color: var(--bg-table-head);
  border: 1px solid var(--bg-table-head);
}
st-body {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-table-body);
  border: 1px solid var(--bg-table-border);
}
st-head st-cell {
  border-right: 1px solid var(--bg-table-head);
  position: relative;
}
st-body st-cell {
  border-right: 1px solid var(--bg-table-border);
}
st-head st-cell.filtered {
  background-color: var(--bg-table-filtered);
}
st-head st-cell:last-of-type,
st-body st-cell:last-of-type {
  border-right-width: 0;
}
st-line {
  display: grid;
  border-bottom: 1px solid var(--bg-table-border);
}
st-line:last-of-type {
  border-bottom-width: 0;
}
st-cell {
  line-height: 20px;
  padding: 5px;
  display: flex;
  gap: 10px;
}
st-line st-cell {
  overflow: hidden;
}

/* sorting */
.sorting {
  flex-grow: 1;
  user-select: none;
}
.sorting.asc:after,
.sorting.desc:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  margin-left: 5px;
  line-height: 20px;
}
.sorting.asc:after {
  content: "\f0d8";
}
.sorting.desc:after {
  content: "\f0d7";
}

/* filters */
st-cell menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 31px;
  left: 0;
  right: 0;
  box-shadow: 0 4px 4px rgb(0 0 0 / 10%)
}
st-cell:hover menu {
  display: flex;
}

/* editable cells */
st-cell.editable {
  padding: 0;
  /* overflow: hidden; */
}
st-cell m-field {
  flex-grow: 1;
}
st-cell m-field input {
  width: 100%;
  height: 100%;
  line-height: 20px;
  padding: 5px;
  border-width: 0;
  box-sizing: border-box;
  background-color: transparent;
}

/* tables columns config */
s-table.groups st-head,
s-table.groups st-line {
  grid-template-columns: 60px repeat(4, 1fr) 160px;
}

s-table.groupProfiles st-head,
s-table.groupProfiles st-line {
  grid-template-columns: repeat(3, 1fr) 90px;
}

s-table.mailSchedule st-head,
s-table.mailSchedule st-line {
  grid-template-columns: 60px repeat(3, 1fr) 160px;
}

s-table.mailTemplates st-head,
s-table.mailTemplates st-line {
  grid-template-columns: 60px repeat(4, 1fr) 160px;
}

s-table.mailHistory st-head,
s-table.mailHistory st-line {
  grid-template-columns: 60px repeat(5, 1fr);
}

s-table.reports st-head,
s-table.reports st-line {
  grid-template-columns: 60px repeat(3, 1fr) 150px 160px;
}

s-table.clients st-head,
s-table.clients st-line {
  grid-template-columns: 60px repeat(3, 1fr) 160px;
}

s-table.employees st-head,
s-table.employees st-line {
  grid-template-columns: 60px repeat(3, 1fr) 160px;
}

s-table.clientLogs st-head,
s-table.clientLogs st-line {
  grid-template-columns: 60px 1fr 160px 160px 0px;
}

/*******************************************************************************

	  MODAL STYLES

*******************************************************************************/

/* MODAL */
modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background-color: rgba(20,20,20,.8);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
m-root {
  position: absolute;
  min-width: 320px;
  display: flex;
  flex-direction: column;
}
m-head {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  background-color: #2C2C33;
}
m-body {
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  background-color: #444448;
}
mb-actions {
  padding: 20px 0 10px;
  display: flex;
  justify-content: center;
}

/* MODAL */
s-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: block;
  z-index: 10000;
  background-color: rgba(20,20,20,.8);
  /* align-items: center;
  justify-content: space-around; */
}
sm-root {
  display: flex;
  position: absolute;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
}
sm-head {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  background-color: #1F2D3B;
  line-height: 20px;
  font-weight: 700;
  font-size: var(--font-large);
  color: #fff;
}
sm-body {
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ddd;
}
sm-foot {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
sm-message {
  text-align: center;
  padding-top: 20px;
}
sm-actions {
  padding: 20px 0 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
s-modal s-form {
  grid-template-columns: 1fr;
}

/*******************************************************************************

  FORM STYLES

*******************************************************************************/

s-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* field */
s-field {
  display: flex;
  gap: 10px;
}
sf-label {
  width: 160px;
  line-height: 30px;
}
sf-value {
  width: 320px;
}

/* combo field */
s-combo {
  display: flex;
}
s-combo m-select.field {
  width: 400px;
}

/*******************************************************************************

  SIGNIN STYLES

*******************************************************************************/

s-signin {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-header);
}
ss-root {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 360px;
  padding: 20px;
  background-color: rgba(255,255,255,.06);
}
ss-logo {
  width: 100%;
  height: 29px;
  background: url(../img/logo.png) no-repeat center center / contain;
}
ss-qr {
  display: flex;
  justify-content: center;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px 0;
}
ss-body {
  margin-top: 20px;
}
ss-foot {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/*******************************************************************************

  ADAPTIVE STYLES

*******************************************************************************/

@media all and (max-width: 1600px) {
}

@media all and (max-width: 1200px) {
}

@media all and (max-width: 600px) {
}