* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

a {
  color: #333;
  text-decoration: none;
}

button {
  cursor: pointer;
  transition-duration: 0.3s;
}

ul,
ol {
  padding: 1rem 1rem 1rem 2.5rem;
}

html {
  font-size: 16px;
  margin: 0;
}

body {
  font-family: "Roboto", sans-serif;
  color: #333;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

#layout {
  display: grid;
  grid-template-areas: "logo header" "nav main";
  grid-template-columns: 12rem 1fr;
  grid-template-rows: auto 1fr;
  gap: 1px;
  width: 100%;
  height: 100dvh;
  background-color: rgb(229, 231, 235);
}
#layout > * {
  min-width: 0;
  min-height: 0;
}
#layout #logo {
  grid-area: logo;
  padding: 0.75rem 1rem;
  background-color: rgb(249, 250, 251);
  text-align: center;
  display: grid;
  align-items: center;
}
#layout #logo a {
  display: flex;
  gap: 0.5rem;
}
#layout #logo a img {
  height: 1.75rem;
}
#layout #logo a h2 {
  font-size: 1rem;
  line-height: 1.75;
}
#layout #header {
  grid-area: header;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: white;
}
#layout #header .page__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#layout #header .page__title h1 {
  font-size: 1.125rem;
  font-weight: 700;
}
#layout #header .page__title p {
  font-size: 1rem;
  color: #666;
}
#layout #header .user-profile {
  margin-left: auto;
}
#layout #header .functions {
  display: flex;
  gap: 1rem;
}
#layout #header .functions a {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: #333;
  text-decoration: none;
  background-color: white;
}
#layout #header .functions a:hover, #layout #header .functions a.active {
  background-color: rgb(229, 231, 235);
}
#layout #header .functions form button {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 1.125rem;
}
#layout #header .functions form button:hover {
  background-color: #04244b;
  color: white;
}
#layout #header .functions form button.btn-logout {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}
#layout #nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  align-content: start;
  padding: 0.25rem;
  background-color: rgb(249, 250, 251);
  overflow: auto;
}
#layout #nav::-webkit-scrollbar {
  width: 0.375rem;
}
#layout #nav::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 0.5rem;
}
#layout #nav::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
#layout #nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#layout #nav ul li:hover, #layout #nav ul li.active {
  background-color: rgba(0, 123, 252, 0.1);
}
#layout #nav ul li:hover a, #layout #nav ul li.active a {
  color: rgb(0, 123, 252);
}
#layout #nav ul li a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #333;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}
#layout #main {
  grid-area: main;
  background-color: white;
  padding: 1rem;
  overflow: auto;
}
#layout #main::-webkit-scrollbar {
  width: 0.375rem;
}
#layout #main::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 0.5rem;
}
#layout #main::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

.btn-link {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: #333;
  text-decoration: none;
  background-color: white;
  border: 1px solid #ccc;
}
.btn-link:hover, .btn-link.active {
  background-color: rgb(229, 231, 235);
}

.sec-links {
  display: flex;
  flex-wrap: wrap;
}
.sec-links .link {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: #333;
  text-decoration: none;
  background-color: white;
  border: 1px solid #ccc;
}
.sec-links .link:hover, .sec-links .link.active {
  background-color: rgb(229, 231, 235);
}

.function__group {
  display: grid;
  gap: 2rem;
}
.function__group header {
  padding: 1rem;
}
.function__group header h3 {
  font-size: 1.375rem;
  font-weight: 700;
}
.function__group .function__wrapper {
  padding: 0 1rem;
}
.function__group .function__wrapper.function__wrapper-flex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.function__group .function__wrapper a {
  display: flex;
  font-size: 1.25rem;
  line-height: 2.5rem;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.12);
  border-radius: 0.25rem;
  padding: 0 1.25rem;
}
.function__group .function__wrapper a:hover, .function__group .function__wrapper a.active {
  background-color: rgb(229, 231, 235);
}

.grid__functions {
  padding: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.grid__functions button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid #ccc;
  background-color: white;
}
.grid__functions button:hover, .grid__functions button.active {
  background-color: #04244b;
  color: white;
}
.grid__functions input {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}
.grid__functions label {
  font-size: 1rem;
  font-weight: 700;
}
.grid__functions .btn-link {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid #ccc;
  background-color: white;
}
.grid__functions .btn-link:hover, .grid__functions .btn-link.active {
  background-color: #04244b;
  color: white;
}
.grid__functions .grid__message {
  font-size: 1rem;
  font-weight: 700;
}

.grid__orders {
  --grid-column-count: 20;
  position: relative;
  display: grid;
  -moz-column-gap: 2px;
       column-gap: 2px;
  border: 1px solid #ccc;
}
.grid__orders .data__message {
  padding: 2rem 4rem;
  grid-column: 1/-1;
}
.grid__orders .grid__header {
  display: grid;
  grid-column: span var(--grid-column-count);
  grid-template-columns: subgrid;
  position: sticky;
  top: 0;
  z-index: 1;
}
.grid__orders .grid__header > * {
  background-color: #f1f1f1;
  padding: 0.625rem 1.625rem;
}
.grid__orders .grid__header > * h3 {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
.grid__orders .grid__content {
  display: grid;
  grid-column: span var(--grid-column-count);
  grid-template-columns: subgrid;
  align-content: start;
  height: calc(100dvh - 12.5rem);
  overflow: auto;
}
.grid__orders .grid__content::-webkit-scrollbar {
  width: 10px;
}
.grid__orders .grid__content::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}
.grid__orders .grid__content::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
.grid__orders .grid__content article {
  display: grid;
  grid-column: span var(--grid-column-count);
  grid-template-columns: subgrid;
  align-items: start;
}
.grid__orders .grid__content article:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.grid__orders .grid__content article:hover {
  background-color: #f9f9f9;
}
.grid__orders .grid__content article > * {
  padding: 0.625rem 1.625rem;
}
.grid__orders .grid__content article .item__col {
  position: relative;
  display: grid;
}
.grid__orders .grid__content article .item__col.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0;
}
.grid__orders .grid__content article .item__col:hover .item__col__actions {
  display: block;
}
.grid__orders .grid__content article .item__col > div:first-child {
  min-height: 1.5rem;
}
.grid__orders .grid__content article .item__col .item__col__actions {
  display: none;
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
}
.grid__orders .grid__content article .item__col .item__col__actions svg {
  width: 0.75rem;
}
.grid__orders .grid__content article .item__col__functions {
  justify-items: start;
  align-items: start;
}
.grid__orders .grid__content article button {
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid #ccc;
  background-color: white;
  text-wrap: nowrap;
}
.grid__orders .grid__content article button:hover {
  background-color: #04244b;
  color: white;
}

.edit-form {
  display: grid;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  -o-border-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) 1;
     border-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) fill 1;
  z-index: 9999;
}
.edit-form .form__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.edit-form .form__wrapper {
  display: grid;
  gap: 1rem;
  background-color: #fff;
  padding: 1rem;
  border-radius: 5px;
  z-index: 1;
  width: min(100%, 32rem);
}
.edit-form .form__wrapper .edit__col {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: center;
  font-size: 1.125rem;
}
.edit-form .form__wrapper .edit__col h3 {
  font-weight: 700;
  text-align: center;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: #000;
  grid-column: 1/-1;
}
.edit-form .form__wrapper .edit__col label {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
}
.edit-form .form__wrapper .edit__col input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.125rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}
.edit-form .form__wrapper .edit__col .checkbox__group {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  padding: 0.5rem;
}
.edit-form .form__wrapper .edit__col .checkbox__group label {
  margin-right: 1.25rem;
  cursor: pointer;
}
.edit-form .form__wrapper .edit__col .radio__group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem;
}
.edit-form .form__wrapper .edit__col .radio__group .radio__option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.125rem;
}
.edit-form .form__wrapper .edit__col .radio__group label {
  margin-right: 1.25rem;
  cursor: pointer;
}
.edit-form .form__wrapper .edit__col textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.125rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}
.edit-form .form__wrapper .form__actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}
.edit-form .form__wrapper .form__actions button {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid #ccc;
  background-color: white;
}
.edit-form .form__wrapper .form__actions button:hover, .edit-form .form__wrapper .form__actions button.active {
  background-color: #04244b;
  color: white;
}

.form__wrapper {
  padding: 1rem;
}
.form__wrapper .form__fields {
  display: grid;
  gap: 1rem;
}
.form__wrapper .form__fields .form__field {
  display: grid;
  gap: 0.5rem;
}
.form__wrapper .form__fields .form__field .label {
  font-size: 1.125rem;
  line-height: 2rem;
  font-weight: 700;
}
.form__wrapper .form__fields .form__field .input {
  width: 100%;
}
.form__wrapper .form__fields .form__field input,
.form__wrapper .form__fields .form__field textarea {
  font-size: 1.125rem;
  line-height: 2rem;
  width: 100%;
  border-radius: 0.375rem;
  padding: 0.75rem;
}
.form__wrapper .form__fields .form__field textarea {
  resize: block;
}
.form__wrapper .form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.form__wrapper .form__actions input,
.form__wrapper .form__actions button,
.form__wrapper .form__actions a {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
  padding: 0.75rem 2.5rem;
  border: 1px solid #000;
  border-radius: 0.375rem;
  transition-duration: 0.3s;
}
.form__wrapper .form__actions input.btn-primary,
.form__wrapper .form__actions button.btn-primary,
.form__wrapper .form__actions a.btn-primary {
  color: #000000;
  background-color: #ffffff;
  cursor: pointer;
}
.form__wrapper .form__actions input:hover,
.form__wrapper .form__actions button:hover,
.form__wrapper .form__actions a:hover {
  filter: brightness(1.2);
  background-color: #c6c6c6;
  border-color: transparent;
}

.layout-empty .fields-container {
  max-height: 100%;
}

.fields-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0.5rem;
  max-height: calc(100vh - 8.5rem);
  overflow: auto;
}
.fields-container .fields-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.fields-container .fields-wrapper.full-width {
  grid-column: 1/-1;
}
.fields-container .fields-wrapper .fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.fields-container .fields-wrapper .fields.border {
  background-color: #f4f4f4;
  padding: 1rem;
  border-radius: 1rem;
}
.fields-container .fields-wrapper .fields.full-width {
  grid-column: 1/-1;
}
.fields-container .fields-wrapper .fields .field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem;
  align-content: start;
}
.fields-container .fields-wrapper .fields .field.full-width {
  grid-column: 1/-1;
}
.fields-container .fields-wrapper .fields .field .header {
  margin: 1rem 0 0;
  color: rgb(32, 169, 211);
  font-size: 1.375rem;
  font-weight: 700;
}
.fields-container .fields-wrapper .fields .field .label label {
  display: inline-block;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.fields-container .fields-wrapper .fields .field .input input[type=text],
.fields-container .fields-wrapper .fields .field .input input[type=email],
.fields-container .fields-wrapper .fields .field .input input[type=password] {
  width: 100%;
}
.fields-container .fields-wrapper .fields .field .input textarea {
  width: 100%;
}
.fields-container .fields-wrapper .fields .field > span {
  color: #ff3333;
}
.fields-container .fields-wrapper .fields .field textarea {
  padding: 1rem;
}
.fields-container .actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.fields-container .actions .btn,
.fields-container .actions a {
  line-height: 3rem;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.popup__window {
  display: none;
  position: fixed;
  z-index: 1000;
  place-items: center;
  inset: 0;
  resize: both;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup__window .popup__wrapper {
  position: relative;
  width: min(100%, 80rem);
  height: min(90dvh, 80rem);
  padding: 2rem;
  z-index: 1001;
  background-color: white;
}
.popup__window .popup__wrapper .close {
  content: "X";
  position: absolute;
  top: 0;
  right: 0.5rem;
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, 0.35);
  background: none;
  border: none;
  font-size: 3rem;
  text-align: center;
  cursor: pointer;
}
.popup__window .popup__wrapper .close:hover {
  color: rgb(0, 0, 0);
}
.popup__window .popup__wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.k-grid-content {
  height: calc(100vh - 296px) !important;
}

.grid-thumbnail {
  height: 3.75rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.k-grid .k-input {
  font-size: 0.875rem;
}
.k-grid .k-edit-cell {
  padding: 0.5rem;
  white-space: nowrap;
}
.k-grid .k-edit-cell textarea.k-textarea {
  width: 100%;
}
.k-grid .k-grid-edit-row td {
  padding: 0.625rem 1.5rem;
}
.k-grid .k-command-cell .k-button {
  padding: 0.5rem 0.25rem;
}
.k-grid .k-grid-toolbar .changed {
  animation: color-change-2x 2s linear infinite both;
  color: #fff;
}
.k-grid .k-grid-toolbar .changed:hover {
  animation-play-state: paused;
}
.k-grid .k-grid-toolbar .k-textbox {
  width: auto;
}

textarea.k-textarea {
  width: auto;
}

.image-preview {
  position: relative;
  vertical-align: top;
  max-width: 240px;
}

.current-image {
  position: relative;
  vertical-align: top;
  display: inline-block;
  margin: 16px 16px 16px 0;
  height: 120px;
}

.multiline-text {
  white-space: pre-line;
}

@keyframes color-change-2x {
  0% {
    outline-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    outline-color: rgb(63, 81, 181);
    background: rgb(63, 81, 181);
  }
}
@keyframes ping {
  0% {
    transform: scale(0.2);
    opacity: 0.8;
  }
  80% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
.k-textbox {
  width: 100%;
}

.k-filemanager-listview .k-listview-item {
  padding: 16px 16px;
  width: 120px;
  height: auto;
  text-align: center;
}

.k-filemanager-listview .k-file-name {
  margin-top: 8px;
  display: block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.page-login {
  display: grid;
  align-items: center;
  width: 100%;
  min-height: 100dvh;
}
.page-login .box-login {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  box-shadow: 0 0 1rem rgba(4, 36, 75, 0.2);
}
.page-login .box-login header {
  padding: 1rem;
  background-color: white;
  text-align: center;
}
.page-login .box-login header h1 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.page-login .box-login header p {
  font-size: 1rem;
  color: #666;
}
.page-login .box-login .form-group {
  padding: 0.5rem 1rem;
  background-color: white;
  display: grid;
  gap: 1rem;
}
.page-login .box-login .form-group input {
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  width: 100%;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.75rem;
}
.page-login .box-login .form-actions {
  padding: 1rem;
  background-color: white;
  display: grid;
  gap: 1rem;
}
.page-login .box-login .form-actions .btn-action {
  border: none;
  border-radius: 0.25rem;
  background-color: #333;
  color: white;
  width: 100%;
  display: block;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.75rem;
}
.page-login .box-login .form-actions .btn-action:hover {
  background-color: rgb(4, 36, 75);
}

.page__support-orders__index {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}/*# sourceMappingURL=style.css.map */