@charset "UTF-8";

@font-face {
  font-family: 'Manrope';
  src: url('/tml/fonts/Manrope/Manrope-Regular.ttf');
}

@font-face {
  font-family: 'Manrope';
  src: url('/tml/fonts/Manrope/Manrope-Bold.ttf');
  font-weight: 800;
}

:root {
  --color-primary: #2e2e2e;
  --color-secondary: #7c7979;
  --color-dark: #3e3e3e;
  --color-light: #b2b2b2;
  --color-light-hover: #d4d3d3;
  --color-table-text: #070707;
  --color-table-head: #f6f6f6;

  --color-primary-button: #5a81fa;
  --color-secondary-button: #f1f4fb;
  --color-secondary2-button: #8da8fc;
  --color-secondary3-button: #dfe6fe;
  --bg-color-toggle-button: #f6f8ff;
  --bg-color-toggle-active: #bfcefd;

  --bg-color-progress-bar: #d4d3d3;

  --bg-color-primary: #ffffff;
  --bg-color-secondary: #f2f2f2;
  --bg-color-secondary2: #f9f9f9;
  --bg-color-active: #f1f4fb;
  --bg-color-primary-page: #3e3e3e;
  --bg-color-icon: #7c7979;

  --border-color-primary: #e1e0e0;

  --c-error: #cb2500;
  --c-warning: #d16d15;
  --c-success: #006908;
  --c-info: #5a81fa;

  --bg-error: #ffe7e7;
  --bg-warning: #fff5e2;
  --bg-success: #d7f7c2;
  --bg-info: #d6defc;

  /* --c-palette-0:#D9D9D9;
  --c-palette-1:#FFCD56;
  --c-palette-2:#36A2EB;
  --c-palette-3:#4BC0C0;
  --c-palette-4:#9966FF;
  --c-palette-5:#FF6384; */

  --c-palette-0: #d9d9d9;
  --c-palette-1: #ed8e00;
  --c-palette-2: #3598db;
  --c-palette-3: #24b90a;
  --c-palette-4: #b524e8;
  --c-palette-5: #cf2020;
}

* {
  touch-action: none;
  user-select: none;
  font-family: 'Manrope';
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-color-secondary);
  touch-action: none;
}

.none,
.hidden {
  display: none !important;
}

.standname {
  color: var(--color-light-hover);
  font-size: 36px;
  font-weight: 600;
  text-align: center;
}

.standvers {
  color: var(--color-light-hover);
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}

.text-primary {
  color: var(--color-primary);
  font-size: 48px;
  font-weight: 600;
  padding-bottom: 20px;
}

.text-secondary {
  color: var(--color-secondary);
  font-size: 40px;
  font-weight: 500;
}

.ofline,
.loading {
  background-color: var(--bg-color-secondary);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading {
  flex-direction: column;
  /* background-color: hsla(0, 0%, 0%, 0.2); */
  gap: 10px;
  opacity: 0.9;
}

.loading svg {
  animation: imagePreloader 2s linear infinite;
}

@keyframes imagePreloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ofline-wrapper {
  width: 2880px;
  height: 1800px;
  background-color: var(--bg-color-secondary);
  display: flex;
  gap: 120px;
  flex-direction: column;
  position: relative;
}

.ofline-container1 {
  display: flex;
  height: 160px;
  justify-content: space-between;
}

.ofline-container2 {
  display: flex;
  height: 160px;
  justify-content: space-between;
  gap: 48px;
}

.ofline-container3 {
  display: flex;
  justify-content: center;
  height: 1212px;
}

.ofline-block1,
.ofline-block2,
.ofline-block3,
.ofline-block4,
.ofline-block5 {
  flex: 1;
}

.ofline-block1,
.ofline-block2 {
  background-color: var(--bg-color-secondary);
}

.ofline-block2 {
  text-align: right;
}

.ofline-block3,
.ofline-block4 {
  padding: 52px 68px 52px 68px;
  width: 1416px;
  height: 240px;
  border-radius: 48px;
  background-color: var(--bg-color-primary);
}

.ofline-block5 {
  flex: 1;
  padding: 80px;
  width: 2880px;
  height: 1212px;
  border-radius: 60px;
  background-color: var(--bg-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ofline .standname,
.ofline .standvers {
  color: var(--color-light) !important;
}

footer {
  height: 120px;
  background-color: var(--bg-color-secondary);
  color: var(--color-light-hover);
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.flex {
  display: flex !important;
}

.hr {
  width: 100%;
  height: 4px;
  background-color: var(--bg-color-secondary);
}

.text-secondary-24 {
  color: var(--color-secondary);
  font-size: 23px;
  font-weight: 500;
}

.text-secondary-32 {
  color: var(--color-secondary);
  font-size: 32px;
  font-weight: 500;
}

.text-secondary-36 {
  color: var(--color-secondary);
  font-size: 36px;
  font-weight: 500;
}

.text-secondary-40 {
  color: var(--color-secondary);
  font-size: 40px;
  font-weight: 500;
}

.text-primary-24 {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 600;
}

.text-primary-36 {
  color: var(--color-primary);
  font-size: 36px;
  font-weight: 600;
}

.text-primary-40 {
  color: var(--color-primary);
  font-size: 40px;
  font-weight: 600;
}

.text-primary-48 {
  color: var(--color-primary);
  font-size: 48px;
  font-weight: 600;
}

.text-primary-52 {
  color: var(--color-primary);
  font-size: 52px;
  font-weight: 600;
}

.text-primary-500-24 {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 500;
}

.text-primary-500-32 {
  color: var(--color-primary);
  font-size: 32px;
  font-weight: 500;
}

.text-primary-500-36 {
  color: var(--color-primary);
  font-size: 36px;
  font-weight: 500;
}

.text-primary-500-40 {
  color: var(--color-primary);
  font-size: 40px;
  font-weight: 500;
}

.text-primary-500-48 {
  color: var(--color-primary);
  font-size: 48px;
  font-weight: 500;
}

.animated-gradient {
  border: none !important;
  box-shadow: none !important;
  background: linear-gradient(
    90deg,
    var(--bg-color-secondary),
    var(--bg-color-secondary),
    var(--bg-color-secondary),
    var(--bg-color-secondary2),
    var(--bg-color-secondary),
    var(--bg-color-secondary),
    var(--bg-color-secondary)
  );
  background-size: 400% 400%;
  animation: gradientMove 3s ease infinite;
  transform: translate3d(0, 0, 0);
  color: transparent !important;
  border-radius: 10px;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient * {
  color: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

.animated-gradient svg {
  display: none !important;
}

.scrollable {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  touch-action: pan-y !important;
  direction: ltr;
  /*direction: rtl;*/
  -webkit-overflow-scrolling: touch;
}

.scrollable * {
  touch-action: pan-y !important;
}

.scrollable::-webkit-scrollbar {
  width: 8px;
}

.scrollable::-webkit-scrollbar-track {
  background-color: var(--bg-color-secondary);
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: var(--border-color-primary);
  border-radius: 1px;
  border: 1px solid var(--bg-color-primary);
}

.warning {
  color: var(--c-warning) !important;
  background-color: var(--bg-warning) !important;
}

.success {
  color: var(--c-success) !important;
  background-color: var(--bg-success) !important;
}

.error {
  color: var(--c-error) !important;
  background-color: var(--bg-error) !important;
}

.info {
  color: var(--c-info) !important;
  background-color: var(--bg-info) !important;
}

.c-warning {
  color: var(--c-warning) !important;
}

.c-success {
  color: var(--c-success) !important;
}

.c-error {
  color: var(--c-error) !important;
}

.c-info {
  color: var(--c-info) !important;
}

.bg-warning {
  background-color: var(--bg-warning) !important;
}

.bg-success {
  background-color: var(--bg-success) !important;
}

.bg-error {
  background-color: var(--bg-error) !important;
}

.bg-info {
  border-color: var(--bg-info) !important;
}

.bgc-warning {
  background-color: var(--c-warning) !important;
}

.bgc-success {
  background-color: var(--c-success) !important;
}

.bgc-error {
  background-color: var(--c-error) !important;
}

.bgc-info {
  background-color: var(--c-info) !important;
}

.bc-warning {
  border-color: var(--c-warning) !important;
}

.bc-success {
  border-color: var(--c-success) !important;
}

.bc-error {
  border-color: var(--c-error) !important;
}

.bc-info {
  border-color: var(--c-info) !important;
}

.c-palette-0 {
  background-color: var(--c-palette-0) !important;
}

.c-palette-1 {
  background-color: var(--c-palette-1) !important;
}

.c-palette-2 {
  background-color: var(--c-palette-2) !important;
}

.c-palette-3 {
  background-color: var(--c-palette-3) !important;
}

.c-palette-4 {
  background-color: var(--c-palette-4) !important;
}

.c-palette-5 {
  background-color: var(--c-palette-5) !important;
}

.castomModal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #00000033;
  z-index: 10;
}

.nowrap {
  white-space: nowrap;
}

.module-no-include {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.position-no-include {
  position: relative !important;
}

.text-center {
  text-align: center;
}

.capitalize {
  text-transform: capitalize;
}