body {
  background-color: #fff;
  font-family: 'Poppins', sans-serif;
}

.app-footer {
  background-color: #f3f2f0;
}

/* fonts and colors */
h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  font-weight: 100;
  color: #564e44;
}

h4 {
  font-size: 15pt;
  padding-bottom: 15px;
  color: #00b1d2;
}

h4 > small {
  display: block;
  font-size: 9pt;
  color: #bbb;
  margin-top: 3px;
}

.bg-empty {
  background-color: #eee !important;
  border: 1px solid #ddd;
}

.text-brand {
  color: #516440;
}
.bg-brand {
  background-color: #fff !important;
  border: 3px dotted #00b1d2;
}

/* header classes */
.app-sidebar-logo {
  background-color: #fffefc;
}
[data-kt-app-layout='dark-sidebar'] .app-sidebar .app-sidebar-logo {
  border-bottom: 0px;
  border-right: 1px solid #e1d6c2;
}

.app-sidebar-menu {
  background-color: #fffefc;
  border-right: 1px solid #e1d6c2;
}

.app-header {
  background-color: #fff;
  box-shadow: none;
}

.app-navbar .app-navbar-item .btn {
  background-color: #d99f00;
}
.app-navbar .app-navbar-item .btn i {
  color: #fff;
  font-size: 20px;
}
.app-navbar .app-navbar-item .dropdown-menu {
  padding: 0;
}

.app-navbar .app-navbar-item .dropdown-menu .dropdown-header {
  background-color: #88a3cf;
  color: #fff;
  padding: 15px 20px;
  font-size: 12pt;
  font-weight: bold;
}

.app-header-menu .menu > .menu-item.here > .menu-link .menu-title {
  /* font-weight: 100; */

  color: red;
}

.app-navbar .app-navbar-item .btn {
  background-color: transparent;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: #726A61;
    font-size: 15px;
    font-weight: 400;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {

    color: #726A61;
}

/* sidebar menu item hover */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:hover {

    background-color: #e8e4de;
    /* border-radius: 5px; */
    color :#726A61
}

[data-kt-app-layout='dark-sidebar']
  .app-sidebar
  .menu
  .menu-item.hover:not(.here)
  > .menu-link:not(.disabled):not(.active):not(.here)
  .menu-title,
[data-kt-app-layout='dark-sidebar']
  .app-sidebar
  .menu
  .menu-item:not(.here)
  .menu-link:hover:not(.disabled):not(.active):not(.here)
  .menu-title,
[data-kt-app-layout='dark-sidebar']
  .app-sidebar
  .menu
  .menu-item:not(.here)
  .menu-link:hover:not(.disabled):not(.active):not(.here)
  i {
  color: #726a61;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, 
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: #726A61;
}

[data-kt-app-layout='dark-sidebar'] .app-sidebar .menu .menu-group {
  margin: 30px 10px 10px 15px;
}
[data-kt-app-layout='dark-sidebar']
  .app-sidebar
  .menu
  .menu-group
  .menu-heading {
  color: #b39966 !important;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
}

@media (min-width: 992px) {
  .app-header-menu .menu > .menu-item.here > .menu-link {
    background-color: #d99f00;
  }

  .app-header-menu .menu > .menu-item.here > .menu-link .menu-title {
    color: #fff;
  }
}

.symbol .symbol-label.user-avatar {
    color: #fff;
    background-color: #B39966;
}

/* sidebar classes */
[data-kt-app-layout='dark-sidebar']
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active {
  background-color: #88a3cf;
}

.menu-item .menu-link .menu-bullet {
  margin-right: 0.7rem;
}

.menu-subheading {
  font-size: 8pt;
  font-weight: 600;
  margin-top: 20px;
}

.menu-item .menu-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* cursor */
.cursor-not-allowed {
  cursor: not-allowed;
}

/* main window */
.app-main {
  background-color: #f3f2f0;
}

body:not([data-kt-app-toolbar-fixed='true']) .app-toolbar {
  background-color: #fff;
}

/* data tables */
.table td,
.table tr {
  border-bottom: 1px solid #ddd;
}

.table tr:first-child {
  border-bottom: 1px solid #999;
}

.table tr:last-child {
  border-bottom: 1px solid #999;
}

.table thead tr th {
  font-weight: 800;
}

div.dataTables_wrapper div.dataTables_filter label {
  padding-bottom: 20px;
}

div.dataTables_wrapper div.dataTables_info {
  padding: 20px 10px 10px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 20px 10px 10px;
}

/* data table - sorting icon */
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:after {
    opacity:0.8;
}

/* flatpickr - selected */
.flatpickr-innerContainer .flatpickr-rContainer .selected {
  background-color: var(--tertiary-900) !important;
  border: none !important;
}
/* forms */
.form-label {
  font-size: 10pt;
  font-weight: 700;
  color: #111;
}

.form-label small {
  font-size: 8pt;
  font-weight: 700;
}

.form-select:disabled {
  color: var(--bs-gray-700) !important;
  background-color: #f8f7f5 !important;
  border-color: var(--kt-input-disabled-border-color) !important;
}

.input-group-text,
.input-group-text i {
  color: #555;
  background-color: #ebeae8;
}

.form-tooltip i {
  color: #ffb726;
}

.tooltip {
  --bs-tooltip-bg: var(--inverse-background, #000);
}
.tooltip-inner {
    font-size: 12px;
    text-align: left;
    color: var(--on-inverse-background);
    padding: 4px 8px;
    max-width: unset;
}

/* File Select */
.fileselect {
    border: 1px solid #ccc;
    cursor:pointer;
    width: 100%;
    padding: 10px;
    background-color: #f3f3f3;
  }
  
  .fileselect label {
    font-size: 11pt;
    cursor:pointer;
  }

  .fileselect label small {
    font-size: 9pt;
    display:block;
    cursor:pointer;
    color: #777;
  }
  
  .fileselection {
    border: 2px dashed #ccc;
    cursor:pointer;
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    background-color: #fff;
    text-align: center;
    font-size: 9pt;
    display:none;
  }
  
  .fileselection i {
    display: block;
    font-size: 30pt;
    color: #ccc;
    margin-bottom: 5px;
  }
  
  .fileselection label {
    font-size: 9pt;
    cursor:pointer;
    color: #888;
  }
  
  .fileselection ul li {
    display: inline-block;
    margin: 0 auto;
  }
  
  .fileselection .fileOverLimit {
    font-size: 9pt;
    display: block;
  }
  .fileselection .fileOverLimit i {
    display: inline-block;
    font-size: 11pt;
  }
  
  .fileselectionBtn {
    font-size: 9pt;
    padding: 7px 7px 5px;
    position: relative;
    right: 7px;
    top: -40px;
    float:right;
  }

/* scrolltop */
.scrolltop {
  background-color: #333;
}

/***** page specific *****/
/* app serial */
.serialExtensionFields h5 {
  font-size: 11pt;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.dropdown-toggle::after {
  content: none;
}

/* wk: colors */
:root {
    --primary-900: #86734C;
    --primary-800: #8F7A52;
    --primary-700: #988257;
    --primary-600: #A18A5C;
    --primary-500: #B39966;
    --primary-400: #C2AD85;
    --primary-300: #D1C2A3;
    --primary-200: #E1D6C2;
    --primary-100: #F0EBE0;
  
    --primary-opacity-8: #B3996614;
    --primary-opacity-16: #B3996629;
    --primary-opacity-24: #B399663D;
    --primary-opacity-32: #B3996652;
    --primary-opacity-40: #B3996666;
    --primary-opacity-48: #B399667A;
  
    --secondary-900: #564E44;
    --secondary-800: #726A61;
    --secondary-700: #9A8C79;
    --secondary-600: #A99D8C;
    --secondary-500: #B7ADA0;
    --secondary-400: #C5BDB3;
    --secondary-300: #D4CDC5;
    --secondary-200: #E2DED9;
    --secondary-100: #F8F7F5;
  
    --secondary-opacity-8: #6F5B4014;
    --secondary-opacity-16: #6F5B4029;
    --secondary-opacity-24: #6F5B403D;
    --secondary-opacity-32: #6F5B4052;
    --secondary-opacity-40: #6F5B4066;
    --secondary-opacity-48: #6F5B407A;
    --secondary-m-hover: #6F5B400A;
    --secondary-t-striped: #FAF9F6;

    --tertiary-900: #3D4B30;
    --tertiary-800: #415033;
    --tertiary-700: #455536;
    --tertiary-600: #495A3A;
    --tertiary-500: #516440;
    --tertiary-400: #748366;
    --tertiary-300: #97A28C;
    --tertiary-200: #B9C1B3;
    --tertiary-100: #DCE0D9;
  
    --tertiary-opacity-8: #51644014;
    --tertiary-opacity-16: #51644029;
    --tertiary-opacity-24: #5164403D;
    --tertiary-opacity-32: #51644052;
    --tertiary-opacity-40: #51644066;
    --tertiary-opacity-48: #5164407A;

    --neutral-900: #000000;
    --neutral-800: #202020;
    --neutral-700: #404040;
    --neutral-600: #606060;
    --neutral-500: #808080;
    --neutral-400: #9F9F9F;
    --neutral-300: #BFBFBF;
    --neutral-200: #DFDFDF;
    --neutral-100: #FFFFFF;
  
    --green-900: #258225;
    --green-800: #288A28;
    --green-700: #2A982A;
    --green-600: #2D9C2D;
    --green-500: #32AD32;
    --green-400: #5BBD5B;
    --green-300: #84CE84;
    --green-200: #ADDEAD;
    --green-100: #D6EFD6;
  
    --green-opacity-8: #32AD3214;
    --green-opacity-16: #32AD3229;
    --green-opacity-24: #32AD323D;
    --green-opacity-32: #32AD3252;
    --green-opacity-40: #32AD3266;
    --green-opacity-48: #32AD327A;
  
    --red-900: #AE3737;
    --red-800: #BA3A3A;
    --red-700: #C53E3E;
    --red-600: #D14242;
    --red-500: #E84949;
    --red-400: #ED6D6D;
    --red-300: #F19292;
    --red-200: #F6B6B6;
    --red-100: #FADBDB;
  
    --red-opacity-8: #E8494914;
    --red-opacity-16: #E8494929;
    --red-opacity-24: #E849493D;
    --red-opacity-32: #E8494952;
    --red-opacity-40: #E8494966;
    --red-opacity-48: #E849497A;
  
    --orange-900: #BF7732;
    --orange-800: #CC7F36;
    --orange-700: #D98739;
    --orange-600: #E68F3C;
    --orange-500: #FF9F43;
    --orange-400: #FFB269;
    --orange-300: #FFC58E;
    --orange-200: #FFD9B4;
    --orange-100: #FFECD9;
  
    --orange-opacity-8: #FF9F4314;
    --orange-opacity-16: #FF9F4329;
    --orange-opacity-24: #FF9F433D;
    --orange-opacity-32: #FF9F4352;
    --orange-opacity-40: #FF9F4366;
    --orange-opacity-48: #FF9F437A;
  
    --blue-900: #377EBF;
    --blue-800: #3B86CC;
    --blue-700: #3F8FD9;
    --blue-600: #4398E6;
    --blue-500: #4AA8FF;
    --blue-400: #6EB9FF;
    --blue-300: #92CBFF;
    --blue-200: #B7DCFF;
    --blue-100: #DBEEFF;
    
    --blue-opacity-8: #4AA8FF14;
    --blue-opacity-16: #4AA8FF29;
    --blue-opacity-24: #4AA8FF3D;
    --blue-opacity-32: #4AA8FF52;
    --blue-opacity-40: #4AA8FF66;
    --blue-opacity-48: #4AA8FF7A;
  
    --magenta-900: #B24C7F;
    --magenta-800: #BE5288;
    --magenta-700: #CB5791;
    --magenta-600: #D75C99;
    --magenta-500: #EE66AA;
    --magenta-400: #F185BB;
    --magenta-300: #F5A3CC;
    --magenta-200: #F8C2DD;
    --magenta-100: #FCE0EE;
  
    --magenta-opacity-8: #EE66AA14;
    --magenta-opacity-16: #EE66AA29;
    --magenta-opacity-24: #EE66AA3D;
    --magenta-opacity-32: #EE66AA52;
    --magenta-opacity-40: #EE66AA66;
    --magenta-opacity-48: #EE66AA7A;
  
    --purple-900: #564DB4;
    --purple-800: #5C52C0;
    --purple-700: #5E53C6;
    --purple-600: #685DD8;
    --purple-500: #7367F0;
    --purple-400: #8F85F3;
    --purple-300: #ABA4F6;
    --purple-200: #C7C2F9;
    --purple-100: #E3E1FC;
  
    --purple-opacity-8: #7367F014;
    --purple-opacity-16: #7367F029;
    --purple-opacity-24: #7367F03D;
    --purple-opacity-32: #7367F052;
    --purple-opacity-40: #7367F066;
    --purple-opacity-48: #7367F07A;
  
    --yellow-900: #997301;
    --yellow-800: #B88A01;
    --yellow-700: #D7A101;
    --yellow-600: #F5B801;
    --yellow-500: #FECC36;
    --yellow-400: #FED65E;
    --yellow-300: #FEE086;
    --yellow-200: #FFEBAF;
    --yellow-100: #FFF5D7;
  
    --yellow-opacity-8: #FECC3614;
    --yellow-opacity-16: #FECC3629;
    --yellow-opacity-24: #FECC363D;
    --yellow-opacity-32: #FECC3652;
    --yellow-opacity-40: #FECC3666;
    --yellow-opacity-48: #FECC367A;

    --gray-900: #2C2C2C;
    --gray-800: #424242;
    --gray-700: #575757;
    --gray-600: #6D6D6D;
    --gray-500: #838383;
    --gray-400: #989898;
    --gray-300: #ACACAC;
    --gray-200: #C1C1C1;
    --gray-100: #D6D6D6;

    --brown-900: #86734C;
    --brown-800: #8F7A52;
    --brown-700: #988257;
    --brown-600: #A18A5C;
    --brown-500: #B39966;
    --brown-400: #C2AD85;
    --brown-300: #D1C2A3;
    --brown-200: #E1D6C2;
    --brown-100: #F0EBE0;

    /* tokens */
    --primary: var(--primary-500);
    --on-primary: var(--neutral-100);
    --primary-container: var(--primary-100);
    --on-primary-container: var(--secondary-800);
    --primary-fixed: var(--primary-200);
    --primary-fixed-dim: var(--primary-300);
    --on-primary-fixed-dim: var(--secondary-900);
    --secondary: var(--secondary-100);
    --on-secondary: var(--secondary-900);
    --tertiary: var(--tertiary-500);
    --on-tertiary: var(--neutral-100);
    --error-background: var(--red-100);
    --error: var(--red-500);
    --error-border: var(--red-300);
    --error-border-2: var(--red-300);
    --background: var(--neutral-100);
    --on-background: var(--secondary-800);
    --outline: var(--secondary-400);
    --outline-variant: var(--secondary-300);
    --outline-variant-1: var(--secondary-200);
    --outline-variant-2: var(--secondary-100);
    --outline-variant-4: var(--neutral-900);
    --outline-black: var(--neutral-900);
    --content-heading: var(--secondary-900);
    --content-body: var(--secondary-800);
    --content-muted: var(--secondary-500);
    --content-placeholder: var(--secondary-400);
    --primary-disabled: var(--primary-100);
    --on-primary-disabled: var(--primary-300);
    --tertiary-disabled: var(--tertiary-100);
    --on-tertiary-disabled: var(--tertiary-200);
    --secondary-disabled: var(--secondary-100);
    --on-secondary-disabled: var(--secondary-300);
    --error-disabled: var(--red-100);
    --on-error-disabled: var(--red-300);
    --inverse-background: var(--neutral-900);
    --on-inverse-background: var(--neutral-100);

    /* key colors */
    --color-primary: var(--primary-500);
    --color-secondary: var(--secondary-500);
    --color-tertiary: var(--tertiary-500);
    --color-error: var(--red-500);
    --color-neutral: var(--neutral-500);
    --color-red: var(--red-500);
    --color-blue: var(--blue-500);
    --color-green: var(--green-500);
    --color-orange: var(--orange-500);
    --color-yellow: var(--yellow-500);
    --color-purple: var(--purple-500);
    --color-magenta: var(--magenta-500);
    --color-white: var(--neutral-100);
    --color-black: var(--neutral-900);

    /* states */
    --primary-enabled: var(--primary-500);
    --primary-hovered: var(--primary-400);
    --primary-pressed: var(--primary-600);
    
    --secondary-enabled: var(--secondary-100);
    --secondary-hovered: var(--secondary-200);
    --secondary-pressed: var(--secondary-300);

    --tertiary-enabled: var(--tertiary-500);
    --tertiary-hovered: var(--tertiary-400);
    --tertiary-pressed: var(--tertiary-600);

    --error-enabled: #FADBDB;
    --error-hovered: #FFD0D0;
    --error-pressed: #F6AAAA;

    --background-enabled: #FFFFFF;
    --background-hovered: #FAFAFA;
    --background-pressed: #F1F1F1;

    /* standard colors */
    --standard-success: var(--green-500);
    --standard-success-dark: var(--green-900);
    --standard-warning: var(--orange-500);
    --standard-warning-dark: var(--orange-900);
    --standard-danger: var(--red-500);
    --standard-danger-dark: var(--red-900);
    --standard-info: var(--blue-500);
    --standard-info-dark: var(--blue-900);
    
    --standard-success-bg: var(--green-100);
    --standard-warning-bg: var(--orange-100);
    --standard-danger-bg: var(--red-100);
    --standard-info-bg: var(--blue-100);

    /* Fixed Dimensions */
    --top-section-height: 70px;
    --content-header-height: 50px;
    --footer-height-xs: 155px;
    --footer-height-md: 110px;
    --footer-height-lg: 75px;
    --sidebar-logo-height: 70px;
    
    /* Typing Loading Animation */
    --typing-loader-animation-time: 0.8s;
    --typing-loader-dot-size: 7px;

    /* Space Role Palette */
    --owner: #10B981;
    --moderator: #6366F1;
    --coordinator: #0EA5E9;
    --observer: #9CA3AF;
    --member: #3B82F6;
    --collaborator: #F59E0B;
    --guest: #64748B;
}

/* wk: fonts */
@font-face {
  font-family: "Poppins";
  src: url("/assets/vendors/google-fonts/poppins/Poppins-ExtraLight.ttf")
    format("truetype");
  font-stretch: 100% 100%;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/vendors/google-fonts/poppins/Poppins-Regular.ttf")
    format("truetype");
  font-stretch: 100% 100%;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/vendors/google-fonts/poppins/Poppins-Medium.ttf")
    format("truetype");
  font-stretch: 100% 100%;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/vendors/google-fonts/poppins/Poppins-SemiBold.ttf")
    format("truetype");
  font-stretch: 100% 100%;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/vendors/google-fonts/poppins/Poppins-Bold.ttf") format("truetype");
  font-stretch: 100% 100%;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/vendors/google-fonts/poppins/Poppins-ExtraBold.ttf")
    format("truetype");
  font-stretch: 100% 100%;
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/vendors/google-fonts/poppins/Poppins-Black.ttf")
    format("truetype");
  font-stretch: 100% 100%;
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/vendors/google-fonts/poppins/Poppins-Italic.ttf")
    format("truetype");
  font-stretch: 100% 100%;
  font-weight: normal;
  font-style: italic;
}

@font-face {
    font-family: 'DM Sans';
    src: url("/assets/vendors/google-fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf") format('truetype');
    font-stretch: 100% 100%;
    font-weight: 500 700;
    font-style: normal;
}
  
@font-face {
    font-family: 'DM Sans';
    src: url("/assets/vendors/google-fonts/dm-sans/DMSans-Italic-VariableFont_opsz,wght.ttf") format('truetype');
    font-stretch: 100% 100%;
    font-weight: 500 700;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url("/assets/vendors/google-fonts/montserrat/Montserrat-VariableFont_wght.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url("/assets/vendors/google-fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf") format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Icons */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined'!important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.material-symbols-filled {
  font-variation-settings: 'FILL' 1;
}

.material-symbols-spinning {
  animation: spin 1s linear infinite;
}

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

.material-symbols-outlined.icon-6 {
  font-size: 6px;
}

.material-symbols-outlined.icon-8 {
  font-size: 8px;
}

.material-symbols-outlined.icon-14 {
  font-size: 14px;
}

.material-symbols-outlined.icon-16 {
  font-size: 16px;
}

.material-symbols-outlined.icon-18 {
  font-size: 18px;
}

.material-symbols-outlined.icon-20 {
  font-size: 20px;
}

.material-symbols-outlined.icon-24 {
  font-size: 24px;
}

.material-symbols-outlined.icon-32 {
  font-size: 32px;
}

.material-symbols-outlined.icon-40 {
  font-size: 40px;
}

.material-symbols-outlined.icon-48 {
  font-size: 48px;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url("/assets/vendors/google-fonts/material-symbols/MaterialSymbolsOutlined.woff2") 
      format('woff2');
    font-display: block;
}

/* wk: typography */

/* old version, meant to be phased out */
.display-1,
.display-2,
.display-3
{
  font-family: "Montserrat", serif;
  color: var(--content-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 46px;
}

@media (min-width: 992px) {
  .display-1 {
    font-weight: 700;
    font-size: 64px;
    line-height: 84px;
  }

  .display-2 {
    font-weight: 700;
    font-size: 56px;
    line-height: 78px;
  }

  .display-3 {
    font-weight: 700;
    font-size: 48px;
    line-height: 68px;
  }
}

h4,
.h4 {
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--content-heading);
}

h5,
.h5 {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--content-heading);
}

h6,
.h6 {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  color: var(--content-heading);
}

.paragraph-lead {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--content-body);
}

/* .paragraph,  */
.paragraph-medium,
.paragraph-semi-bold,
.paragraph-bold {
  font-size: 15px;
  line-height: 22px;
  color: var(--content-body);
}

/* .paragraph {
  font-weight: 400;
} */

.paragraph-medium,
.paragraph-semi-bold {
  font-weight: 500;
}

.paragraph-bold {
  font-weight: 700;
}

.paragraph-small,
.paragraph-small-semi-bold,
.paragraph-small-bold {
  font-size: 13px;
  line-height: 20px;
  color: var(--content-body);
}

.paragraph-small {
  font-weight: 400;
}

.paragraph-small-semi-bold {
  font-weight: 500;
}

.paragraph-small-bold {
  font-weight: 700;
}
/* 
.caption {
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  color: var(--content-body);
} */

.button-large,
.button-default,
.button-small {
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--content-heading);
}

.button-large {
  font-size: 17px;
  line-height: 22px;
}

.button-default {
  font-size: 15px;
  line-height: 19.53px;
}

.button-small {
  font-size: 13px;
  line-height: 16px;
}

.label-large,
.label-default,
.label-small {
  font-weight: 400;
  color: var(--content-heading);
}

.label-large {
  font-size: 18px;
  line-height: 23.44px;
}

.label-default {
  font-size: 15px;
  line-height: 19.53px;
}

.label-small {
  font-size: 13px;
  line-height: 16.93px;
}

.input-large,
.input-default,
.input-small {
  font-weight: 400;
  color: var(--content-body);
}

.input-large {
  font-size: 18px;
  line-height: 23.44px;
}

.input-default {
  font-size: 15px;
  line-height: 19.53px;
}

.input-small {
  font-size: 13px;
  line-height: 16.93px;
}

.placeholder-large,
.placeholder-default,
.placeholder-small {
  font-weight: 400;
  color: var(--content-placeholder);
}

.placeholder-large {
  font-size: 18px;
  line-height: 22px;
}

.placeholder-default {
  font-size: 15px;
  line-height: 24px;
}

.placeholder-small {
  font-size: 13px;
  line-height: 21px;
}
/* end old version */

/* new version */
.title {
  font-family: 'Montserrat', serif !important;
  font-weight: 700;
  font-size: 32px;
  line-height: 46px;
  letter-spacing: 0px;
}

*:not(.display-1):not(.display-2):not(.display-3):not(.display-4):not(i) {
  font-family: 'Poppins', sans-serif;
  /* font-family: "DM Sans", sans-serif; */
}

h1,
.h1 {
  font-weight: 500;
  font-size: 26px;
  line-height: 36px;
  letter-spacing: 0px;
}

h2,
.h2 {
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.25px;
}

h3,
.h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0px;
}

/* h4, h5, h6 added here because it is too difficult to refactor existing uses */
h4 {
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--content-heading);
}

h5 {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--content-heading);
}

h6 {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  color: var(--content-heading);
}

.paragraph {
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0px;
}

.body-1-bold,
.body-1-medium,
.body-1 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
}

.body-2-bold,
.body-2-medium,
.body-2 {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}

.body-1-bold,
.body-2-bold {
  font-weight: 700;
}

.body-1-medium,
.body-2-medium {
  font-weight: 500;
}

.body-1,
.body-2 {
  font-weight: 400;
}

.button {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.4px;
}

.caption {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
}
/* end new version */

/* end typography */

.paragraph,
.body-1-bold,
.body-1-medium,
.body-1,
.body-2-bold,
.body-2-medium,
.body-2,
.caption {
  color: var(--content-body);
}

.table-header {
  font-weight: 500;
  font-size: 13px;
  line-height: 16.93px;
  letter-spacing: 1px;
  color: var(--content-heading);
}

.menu-active {
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  color: var(--content-heading);
}

.avatar-image {
  height: 56px;
  width: 56px;
  border: 1px solid var(--outline-variant-1);
  border-radius: 4px;
}

.empty-avatar-image {
  background-color: var(--secondary-100);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--secondary-900);
}

/* shepherd */
.shepherd-step {
  z-index: 10000;
}

.shepherd-overlay {
  border-radius: 4px;
}

.shepherd .shepherd-element .shepherd-content .shepherd-header {
  padding: 16px 16px 0px;
}

.shepherd .shepherd-element .shepherd-content .shepherd-text {
  padding: 16px;
}

.shepherd .shepherd-element .shepherd-content .shepherd-footer {
  padding: 0 16px 16px;
}

.shepherd .shepherd-button {
  border: 1px solid transparent;
}

.dashboard-tour-step .shepherd-footer,
.space-tour-step .shepherd-footer,
.suite-tour-step .shepherd-footer,
.room-tour-step .shepherd-footer {
  display: none;
}

.tour-previous-button {
  background-color: var(--on-tertiary);
  color: var(--on-secondary);
  border: 1px solid var(--outline);
  border-radius: 4px;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  width: 83px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tour-previous-button:hover {
  background-color: var(--background-hovered);
}

.tour-previous-button:active {
  background-color: var(--background-pressed);
}

.tour-next-button {
  background-color: var(--tertiary-500);
  color: var(--on-tertiary);
  border-radius: 4px;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 0px;
  width: 56px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.start-tour-step .start-tour-button,
.end-tour-step .end-tour-button {
  background-color: var(--tertiary-500);
  color: var(--on-tertiary);
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
}

.start-tour-step .start-tour-button:hover,
.end-tour-step .end-tour-button:hover {
  background-color: var(--tertiary-hovered);
}

.start-tour-step .tour-skip-button {
  background-color: var(--on-tertiary);
  color: var(--on-secondary);
  border: 1px solid var(--outline);
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  height: 32px;
}

.start-tour-step .tour-skip-button:hover {
  background-color: var(--background-hovered);
}

.start-tour-step .tour-skip-button:active {
  background-color: var(--background-pressed);
}

.start-tour-step,
.dashboard-tour-step,
.space-tour-step,
.suite-tour-step,
.room-tour-step,
.end-tour-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.start-tour-step,
.end-tour-step {
  max-width: 360px;
}

.dashboard-tour-step,
.space-tour-step,
.suite-tour-step,
.room-tour-step {
  max-width: 300px;
}

.dashboard-tour-step-action {
  width: 193px;
  height: 24px;
  text-align: center;
}

.space-tour-step-action,
.suite-tour-step-action,
.room-tour-step-action {
  width: 180px;
  height: 24px;
  text-align: center;
}

.dashboard-tour-step-action-2 {
  width: 235px;
  height: 24px;
  text-align: center;
}

.start-tour-step .shepherd-title,
.end-tour-step .shepherd-title {
  color: var(--content-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.dashboard-tour-step .shepherd-title,
.space-tour-step .shepherd-title,
.suite-tour-step .shepherd-title,
.room-tour-step .shepherd-title {
  color: var(--content-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.shepherd-header {
  line-height: 1em;
}

.shepherd-has-title .start-tour-step .shepherd-content .shepherd-header,
.shepherd-has-title .dashboard-tour-step .shepherd-content .shepherd-header,
.shepherd-has-title .space-tour-step .shepherd-content .shepherd-header,
.shepherd-has-title .suite-tour-step .shepherd-content .shepherd-header,
.shepherd-has-title .room-tour-step .shepherd-content .shepherd-header,
.shepherd-has-title .end-tour-step .shepherd-content .shepherd-header {
  background-color: transparent;
}

.start-tour-step .shepherd-description,
.end-tour-step .shepherd-description {
  color: var(--content-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
  color: var(--on-secondary);
  font-size: 26px;
}

.dashboard-tour-step .shepherd-text,
.space-tour-step .shepherd-text,
.suite-tour-step .shepherd-text,
.room-tour-step .shepherd-text {
  color: var(--content-body);
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  text-align: left;
}

.dashboard-tour-step .step-number,
.space-tour-step .step-number,
.suite-tour-step .step-number,
.room-tour-step .step-number {
  color: var(--content-muted);
  font-size: 12px;
}

.step-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  width: 100%;
}

.step-content-buttons {
  display: flex;
  gap: 12px;
}

.shepherd-has-title .dashboard-tour-step-action .shepherd-content .shepherd-header,
.shepherd-has-title .dashboard-tour-step-action-2 .shepherd-content .shepherd-header,
.shepherd-has-title .space-tour-step-action .shepherd-content .shepherd-header,
.shepherd-has-title .suite-tour-step-action .shepherd-content .shepherd-header,
.shepherd-has-title .room-tour-step-action .shepherd-content .shepherd-header {
  padding: 0;
  background-color: var(--inverse-background);
  border-radius: 3px;
}

.dashboard-tour-step-action .shepherd-title,
.dashboard-tour-step-action-2 .shepherd-title,
.space-tour-step-action .shepherd-title,
.suite-tour-step-action .shepherd-title,
.room-tour-step-action .shepherd-title {
  flex: 0.5 0 auto;
}

.dashboard-tour-step-action .shepherd-title,
.dashboard-tour-step-action-2 .shepherd-title,
.space-tour-step-action .shepherd-title,
.suite-tour-step-action .shepherd-title,
.room-tour-step-action .shepherd-title {
  color: var(--on-inverse-background);
  font-size: 12px;
  font-weight: 400;
}

.shepherd.tippy-popper .tippy-tooltip .tippy-arrow {
  transform: none;
}

.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .dashboard-tour-step-action),
.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .dashboard-tour-step-action-2),
.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .space-tour-step-action),
.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .suite-tour-step-action),
.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .room-tour-step-action) {
  border-bottom-color: var(--inverse-background);
  margin: 4px 0;
}

.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .space-tour-step) {
  border-bottom-color: var(--neutral-100);
}

.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .dashboard-tour-step),
.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .suite-tour-step),
.shepherd.tippy-popper[x-placement^="bottom"] .tippy-arrow:has(+.tippy-content .room-tour-step) {
  border-bottom-color: var(--neutral-100);
}

#membersModal .suite-role-select,
#membersModal .room-role-select {
  top: 6px;
  right: 6px;
}

#membersModal .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

#membersModal .dropdown-item:hover {
  border-radius: 4px;
  background: var(--secondary-100);
}

#membersModal .user-role-dropdown-menu {
  width: fit-content;
  padding: 4px 0px;
  border-radius: 4px;
  background: var(--background, #FFF);
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.30);
  display: none;
  position: absolute;
  z-index: 2;
}

#membersModal .role-action {
  white-space: break-spaces;
  color: var(--content-muted);
}

#membersModal .role-name {
  color: var(--content-heading);
}

#membersModal .modal-content {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

#membersModal .modal-header {
  display: flex;
  padding: 0px;
  padding-bottom: 16px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--outline-variant-1);
}

#membersModal .modal-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
}

#membersModal .modal-body .suite-members-list,
#membersModal .modal-body .room-members-list {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
}

#membersModal #invite-input-form {
  border-radius: 4px;
  border: 1px solid var(--outline);
}

#membersModal .help-center-link:hover {
  text-decoration: underline !important;
}

#membersModal .invite-form-wrapper {
  height: 32px;
}

#membersModal .member-input-group .user-role-dropdown-menu {
  left: auto !important;
  right: 0;
}

@media screen and (max-width: 992px) {
  #membersModal button {
    width: 100%;
  }

  #membersModal .invite-form-wrapper {
    height: 100%;
  }

  #membersModal #invite-input-form {
    height: 32px;
  }
}

@media screen and (max-width: 768px) {
  #membersModal .member-user-role-dropdown {
    width: 100%;
  }

  #membersModal .invite-role {
    width: 100%;
  }

  #membersModal .text-label {
    width: 100%;
  }
}

#invite-form .invite-role {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 12px;
  width: fit-content;
  border-radius: 2px;
  border: none !important;
}

#invite-form .suite-members-list > *:hover .user-role-dropdown .invite-role,
#invite-form .room-members-list > *:hover .user-role-dropdown .invite-role,
#invite-form .member-input-group > *:hover .user-role-dropdown .invite-role {
  background-color: var(--background-pressed);
}

/* timeline view */
#timeline-view .vis-text div {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--content-heading);
}

#timeline-view .vis-label .group-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--content-heading);
  text-decoration: none;
  transition: all 0.3s ease;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100%);
}

#timeline-view .vis-label .group-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--tertiary-900);
}

#timeline-view .vis-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: var(--content-body);
}

#timeline-view .vis-timeline {
  border: transparent;
}

#timeline-view .vis-current-time {
  background: var(--color-red);
}

#timeline-view .vis-item {
  border-radius: 5px;
  border: transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

#timeline-view .symbol-group .symbol {
  margin-left: -12px;
}

#timeline-view .vis-item-overflow {
  display: flex;
}

#timeline-view .symbol-group .symbol-label:after {
  border: transparent;
}

#timeline-view .symbol.symbol-20px > img,
#timeline-view .symbol.symbol-20px .symbol-label {
  width: 25px;
  height: 25px;
}

#timeline-view .vis-item .vis-item-content {
  padding: 0;
  width: 100%;
}

#timeline-view .priority-label {
  display: flex;
  width: 80px;
  height: 7px;
  padding: 5px 10px;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 100px;
}

#timeline-view .vis-labelset .vis-label {
  display: flex;
  align-items: center;
}

#timeline-view .vis-group-level-unknown-but-gte1 {
  border: none;
  border-bottom: 0.5px solid var(--neutral-300);
  background-color: unset;
}

#timeline-view .vis-ltr .vis-label.vis-nested-group .vis-inner {
  padding-left: 15px;
}

#timeline-view .vis-label.vis-nesting-group.expanded:before,
#timeline-view .vis-label.vis-nesting-group.collapsed:before {
  font-size: 10px;
}

#timeline-view .vis-left {
  max-width: 30%;
}

#timeline-view .vis-labelset .vis-label .vis-inner {
  width: 100%;
}

/* timeline view - preloader */
#navs-timeline .loader,
#navs-timeline .bar {
  width: 100px;
  height: 60px;
}

#navs-timeline .bar {
  position: absolute;
  display: flex;
  align-items: center;
}

#navs-timeline .bar::before,
#navs-timeline .bar::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  background: var(--primary-500);
  opacity: 0;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  animation: slideleft 3s ease-in-out infinite;
}

#navs-timeline .bar1::before {
  animation-delay: 0s;
}

#navs-timeline .bar1::after {
  animation-delay: 0.3s;
}

#navs-timeline .bar2::before {
  animation-delay: 0.6s;
}

#navs-timeline .bar2::after {
  animation-delay: 0.9s;
}

#navs-timeline .bar3::before {
  animation-delay: 1.2s;
}

#navs-timeline .bar3::after {
  animation-delay: 1.5s;
}

@keyframes slideleft {
  10% {
    opacity: 0;
    transform: scale(0);
    right: 0;
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  90% {
    opacity: 0;
    transform: scale(0);
    right: 100%;
  }
}
/* end timeline view */

/* styles for task chats */
/* @media screen and (max-width: 767px) {
  #task-chat {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 60px;
    background-color: var(--background);
    padding: 20px;
    z-index: 1;
  }

  #task-scroll-to-bottom {
    bottom: 200px;
  }
}

@media screen and (min-width: 768px) {
  #task-chat {
    display: block;
    border-left: 1px solid var(--outline-variant-1);
    background: var(--on-primary);
    flex: 0 0 auto;
    width: 33.33333333%;
    max-width: 100%;
    height: fit-content;
    position: sticky;
    top: 70px;
  }

  #task-scroll-to-bottom {
    bottom: 180px;
  }
} */

/* #room-chat {
  display: block;
  background: var(--on-primary);
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: fit-content;
}

#room-scroll-to-bottom {
  bottom: 180px;
}

#room-scroll-to-bottom {
  position: absolute;
  left: 50%;
}

#room-chat-header {
  padding: 10px 18px 0 18px;
} */

#chat-body p {
  margin: 0;
  width: fit-content;
  /* color: var(--content-heading); */
  /* padding: 8px 12px;
  background: white;
  width: fit-content;
  border-radius: 6px */
}

#chat-scroll-to-bottom {
  position: absolute;
  left: 50%;
}

#chat-body .is-editing-message {
  display: flex;
  padding: 4px 8px;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--tertiary);
  margin-bottom: 8px;
}

#chat-body .is-editing-message:focus-visible {
  outline: none;
}

#chat-body .message-wrapper {
  padding-top: 10px;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

#chat-body .message-wrapper.active {
  animation: highlight-animation 1.5s ease forwards;
}

#chat-body .message-wrapper.is-grouped-prev {
  padding-top: 0px;
}

@keyframes highlight-animation {
  0% {
    background-color: var(--brown-100);
  }

  100% {
    background-color: transparent;
  }
}

#chat-body .message-wrapper.is-replied {
  border-left: 4px solid var(--green-900);
  background: var(--background-hovered);
  border-radius: 2px;
}

#chat-body .message-wrapper.is-loading .user-avatar,
#chat-body .message-wrapper.is-loading .user-name,
#chat-body .message-wrapper.is-loading .messages {
  background: #EEE;
  background: linear-gradient(110deg, #ECECEC 8%, #F5F5F5 18%, #ECECEC 33%);
  border-radius: 5px;
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}

@media screen and (max-width: 768px) {
  #chat-body .message-wrapper {
    padding: 6px 10px 6px 18px;
  }
}

#chat-body .message-options-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  gap: 4px;
  border-radius: 4px;
  background: var(--background);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  visibility: hidden;
}

#chat-body .message-wrapper:hover {
  /* background: var(--background-hovered); */
}

#chat-body .message-wrapper:hover .message-options-badge {
  visibility: visible;
}

#chat-body .message-wrapper .chat-message-file span {
  color: var(--content-body);
}

#chat-body .message-wrapper .chat-message-file i {
  color: var(--brown-600);
}

#chat-body .message-wrapper .chat-message-file.is-sender i,
#chat-body .message-wrapper .chat-message-file.is-sender span {
  color: var(--background);
}

#chat-body .hidden-message-badge {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;

  border-radius: 0px 8px 8px 8px;
  background: var(--background);
}

#chat-body .hidden-message-badge span {
  color: var(--content-muted);
}

#chat-body .dropdown-menu {
  border-radius: 4px;
  background: var(--background);
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.30);
}

#chat-body .reply-message-btn:hover {
  background: var(--background-hovered);
  border-radius: var(--bs-border-radius-pill);
}

#chat-body .reply-message-btn:active {
  background: var(--background-pressed);
  border-radius: 2px;
}

#chat-body .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  gap: 8px;
  cursor: pointer;
}

#chat-body .dropdown-menu .dropdown-item span {
  color: var(--content-body);
}

#chat-body .dropdown-menu .dropdown-item:hover {
  background: var(--background-hovered);
}

#chat-body .dropdown-menu .dropdown-item:active {
  background: var(--background-pressed);
}

/* #room-chat-input {
  padding: 0px 18px 10px 18px;
}

@media screen and (max-width: 768px) {
  #room-chat-input {
    padding: 0px 20px 20px 20px;
  }
} */

/* styles for paste screenshot previewer */
#conversations .pasting-image-wrapper {
  display: flex;
  overflow: auto;
  width: 100%;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  background-color: var(--background-hovered);
  display: none;
}

#conversations .pasting-image-area {
  display: flex;
  gap: 16px;
  flex-direction: row;
  align-items: center;
  padding: 10px 18px;
}

#conversations .pasting-image-wrapper .file-item {
  background-color: var(--background-pressed);
  padding: 5px;
  min-width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
}

#conversations .img-preview {
  position: relative;
  width: 40px;
  height: 40px;
}

#conversations .img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  border: 0.5px solid var(--gray-100);
}

#conversations .img-preview .delete-screenshot-btn,
#conversations .file-item .remove-file-preview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
  border-radius: 50%;
  background-color: var(--background-enabled);
  padding: 1px;
  border: 0.5px solid var(--gray-100);
}

#conversations .img-preview .delete-screenshot-btn:hover,
#conversations .file-item .remove-file-preview-btn:hover {
  background-color: var(--background-hovered);
}

#conversations .img-preview .delete-screenshot-btn:active,
#conversations .file-item .remove-file-preview-btn:active {
  background-color: var(--background-pressed);
}

#chat-body .screenshot-message {
  object-fit: cover;
  height: auto;
  width: auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: var(--bs-box-shadow-sm);
}

#chatbox-controls .upload-screenshot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
}

/* styles for reply messages on chat */
#conversations .replying-to-message-wrapper {
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid var(--gray-100);
  background-color: var(--background-hovered);
  min-width: 0;
  display: flex;
  /* display: none; */
}

#conversations .replying-to-message-wrapper:hover {
  background-color: var(--background-pressed);
}

#conversations .replying-to-message-wrapper p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  margin-bottom: 0;
}

#conversations .close-reply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 2px;
}

#conversations .close-reply-btn:hover {
  background-color: var(--background-hovered);
}

#conversations .close-reply-btn:active {
  background-color: var(--background-pressed);
}

#chat-body .replied-message-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: pointer;
  gap: 3px;
  border-left: 3px solid var(--blue-700);
  padding-left: 12px;
  min-width: 0;
  flex: 1;
  border-radius: 2px;
  margin-bottom: 5px;
}

#chat-body .reply-message p::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#chat-body .replied-message-wrapper:hover {
  border-left: 3px solid var(--blue-900);
}

#chat-body .reply-to {
  color: var(--blue-700);
}

#chat-body .reply-message {
  display: flex;
  min-width: 0;
  color: var(--content-body);
}

#chat-body .reply-message p {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-body .replied-message-wrapper:hover .reply-to {
  color: var(--blue-900);
}

#chat-body .replied-message-wrapper:hover .reply-message {
  color: var(--content-heading);
}

.mentioned-user {
  color: var(--standard-info) !important;
  background-color: var(--standard-info-bg);
  font-weight: 600;
  padding: 2px 4px;
  cursor: pointer;
}

.mentioned-task {
  color: var(--standard-danger) !important;
  background-color: var(--standard-danger-bg);
  font-weight: 600;
  padding: 2px 4px;
  cursor: pointer;
}

.unread-messages-divider {
  display: flex;
  flex-direction: row;
  gap: 5px;
  color: var(--red-400);
  font-size: 14px;
  font-weight: 500;
}

.unread-messages-divider:before,
.unread-messages-divider:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--red-400);
  margin: auto;
}

.room-closed-divider {
  display: flex;
  flex-direction: row;
  gap: 5px;
  color: var(--brown-900);
  font-size: 14px;
  font-weight: 500;
}

.room-closed-divider:before,
.room-closed-divider:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--brown-900);
  margin: auto;
}

#roomChatMessage.last-message p {
  margin-bottom: 0;
  font-weight: 400;
}

/* ---------- Buttons ---------- */
.btn-grey,
.btn-green,
.btn-red {
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  border: none;
  padding: 8px 12px;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: transform;
  min-width: fit-content;
  text-align: center;
}

.btn-grey:hover,
.btn-green:hover,
.btn-red:hover {
  transform: scale(1.02);
}

.btn-grey:disabled,
.btn-green:disabled,
.btn-red:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-grey {
  background-color: #a6acaf;
}

.btn-green {
  background-color: #54815a;
}

.btn-red {
  background-color: #d06263;
}

.button-solid-green,
.button-outline,
.button-outline-red {
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  background: none;
  border: 1px solid #a5a5a5;
  border-radius: 5px;
  width: fit-content;
  height: auto;
}

.button-solid-green:disabled,
.button-outline:disabled,
.button-outline-red:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button-outline-red {
  color: var(--standard-danger);
  border-color: var(--standard-danger);
}

.button-outline:hover {
  background-color: #e3e3e3;
}

.button-outline-red:hover {
  background-color: #f7e1e1;
}

.button-solid-green {
  background-color: var(--tertiary-500);
  color: #fff;
}

.button-solid-green:hover {
  background-color: #97A28C;
}

.button-icon,
.button-icon-dark {
  border: none;
  background: none;
  padding: 7px 10px;
}

.button-icon.active,
.button-icon:hover,
.button-icon-dark.active,
.button-icon-dark:hover {
  border-radius: 5px;
  padding: 7px 10px;
  cursor: pointer;
  color: #000 !important;
}

.button-icon.square {
  padding: 5px 5px 3px 5px;
}

.button-icon.square.active,
.button-icon.square:hover {
  border-radius: 0;
}

.button-icon.active,
.button-icon:hover {
  background: rgba(0, 0, 0, 0.1);
}

.button-icon-dark.active,
.button-icon-dark:hover {
  background: rgba(255, 255, 255, 0.5);
}

.button-text,
.button-text-icon,
.button-text-dark {
  background: none;
  border: none;
}

.button-text-icon.active,
.button-text-icon:hover {
  background: rgba(34, 128, 34, 0.1);
  border-radius: 3px;
  cursor: pointer;
}

a.button-text.active,
a.button-text:hover {
  background: rgba(171, 167, 157, 0.3) !important;
}

.button-text.active,
.button-text:hover {
  background: rgba(180, 160, 110, 0.1) !important;
  border-radius: 3px;
  cursor: pointer;
}

.button-text-dark:hover {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}

.button-icon-plain {
  border: none;
  background: none;
}

.button-icon-plain:active,
.button-icon-plain:hover {
  border: none;
  background: none;
  color: #000 !important;
}


/* ---------- Background ---------- */
.bg-under-layer {
  /* background-color: rgba(243, 239, 234, 0.8); */
  background-color: rgba(230, 230, 230, 0.9);
}

.bg-under-layer-inner {
  /* background-color: rgba(243, 243, 243, 0.9); */
  background-color: rgba(245, 245, 245, 0.9);
}

.bg-dark-green {
  background-color: var(--tertiary-500);
}

.bg-light-grey {
  background-color: #FAFAFA;
}

.bg-grey {
  background-color: #EEEEEE;
}

.bg-red {
  background-color: #D26262;
}

.bg-dimmed {
  background: rgba(0, 0, 0, 0.3);
}

.bg-loading-skeleton {
  background-color: #8c8686;
}

.bg-hover-grey:hover {
  background-color: #fafafa;
}

.bg-hover-bs-dropdown {
  background-color: #eff2f5;
}

.bg-hover-bs-dropdown:hover {
  background-color: #eff2f5;
}

/* ---------- Color ---------- */
.beige-color {
  color: #bfb097;
}

.light-beige-color {
  color: #C6BFB9; 
}

.dark-beige-color {
  color: #b5afa9;
}

.brown-color {
  color: #b39966;
}

.grey-color {
  color: #757171;
}

.light-grey-color {
  color: #b8b6b6;
}

.light-grey-v2-color {
  color: #7A7A7A;
}

.dark-grey-color {
  color: var(--gray-700);
}

.green-color {
  color: #015901;
}

.dark-green-color {
  color: var(--tertiary-500);
}

.owner-color {
  color: var(--owner);
}

.moderator-color {
  color: var(--moderator);
}

.coordinator-color {
  color: var(--coordinator);
}

.observer-color {
  color: var(--observer);
}

.member-color {
  color: var(--member);
}

.collaborator-color {
  color: var(--collaborator);
}

.guest-color {
  color: var(--guest);
}

/* ---------- Bootstrap ---------- */
.dropdown-menu {
  min-width: inherit;
}

/* ---------- Custom ---------- */
.cursor-d:hover {
  cursor: default;
}

.cursor-p:hover {
  cursor: pointer;
}

.justify-text-area {
  text-align: justify;
  white-space: pre-line;
}

.txt-overflow-e {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-wrap-bw {
  overflow-wrap: break-word;
}

.txt-overflow-1l {
  overflow: hidden;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.txt-overflow-2l {
  overflow: hidden;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.txt-overflow-3l {
  overflow: hidden;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.input-no-border {
  outline: none;
  border: none;
  background: none;
}

textarea:disabled,
.form-control:disabled, .form-control[readonly] {
  color: var(--bs-gray-700) !important;
  background-color: #f8f7f5 !important;
  border-color: var(--kt-input-disabled-border-color) !important;
}

.checkbox-green {
  accent-color: var(--tertiary-500) !important;
}

.border-hover:hover {
  cursor: pointer;
  border: 1px solid var(--gray-300) !important;
}

.border-hover-black:hover {
  cursor: pointer;
  border: 1px solid var(--gray-900) !important;
}

.top-section {
  height: var(--top-section-height);
}

.content-header-section {
  height: var(--content-header-height);
}

.content-body-section {
  height: var(--content-body-height);
}

.arrow-redirect {
  animation: arrow-loading 2s infinite;
}

@keyframes arrow-loading {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }

  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* Chat Components */
.cke_bottom,
.cke_top,
.cke_notification_warning {
  display: none !important;
}

.cke,
.cke_inner,
.cke_contents,
.cke_wysiwyg_frame {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: none !important;
  border-color: var(--outline-variant-1) !important;
}

.cke_editable {
  margin: 0.5rem;
}

#chatbox-controls {
  border: 1px solid var(--outline-variant-1);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: none;
  padding: 8px;
  background-color: var(--background);
}

/* ---------- Components ---------- */
#space.space-btn.active,
#space.space-btn:active,
#space.space-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 3px;
}

#avatar .user-dropdown {
  position: absolute;
  top: -325px;
  left: 0;
  border-radius: 5px;
  box-shadow: 0 2px 10px #ccc;
  width: 250px;
}

#avatar .menu-v-btn {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

#avatar.member-owner::before {
  padding: 3px 6px;
  content: 'Owner';
  font-size: 0.6rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #54815a;
  color: #fff;
  z-index: 1;
  text-align: center;
}

#avatar.member-collaborator::before {
  content: 'Collaborator';
  background-color: #7A5FA8;
  padding: 3px 6px;
  font-size: 0.6rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 1;
  text-align: center;
}

#avatar.member-guest::before {
  content: 'Guest';
  background-color: #A0A0A0;
  padding: 3px 6px;
  font-size: 0.6rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 1;
  text-align: center;
}

#avatar.member::before {
  content: 'Member';
  background-color: #3B6FB6;
  padding: 3px 6px;
  font-size: 0.6rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 1;
  text-align: center;
}

#sidebar-section .list-item-tab {
  background-color: #fff;
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  list-style-type: none;
  border-top: 1px solid var(--bs-border-color);
}

#sidebar-section .list-group:last-child {
  border-bottom: 1px solid var(--bs-border-color);
}

#sidebar-section .list-item-tab a {
  color: #000;
  display: block;
  width: 100%;
  padding: 12px 15px;
}

#sidebar-section .list-item-tab.active a,
#sidebar-section .list-item-tab a:hover {
  background-color: #000;
  color: #fff;
}
/* Meeting Components */

#meetingsPage .meeting-next-section {
  gap: 14px;
  width: 100%;
}

#meetingsPage .meeting-next-button {
  width: 100%;
  border-radius: 8px;
  margin-top: 1rem;
  border: 1px dashed black;
  justify-content: space-between;
}

#meetingsPage .meeting-attended-button {
  width: 100%;
  border: 1px dashed black;
  border-radius: 8px;
  margin-right: 1rem;
}

#meetingsPage .member-meeting {
  margin-left: 10px;
}


.arrow-redirect {
  animation: arrow-loading 5s infinite;
}

@keyframes arrow-loading {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* ---------- Styles for daterangepicker ---------- */
.daterangepicker .cancelBtn.btn.btn-sm.btn-default:hover {
  border-color: transparent;
  background-color: #7e663650;
}

.daterangepicker .btn.btn-primary:hover:not(.btn-active) {
  background-color: #7b9366 !important;
}

/* ---------- Styles for animation ---------- */
.animated {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fade-in-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-down {
  -webkit-animation-name: fade-in-down;
  animation-name: fade-in-down;
}

.fade-out {
  animation-name: fade-out;
}

@keyframes fade-out {
  from {
    opacity: 1;
    /* transform: scale(3); */
  }

  to {
    opacity: 0;
    /* transform: scale(0); */
  }
}

/* ---------- Styles for create meeting modal ---------- */
#addMeetingForm .select2-dropdown .select2-dropdown--below,
#addMeetingForm .select-dropdown .select-dropdown--below {
  width: 100%;
}

#addMeetingForm .select2-container--default .select2-selection--multiple,
#addMeetingForm .select-container--default .select-selection--single {
  border: 1px solid var(--kt-form-select-border-color);
  padding: .510rem 3rem .775rem 1rem;
  border-radius: .475rem;
}

#addMeetingForm .form-label,
#addMeetingForm .meeting-members {
  display: block;
}

#addMeetingForm .select2-container--default.select2-container--focus .select2-selection--multiple {
  border: 1px solid var(--kt-input-focus-border-color);
  border-radius: .475rem;
}

#addMeetingForm .select2-container--default .select2-selection--single {
  height: 43px;
  display: flex;
  align-items: center;
  border: 1px solid var(--kt-input-border-color);
  border-radius: .475rem;
}

#addMeetingForm .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 100%;
  display: flex;
  align-items: center;
}

#addMeetingForm .select2-container--default .select2-selection--single .select2-selection__clear,
#addMeetingForm .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}

#addMeetingForm .select2-container--default .select2-search--inline .select2-search__field {
  background-color: transparent !important;
}

/* ---------- Styles for pricing create/upgrade space---------- */
.heading-pricing {
    font-size: 40px;
  }
.plan-card {
  gap: 10px;
  padding: 20px;
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  transition: transform 0.3s ease-in-out;
}

.plan-card.active {
  border: 1px solid;
  border-radius: 8px;
  background: rgb(162 155 155 / 50%);
}

.plan-card:hover {
  transform: scale(1.05);
}

.plan-card .plan-card-prices {
  font-weight: 600;
  font-size: 40px;
}

.btn-subscribe {
  background-color: var(--tertiary-900);
  color: white;
  width: 100%;
  border: none;
  padding: 15px !important;
  border-radius: 8px;
}

.btn-subscribe:hover {
  background-color: rgba(37, 49, 26, 1);
  color: #fff;
}

.btn-subscribe:active {
  scale: 0.9;
  opacity: 0.7;
}
.btn-subscribe:disabled {
  background-color: var(--gray-300);
}


.plan-card .image-container {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 10px;
}

.plan-card .plan-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.plan-card ul {
  text-align: left;
  list-style: none;
  padding: 0;
  margin-top: 15px;
  margin-left: 10px;
}

.plan-card ul li {
  padding: 5px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
}