@charset "UTF-8";
/*
 * Main ThinkBar CSS
 * should contain no rules, only imports
 */
/*
 * Disable user selection for all tags
 */
* {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}

/*
 * NOTE:
 * has to be injected from gulp with gulp-sass-variables
 * 'standalone' means all assests (images and font files) are loaded from separate files via url()
 * 'bundled' means all  assests (images and font files) are inlined via data-url()
 * for debugging 'standalone' is better and is used as default
 */
/*
 * NOTE:
 * placeholder for Constants class members
 */
/*
 * ThinkBar element-wide rules
 */
/*
 * box model defaults to border-box, _and_ inherited as this learned post suggests:
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 * note that without the ...inherit rule this property is _not_ inherited by children!
 */
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

div {
  display: flex;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/*
 * no focus box around text input boxes
 */
textarea:focus, input:focus {
  outline: none;
}

*::-webkit-input-placeholder {
  color: white;
}

*:-moz-placeholder {
  /* FF 4-18 */
  color: white;
  opacity: 1;
}

*::-moz-placeholder {
  /* FF 19+ */
  color: white;
  opacity: 1;
}

*:-ms-input-placeholder {
  /* IE 10+ */
  color: white;
}

*::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

*::placeholder {
  /* modern browser */
  color: white;
}

/* dark theme */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
.dark-theme {
  --v-clr-body: black;
  --v-clr-text-lond: rgba(200, 200, 200, 1);
  --v-clr-text-lond-settings: rgba(200, 200, 200, 1);
  --v-clr-wh-act-settings: rgba(200, 200, 200, 1);
  /**campaign list tab back*/
  --v-clr-hs-cl-back: rgba(0, 60, 140, 1);
  /**campaign list tab middle*/
  --v-clr-hs-cl-mid: rgba(0, 75, 160, 1);
  /**campaign list tab front*/
  --v-clr-hs-cl-front: rgba(0, 150, 255, 1);
  /**campaign list front*/
  --v-grd-hs-cl-front: linear-gradient(180deg, rgba(0, 150, 255, 1) 0%, rgba(0, 10, 27, 1) 15%, rgba(0, 0, 0, 1) 80%, rgba(0, 120, 160, 1) 100%);
  /**campaign background*/
  --v-grd-hs-c-bg: linear-gradient(180deg, rgba(0, 80, 130, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 80%, rgba(0, 120, 160, 1) 100%);
  /**campaign list label & board*/
  --v-grd-hs-cl-tray: linear-gradient(180deg, rgba(0, 60, 100, 1) 0%, rgba(0, 20, 30, 1) 20%, rgba(0, 60, 100, 1) 100%);
  --v-grd-hs-cl-base: linear-gradient(180deg, rgba(0, 60, 100, 1) 0%, rgba(0, 20, 30, 1) 20%, rgba(0, 60, 100, 1) 100%);
  /**date, date bar*/
  --v-clr-hs-ddb: rgb(255, 150, 0);
  /**inactive on color*/
  --v-clr-inact-on-clr: rgba(155, 155, 155, 1);
  /** AI icon color*/
  --v-clr-ai-icon: #634CFE;
  /**White, active*/
  --v-clr-wh-act: rgb(200, 200, 200);
  /** white in capsule*/
  --v-clr-hs-tray-color: rgba(200, 200, 200);
  --v-clr-hs-tray-color-completed: rgba(100, 100, 100);
  --v-clr-hs-tray-border-color-completed: rgba(100, 100, 100);
  --v-clr-hs-tray-completed-date:rgba(100, 100, 100) ;
  --v-clr-hs-tray-completed-ovl-background: rgba(100, 100, 100);
  --v-clr-hs-tray-completed-oval-text: black;
  --v-clr-tray-avatar-text: white;
  --v-clr-inactive-opinion-btn: rgba(200, 200, 200, 1);
  --v-clr-active-opinion-btn: rgba(194, 219, 245,1);
  --v-clr-active-opinion-btn-bg: rgba(70, 70, 70, 1);
  --v-clr-inactive-fact-btn: rgba(200, 200, 200, 1);
  --v-clr-active-fact-btn: rgba(194, 219, 245,1);
  --v-clr-active-fact-btn-bg: rgba(70, 70, 70, 1);
  /**inactive on black*/
  --v-clr-inact-on-black: rgb(100, 100, 100);
  /**black*/
  --v-clr-black: rgb(0, 0, 0);
  /**Campaign bacground*/
  --v-grd-campaign-background: linear-gradient(180deg, rgba(0, 80, 130, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 80%, rgba(0, 120, 160, 1) 100%);
  /**like Campaign bacground but starts from black*/
  --v-grd-blk-campaign-background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 120, 160, 1) 100%);
  /**contact manager background*/
  --v-grd-contact-manager-background: linear-gradient(180deg, rgba(75, 35, 115, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 80%, rgba(90, 30, 120, 1) 100%);
  /* not on swatch */
  --v-grd-de-prt: linear-gradient(180deg, rgba(75, 35, 115, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(45, 45, 145, 1) 100%);
  /**contacts board on campaign*/
  --v-grd-prt-on-dec: linear-gradient(180deg, rgba(75, 35, 115, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 120, 160, 1) 100%);
  /**light blue background, probably not themeable but just in case I put it here*/
  --v-grd-start-background: linear-gradient(180deg, rgba(50, 50, 200, 1) 0%, rgba(80, 100, 255, 1) 50.22%, rgba(0, 230, 230, 1) 100%);
  /*decision screen, vote screen probably not themeing*/
  /**green vote handle*/
  --v-clr-green-vote-handle: rgb(0, 80, 45);
  /**green vote frame*/
  --v-clr-green-vote-frame: rgb(0, 80, 45);
  /**green PRO, %*/
  --v-clr-green-pro-percent: rgb(0, 145, 70);
  /**vote green*/
  --v-clr-vote-green: rgba(2, 175, 80, .6);
  /**red vote handle*/
  --v-clr-red-vote-handle: rgb(145, 0, 35);
  /**red vote frame*/
  --v-clr-red-vote-frame: rgb(145, 0, 35);
  /**red PRO, %*/
  --v-clr-red-con-percent: rgb(200, 0, 50);
  /**vote red*/
  /* glitter for truth capsule  - layer 5*/
  /**bar tube*/
  /**green bar*/
  --v-clr-green-bar: #00AF5080;
  /**red bar*/
  --v-clr-red-bar: #E6003C80;
  /** description label green*/
  --v-grd-descr-lbl-green: linear-gradient(180deg, rgba(0, 105, 45, 1) 0%, rgba(0, 45, 30, 1) 10%, rgba(0, 60, 100, 1) 100%);
  /** description label red*/
  --v-grd-descr-lbl-red: linear-gradient(180deg, rgba(145, 0, 35, 1) 0%, rgba(90, 0, 25, 1) 10%, rgba(0, 60, 100, 1) 100%);
  /**delete circle button*/
  --v-clr-delete-circle-button: rgb(100, 100, 100);
  --v-grd-inspire-me-bg: linear-gradient(90deg, rgba(255, 65, 180, 1) 0%, rgba(105, 90, 255, 1) 100%);
  /**message board*/
  --v-clr-message-board-bg: rgba(0, 75, 255);
  /**ai mode lighting*/
  --v-grd-ai-mode: linear-gradient(90deg, rgba(255, 65, 180, 1) 0%, rgba(120, 105, 255, 0) 10%, rgba(120, 105, 255, 0) 90%, rgba(255, 65, 180, 1) 100%);
  --v-grd-mod-2-leave: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.25) 100%);
  --v-grd-mod-3-leave: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 16%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0.25) 100%);
  --v-grd-mod-4-leave: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0.25) 100%);
  --v-contact-manager-background: linear-gradient(rgb(65, 30, 100) 1%, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 67%, rgb(66, 22, 88) 100%);
  --v-um-main-background: linear-gradient(rgb(150, 0, 215) 1%, rgb(0, 0, 0) 11%, rgb(0, 0, 0) 80%, rgb(66, 22, 88) 100%);
  --v-contact-background-up: linear-gradient(90deg, #4b2373 0%, #000000 100%);
  --v-group-background: linear-gradient(
  	to bottom,
  	#391458 0%,
  	#280e3e 6%,
  	#190827 14%,
  	#0e0415 23%,
  	#050209 33%,
  	#010002 47%,
  	#000 81%,
  	#391458 100%);
  --v-Campaign-background-up: linear-gradient(90deg, #005082 0%, #000000 100%);
  --v-um-text-lond-color: rgb(204, 204, 204);
  --v-um-text-lond-disabled-color: rgb(102, 102, 102);
  --v-um-text-orange-color: rgb(255, 146, 0);
  --v-um-search-contacts-bg-color: rgb(70,70,70);
  --v-um-search-groups-bg-color: rgb(70,70,70);
  --v-um-search-campaigns-bg-color: rgb(70,70,70);
  --v-um-search-modal-bg-color: rgb(46, 30, 167);
  --v-um-li-scroll-indicator-t-gradient-mask: linear-gradient(
  	to bottom,
  	rgb(0,0,0,1) 0%,
  	rgba(0,0,0,0) 100%);
  --v-um-li-scroll-indicator-b-gradient-mask: linear-gradient(
  	to top,
  	rgb(0,0,0,1) 0%,
  	rgba(0,0,0,0) 100%);
  --v-um-item-edit-bg-gradient: linear-gradient(
  	to bottom,
  	#383A8C 0%,
  	#1A1D67 100%);
  --v-clr-um-cl-back: rgb(90,0,130);
  /**um list tab middle*/
  --v-clr-um-cl-mid:rgb(70, 0, 100);
  /**um list tab front*/
  --v-clr-um-cl-front:rgb(150,0,215);
  /**note board*/
  --v-grd-note-board: linear-gradient(180deg, rgba(160, 130, 110, 1) 0%, rgba(121, 110, 104, 1) 10%, rgba(0, 125, 150, 1) 100%);
  --v-durl-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiI+Cgk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNmZmZmZmYiIGN4PSIxIiBjeT0iMSIgcj0iMSIvPgo8L3N2Zz4K);
  --v-gr-truth-clip-bg: linear-gradient(180deg, rgba(0, 0, 0, .8)0%, rgba(0, 0, 0, .8)20%, rgba(0, 0, 0, .3)60%, rgba(255, 255, 255, .4) 100%) ;
  --v-gr-truth-clip-bg-mod: linear-gradient(180deg, rgba(0, 0, 0, .3)0%, rgba(0, 0, 0, .1)20%, rgba(0, 0, 0, .2)80%, rgba(255, 255, 255, .1) 100%) ;
  /**vote red - claim colorlayer 2 - */
  --v-clr-vote-red: #f00041;
  --v-gr-capsule-shadowing-bg: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, 0) 100%);
  --v-gr-capsule-shadowing-bg-mod: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, 0) 100%);
  /* glitter for truth capsule  - layer 5*/
  --v-clr-truth-glitter: rgba(255, 255, 255, .3);
  /** white in capsule - used for title (layer 6)*/
  --v-clr-wh-capsule: rgba(230, 230, 230, 1);
  --v-clr-mod-boards-texts-button: rgb(200, 200, 200);
  --v-gr-tr-bar-shadowing-bg: linear-gradient(to left, rgba(0,145,70,1)0%, rgba(0, 0, 0, 0)20%, rgba(255, 255, 255, .2) 30%, rgba(0, 0, 0, 0)70%, rgba(200, 0, 50, 1) 100% );
  /**bar tube - (layer 1) */
  --v-grd-bar-tube: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 0) 100%);
  --v-gr-tr-bar-shadowing-bg-mod: linear-gradient(to left, rgb(0, 60, 25)0%, rgba(0, 0, 0, 0)20%, rgba(255, 255, 255, .2) 30%, rgba(0, 0, 0, 0)60%, rgba(0, 0, 0, 0)70%, rgba(90, 0, 25, 1) 100% );
  --v-grd-bar-tube-mod: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 20%, rgba(255, 255, 255, .1) 80%, rgba(0, 0, 0, 0) 100%);
}

/* light theme */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/* TODO: create a real light theme, this is a "red-shift" for testing only. */
.light-theme {
  --v-clr-body: white;
  --v-clr-text-lond: #363636;
  --v-clr-text-lond-settings: #FFFFFF;
  --v-clr-wh-act-settings: white;
  /**campaign list tab back*/
  --v-clr-hs-cl-back: #6A81C2;
  /**campaign list tab middle*/
  --v-clr-hs-cl-mid: #7F97D9;
  /**campaign list tab front*/
  --v-clr-hs-cl-front: #95AEF2;
  /**campaign list front*/
  --v-grd-hs-cl-front:linear-gradient(to bottom, #96B0F1 0%, #D1E4F7 30%, #FDFFFF 70%);
  /**campaign background*/
  --v-grd-hs-c-bg: linear-gradient(to bottom, #96B0F1 0%, #D1E4F7 30%, #FDFFFF 70%);
  /**campaign list label & board*/
  --v-grd-hs-cl-tray: linear-gradient(180deg,rgba(225, 240, 254), #FFFFFF);
  --v-grd-hs-cl-base: linear-gradient(180deg,#7DBAFF, #B2CFFE);
  /**date, date bar*/
  --v-clr-hs-ddb: #FD8309;
  /**inactive on color*/
  --v-clr-inact-on-clr: #363636;
  /** AI icon color*/
  --v-clr-ai-icon: #634CFE;
  /**White, active*/
  --v-clr-wh-act: rgba(70, 70, 70, 1);
  --v-clr-hs-tray-color:rgba(70, 70, 70) ;
  --v-clr-hs-tray-color-completed:rgba(155, 155, 155) ;
  --v-clr-hs-tray-border-color-completed:rgba(155, 155, 155) ;
  --v-clr-hs-tray-completed-date: rgba(155, 155, 155);
  --v-clr-hs-tray-completed-ovl-background: rgba(155, 155, 155);
  --v-clr-hs-tray-completed-oval-text: white;
  --v-clr-tray-avatar-text: white;
  --v-gr-truth-clip-bg: linear-gradient(180deg, rgba(99, 140, 223, 0.8)0%, rgba(99, 140, 223, .8)20%, rgba(99, 140, 223, .3)60%, rgba(255, 255, 255, .4) 100%) ;
  --v-gr-truth-clip-bg-mod: linear-gradient(180deg, rgba(0, 0, 0, .3)0%, rgba(0, 0, 0, .1)20%, rgba(0, 0, 0, .2)80%, rgba(255, 255, 255, .1) 100%) ;
  /**vote red - claim colorlayer 2 - */
  --v-clr-vote-red: #f00041;
  --v-gr-capsule-shadowing-bg: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, 0) 100%);
  --v-gr-capsule-shadowing-bg-mod: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, 0) 100%);
  /* glitter for truth capsule  - layer 5*/
  --v-clr-truth-glitter: rgba(255, 255, 255, .3);
  /** white in capsule - used for title (layer 6)*/
  --v-clr-wh-capsule: #363636;
  --v-clr-mod-boards-texts-button: rgb(200, 200, 200);
  --v-gr-tr-bar-shadowing-bg: linear-gradient(to left, rgba(0,145,70,1)0%, rgba(0, 0, 0, 0)20%, rgba(255, 255, 255, .2) 30%, rgba(0, 0, 0, 0)70%, rgba(200, 0, 50, 1) 100% );
  /**bar tube - (layer 1) */
  --v-grd-bar-tube: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 0) 100%);
  --v-gr-tr-bar-shadowing-bg-mod: linear-gradient(to left, rgb(0, 60, 25)0%, rgba(0, 0, 0, 0)20%, rgba(255, 255, 255, .2) 30%, rgba(0, 0, 0, 0)60%, rgba(0, 0, 0, 0)70%, rgba(90, 0, 25, 1) 100% );
  --v-grd-bar-tube-mod: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, .1) 80%, rgba(0, 0, 0, 0) 100%);
  --v-clr-inactive-opinion-btn: rgba(70, 70, 70, 1);
  --v-clr-active-opinion-btn: rgba(194, 219, 245,1);
  --v-clr-active-opinion-btn-bg: rgba(70, 70, 70, 1);
  --v-clr-inactive-fact-btn: rgba(70, 70, 70, 1);
  --v-clr-active-fact-btn: rgba(194, 219, 245,1);
  --v-clr-active-fact-btn-bg: rgba(70, 70, 70, 1);
  /**inactive on black*/
  --v-clr-inact-on-black: #ffffff;
  /**black*/
  --v-clr-black: #363636;
  /**Campaign bacground*/
  --v-grd-campaign-background: linear-gradient(to bottom,rgba(165, 190, 245, 1) 0%, rgba(215, 225, 255) 10%, rgba(255, 255, 255, 1) 80%, rgba(235, 235, 255, 1) 100%);
  /**like Campaign bacground but starts from black*/
  --v-grd-blk-campaign-background: linear-gradient(180deg, #96B0F1 0%, #D1E4F7 30%, #FDFFFF 70%);
  /**contact manager background*/
  -v-grd-contact-manager-background: linear-gradient(to right, #A5BEF5 0%, #BEDCF5 30%, #A5BEF5 70%);
  /* not on swatch */
  --v-grd-de-prt: linear-gradient(180deg, rgba(75, 35, 255, 1) 0%, rgba(0, 0, 255, 1) 20%, rgba(45, 45, 255, 1) 100%);
  /**contacts board on campaign*/
  --v-grd-prt-on-dec: linear-gradient(180deg, #B2C0FF 0%, #D5E5FF 100%);
  /**light blue background, probably not themeable but just in case I put it here*/
  --v-grd-start-background: linear-gradient(180deg, rgba(50, 50, 200, 1) 0%, rgba(80, 100, 255, 1) 50%, rgba(0, 230, 230, 1) 100%);
  /*decision screen, vote screen probably not themeing*/
  /**green vote handle*/
  --v-clr-green-vote-handle: rgb(0, 125, 45);
  /**green vote frame*/
  --v-clr-green-vote-frame: rgb(0, 125, 45);
  /**green PRO, %*/
  --v-clr-green-pro-percent: #009146;
  /**vote green - layer 2*/
  --v-clr-vote-green: #00AF50;
  /**red vote handle*/
  --v-clr-red-vote-handle: #b4002d;
  /**red vote frame*/
  --v-clr-red-vote-frame: #b4002d;
  /**red PRO, %*/
  --v-clr-red-con-percent: #c80032;
  /**green bar*/
  --v-clr-green-bar: #00af50;
  /**red bar*/
  --v-clr-red-bar: #f00041;
  /** description label green*/
  --v-grd-descr-lbl-green: linear-gradient(180deg, #89D5CA 0%, #B7D2FF 100%);
  /** description label red*/
  --v-grd-descr-lbl-red: linear-gradient(180deg, #E4AFC9 0%, #C3D2FF 100%);
  /**delete circle button*/
  --v-clr-delete-circle-button: #9B9B9B;
  --v-grd-inspire-me-bg: linear-gradient(90deg, rgb(119, 150, 184) 0%, rgb(115, 137, 204) 100%);
  /**message board*/
  --v-clr-message-board-bg: linear-gradient(to right #c4ccdd 0%, #aaa5dc 100%);
  /**ai mode lighting*/
  --v-grd-ai-mode: linear-gradient(90deg, rgba(255, 65, 180, 1) 0%, rgba(10, 105, 255, 0) 10%, rgba(10, 105, 255, .1) 90%, rgba(255, 65, 180, 1) 100%);
  --v-grd-mod-2-leave: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.15) 100%);
  --v-grd-mod-3-leave: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 16%, rgba(0, 0, 0, 0.3) 85%, rgba(0, 0, 0, 0.15) 100%);
  --v-grd-mod-4-leave: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0.15) 100%);
  --v-contact-manager-background: linear-gradient(180deg, rgba(185, 181, 245) 0%, rgba(205, 204, 245) 85%, rgba(245, 245, 253) 98%,#FFFFFF 100%);
  --v-um-main-background: linear-gradient(rgba(185, 180, 245) 1%, #C4C1F2 95%, #EFEEFB 98%, #FFFFFF 100%);
  --v-contact-background-up: rgb(185, 180, 245);
  --v-group-background: linear-gradient(to right, #b9b4f5 0%, #d2d2f5 50%, #ffffff 100%);
  --v-Campaign-background-up: linear-gradient(to right, #a5bef5 0%, #bedcf5 50%, #ffffff 100%);
  --v--v-clr-um-cl-frontext-lond-color: rgb(11, 77, 192);
  --v-um-text-lond-disabled-color: rgb(11, 77, 192);
  --v-um-text-orange-color: rgb(11, 77, 192);
  --v-um-search-contacts-bg-color: #898989;
  --v-um-search-groups-bg-color: rgb(70, 70, 70);
  --v-um-search-campaigns-bg-color:rgb(70, 70, 70);
  --v-um-search-modal-bg-color: rgb(70, 70, 70);
  --v-um-li-scroll-indicator-t-gradient-mask: linear-gradient(
  	to bottom,
  	rgb(70, 70, 70) 0%,
  	rgba(255,0,0,0) 100%);
  --v-um-li-scroll-indicator-b-gradient-mask: linear-gradient(
  	to top,
  	rgb(70, 70, 70) 0%,
  	rgba(255,0,0,0) 100%);
  --v-um-item-edit-bg-gradient: linear-gradient(
  	to bottom,
  	rgb(70, 70, 70) 0%,
  	rgb(255, 0, 0, 0) 100%);
  --v-clr-um-cl-back: rgba(150, 145, 205);
  /**um list tab middle*/
  --v-clr-um-cl-mid:rgba(165, 160, 225);
  /**um list tab front*/
  --v-clr-um-cl-front: rgba(185, 180, 245);
  /**note board*/
  --v-grd-note-board: linear-gradient(to right, #d2d7c3 0%, #d2d7c3 50%, #c8f0ff 100%);
  --v-durl-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiI+Cgk8Y2lyY2xlIHN0eWxlPSJmaWxsOiMwMDAwMCIgY3g9IjEiIGN5PSIxIiByPSIxIi8+Cjwvc3ZnPgo=);
}

/*
  Icon Font: icons
*/
@font-face {
  font-family: "icons";
  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAwkAA0AAAAAFPQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAMCAAAABoAAAAcqby2ek9TLzIAAAGcAAAARAAAAGBKR1gbY21hcAAAAiQAAAB0AAABhOktAmBjdnQgAAACmAAAAAQAAAAEAAIAM2dhc3AAAAwAAAAACAAAAAj//wADZ2x5ZgAAAuAAAAdpAAAN/N6ml3doZWFkAAABMAAAAC8AAAA2KVEpv2hoZWEAAAFgAAAAGwAAACQApQDoaG10eAAAAeAAAABEAAAAgAl7AdJsb2NhAAACnAAAAEQAAABEL8gzBG1heHAAAAF8AAAAIAAAACAAcADnbmFtZQAACkwAAADkAAABlRe/dGJwb3N0AAALMAAAANAAAAE4yJqtDXjaY2BkYGAA4in7lnyM57f5ysDNEAAUYXjy6ZsAnGYCMrwZgoAkB5jNAABk2AtFAHjaY2BkYGAIAmJ2hhMMIODNwMiACuQBJDsBjgAAAQAAACEAtgANAAAAAAACAAAAAQABAAAAQAAuAAAAAHjaY2BhCGacwMDKwMBgwmABJLmhtBoDM4MIAwMTAyszAwwwCjAgQECaawpDA4PCRxmGACCXnSEIogZJiQIDIwAokAYAeNpjkGBgYgABKSA+AcQBDIJAzAbEAkAsDMUgMSEkDOJzILFBtAhUD4jNDRUXgNISDP4MXECaFSwPYQsBTVYDAMXpC0542t2O6xGCQBCDvzsQHyg+QBRFuNoohGapgArWAP6xBTKTzWYmk10gYmGNY0Iv52Yf00kTqcMTxtpMPoyY2aBtSsUzN0pt2bHnQMqRExlnLly5kVNwp+TBk4oXbzV/aGgJqkj4nZV6Dc8/3PLcmvEFvQcLcQACADMAAAAoACgAKAAoAEgAggCyAMYA2gDyARIBbAGWAbQByAIAAh4CZAJ6ApICtgOoBJoFYgXqBf4GJgZ6BpwGuAbeBu4G/njalVfLjuVIEc2XM9Pv+/Cjuqe6psdu2aWqpvvavrZHdFXNMDOLkQaExAp2rPkJ/gCxRbBlCVI34m/4Bf6ABSfSru5bVUiA02mn8xWRceJEpplggjGWsZFJZtib95y9vflgFPtn/157/7j5IAWK7L2kao+qPxjN/3XzgVP9MA55O4y12G2SZBxFxzDbFukrJMP2jE19kemqOZZjPdZ5nQ/5MF5kcZzFr0IVhuqrmD4iKoYhFGEaybCvMT5ln7HPWc1adr3OU1eYZKy64/hgPgMt6pNM8wdCmGgRkXqRSyTKhkIEq7SLOD47s3a3Y4ptmH0g87/KGz7JCfxFznOt9BMZZ2dxzDgssWe3SJaxuTRQszTtpdg3zV5kt2KHlGPtj/u1M5bTXmaZ63mb59STPbRxeGLjuTWLbWv5mVws+wwl9N8h3SGFeLO5f8Gza17d8uNQDhjUmsnac2sjvpWJL+6ofG5fbmVqyTmYj1Ep+wYWkk5iyl6yV+w1+xI1kJ5V97k59lnZd1ndaqPf8DtelIWp+mOlSRjEFlXXHo5T35WHbK6r4zveZ51SRkqt1F5GXGgAlxqdpkLKXRhyKSX3OO6I80icKbqeKWUFF0KJODHS0yZ8ya0Q1riOSpDS3rrm71aN90CWzUNOCx9nYDmsuXVOAzgbW9hYRUh8+3oTTjCCyNxVKaXZI7tvHvh23pqyzhfjVyqWcbKYP9tHkYyUw9YifY8Ukh7kQnAnOBUsfY77NT3OGSy8gwzCKmIlfJ9NRZbyeryT3TT0uSvP02DmfIXwHU95PvxY8J3mymrOFUp7zuM9wXi24+GtkHxPjbANR2nHz/fPCWG0PVkT1kPramEcU8750Ls1RXmCRantsiiFNUVs0TWBpt9ghldsWj2rHo/thNyTusPia2uVW4H55H5zMx5Rc+0DTwBvVeBxI43gtgi8jed7m+sgVLGVAFwFOgi9xCrpGSkC4+PLC30uTRAY0iVjObth71YfJazrfM3ZpbveiQ0SYbFBGuG91K8vdVaC61j4pdZRpHWQJF9Lc25kkiWEuzrhD3lS+YhDwH9e80KkXVrgWnn0hVK+u8GjENp9y37BAuj6jP2S/Y79if2Z/YX9DZa/4AZatM08lcemPlamMrpoCt3MAD0DcbSpagLkmoNVV7xrHYHGpm3GZh7f8Fo3NLqYMEOhTV2VOTAozNQeG6haV295Mw93vG1oagQ3XWbFMB+Gviw+B266BF3nHhXlfGy7whzqqqO5+yLhV8Bw6A/lgVScigYfedF7oKESXEvug48cF6jM1d5wbqUUgFJoRdWepqwMj7ngeAlfKCl89JWcqByk1vDErpMo0J4L+IGQmEB4EnWuIcYsJkCj5hfkzIJDiGtBfMDbCMjhVxihEEogHiOFVBZBQVlsXOiiMJpTu/RsomkswMELAq3CABFkWhuMwLo8qUk5Nw3p4kXGw5IRZK6kU5PTC8oKQ6UlVm7x/Jb9DPx9xl6wX7Pfsz8C47+yv8NrCthdd1XrYuMEuGBhYFEWR+DcXvBcA+qubgHWR6hrXY2foJ4ngrojFPDRlz2CwVRmhOcL3peYE2NvCWi00PxG4wmkCdq8BMoGRTQiBqPDlBeaIuJxKg2ewwg6lvQ5TEXddn2m28MICGEdQCO9BQaCTJHppR8DaAc6f4i1oWdKxiHjWcKVDCkI0YJHPtUSgM6a6ARjkwg8Eq60g1jYL8g5INtZGc4i1mLlcOGex0PpEBakgihFbCzkSqBNesA1PW0T10V4vtPc97CjiMKEEE8SlXMKDCcN4DSx8YCl9n5E+wgq3YqcCEQlcnegS5GSePzzlce/Yr9hv2V/eMLhpsr/Lw7jUdXNMhqkQ4+DyfISUbNos3zq+hKs65qWQCl76tNmkHYYM2y5h7oYyo9U77LuAZ0XphInONmBzE6gyR0xFThKi4qHTE2da8OY1F+5ISBHevnRBVbTLNQ8B7URjAUNu6fo/8hDbVJiuNALQp400kkOXpDbyXviL/KEfLXQM76nIu31C+d+AOfO2Dn7KVjnuGaqlWulo0KX8Kzom4VqhqiGulOu9eYB1xBI5xYbVOl41ZgEoJWLQaduOqWFWCIEnVaIFUFM8Y8jLj7hhYXW2tNEBNDABjDG4u5YjK2Ut/q1T8vG2rX4j26t9QYmKwQU0jhuel6sMTnoSUcN7G9nSF8iPTprnCUqwX1Fj4T2zAAW+4k7I6W0q92faKZKw1DTUR+XmuflZlNumjxN8+TSj62Nv9sW222RpFmaZpvI9yMfcmMg4QGFHz6eucqTM/xbNrAZMtY5J5wVizXrR7l5lKnvBptxkmlrrbTKRnZvz5D2KCnUXFBjMlh82NDajbtD9/moxp3jPu3ntJdT6MxwFMVm3p7s69O51rjdjn6j3YdYtnQ3x6ntnlju1GKntjqRvUXsoHE4EZXusN8uh5Aq619sQiBtlU9csmF1cXEXutMtDkrgQbgxF+zkf+EKVmczZihn+knY7y/znO/3aG/W/wlv/Z9wPxNZtvT6Nx1QENEAAAB42m2OMW7CQBBFv40BQZFUtGgpKG2NV6IwZQoOkIIeoZVlCXnFAifhAFS0uUWOkANwE77Xg9Kw0ui/mf36MwA+8IMEr5cqJxjiUznFGEvlARY4Kmf03JQ796/yiN2DziSbaGrPCaaknlPunSkP8IVcOaPnqjzEHHflEed/XVSDPTxanIh731K+4VDjggN2CGxdfTnsCJvoO0cNdDgYWBQQ6pr1n9T3JSqe0ZWlx2LFCN+eNz7UzthCzNrEjdSyyqvcil29u2fLTYF9E+eGWcLsIqrw24VT41sjUhYi8ibhCctnNIt42m2N207DMBBEPYnrJAXK/Q4PfECkAl9k2QuNsNeRHdN/5wUMNDwx0uiMNJpdUYkffX4IKf7TQzFEJWpUqCGxgEKDFh2W2MM+DrDCIY5wjBOc4gznuBArXOIK17jBLe5wX2trm+Leh1+mb8YYtr3bMSqj2ZBrzIbMG9nCoZCVJUcTtTZs2QVtF3Z0OUmyw6QGP4Y4Ka9Zv5L0xFn6EFhyKIOxzPuXuJ7D4xye5vDcpnLbTGTrlLnLvHu9zDwXKpGOZtOV5j0G7u1fil+MPU3iAAAAAf//AAJ42mNgYGBkAIL7105Fgugnn74JwGgAXUQIkgAA") format("woff");
  font-weight: normal;
  font-style: normal;
}
[data-icon]:before {
  content: attr(data-icon);
}

[data-icon]:before,
.icon-add:before,
.icon-add-mod:before,
.icon-add-sod:before,
.icon-arrow-l:before,
.icon-arrow-r:before,
.icon-cancel:before,
.icon-checked:before,
.icon-chevron-d:before,
.icon-chevron-r:before,
.icon-chicken:before,
.icon-delete:before,
.icon-download:before,
.icon-dplus:before,
.icon-edit:before,
.icon-import:before,
.icon-manage:before,
.icon-menu:before,
.icon-moon:before,
.icon-note:before,
.icon-pick-fr0:before,
.icon-pick-fr1:before,
.icon-pick-fr2:before,
.icon-pick-fr3:before,
.icon-plus:before,
.icon-search:before,
.icon-selected:before,
.icon-sun:before,
.icon-unchecked:before,
.icon-unselected:before {
  display: inline-block;
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.icon-add:before {
  content: "\f100";
}

.icon-add-mod:before {
  content: "\f101";
}

.icon-add-sod:before {
  content: "\f102";
}

.icon-arrow-l:before {
  content: "\f103";
}

.icon-arrow-r:before {
  content: "\f104";
}

.icon-cancel:before {
  content: "\f105";
}

.icon-checked:before {
  content: "\f106";
}

.icon-chevron-d:before {
  content: "\f11b";
}

.icon-chevron-r:before {
  content: "\f11c";
}

.icon-chicken:before {
  content: "\f107";
}

.icon-delete:before {
  content: "\f108";
}

.icon-download:before {
  content: "\f109";
}

.icon-dplus:before {
  content: "\f10a";
}

.icon-edit:before {
  content: "\f10b";
}

.icon-import:before {
  content: "\f10c";
}

.icon-manage:before {
  content: "\f10d";
}

.icon-menu:before {
  content: "\f10e";
}

.icon-moon:before {
  content: "\f10f";
}

.icon-note:before {
  content: "\f110";
}

.icon-pick-fr0:before {
  content: "\f111";
}

.icon-pick-fr1:before {
  content: "\f112";
}

.icon-pick-fr2:before {
  content: "\f113";
}

.icon-pick-fr3:before {
  content: "\f114";
}

.icon-plus:before {
  content: "\f115";
}

.icon-search:before {
  content: "\f11a";
}

.icon-selected:before {
  content: "\f116";
}

.icon-sun:before {
  content: "\f117";
}

.icon-unchecked:before {
  content: "\f118";
}

.icon-unselected:before {
  content: "\f119";
}

/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * flex weights
 */
/*
 * background-image from url or data-url
 */
/*
 * ThinkBar fonts
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
@font-face {
  font-family: "Khand-Bold";
  src: url("../fonts/Khand-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Khand-Light";
  src: url("../fonts/Khand-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Khand-Regular";
  src: url("../fonts/Khand-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Khand-Medium";
  src: url("../fonts/Khand-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Khand-Semibold";
  src: url("../fonts/Khand-Semibold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat-Thin";
  src: url("../fonts/Montserrat-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat-Medium";
  src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
}
/*
 * ThinkBar font classes
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
.tb-fnt-light {
  font-family: Khand-Light;
}

.tb-fnt-regular {
  font-family: Khand-Regular;
}

.tb-fnt-medium {
  font-family: Khand-Medium;
}

.tb-fnt-semibold {
  font-family: Khand-Semibold;
}

.tb-fnt-bold {
  font-family: Khand-Bold;
}

/*
 * ThinkBar font classes
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
.tb-clr-pro {
  color: rgb(57, 181, 74);
}

.tb-clr-con {
  color: rgb(237, 28, 36);
}

/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
.btn-ellipse-group, .um-edit-pill, .de-button-group, .d-tr-lower-button-group, .hs-button-group {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  margin-right: 0.05rem;
  border: 0.004rem solid var(--v-clr-wh-act);
  border-radius: 999rem;
  background: transparent;
}

/*
 * flex weights
 */
.flex-spring {
  flex: 1;
}

.flex-m-auto {
  margin: auto;
}

.flex-my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/*
 * classes to be used directly in markup
 * deprecated, kept till template converted to semantic classes 
 */
.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.flex-4 {
  flex: 4;
}

.flex-5 {
  flex: 5;
}

.flex-6 {
  flex: 6;
}

.flex-7 {
  flex: 7;
}

.flex-8 {
  flex: 8;
}

.flex-9 {
  flex: 9;
}

.flex-10 {
  flex: 10;
}

/*
 * scrollbar styles (for webkit browsers: chrome&safari)
 * see this SO reply and the references thereof:
 * https://stackoverflow.com/a/12702006
 * and this blog post
 * https://dev.to/xtrp/how-to-create-a-beautiful-custom-scrollbar-for-your-site-in-plain-css-1mjg
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* custom scrollbar */
::-webkit-scrollbar {
  width: 0.005rem;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 0.005rem;
  border: 0.0015rem solid transparent;
  background-clip: content-box;
}

/*::-webkit-scrollbar-thumb:hover {
	background-color: #a8bbbf;
}
*/
/*
::-webkit-scrollbar {
    width: ( 0.5 * $tb-u );
}
*/
/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
.tb-screen-blank {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  font-family: Khand-Regular;
}

.tb-screen-data {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  font-family: Khand-Regular;
  position: relative;
  background: var(--v-grd-campaign-background);
  margin-right: 0.01rem;
}

.tb-screen-data:last-of-type {
  margin-right: 0px;
}

.tb-screen-tree {
  display: flex;
  flex-direction: column;
  width: 1rem;
  height: 100vh;
  font-family: Khand-Regular;
  background-color: rgb(34, 34, 34);
  background-image: url("../img/background-b.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: background-image 1s ease-in-out;
  -webkit-transition: background-image 1s ease-in-out;
  position: relative;
  margin-right: 0.01rem;
  background: var(--v-grd-campaign-background);
}

.tb-screen-tree:last-of-type {
  margin-right: 0px;
}

.tb-screen-tree[data-sodmod=mod] {
  background-color: rgb(34, 34, 34);
  background-image: url("../img/background-c.svg");
  background: var(--v-grd-campaign-background);
}

.tb-screen-container {
  width: 1rem;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: var(--v-clr-body);
}

.tb-header-icon {
  width: 0.05rem;
  margin: 0.02rem;
}

.screen-header {
  display: flex;
  color: var(--v-clr-text-lond);
  padding: 0 0.03rem 0 0.03rem;
  height: 0.1525rem;
  min-height: 0.1525rem;
  max-height: 0.1525rem;
}

.screen-header-icon-group-left {
  display: flex;
  width: 0.25rem;
  min-width: 0.25rem;
  max-width: 0.25rem;
  min-width: 0.01rem;
}

.screen-header-icon-group-right {
  display: flex;
  width: 0.25rem;
  min-width: 0.25rem;
  max-width: 0.25rem;
  justify-content: flex-end;
}

.screen-header-icon {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  color: var(--v-clr-inact-on-clr);
  font-family: icons;
  font-size: 0.1rem;
}

.screen-header-icon-st {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  color: var(--v-clr-wh-act);
  font-family: icons;
  font-size: 0.1rem;
}

.screen-header-icon-group-left > .screen-header-icon {
  margin: auto 0.015rem auto 0;
  z-index: 1;
}

.screen-header-icon-group-right > .screen-header-icon {
  margin: auto 0 auto 0.015rem;
}

.screen-header-title-box {
  display: flex;
  flex: 1;
  font-family: Khand-Semibold;
  font-size: 0.06rem;
  color: var(--v-clr-inact-on-clr);
  text-justify: center;
}

.clone-Button {
  border-color: white;
  border-width: 0.00375rem;
  border-style: solid;
  border-radius: 0.02rem;
  width: 0.11rem;
  height: 0.11rem;
}

.screen-header-title {
  display: block;
  margin: auto;
}

.screen-header-title-cntr {
  display: flex;
  margin: auto;
  align-items: center;
  flex-direction: column;
}

.screen-header-owner-ellipsis {
  height: 0.04587rem;
  min-height: 0.04587rem;
  max-height: 0.04587rem;
  /*
   * the element this class is used on must have a block display mode,
   * inline, flex, etc. breaks text-overflow: ellipsis,
   * white-space: nowrap is also important,
   * see the discussion (Reggie Pinkham's note) of this SO reply:
   * https://stackoverflow.com/a/17783233
   */
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: bottom;
  /* 
   * NOTE: should be set according to background tone,
   * should we add a special color constant here?
   */
  color: var(--v-clr-inact-on-clr);
  font-size: 0.0225rem;
  font-family: Khand-Regular;
  max-width: 0.5rem;
  margin-top: 0.0075rem;
  margin-left: 0.02rem;
}

.screen-header-title-ellipsis {
  height: 0.04587rem;
  font-size: 0.04rem;
  /*
   * the element this class is used on must have a block display mode,
   * inline, flex, etc. breaks text-overflow: ellipsis,
   * white-space: nowrap is also important,
   * see the discussion (Reggie Pinkham's note) of this SO reply:
   * https://stackoverflow.com/a/17783233
   */
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: bottom;
  /* 
   * NOTE: should be set according to background tone,
   * should we add a special color constant here?
   */
  color: var(--v-clr-inact-on-clr);
  font-family: Khand-Semibold;
  max-width: 0.5rem;
}

.screen-header-description-ellipsis {
  height: 0.09174rem;
  font-size: 0.03rem;
  color: var(--v-clr-inact-on-clr);
  font-family: Khand-Regular;
  max-width: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden; /* hides extra text */
  text-overflow: ellipsis; /* adds "..." */
  white-space: normal; /* allow wrapping */
  border-radius: 0.02rem;
}

.screen-control-updown {
  height: 0.055rem;
}

.screen-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0) 0.18rem, rgba(0, 0, 0, 0));
  /*LL: we need explicit overflow: hidden of scroller container (new browser feature? used to work without it) */
  overflow: hidden;
}

.screen-modal-layer {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.screen-modal-layer[mdllv] {
  visibility: visible;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}

.tb-screen-data[scrr] {
  z-index: 10001;
}

.tb-screen-tree[scrr] {
  z-index: 10001;
}

/* AI mode (sitting/standing chicken)*/
.ai-mode-lighting {
  background: var(--v-grd-ai-mode);
  position: absolute;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  z-index: 101;
  pointer-events: none;
  mix-blend-mode: lighten;
}

.ai-mode-widget {
  flex-direction: column;
  height: 0.14rem;
  min-height: 0.14rem;
  max-height: 0.14rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  align-items: center;
}

.ai-mode-widget-svg {
  height: 0.11rem;
  min-height: 0.11rem;
  max-height: 0.11rem;
  margin-top: 0.01rem;
  fill: var(--v-clr-ai-icon);
}

.ai-mode-widget-text {
  margin-top: -0.02rem;
  font-size: 0.0225rem;
  font-family: Khand-Regular;
  color: var(--v-clr-inact-on-clr);
}

/*
 * blank screen wit loading spinner
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
.blank-cntr {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 0.4rem;
  min-width: 0.4rem;
  max-width: 0.4rem;
  height: 0.4rem;
  min-height: 0.4rem;
  max-height: 0.4rem;
  font-family: Khand-Regular;
  color: black;
}

.blank-cntr-spinner {
  display: flex;
  flex-direction: row;
  margin: auto;
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  width: 0.2rem;
  min-width: 0.2rem;
  max-width: 0.2rem;
}

.blnak-cntr-text {
  font-size: 0.045rem;
  margin: auto;
}

/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * Layout:
 * flex column, with weights
 * -logisq logo row:     2 (single item, right justified)
 * -thinkbar logo row:   4 (single item, auto margin)
 * -spacer row:          1
 * -facebook button row: 1 (single item auto margin)
 */
.splash-background {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 1rem;
  height: 100vh;
  font-family: Khand-Regular;
  background: linear-gradient(to bottom, #6A58FF 0%, #006BFF 45%, #00DEFF 82%, #ffffff 95%);
}

.splash-logisq-badge {
  /*
  position: absolute;
  top: 0;
  right: 0;
  width: ( 53 * $tb-u );
  min-width: ( 53 * $tb-u );
  max-width: ( 53 * $tb-u );
  height: ( 53 * $tb-u );
  min-height: ( 53 * $tb-u );
  max-height: ( 53 * $tb-u );
  clip-path: polygon( 0 0, 100% 0%, 100% 100% );
  background: linear-gradient( 45deg, $clr-splash-badge-dark 0%, $clr-splash-badge-dark 50%, $clr-splash-badge-base 55%, $clr-splash-badge-base 100% );
  */
  display: flex;
}

.splash-logisq-logo {
  margin-top: 0;
  margin-right: 0.055rem;
  margin-left: auto;
  margin-bottom: 0;
  width: 0.23rem;
  min-width: 0.23rem;
  max-width: 0.23rem;
  height: 0.23rem;
  min-height: 0.23rem;
  max-height: 0.23rem;
}

.splash-pickformi-row {
  display: flex;
  height: 1rem;
  min-height: 1rem;
  max-height: 1rem;
}

.pickformi-logo-img {
  height: 0.8rem;
  min-height: 0.8rem;
  max-height: 0.8rem;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0.02rem;
  margin-right: auto;
}

.splash-pickformi-text {
  display: flex;
  color: rgb(138, 158, 255);
  font-size: 0.36rem;
  font-family: Khand-Bold;
  text-align: right;
  margin-top: 0.1rem;
  margin-bottom: auto;
  margin-left: 0.3rem;
  margin-right: auto;
  line-height: 0.8;
  justify-content: center;
  align-items: center;
  width: 0.4rem;
  min-width: 0.4rem;
  max-width: 0.4rem;
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -sand-transform: rotate(315deg);
  transform: rotate(315deg);
}

.splash-login-button {
  /*
   * NOTE:
   * originally this was
  display: flex;
  * as part of fixing issue39 (splash screen appears after log in)
  * setting display mode is moved to script.
  * this how it works now:
  * initially the button is hidden by this class (display: none).
  * when the page is displayed first and there is no login token
  * code sets the login button visible by calling hideShow ont it
  * with true which sets display: flex.
  */
  display: none;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.07rem;
  margin-left: auto;
  margin-right: auto;
  /*width: ( 86 * $tb-u );
  min-width: ( 86 * $tb-u );
  max-width: ( 86 * $tb-u );
  */
  padding-left: 0.12rem;
  padding-right: 0.12rem;
  height: 0.18rem;
  min-height: 0.18rem;
  max-height: 0.18rem;
  background-color: #6A58FF;
  color: #ffffff;
  font-size: 0.064rem;
  font-family: Khand-Regular;
  border-radius: 0.09rem;
}

.splash-invite-note {
  font-size: 0.045rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.05rem;
  display: none;
}

/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
.nav-background {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 1rem;
  height: 100vh;
  font-family: Khand-Regular;
  background: var(--v-grd-start-background);
}

.nav-button-cntr {
  display: flex;
  flex-direction: column;
  margin-top: 0.1475rem;
  margin-bottom: 0.37rem;
  padding-left: 0.225rem;
  padding-right: 0.075rem;
  justify-content: space-between;
  flex: 1;
}

.nav-row {
  display: flex;
  justify-content: space-between;
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
}

.nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.55rem;
  min-width: 0.55rem;
  max-width: 0.55rem;
  color: #ffffff;
  font-size: 0.045rem;
  font-family: Khand-Medium;
  border-radius: 0.065rem;
  border-width: 0.0025rem;
  border: solid #ffffff;
}

.nav-arrow {
  font-size: 0.1rem;
  color: #ffffff;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.n-description-box {
  height: 0.315rem;
  min-height: 0.315rem;
  max-height: 0.315rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  border-radius: 0.04rem;
  background: var(--v-grd-descr-lbl-green);
  color: var(--v-clr-wh-act);
  padding: 0.04rem 0.04rem 0.07rem;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  position: relative;
  line-height: 1.25;
}

.n-notes-box {
  flex: 1;
  margin-top: 0.07rem;
  flex-direction: row;
  background: var(--v-grd-note-board);
  border-radius: 0.04rem;
  min-height: 0;
}

.n-notes-box:has(.n-note-editor) {
  flex-direction: column;
}

.n-notes-outer {
  flex: 1;
  flex-direction: column;
  margin-top: 0.05rem;
  overflow: hidden;
}

.n-notes {
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  /* 
   * inertial scrolling in iOS, hopefully this helps for bug#85
   * see the details in
   * src\client\styles\screens\user\user.scss::.user-tray-cntr
   */
  -webkit-overflow-scrolling: touch;
  /* needed, otherwise there is a 4px right margin (effectively) */
  scrollbar-width: none;
  flex: 1;
}

.n-note {
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
}

.n-note-avatar {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  border-radius: 0.05rem;
  font-family: Montserrat-Medium;
  font-size: 0.06rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.04rem;
  margin-right: 0.04rem;
}

.n-note-avatar[data-aci="0"] {
  color: black;
  background-color: #A93B77;
}

.n-note-avatar[data-aci="1"] {
  color: black;
  background-color: #E65A2D;
}

.n-note-avatar[data-aci="2"] {
  color: black;
  background-color: #DF8500;
}

.n-note-avatar[data-aci="3"] {
  color: black;
  background-color: #83A258;
}

.n-note-avatar[data-aci="4"] {
  color: black;
  background-color: #00BF00;
}

.n-note-avatar[data-aci="5"] {
  color: black;
  background-color: #00A79A;
}

.n-note-avatar[data-aci="6"] {
  color: black;
  background-color: #0090FF;
}

.n-note-avatar[data-aci="7"] {
  color: black;
  background-color: #5D63E8;
}

.n-note-avatar[data-aci="8"] {
  color: black;
  background-color: #8E5BBD;
}

.n-note-avatar[data-aci="9"] {
  color: black;
  background-color: #DB42B2;
}

.n-note-body {
  margin-top: 0.04rem;
  margin-right: 0.04rem;
  font-family: Khand-Medium;
  font-size: 0.03rem;
  color: var(--v-clr-wh-act);
  flex-direction: column;
  flex: 1;
}

.n-note-name-date {
  justify-content: space-between;
}

.n-note-text {
  height: 0.14rem;
  min-height: 0.14rem;
  max-height: 0.14rem;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  flex: 1;
  line-height: 0.98;
  line-clamp: 2;
  text-overflow: ellipsis;
}

textarea.n-note-text {
  color: var(--v-clr-text-lond);
  background-color: transparent;
  border: none;
  text-overflow: unset;
  line-clamp: unset;
}

.n-notes-nav {
  width: 0.19rem;
  min-width: 0.19rem;
  max-width: 0.19rem;
  padding-right: 0.005rem;
  padding-top: 0.0475rem;
  padding-bottom: 0.0475rem;
}

.n-notes-nav-divider {
  width: 0.015rem;
  min-width: 0.015rem;
  max-width: 0.015rem;
  margin-top: 0.0225rem;
  margin-bottom: 0.0225rem;
  background-image: var(--v-durl-divider);
  background-repeat: repeat-y;
}

.n-button {
  height: 0.135rem;
  min-height: 0.135rem;
  max-height: 0.135rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  flex-direction: column;
  justify-content: space-between;
  font-family: Khand-Regular;
  font-size: 0.0225rem;
  color: var(--v-clr-wh-act);
  align-items: center;
}

.n-notes-nav .n-button {
  margin-left: 0.03rem;
  margin-right: auto;
}

.n-button-icon {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  margin: 0 auto auto;
  font-family: icons;
  font-size: 0.1rem;
  color: var(--v-clr-wh-act);
}

.n-note-editor {
  height: 0.35rem;
  min-height: 0.35rem;
  max-height: 0.35rem;
  flex-direction: column;
  margin-bottom: -0.01rem;
  padding-top: 0.04rem;
}

.n-note-editor .n-note {
  height: 0.16rem;
  min-height: 0.16rem;
  max-height: 0.16rem;
}

.n-note-editor-buttons {
  height: 0.135rem;
  min-height: 0.135rem;
  max-height: 0.135rem;
  justify-content: space-between;
  margin-left: 0.18rem;
  margin-right: 0.05rem;
}

.n-note-editor .n-notes-nav-divider {
  height: 0.015rem;
  min-height: 0.015rem;
  max-height: 0.015rem;
  width: unset;
  min-width: unset;
  max-width: unset;
  margin-top: unset;
  margin-bottom: unset;
  margin-left: 0.2025rem;
  margin-right: 0.0725rem;
  background-image: var(--v-durl-divider);
  background-repeat: repeat-x;
}

.n-notes > .n-button {
  margin: auto;
}

/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * Home Screen tray topp matter classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.hs-above {
  height: 0.23rem;
  min-height: 0.23rem;
  max-height: 0.23rem;
  display: flex;
  flex-direction: column;
}

.hs-tabs {
  height: 0.0925rem;
  min-height: 0.0925rem;
  max-height: 0.0925rem;
  display: flex;
  position: relative;
}

.hs-tabs-bg {
  height: 0.0925rem;
  min-height: 0.0925rem;
  max-height: 0.0925rem;
  position: absolute;
  top: 0;
  left: 0;
}

.hs-tab-bg {
  height: 0.0925rem;
  min-height: 0.0925rem;
  max-height: 0.0925rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  position: absolute;
  top: 0;
  left: 0;
}

.hs-tab {
  height: 0.07rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  display: flex;
  flex: 1;
  font-family: Khand-Medium;
  font-size: 0.04rem;
  color: white;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hs-tabs[data-hsst=acd] .hs-tab-bg[data-hsst=acd] {
  z-index: 1;
  fill: var(--v-clr-hs-cl-front);
}

.hs-tabs[data-hsst=acd] .hs-tab[data-hsst=acd] {
  color: var(--v-clr-wh-act);
}

.hs-tabs[data-hsst=acd] .hs-tab-bg[data-hsst=md] {
  fill: var(--v-clr-hs-cl-mid);
}

.hs-tabs[data-hsst=acd] .hs-tab[data-hsst=md] {
  color: var(--v-clr-inact-on-clr);
}

.hs-tabs[data-hsst=acd] .hs-tab-bg[data-hsst=ad] {
  fill: var(--v-clr-hs-cl-back);
}

.hs-tabs[data-hsst=acd] .hs-tab[data-hsst=ad] {
  color: var(--v-clr-inact-on-clr);
}

.hs-tabs[data-hsst=md] .hs-tab-bg[data-hsst=acd] {
  fill: var(--v-clr-hs-cl-mid);
}

.hs-tabs[data-hsst=md] .hs-tab[data-hsst=acd] {
  color: var(--v-clr-inact-on-clr);
}

.hs-tabs[data-hsst=md] .hs-tab-bg[data-hsst=md] {
  z-index: 1;
  fill: var(--v-clr-hs-cl-front);
}

.hs-tabs[data-hsst=md] .hs-tab[data-hsst=md] {
  color: var(--v-clr-wh-act);
}

.hs-tabs[data-hsst=md] .hs-tab-bg[data-hsst=ad] {
  fill: var(--v-clr-hs-cl-back);
}

.hs-tabs[data-hsst=md] .hs-tab[data-hsst=ad] {
  color: var(--v-clr-inact-on-clr);
}

.hs-tabs[data-hsst=ad] .hs-tab-bg[data-hsst=acd] {
  fill: var(--v-clr-hs-cl-mid);
}

.hs-tabs[data-hsst=ad] .hs-tab[data-hsst=acd] {
  color: var(--v-clr-inact-on-clr);
}

.hs-tabs[data-hsst=ad] .hs-tab-bg[data-hsst=md] {
  fill: var(--v-clr-hs-cl-back);
}

.hs-tabs[data-hsst=ad] .hs-tab[data-hsst=md] {
  color: var(--v-clr-inact-on-clr);
}

.hs-tabs[data-hsst=ad] .hs-tab-bg[data-hsst=ad] {
  z-index: 1;
  fill: var(--v-clr-hs-cl-front);
}

.hs-tabs[data-hsst=ad] .hs-tab[data-hsst=ad] {
  color: var(--v-clr-wh-act);
}

/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
.hs-bottom {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--v-grd-hs-cl-front);
  /* workaround to avoid bottom darker line on the tabs in some circumstances */
  margin-top: -1px;
  padding-top: 1px;
  overflow-y: scroll;
}

.hs-tray-cntr {
  display: flex;
  flex-direction: column;
  flex: 1;
  /*LL: we need explicit overflow: hidden of scroller container (new browser feature? used to work without it) */
  overflow: hidden;
}

.hs-tray-items-cntr {
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
  /* 
   * inertial scrolling in iOS, hopefully this helps for bug#85
   * see the details in
   * src\client\styles\screens\user\user.scss::.user-tray-cntr
   */
  -webkit-overflow-scrolling: touch;
  /* needed, otherwise there is a 4px right margin (effectively) */
  scrollbar-width: none;
}

/*
 * Home Screen tray topp matter classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.hs-sorts {
  margin-top: 0.03rem;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.hs-sort {
  font-family: Khand-Medium;
  font-size: 0.03rem;
  color: var(--v-clr-text-lond);
  align-items: center;
}

.hs-sort-chk {
  color: var(--v-clr-wh-act);
  font-family: icons;
  font-size: 0.1rem;
  margin-right: 0.025rem;
}

/*
 * Home Screen tray classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/*$hs-results-tbp: (2 * $tb-u);
$hs-results-lrp: (1 * $tb-u);
*/
.hs-tray-item {
  margin-top: 0.025rem;
  margin-left: 0.01rem;
  display: flex;
}

.hs-tray-item:first-child {
  margin-top: 0px;
}

.hs-tray-item[data-dtimas] {
  flex-direction: row-reverse;
}

.hs-tray-select-cntr {
  display: flex;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  z-index: 102;
}

.hs-tray-select {
  display: flex;
  margin: auto;
  border-color: var(--v-clr-text-lond);
  border-style: solid;
  border-width: 0.0025rem;
  border-radius: 50%;
  height: 0.03rem;
  min-height: 0.03rem;
  max-height: 0.03rem;
  width: 0.03rem;
  min-width: 0.03rem;
  max-width: 0.03rem;
}

.hs-tray-select-dot {
  margin: auto;
  background: var(--v-clr-text-lond);
  border-radius: 50%;
  height: 0.02rem;
  min-height: 0.02rem;
  max-height: 0.02rem;
  width: 0.02rem;
  min-width: 0.02rem;
  max-width: 0.02rem;
}

.hs-tray {
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  background: var(--v-grd-hs-cl-tray);
  border-style: none;
  border-radius: 0.03rem;
  color: var(--v-clr-hs-tray-color);
  fill: var(--v-clr-text-lond);
  position: relative;
  flex: 1;
}

.hs-tray[data-hsts=c] {
  color: var(--v-clr-hs-tray-color-completed);
  fill: var(--v-clr-inact-on-black);
  border-style: solid;
  border-width: 0.0025rem;
  border-color: var(--v-clr-hs-tray-border-color-completed);
  background: transparent;
}

.hs-tray-avatar {
  display: flex;
  flex-direction: row;
  border-radius: 50%;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  margin-top: 0.045rem;
  margin-left: 0.04rem;
  font-family: Montserrat-Medium;
  font-size: 0.06rem;
  align-items: center;
  justify-content: center;
}

.hs-tray-avatar[data-aci="0"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #A93B77;
}

.hs-tray-avatar[data-aci="1"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #E65A2D;
}

.hs-tray-avatar[data-aci="2"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #DF8500;
}

.hs-tray-avatar[data-aci="3"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #83A258;
}

.hs-tray-avatar[data-aci="4"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #00BF00;
}

.hs-tray-avatar[data-aci="5"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #00A79A;
}

.hs-tray-avatar[data-aci="6"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #0090FF;
}

.hs-tray-avatar[data-aci="7"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #5D63E8;
}

.hs-tray-avatar[data-aci="8"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #8E5BBD;
}

.hs-tray-avatar[data-aci="9"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #DB42B2;
}

.hs-results {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 0.04rem;
  min-width: 0.04rem;
  max-width: 0.04rem;
  margin-left: 0.01rem;
  margin-top: 0.12rem;
  /*
  padding-top: $hs-results-tbp;
  padding-bottom: $hs-results-tbp;
  padding-left: $hs-results-lrp;
  padding-right: $hs-results-lrp;
  */
}

.hs-results[data-ocnt="0"] {
  justify-content: space-between;
}

.hs-results-bar-pro {
  width: 0.0175rem;
  background-color: rgb(57, 181, 74);
}

.hs-results-bar-con {
  width: 0.0175rem;
  background-color: rgb(237, 28, 36);
}

.hs-result-bar[data-optclridx="0"] {
  width: 0.01rem;
  background-color: rgb(10, 90, 130);
}

.hs-result-bar[data-optclridx="1"] {
  width: 0.01rem;
  background-color: rgb(90, 75, 140);
}

.hs-result-bar[data-optclridx="2"] {
  width: 0.01rem;
  background-color: rgb(75, 95, 75);
}

.hs-result-bar[data-optclridx="3"] {
  width: 0.01rem;
  background-color: rgb(105, 75, 75);
}

.hs-result-bar[data-optclridx="4"] {
  width: 0.01rem;
  background-color: rgb(60, 80, 135);
}

.hs-result-bar[data-optclridx="5"] {
  width: 0.01rem;
  background-color: rgb(120, 70, 115);
}

.hs-result-bar[data-optclridx="6"] {
  width: 0.01rem;
  background-color: rgb(10, 105, 95);
}

.hs-result-bar[data-optclridx="7"] {
  width: 0.01rem;
  background-color: rgb(140, 75, 60);
}

.hs-tray-txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  font-size: 0.03rem;
  font-family: Khand-Medium;
  margin-left: 0.02rem;
  margin-right: 0.02rem;
  margin-top: 0.025rem;
  margin-bottom: 0.025rem;
}

.hs-tray-txt-desc {
  line-height: 1.2;
  width: 0.4rem;
  min-width: 0.4rem;
  max-width: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.hs-tray-txt-hdr {
  /*hs-tray-txt-hdr*/
  font-size: 0.045rem;
  font-family: Khand-Semibold;
  text-overflow: ellipsis;
  display: block;
  overflow-x: clip;
  width: 0.35rem;
  min-width: 0.35rem;
  max-width: 0.35rem;
  white-space: nowrap;
}

.hs-tray-date {
  display: flex;
  flex-direction: column;
  width: 0.06rem;
  min-width: 0.06rem;
  max-width: 0.06rem;
  margin-left: 0.01rem;
  margin-right: 0.01rem;
  font-family: Khand-Semibold;
  justify-content: flex-start;
  align-items: center;
  color: var(--v-clr-hs-ddb);
}

.hs-tray[data-hsts=c] .hs-tray-date {
  color: var(--v-clr-hs-tray-completed-date);
}

.hs-tray-date-d {
  font-size: 0.06rem;
  height: 0.06rem;
  min-height: 0.06rem;
  max-height: 0.06rem;
  margin-top: 0.005rem;
}

.hs-tray-date-m {
  font-size: 0.045rem;
  height: 0.05rem;
  min-height: 0.05rem;
  max-height: 0.05rem;
  margin-top: 0.005rem;
}

.hs-tray-date-y {
  font-size: 0.03rem;
  height: 0.03rem;
  min-height: 0.03rem;
  max-height: 0.03rem;
  margin-top: 0.0125rem;
}

.hs-tray-date-bar {
  box-sizing: border-box;
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.13rem;
  min-width: 0.13rem;
  max-width: 0.13rem;
  display: flex;
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0.035rem;
  margin-right: 0.035rem;
}

.hs-tray-date-bar-c-fg {
  box-sizing: border-box;
  border: solid;
  border-width: 0.01rem;
  border-color: var(--v-clr-hs-ddb);
  border-radius: 50%;
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.13rem;
  min-width: 0.13rem;
  max-width: 0.13rem;
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.hs-tray-date-bar-c-bg {
  box-sizing: border-box;
  border: solid;
  border-width: 0.01rem;
  border-color: var(--v-clr-black);
  border-radius: 50%;
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.13rem;
  min-width: 0.13rem;
  max-width: 0.13rem;
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
}

.hs-tray-date-bar-icn {
  margin: auto;
  color: var(--v-clr-inact-on-clr);
  font-family: icons;
  font-size: 0.1rem;
}

.hs-tray-completed-ovl {
  display: flex;
  background: var(--v-clr-hs-tray-completed-ovl-background);
  position: absolute;
  bottom: 0;
  left: 0.56rem;
  height: 0.025rem;
  min-height: 0.025rem;
  max-height: 0.025rem;
  width: 0.16rem;
  min-width: 0.16rem;
  max-width: 0.16rem;
  border-top-left-radius: 0.005rem;
  border-top-right-radius: 0.005rem;
}

.hs-tray-completed-ovl-txt {
  mix-blend-mode: destination-out;
  font-size: 0.02rem;
  font-family: Khand-Semibold;
  color: var(--v-clr-hs-tray-completed-oval-text);
  margin: auto;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.hs-buttons {
  height: 0.18rem;
  min-height: 0.18rem;
  max-height: 0.18rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-left: 0.005rem;
  padding-right: 0.005rem;
  margin-top: 0.06rem;
}

.hs-button {
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  display: flex;
  flex-direction: column;
  font-family: Khand-Medium;
  font-size: 0.021rem;
  color: var(--v-clr-text-lond);
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  line-height: 1.1;
  gap: 0.0025rem;
}

.hs-button-icon {
  color: var(--v-clr-wh-act);
  font-family: icons;
  font-size: 0.07rem;
}

.hs-button-group {
  margin-left: auto;
  border-radius: 0.39rem;
  padding: 0.0025rem 0.01rem;
  gap: 0.0025rem;
}

.hs-button-group .hs-button {
  width: 0.1rem !important;
  min-width: 0.1rem;
  max-width: 0.1rem;
  height: 0.13rem !important;
  min-height: 0.13rem;
  max-height: 0.13rem;
  padding: 0.0015rem 0 0.005rem;
  white-space: normal;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * Common z-index breakpoints
 */
/* musth have a wider border, latest chrome/andriod
* does not render the border if border width < 1 true pixel (real pixel for HD screens)
* and the div has a border radisus > 0
*/
.decision-tree {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.d-tr-cntr {
  display: flex;
  flex: 1;
  justify-content: center;
  /* NOTE: these two attributes ensure that the container
   * - takes up all available space
   * - but does not grow beyond the size of the portion of the screen not taken up by other elements
   * essentially we say that it is ok that the container has 0 size and ommit it from free space calculation
   * this SO answer, although not dealing directly with our problem gave the idea:
   * https://stackoverflow.com/a/36247448
   */
  min-height: 0px;
  flex-basis: 0px;
}

.d-tr-cl-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: scroll;
  /* NOTE: this seems to fix the 'con-side-can-be-swiped-left' bug
   */
  overflow-x: hidden;
}

.d-tr-cl-column::-webkit-scrollbar {
  display: none;
}

.d-tr-add-claim-cntr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.d-tr-add-claim-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

.d-tr-add-claim-content--buttons {
  justify-content: center;
  margin-bottom: 0.01rem;
}

.d-tr-add-claim-buttons {
  display: flex;
  align-items: center;
}

.d-tr-add-claim-cntr-completed {
  text-align: center;
  font-family: Khand-Semibold;
  font-size: 0.06rem;
  color: var(--v-clr-inact-on-clr);
  margin: auto;
}

.d-tr-add-claim-buttons {
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: center;
}

.d-tr-add-claim-search {
  width: min(90%, 26rem);
}

input[type=search].input-clean {
  -webkit-appearance: none;
  appearance: none;
}

.d-tr-search-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.01rem 0.02rem 0.005rem;
  box-sizing: border-box;
  align-items: center;
  margin-top: 0.03rem;
}

.d-tr-add-claim-search {
  display: flex;
  align-items: center;
  gap: 0.01rem;
  border-radius: 0.03rem;
  padding: 0.001rem 0.009rem;
  width: 50%;
  box-shadow: inset 0 0 0 0.6px var(--v-clr-text-lond);
}

.d-tr-add-claim-search input[type=search],
.hs-search-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  flex: 1 1 auto !important;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  color: var(--v-clr-text-lond) !important;
  font: inherit !important;
  font-size: 0.03rem !important;
  line-height: 1.1 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
}

.d-tr-add-claim-search input[type=search]::-webkit-search-decoration,
.d-tr-add-claim-search input[type=search]::-webkit-search-cancel-button,
.d-tr-add-claim-search input[type=search]::-webkit-search-results-button,
.d-tr-add-claim-search input[type=search]::-webkit-search-results-decoration {
  display: none;
}

.d-tr-search-icon {
  font-family: icons;
  font-size: 0.07rem;
  color: var(--v-clr-text-lond);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.d-tr-add-claim-button {
  height: 0.05rem;
  min-height: 0.05rem;
  max-height: 0.05rem;
  width: 0.125rem;
  min-width: 0.125rem;
  max-width: 0.125rem;
  margin-top: 0.03375rem;
  border-radius: 0.025rem;
  border-width: 0.0025rem;
  border-style: solid;
  justify-content: space-between;
  align-items: center;
}

.d-tr-add-claim-button:first-child {
  color: var(--v-clr-red-con-percent);
  margin-left: 0;
  margin-right: auto;
}

.d-tr-add-claim-button:last-child {
  color: var(--v-clr-green-pro-percent);
  margin-right: 0;
  margin-left: auto;
}

.d-tr-add-claim-button-icon {
  font-family: icons;
  font-size: 0.025rem;
  margin: auto;
}

.d-tr-add-claim-button-text {
  width: 0.07rem;
  min-width: 0.07rem;
  max-width: 0.07rem;
  font-family: Khand-Semibold;
  font-size: 0.03rem;
  padding-left: 0.0075rem;
  margin-top: auto;
  margin-bottom: auto;
}

.d-tr-cntr--single-column {
  flex-direction: column;
  align-items: stretch;
}

.d-tr-single-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  gap: 0.015rem;
  padding: 0 0.01rem 0.02rem;
}

.d-tr-single-column-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  width: 100%;
}

.d-tr-single-column-aggregate {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  min-width: 80%;
  max-width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
}

.d-tr-single-column-aggregate .d-tr-bar-sod,
.d-tr-single-column-aggregate .d-tr-bar-mod {
  margin-left: 0;
  margin-right: 0;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/*
 * aggregate bars
 */
.d-tr-bar-sod {
  position: relative;
  width: 0.08rem;
  min-width: 0.08rem;
  max-width: 0.08rem;
  border-radius: 0.01rem;
  background: var(--v-grd-bar-tube);
  align-items: flex-end;
}

.d-tr-bar-sod-con {
  width: 0.0275rem;
  min-width: 0.0275rem;
  max-width: 0.0275rem;
  margin-left: 0.01rem;
  margin-right: 0.0025rem;
  background-color: var(--v-clr-red-bar);
}

.d-tr-bar-sod-pro {
  width: 0.0275rem;
  min-width: 0.0275rem;
  max-width: 0.0275rem;
  margin-left: 0.0025rem;
  margin-right: 0.01rem;
  background-color: var(--v-clr-green-bar);
}

.d-tr-bar-alpha-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--v-gr-tr-bar-shadowing-bg);
  z-index: 1000;
  border-radius: 0.01rem;
}

.tb-screen-data[data-sodmod=mod] .d-tr-bar-alpha-gradient {
  background: var(--v-gr-tr-bar-shadowing-bg-mod);
}

.d-tr-sod-percentage-cntr {
  height: 0.07rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  padding-bottom: 0.03rem;
  align-items: baseline;
  justify-content: space-between;
  display: flex;
}

.d-tr-sod-percentage-cntr--inline {
  height: auto;
  min-height: 0;
  max-height: none;
  padding-bottom: 0;
  gap: 0.0025rem;
  align-items: center;
  border-radius: 0.04rem;
  border: 0.004rem solid var(--v-clr-wh-act);
  padding: 0.0025rem 0.005rem;
}

.d-tr-add-claim-buttons .d-tr-sod-percentage-cntr--inline {
  margin: 0 auto;
}

.d-tr-sod-percentage-cntr--inline .d-tr-sod-percentage-spacer {
  display: none;
}

.d-tr-sod-percentage-cntr--inline .d-tr-sod-percentage {
  flex: initial;
  font-size: 0.016875rem;
}

.d-tr-sod-percentage-spacer {
  width: 0.08rem;
  min-width: 0.08rem;
  max-width: 0.08rem;
}

.d-tr-sod-percentage {
  font-family: Khand-Semibold;
  font-size: 0.0225rem;
  flex: 1;
}

.d-tr-sod-percentage:first-child {
  color: var(--v-clr-red-con-percent);
  justify-content: flex-end;
}

.d-tr-sod-percentage:last-child {
  color: var(--v-clr-green-pro-percent);
  justify-content: flex-start;
}

.d-tr-sod-percentage:first-child[data-dsodp="0"] {
  opacity: 0.45;
}

.d-tr-sod-percentage:last-child[data-dsodp="0"] {
  opacity: 0.45;
}

.d-tr-sod-percentage:first-child[data-dsodp="2"] {
  font-size: 0.045rem;
}

.d-tr-sod-percentage:last-child[data-dsodp="2"] {
  font-size: 0.045rem;
}

.d-tr-sod-percentage:first-child[data-dsodp="3"] {
  font-size: 0.0675rem;
}

.d-tr-sod-percentage:last-child[data-dsodp="3"] {
  font-size: 0.0675rem;
}

.d-tr-sod-percentage:first-child[data-dsodp="4"] {
  font-size: 0.09rem;
}

.d-tr-sod-percentage:last-child[data-dsodp="4"] {
  font-size: 0.09rem;
}

.d-tr-sod-percentage-cntr--inline[data-dsodp="3"] {
  border-color: var(--v-clr-green-pro-percent);
}

.d-tr-sod-percentage-cntr--inline[data-dsodp="1"] {
  border-color: var(--v-clr-red-con-percent);
}

.d-tr-lower-row {
  width: 100%;
  box-sizing: border-box;
  padding-left: 0.07rem;
  padding-right: 0.07rem;
  display: flex;
  align-items: center;
  gap: 0.04rem;
}

.d-tr-view-toggle {
  display: flex;
  align-items: center;
}

.d-tr-view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.0125rem;
  padding: 0.0075rem 0.02rem;
  border-radius: 0.03rem;
  border: 0.004rem solid var(--v-clr-wh-act);
  background: transparent;
  color: var(--v-clr-wh-act);
  font-family: Khand-Medium;
  font-size: 0.0225rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.d-tr-view-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.0075rem rgba(var(--v-clr-wh-act), 0.2);
}

.d-tr-view-toggle-btn:hover {
  background-color: rgba(var(--v-clr-wh-act), 0.12);
}

.d-tr-view-toggle-icon {
  width: 0.05rem;
  height: 0.05rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d-tr-view-toggle-icon::before,
.d-tr-view-toggle-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.d-tr-view-toggle-icon--list::before {
  left: 0.0075rem;
  top: 0.005rem;
  width: 0.035rem;
  height: 0.004rem;
  border-radius: 0.002rem;
  background-color: currentColor;
  box-shadow: 0 0.012rem 0 currentColor, 0 0.024rem 0 currentColor;
}

.d-tr-view-toggle-icon--list::after {
  left: 0;
  top: 0.005rem;
  width: 0.006rem;
  height: 0.006rem;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0.012rem 0 currentColor, 0 0.024rem 0 currentColor;
}

.d-tr-view-toggle-icon--tree::before {
  top: 0.0025rem;
  left: 50%;
  transform: translateX(-50%);
  border-left: 0.022rem solid transparent;
  border-right: 0.022rem solid transparent;
  border-bottom: 0.03rem solid currentColor;
}

.d-tr-view-toggle-icon--tree::after {
  bottom: 0.002rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.008rem;
  height: 0.02rem;
  border-radius: 0.004rem;
  background-color: currentColor;
}

.d-tr-view-toggle-text {
  font-size: 0.0225rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.d-tr-lower-buttons {
  height: 0.21rem;
  min-height: 0.21rem;
  max-height: 0.21rem;
  padding-left: 0;
  padding-right: 0;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}

.d-tr-lower-button-group {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  padding: 0;
  border-radius: 0.48rem;
}

.d-tr-lower-button {
  height: 0.16rem;
  min-height: 0.16rem;
  max-height: 0.16rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  display: flex;
  flex-direction: row;
  font-family: Khand-Medium;
  font-size: 0.03rem;
  color: var(--v-clr-text-lond);
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}

.d-tr-lower-button[data-isdis="1"] {
  opacity: 0.45;
}

.d-tr-lower-button-icon {
  color: var(--v-clr-wh-act);
  font-family: icons;
  font-size: 0.1rem;
}

.d-tr-lower-button-group .d-tr-lower-button {
  width: auto !important;
  min-width: auto;
  max-width: none;
  height: auto !important;
  min-height: auto;
  max-height: none;
  padding: 0 0.02rem;
}

.d-tr-lower-button-group .d-tr-lower-button-icon {
  margin-bottom: 0;
}

.d-tr-bar-mod {
  width: 0.08rem;
  min-width: 0.08rem;
  max-width: 0.08rem;
  border-radius: 0.01rem;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
  background: var(--v-grd-bar-tube-mod);
}

.d-tr-bar-mod-option {
  margin-left: 0.0025rem;
  margin-right: 0.0025rem;
}

.d-tr-bar-mod-option:first-of-type {
  margin-left: 0.005rem;
}

.d-tr-bar-mod-option:last-of-type {
  margin-right: 0.005rem;
}

.tb-screen-data[data-ocnt="2"] .d-tr-bar-mod-option {
  width: 0.0325rem;
  min-width: 0.0325rem;
  max-width: 0.0325rem;
}

.tb-screen-data[data-ocnt="2"] .decision-tree-list-item-bar {
  width: 0.0325rem;
  min-width: 0.0325rem;
  max-width: 0.0325rem;
}

.tb-screen-data[data-ocnt="2"] .decision-tree-list-item[data-tb-option-index="1"] .decision-tree-list-item-spacer {
  width: 0.45875rem;
  min-width: 0.45875rem;
  max-width: 0.45875rem;
}

.tb-screen-data[data-ocnt="2"] .decision-tree-list-item[data-tb-option-index="2"] .decision-tree-list-item-spacer {
  width: 0.49625rem;
  min-width: 0.49625rem;
  max-width: 0.49625rem;
}

.tb-screen-data[data-ocnt="3"] .d-tr-bar-mod-option {
  width: 0.02rem;
  min-width: 0.02rem;
  max-width: 0.02rem;
}

.tb-screen-data[data-ocnt="3"] .decision-tree-list-item-bar {
  width: 0.02rem;
  min-width: 0.02rem;
  max-width: 0.02rem;
}

.tb-screen-data[data-ocnt="3"] .decision-tree-list-item[data-tb-option-index="1"] .decision-tree-list-item-spacer {
  width: 0.45875rem;
  min-width: 0.45875rem;
  max-width: 0.45875rem;
}

.tb-screen-data[data-ocnt="3"] .decision-tree-list-item[data-tb-option-index="2"] .decision-tree-list-item-spacer {
  width: 0.48375rem;
  min-width: 0.48375rem;
  max-width: 0.48375rem;
}

.tb-screen-data[data-ocnt="3"] .decision-tree-list-item[data-tb-option-index="3"] .decision-tree-list-item-spacer {
  width: 0.50875rem;
  min-width: 0.50875rem;
  max-width: 0.50875rem;
}

.tb-screen-data[data-ocnt="4"] .d-tr-bar-mod-option {
  width: 0.01375rem;
  min-width: 0.01375rem;
  max-width: 0.01375rem;
}

.tb-screen-data[data-ocnt="4"] .decision-tree-list-item-bar {
  width: 0.01375rem;
  min-width: 0.01375rem;
  max-width: 0.01375rem;
}

.tb-screen-data[data-ocnt="4"] .decision-tree-list-item[data-tb-option-index="1"] .decision-tree-list-item-spacer {
  width: 0.45875rem;
  min-width: 0.45875rem;
  max-width: 0.45875rem;
}

.tb-screen-data[data-ocnt="4"] .decision-tree-list-item[data-tb-option-index="2"] .decision-tree-list-item-spacer {
  width: 0.4775rem;
  min-width: 0.4775rem;
  max-width: 0.4775rem;
}

.tb-screen-data[data-ocnt="4"] .decision-tree-list-item[data-tb-option-index="3"] .decision-tree-list-item-spacer {
  width: 0.49625rem;
  min-width: 0.49625rem;
  max-width: 0.49625rem;
}

.tb-screen-data[data-ocnt="4"] .decision-tree-list-item[data-tb-option-index="4"] .decision-tree-list-item-spacer {
  width: 0.515rem;
  min-width: 0.515rem;
  max-width: 0.515rem;
}

.d-tr-bar-mod-option[data-optclridx="1"] {
  background-color: rgb(10, 90, 130);
}

.decision-tree-list-item[data-optclridx="1"] .decision-tree-aggregate-bar-mod {
  background-color: rgb(10, 90, 130);
}

.d-tr-bar-mod-option[data-optclridx="2"] {
  background-color: rgb(90, 75, 140);
}

.decision-tree-list-item[data-optclridx="2"] .decision-tree-aggregate-bar-mod {
  background-color: rgb(90, 75, 140);
}

.d-tr-bar-mod-option[data-optclridx="3"] {
  background-color: rgb(75, 95, 75);
}

.decision-tree-list-item[data-optclridx="3"] .decision-tree-aggregate-bar-mod {
  background-color: rgb(75, 95, 75);
}

.d-tr-bar-mod-option[data-optclridx="4"] {
  background-color: rgb(105, 75, 75);
}

.decision-tree-list-item[data-optclridx="4"] .decision-tree-aggregate-bar-mod {
  background-color: rgb(105, 75, 75);
}

.d-tr-bar-mod-option[data-optclridx="5"] {
  background-color: rgb(60, 80, 135);
}

.decision-tree-list-item[data-optclridx="5"] .decision-tree-aggregate-bar-mod {
  background-color: rgb(60, 80, 135);
}

.d-tr-bar-mod-option[data-optclridx="6"] {
  background-color: rgb(120, 70, 115);
}

.decision-tree-list-item[data-optclridx="6"] .decision-tree-aggregate-bar-mod {
  background-color: rgb(120, 70, 115);
}

.d-tr-bar-mod-option[data-optclridx="7"] {
  background-color: rgb(10, 105, 95);
}

.decision-tree-list-item[data-optclridx="7"] .decision-tree-aggregate-bar-mod {
  background-color: rgb(10, 105, 95);
}

.d-tr-bar-mod-option[data-optclridx="8"] {
  background-color: rgb(140, 75, 60);
}

.decision-tree-list-item[data-optclridx="8"] .decision-tree-aggregate-bar-mod {
  background-color: rgb(140, 75, 60);
}

.d-tr-con-top-spacer {
  height: 0.05rem;
  min-height: 0.05rem;
  max-height: 0.05rem;
}

/* mostly deprecated, used by teams join/leave button, not reworked yet*/
.decision-footer-cell {
  flex-direction: column;
  align-items: flex-end;
  justify-items: center;
  width: 0.115rem;
  min-width: 0.115rem;
  max-width: 0.115rem;
  margin: 0 0.01rem 0 0.01rem;
}

.decision-footer > .decision-footer-cell:last-child {
  margin: 0;
  min-width: 0.135rem;
}

.decision-footer > .decision-footer-cell:last-child .decision-footer-cell-avatar {
  max-width: 0.135rem;
  width: 0.135rem;
}

.decision-footer-cell[data-tbsel="1"] {
  width: 0.14rem;
  min-width: 0.14rem;
  max-width: 0.14rem;
  margin: 0 -0.0025rem 0 -0.0025rem;
}

.decision-footer-cell-avatar {
  max-width: 0.115rem;
  max-height: 0.115rem;
  width: 0.115rem;
  height: 0.115rem;
  object-fit: contain;
  margin: auto;
  border-radius: 0.015rem;
  flex-direction: column;
}

.decision-footer-cell[data-tbsel="1"] .decision-footer-cell-avatar {
  max-width: 0.14rem;
  max-height: 0.14rem;
  width: 0.14rem;
  height: 0.14rem;
  object-fit: contain;
  margin: auto;
  border-radius: 0.02rem;
}

.decision-footer-cell-all-votes {
  background-image: url("../img/decision-all-votes-normal.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: -0.0175rem;
  height: 0.1325rem;
  min-height: 0.1325rem;
  max-height: 0.1325rem;
  width: 0.115rem;
  min-width: 0.115rem;
  max-width: 0.115rem;
}

.decision-footer-cell-join-leave {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--v-clr-text-lond);
  font-family: Khand-Regular;
  font-size: 0.045rem;
  color: black;
  margin-bottom: 0;
  height: 0.115rem;
  min-height: 0.115rem;
  max-height: 0.115rem;
  width: 0.115rem;
  min-width: 0.115rem;
  max-width: 0.115rem;
  border-style: none;
  border-radius: 0.015rem;
}

.decision-footer-cell-join-leave[data-tb-leave="1"] {
  background-color: rgba(0, 0, 0, 0);
  color: var(--v-clr-text-lond);
  border-style: solid;
  border-color: var(--v-clr-text-lond);
  border-width: 0.0025rem;
}

.decision-footer-cell[data-tbsel="1"] .decision-footer-cell-all-votes {
  background-image: url("../img/decision-all-votes-selected.svg");
  margin: 0 -0.0025rem -0.0225rem -0.0025rem;
  height: 0.1625rem;
  min-height: 0.1625rem;
  max-height: 0.1625rem;
  width: 0.14rem;
  min-width: 0.14rem;
  max-width: 0.14rem;
}

.decision-footer-cell-add-participant {
  background-image: url("../img/ikonok_42x42_plus.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 0.045rem;
  min-width: 0.045rem;
  max-width: 0.045rem;
  height: 0.045rem;
  min-height: 0.045rem;
  max-height: 0.045rem;
  margin: auto;
}

.decision-footer-cell-avatar-name {
  text-align: center;
  width: 0.115rem;
  min-width: 0.115rem;
  max-width: 0.115rem;
  height: 0.0344025rem;
  min-height: 0.0344025rem;
  max-height: 0.0344025rem;
  /*
   * the element this class is used on must have a block display mode,
   * inline, flex, etc. breaks text-overflow: ellipsis,
   * white-space: nowrap is also important,
   * see the discussion (Reggie Pinkham's note) of this SO reply:
   * https://stackoverflow.com/a/17783233
   */
  display: block;
  overflow-x: hidden;
  overflow-y: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  /* 
   * NOTE: should be set according to background tone,
   * should we add a special color constant here?
   */
  color: var(--v-clr-text-lond);
  font-size: 0.0225rem;
  font-family: Khand-Regular;
  transition: opacity 0.2s linear;
}

.decision-footer-cell[data-tbsel="1"] .decision-footer-cell-avatar-name[data-tb-avatar-name=top] {
  opacity: 1;
}

.decision-footer-cell[data-tbsel="0"] .decision-footer-cell-avatar-name[data-tb-avatar-name=top] {
  opacity: 0;
}

.decision-footer-cell[data-tbsel="1"] .decision-footer-cell-avatar-name[data-tb-avatar-name=bottom] {
  opacity: 0;
}

.decision-footer-cell[data-tbsel="0"] .decision-footer-cell-avatar-name[data-tb-avatar-name=bottom] {
  opacity: 1;
}

.d-option-list {
  height: 0.09rem;
  min-height: 0.09rem;
  max-height: 0.09rem;
  width: 0.74rem;
  min-width: 0.74rem;
  max-width: 0.74rem;
  justify-content: space-between;
  align-items: baseline;
  align-self: center;
}

.d-option-list-item {
  height: 0.09rem;
  font-size: 0.06rem;
}

.tb-screen-data[data-ocnt="2"] .d-option-list-item[data-txts="1"] {
  font-size: 0.03rem;
}

.tb-screen-data[data-ocnt="3"] .d-option-list-item[data-txts="1"] {
  font-size: 0.045rem;
}

.tb-screen-data[data-ocnt="3"] .d-option-list-item[data-txts="2"] {
  font-size: 0.03rem;
}

.tb-screen-data[data-ocnt="4"] .d-option-list-item[data-txts="1"] {
  font-size: 0.045rem;
}

.tb-screen-data[data-ocnt="4"] .d-option-list-item[data-txts="2"] {
  font-size: 0.03rem;
}

.tb-screen-data[data-ocnt="4"] .d-option-list-item[data-txts="3"] {
  font-size: 0.015rem;
}

.d-option-list-item[data-optclridx="0"] {
  color: rgb(10, 90, 130);
}

.d-option-list-item[data-optclridx="1"] {
  color: rgb(90, 75, 140);
}

.d-option-list-item[data-optclridx="2"] {
  color: rgb(75, 95, 75);
}

.d-option-list-item[data-optclridx="3"] {
  color: rgb(105, 75, 75);
}

.d-option-list-item[data-optclridx="4"] {
  color: rgb(60, 80, 135);
}

.d-option-list-item[data-optclridx="5"] {
  color: rgb(120, 70, 115);
}

.d-option-list-item[data-optclridx="6"] {
  color: rgb(10, 105, 95);
}

.d-option-list-item[data-optclridx="7"] {
  color: rgb(140, 75, 60);
}

/* new design */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
.d-tr-cl-widget, .d-sc-cl-widget {
  height: 0.15rem;
  min-height: 0.15rem;
  max-height: 0.15rem;
}

/*d-tr-cl-box*/
.d-tr-cl-, .d-sc-cl-box {
  height: 0.15rem;
  min-height: 0.15rem;
  max-height: 0.15rem;
  width: 0.36rem;
  min-width: 0.36rem;
  max-width: 0.36rem;
}

.d-tr-cl-[data-clpoc=con], [data-clpoc=con].d-sc-cl-box {
  justify-content: flex-end;
}

.d-tr-cl-truth, .d-sc-cl-truth {
  position: relative;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.25rem;
  min-width: 0.25rem;
  max-width: 0.25rem;
  border-radius: 0.01rem;
}

.d-tr-cl-truth-clip, .d-sc-cl-truth-clip {
  position: relative;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.25rem;
  min-width: 0.25rem;
  max-width: 0.25rem;
  border-style: solid;
  border-radius: 0.01rem;
  border-width: 0.0025rem;
  border-color: var(--v-clr-green-vote-frame);
  overflow: hidden;
  background: var(--v-gr-truth-clip-bg);
}

.tb-screen-data[data-sodmod=mod] .d-tr-cl-truth-clip, .tb-screen-data[data-sodmod=mod] .d-sc-cl-truth-clip {
  background: var(--v-gr-truth-clip-bg-mod);
}

.d-tr-cl-[data-clfoo="0"] .d-tr-cl-truth, .d-tr-cl-[data-clfoo="0"] .d-sc-cl-truth, [data-clfoo="0"].d-sc-cl-box .d-tr-cl-truth, [data-clfoo="0"].d-sc-cl-box .d-sc-cl-truth {
  margin-left: -0.05rem;
  border-radius: 0.05rem;
}

.d-tr-cl-[data-clfoo="0"] .d-tr-cl-truth-clip, .d-tr-cl-[data-clfoo="0"] .d-sc-cl-truth-clip, [data-clfoo="0"].d-sc-cl-box .d-tr-cl-truth-clip, [data-clfoo="0"].d-sc-cl-box .d-sc-cl-truth-clip {
  border-radius: 0.05rem;
}

.d-tr-cl-[data-clpoc=con][data-clfoo="0"] .d-tr-cl-truth, .d-tr-cl-[data-clpoc=con][data-clfoo="0"] .d-sc-cl-truth, [data-clpoc=con][data-clfoo="0"].d-sc-cl-box .d-tr-cl-truth, [data-clpoc=con][data-clfoo="0"].d-sc-cl-box .d-sc-cl-truth {
  margin-left: initial;
  margin-right: -0.05rem;
}

.d-tr-cl-[data-clpoc=con] .d-tr-cl-truth-clip, .d-tr-cl-[data-clpoc=con] .d-sc-cl-truth-clip, [data-clpoc=con].d-sc-cl-box .d-tr-cl-truth-clip, [data-clpoc=con].d-sc-cl-box .d-sc-cl-truth-clip {
  border-color: var(--v-clr-red-vote-frame);
  flex-direction: row-reverse;
}

.d-tr-cl-truth-note-indicator, .d-sc-cl-truth-note-indicator {
  position: absolute;
  bottom: -0.01375rem;
  right: -0.01375rem;
  font-family: icons;
  font-size: 0.05rem;
  color: var(--v-clr-inact-on-clr);
}

.d-tr-cl-[data-clpoc=con] .d-tr-cl-truth-note-indicator, .d-tr-cl-[data-clpoc=con] .d-sc-cl-truth-note-indicator, [data-clpoc=con].d-sc-cl-box .d-tr-cl-truth-note-indicator, [data-clpoc=con].d-sc-cl-box .d-sc-cl-truth-note-indicator {
  right: unset;
  left: -0.01375rem;
}

.d-tr-cl-truth-highlight, .d-sc-cl-truth-highlight {
  height: 0.02rem;
  min-height: 0.02rem;
  max-height: 0.02rem;
  width: 0.25rem;
  min-width: 0.25rem;
  max-width: 0.25rem;
  position: absolute;
  top: 0;
  margin-top: 0.005rem;
  overflow: hidden;
  opacity: 0.8;
  fill: var(--v-clr-truth-glitter);
}

.d-tr-cl-truth-highlight-fact, .d-sc-cl-truth-highlight-fact {
  height: 0.005rem;
  min-height: 0.005rem;
  max-height: 0.005rem;
  width: 0.24rem;
  min-width: 0.24rem;
  max-width: 0.24rem;
  position: absolute;
  top: 0;
  margin-top: 0.005rem;
  margin-left: 0.005rem;
  overflow: hidden;
  border-radius: 0.005rem 0.005rem 0 0;
  opacity: 0.8;
  background-color: var(--v-clr-truth-glitter);
}

.d-tr-claim-state-sod-truth, .d-sc-cl-sod-truth {
  background-color: var(--v-clr-vote-green);
}

.d-tr-cl-[data-clpoc=pro] .d-tr-claim-state-sod-truth, .d-tr-cl-[data-clpoc=pro] .d-sc-cl-sod-truth, [data-clpoc=pro].d-sc-cl-box .d-tr-claim-state-sod-truth, [data-clpoc=pro].d-sc-cl-box .d-sc-cl-sod-truth {
  background-color: var(--v-clr-vote-green);
}

.d-tr-cl-[data-clpoc=con] .d-tr-claim-state-sod-truth, .d-tr-cl-[data-clpoc=con] .d-sc-cl-sod-truth, [data-clpoc=con].d-sc-cl-box .d-tr-claim-state-sod-truth, [data-clpoc=con].d-sc-cl-box .d-sc-cl-sod-truth {
  background-color: var(--v-clr-vote-red);
}

.d-tr-cl-truth-mod-cntr, .d-sc-cl-truth-mod-cntr {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.d-tr-claim-state-mod-truth, .d-sc-cl-mod-truth {
  display: block;
  width: 100%;
}

.d-tr-claim-state-mod-truth[data-optclridx="0"], [data-optclridx="0"].d-sc-cl-mod-truth {
  border-color: rgb(10, 90, 130);
  background-color: rgb(10, 90, 130);
  margin-top: 1px;
}

.d-tr-claim-state-mod-truth[data-optclridx="1"], [data-optclridx="1"].d-sc-cl-mod-truth {
  border-color: rgb(90, 75, 140);
  background-color: rgb(90, 75, 140);
  margin-top: 1px;
}

.d-tr-claim-state-mod-truth[data-optclridx="2"], [data-optclridx="2"].d-sc-cl-mod-truth {
  border-color: rgb(75, 95, 75);
  background-color: rgb(75, 95, 75);
  margin-top: 1px;
}

.d-tr-claim-state-mod-truth[data-optclridx="3"], [data-optclridx="3"].d-sc-cl-mod-truth {
  border-color: rgb(105, 75, 75);
  background-color: rgb(105, 75, 75);
  margin-top: 1px;
}

.d-tr-claim-state-mod-truth[data-optclridx="4"], [data-optclridx="4"].d-sc-cl-mod-truth {
  border-color: rgb(60, 80, 135);
  background-color: rgb(60, 80, 135);
  margin-top: 1px;
}

.d-tr-claim-state-mod-truth[data-optclridx="5"], [data-optclridx="5"].d-sc-cl-mod-truth {
  border-color: rgb(120, 70, 115);
  background-color: rgb(120, 70, 115);
  margin-top: 1px;
}

.d-tr-claim-state-mod-truth[data-optclridx="6"], [data-optclridx="6"].d-sc-cl-mod-truth {
  border-color: rgb(10, 105, 95);
  background-color: rgb(10, 105, 95);
  margin-top: 1px;
}

.d-tr-claim-state-mod-truth[data-optclridx="7"], [data-optclridx="7"].d-sc-cl-mod-truth {
  border-color: rgb(140, 75, 60);
  background-color: rgb(140, 75, 60);
  margin-top: 1px;
}

.d-tr-claim-state-mod-truth:first-of-type, .d-sc-cl-mod-truth:first-of-type {
  margin-top: 0;
}

.d-tr-cl-[data-clpoc=con] .d-tr-cl-truth-mod-cntr, .d-tr-cl-[data-clpoc=con] .d-sc-cl-truth-mod-cntr, [data-clpoc=con].d-sc-cl-box .d-tr-cl-truth-mod-cntr, [data-clpoc=con].d-sc-cl-box .d-sc-cl-truth-mod-cntr {
  align-items: flex-end;
}

.d-tr-cl-truth-alpha-gradient, .d-sc-cl-truth-alpha-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--v-gr-capsule-shadowing-bg);
}

.tb-screen-data[data-sodmod=mod] .d-tr-cl-truth-alpha-gradient, .tb-screen-data[data-sodmod=mod] .d-sc-cl-truth-alpha-gradient {
  background: var(--v-gr-capsule-shadowing-bg-mod);
}

.tb-screen-tree[data-sodmod=mod] .d-tr-cl-truth-alpha-gradient, .tb-screen-tree[data-sodmod=mod] .d-sc-cl-truth-alpha-gradient {
  background: var(--v-gr-capsule-shadowing-bg-mod);
}

.d-tr-cl-truth-text-cntr, .d-sc-cl-truth-text-cntr {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.25rem;
  min-width: 0.25rem;
  max-width: 0.25rem;
  position: absolute;
  padding-left: 0.03rem;
  padding-right: 0.03rem;
  top: 0;
  left: 0;
}

.tb-screen-data[data-sodmod=mod] .d-tr-cl-truth-text-cntr, .tb-screen-data[data-sodmod=mod] .d-sc-cl-truth-text-cntr {
  background: var(--v-grd-mod-2-leave);
}

.d-tr-cl-truth-text-stack, .d-sc-cl-truth-text-stack {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.d-tr-cl-truth-text-title, .d-sc-cl-truth-text-title {
  width: 100%;
}

.d-tr-cl-truth-text-row, .d-sc-cl-truth-text-row {
  display: flex;
  flex: 1 0 50%;
  width: 100%;
}

.d-tr-cl-truth-text-row--title, .d-sc-cl-truth-text-row--title {
  align-items: center;
  justify-content: center;
}

.d-tr-cl-truth-text-row--description, .d-sc-cl-truth-text-row--description {
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.005rem;
}

.d-tr-claim-truth-text, .d-sc-cl-truth-text {
  display: inline-block;
  font-size: 0.03rem;
  font-family: Khand-Medium;
  color: var(--v-clr-wh-capsule);
  margin: auto;
  text-align: center;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.d-tr-cl-truth-description, .d-sc-cl-truth-description {
  display: inline-block;
  width: 100%;
  font-size: 0.0275rem;
  font-family: Khand-Medium;
  color: var(--v-clr-wh-capsule);
  text-align: center;
  text-overflow: ellipsis;
  line-height: 1.15;
  opacity: 0.85;
}

.d-tr-cl-relevance, .d-sc-cl-relevance {
  position: relative;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
}

.d-tr-claim-relevance-value {
  background-color: var(--v-clr-green-vote-handle);
  margin-top: auto;
  margin-bottom: auto;
}

.d-tr-cl-[data-clpoc=con] .d-tr-claim-relevance-value, [data-clpoc=con].d-sc-cl-box .d-tr-claim-relevance-value {
  background-color: var(--v-clr-red-vote-handle);
}

.d-tr-cl-pro .d-tr-claim-relevance-value {
  background: linear-gradient(to right, rgb(71, 255, 93) 0%, rgb(37, 170, 60));
  position: absolute;
  right: 0.017rem;
}

.d-tr-cl-select {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.08rem;
  min-width: 0.08rem;
  max-width: 0.08rem;
  z-index: 102;
}

.d-tr-cl-select--left {
  margin-right: 0.005rem;
}

.d-tr-cl-select-icon {
  height: 0.08rem;
  min-height: 0.08rem;
  max-height: 0.08rem;
  width: 0.08rem;
  min-width: 0.08rem;
  max-width: 0.08rem;
  font-family: icons;
  font-size: 0.08rem;
  color: var(--v-clr-delete-circle-button);
  margin-top: auto;
  margin-bottom: auto;
}

.d-tr-cl-con .d-tr-cl-truth-note-indicator, .d-tr-cl-con .d-sc-cl-truth-note-indicator {
  left: -0.015rem;
}

.d-tr-cl-pro .d-tr-cl-truth-note-indicator, .d-tr-cl-pro .d-sc-cl-truth-note-indicator {
  right: -0.015rem;
}

.d-tr-cl-pro .d-tr-cl-truth-value-clipper-mod {
  left: -0.5px;
}

.d-tr-cl-con .d-tr-cl-truth-value-clipper-mod {
  right: -0.5px;
}

.d-tr-cl-relevance-clipper {
  position: absolute;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  display: none;
  align-items: center;
}

.d-tr-cl-state-option-truth-widget[data-optclridx="0"] {
  border-color: rgb(10, 90, 130);
  background-color: rgb(10, 90, 130);
  margin: 0.00375rem 0;
}

.d-tr-cl-state-option-truth-widget[data-optclridx="1"] {
  border-color: rgb(90, 75, 140);
  background-color: rgb(90, 75, 140);
  margin: 0.00375rem 0;
}

.d-tr-cl-state-option-truth-widget[data-optclridx="2"] {
  border-color: rgb(75, 95, 75);
  background-color: rgb(75, 95, 75);
  margin: 0.00375rem 0;
}

.d-tr-cl-state-option-truth-widget[data-optclridx="3"] {
  border-color: rgb(105, 75, 75);
  background-color: rgb(105, 75, 75);
  margin: 0.00375rem 0;
}

.d-tr-cl-state-option-truth-widget[data-optclridx="4"] {
  border-color: rgb(60, 80, 135);
  background-color: rgb(60, 80, 135);
  margin: 0.00375rem 0;
}

.d-tr-cl-state-option-truth-widget[data-optclridx="5"] {
  border-color: rgb(120, 70, 115);
  background-color: rgb(120, 70, 115);
  margin: 0.00375rem 0;
}

.d-tr-cl-state-option-truth-widget[data-optclridx="6"] {
  border-color: rgb(10, 105, 95);
  background-color: rgb(10, 105, 95);
  margin: 0.00375rem 0;
}

.d-tr-cl-state-option-truth-widget[data-optclridx="7"] {
  border-color: rgb(140, 75, 60);
  background-color: rgb(140, 75, 60);
  margin: 0.00375rem 0;
}

.d-tr-cl-state-option-truth-widget:first-child {
  border-radius: 0.005rem 0.005rem 0 0;
}

.d-tr-cl-state-option-truth-widget:last-child {
  border-radius: 0 0 0.005rem 0.005rem;
}

.d-tr-cl-relevance, .d-sc-cl-relevance {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  /* width is set from code alnog with clip-path */
  position: relative;
}

.d-tr-cl-con .claim-vote-widget-main-mid-relevance-box {
  order: 2;
  margin-left: -0.00125rem;
}

.d-tr-cl-pro .claim-vote-widget-main-mid-relevance-box {
  order: 1;
  margin-right: -0.00125rem;
}

.d-tr-cl-relevance-clipper {
  flex-direction: column;
  justify-content: center;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  position: absolute;
}

.d-tr-cl-con .d-tr-cl-relevance-box-clipper {
  left: 0.05rem;
}

.d-tr-cl-pro[data-clfoo="0"] .d-tr-cl-relevance-box-clipper {
  clip-path: polygon(0 0, 100% 0, 1rem 0, 0.9905161606rem 0.0007463944rem, 0.9812658447rem 0.0029671987rem, 0.972476826rem 0.0066077295rem, 0.9643655191rem 0.0115783447rem, 0.9571316514rem 0.0177566514rem, 0.9509533447rem 0.0249905191rem, 0.9459827295rem 0.033101826rem, 0.9423421987rem 0.0418908447rem, 0.9401213944rem 0.0511411606rem, 0.939375rem 0.060625rem, 0.9401213944rem 0.0701088394rem, 0.9423421987rem 0.0793591553rem, 0.9459827295rem 0.088148174rem, 0.9509533447rem 0.0962594809rem, 0.9571316514rem 0.1034933486rem, 0.9643655191rem 0.1096716553rem, 0.972476826rem 0.1146422705rem, 0.9812658447rem 0.1182828013rem, 0.9905161606rem 0.1205036056rem, 1rem 0.12125rem, 0 100%, 0 0);
  -webkit-clip-path: polygon(0 0, 100% 0, 1rem 0, 0.9905161606rem 0.0007463944rem, 0.9812658447rem 0.0029671987rem, 0.972476826rem 0.0066077295rem, 0.9643655191rem 0.0115783447rem, 0.9571316514rem 0.0177566514rem, 0.9509533447rem 0.0249905191rem, 0.9459827295rem 0.033101826rem, 0.9423421987rem 0.0418908447rem, 0.9401213944rem 0.0511411606rem, 0.939375rem 0.060625rem, 0.9401213944rem 0.0701088394rem, 0.9423421987rem 0.0793591553rem, 0.9459827295rem 0.088148174rem, 0.9509533447rem 0.0962594809rem, 0.9571316514rem 0.1034933486rem, 0.9643655191rem 0.1096716553rem, 0.972476826rem 0.1146422705rem, 0.9812658447rem 0.1182828013rem, 0.9905161606rem 0.1205036056rem, 1rem 0.12125rem, 0 100%, 0 0);
}

.d-tr-cl-pro[data-clfoo="1"] .d-tr-cl-relevance-box-clipper,
.d-tr-cl-pro[data-clisgh="1"] .d-tr-cl-relevance-box-clipper {
  clip-path: polygon(0 0, 0.93875rem 0, 0.93875rem 100%, 0 100%, 0 0);
  -webkit-clip-path: polygon(0 0, 0.93875rem 0, 0.93875rem 100%, 0 100%, 0 0);
}

.d-tr-cl-con[data-clfoo="0"] .d-tr-cl-relevance-box-clipper {
  clip-path: polygon(100% 0, 100% 0.1rem, 0 0.1rem, 0 0.1rem, 0.0078217233rem 0.099384417rem, 0.0154508497rem 0.0975528258rem, 0.022699525rem 0.0945503262rem, 0.0293892626rem 0.0904508497rem, 0.0353553391rem 0.0853553391rem, 0.0404508497rem 0.0793892626rem, 0.0445503262rem 0.072699525rem, 0.0475528258rem 0.0654508497rem, 0.049384417rem 0.0578217233rem, 0.05rem 0.05rem, 0.049384417rem 0.0421782767rem, 0.0475528258rem 0.0345491503rem, 0.0445503262rem 0.027300475rem, 0.0404508497rem 0.0206107374rem, 0.0353553391rem 0.0146446609rem, 0.0293892626rem 0.0095491503rem, 0.022699525rem 0.0054496738rem, 0.0154508497rem 0.0024471742rem, 0.0078217233rem 0.000615583rem, 0rem 0rem, 100% 0);
  -webkit-clip-path: polygon(100% 0, 100% 0.1rem, 0 0.1rem, 0 0.1rem, 0.0078217233rem 0.099384417rem, 0.0154508497rem 0.0975528258rem, 0.022699525rem 0.0945503262rem, 0.0293892626rem 0.0904508497rem, 0.0353553391rem 0.0853553391rem, 0.0404508497rem 0.0793892626rem, 0.0445503262rem 0.072699525rem, 0.0475528258rem 0.0654508497rem, 0.049384417rem 0.0578217233rem, 0.05rem 0.05rem, 0.049384417rem 0.0421782767rem, 0.0475528258rem 0.0345491503rem, 0.0445503262rem 0.027300475rem, 0.0404508497rem 0.0206107374rem, 0.0353553391rem 0.0146446609rem, 0.0293892626rem 0.0095491503rem, 0.022699525rem 0.0054496738rem, 0.0154508497rem 0.0024471742rem, 0.0078217233rem 0.000615583rem, 0rem 0rem, 100% 0);
}

.d-tr-cl-con[data-clfoo="1"] .d-tr-cl-relevance-box-clipper,
.d-tr-cl-con[data-clisgh="1"] .d-tr-cl-relevance-box-clipper {
  clip-path: polygon(0.06125rem 0, 100% 0, 100% 100%, 0.06125rem 100%, 0.06125rem 0);
  -webkit-clip-path: polygon(0.06125rem 0, 100% 0, 100% 100%, 0.06125rem 100%, 0.06125rem 0);
}

.d-tr-cl-pro[data-clisgh="1"] .d-tr-claim-relevance-value,
.d-tr-cl-con[data-clisgh="1"] .d-tr-claim-relevance-value {
  background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(255, 255, 255));
}

/* list view overrides must follow decision-claim import to trump default capsule sizing */
.d-tr-single-column {
  gap: 0.016rem !important;
}

.d-tr-single-column-section {
  gap: 0.016rem !important;
}

.d-tr-single-column .d-tr-cl-widget,
.d-tr-single-column .d-sc-cl-widget {
  width: 80% !important;
  min-width: 80% !important;
  max-width: 80% !important;
  min-height: 0.16rem !important;
  height: 0.16rem !important;
  max-height: 0.16rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.d-tr-single-column .d-tr-cl-widget .flex-spring,
.d-tr-single-column .d-sc-cl-widget .flex-spring {
  display: none !important;
}

.d-tr-single-column .d-tr-cl-,
.d-tr-single-column .d-sc-cl-box {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 0.16rem !important;
  height: 0.16rem !important;
  max-height: 0.16rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.d-tr-single-column .d-tr-cl-[data-clpoc=con],
.d-tr-single-column .d-sc-cl-box[data-clpoc=con] {
  justify-content: center !important;
}

.d-tr-single-column .d-tr-cl-truth,
.d-tr-single-column .d-sc-cl-truth,
.d-tr-single-column .d-tr-cl-truth-clip,
.d-tr-single-column .d-sc-cl-truth-clip,
.d-tr-single-column .d-tr-cl-truth-text-cntr,
.d-tr-single-column .d-sc-cl-truth-text-cntr,
.d-tr-single-column .d-tr-cl-truth-highlight,
.d-tr-single-column .d-sc-cl-truth-highlight {
  min-height: 0.16rem !important;
  height: 0.16rem !important;
  max-height: 0.16rem !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.d-tr-single-column .d-tr-cl-truth-clip,
.d-tr-single-column .d-sc-cl-truth-clip {
  flex-direction: row !important;
}

.d-tr-single-column .d-tr-cl-truth-highlight-fact,
.d-tr-single-column .d-sc-cl-truth-highlight-fact {
  height: calc(0.16rem - 0.01rem) !important;
}

.d-tr-single-column .d-tr-cl-truth-note-indicator,
.d-tr-single-column .d-sc-cl-truth-note-indicator {
  right: unset !important;
  left: -0.01375rem !important;
}

.d-sc-cl-widget {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
  min-height: 0.24rem;
  height: 0.24rem;
  max-height: 0.24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.d-sc-cl-box {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 0.24rem !important;
  height: 0.24rem !important;
  max-height: 0.24rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

.d-sc-cl-select {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  left: -0.1rem;
}

.d-sc-cl-box[data-clpoc=con] {
  justify-content: center;
}

.d-sc-cl-truth {
  min-height: 0.16rem !important;
  height: 0.16rem !important;
  max-height: 0.16rem !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: unset !important;
  box-sizing: border-box;
}

.d-sc-cl-truth-clip {
  min-height: 0.16rem !important;
  height: 0.16rem !important;
  max-height: 0.16rem !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex-direction: row !important;
}

.d-sc-cl-box[data-clfoo="0"] .d-sc-cl-truth-clip {
  border-radius: 0.1rem !important;
}

.d-sc-cl-box[data-clfoo="1"] .d-sc-cl-truth-clip {
  border-radius: 0.01rem !important;
}

.d-sc-cl-box[data-clpoc=con] .d-sc-cl-truth-clip {
  flex-direction: row !important;
}

.d-sc-cl-truth-mod-cntr {
  min-height: 0.16rem !important;
  height: 0.16rem !important;
  max-height: 0.16rem !important;
}

.d-sc-cl-truth-text-cntr {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.d-sc-cl-truth-text-row--title {
  max-height: 40%;
}

.d-sc-cl-truth-text-row--description {
  padding-top: 0;
}

.d-sc-cl-truth-text-title {
  font-size: 0.04rem !important;
}

.d-sc-cl-truth-description {
  font-size: 0.03rem !important;
}

.d-sc-cl-truth-note-indicator {
  right: unset;
  left: -0.01375rem;
}

.d-sc-cl-relevance {
  position: absolute;
  top: 50%;
  right: -0.04rem;
  transform: translateY(-50%);
  width: 0.04rem !important;
  min-width: 0.04rem !important;
  max-width: 0.04rem !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.d-sc-cl-relevance-value {
  width: 100% !important;
}

.d-tr-single-column .d-sc-cl-widget {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
  min-height: 0.24rem;
  height: 0.24rem;
  max-height: 0.24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.d-tr-single-column .d-sc-cl-widget .flex-spring {
  display: none !important;
}

.d-tr-single-column .d-sc-cl-box {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 0.24rem !important;
  height: 0.24rem !important;
  max-height: 0.24rem !important;
  display: flex;
  align-items: center;
  justify-content: center !important;
  margin: 0 auto;
}

.d-tr-single-column .d-sc-cl-box[data-clpoc=con] {
  justify-content: center !important;
}

.d-tr-single-column .d-sc-cl-truth,
.d-tr-single-column .d-sc-cl-truth-clip,
.d-tr-single-column .d-sc-cl-truth-text-cntr,
.d-tr-single-column .d-sc-cl-truth-highlight {
  min-height: 0.16rem !important;
  height: 0.16rem !important;
  max-height: 0.16rem !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.d-tr-single-column .d-sc-cl-truth-mod-cntr {
  min-height: 0.16rem !important;
  height: 0.16rem !important;
}

.d-tr-single-column .d-sc-cl-truth-highlight-fact {
  height: calc(0.16rem - 0.01rem) !important;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * misc. utility mixins
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * Common z-index breakpoints
 */
/* new design */
.d-footer {
  height: 0.32rem;
  min-height: 0.32rem;
  max-height: 0.32rem;
  border-top-left-radius: 0.04rem;
  border-top-right-radius: 0.04rem;
  background: var(--v-grd-prt-on-dec);
  padding-top: 0.01rem;
  z-index: 102;
}

.d-footer-a-v {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 0.0425rem;
  margin-right: 0.0425rem;
  height: 0.25rem;
  min-height: 0.25rem;
  max-height: 0.25rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
}

.d-footer-a-v-name {
  font-family: Khand-Medium;
  font-size: 0.03rem;
  color: var(--v-clr-wh-act);
  height: 0.035rem;
  min-height: 0.035rem;
  max-height: 0.035rem;
  margin-top: 0.035rem;
  margin-bottom: 0px;
  justify-content: center;
  opacity: 0.45;
}

.d-footer-a-v-name[data-tbsel="1"] {
  opacity: 1;
}

.d-footer-a-v-svg {
  height: 0.115rem;
  min-height: 0.115rem;
  max-height: 0.115rem;
  width: 0.115rem;
  min-width: 0.115rem;
  max-width: 0.115rem;
  margin-top: 0.035rem;
  margin-left: auto;
  margin-right: auto;
}

.d-footer-prts {
  height: 0.25rem;
  min-height: 0.25rem;
  max-height: 0.25rem;
  width: 0.6rem;
  min-width: 0.6rem;
  max-width: 0.6rem;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.d-footer-prts::-webkit-scrollbar {
  display: none;
}

.d-footer-prt {
  flex-direction: column;
  justify-content: flex-start;
  height: 0.25rem;
  min-height: 0.25rem;
  max-height: 0.25rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  line-height: 0.96;
  text-align: center;
}

.d-footer-prt-name {
  font-family: Khand-Medium;
  font-size: 0.03rem;
  color: var(--v-clr-wh-act);
  height: 0.035rem;
  min-height: 0.035rem;
  max-height: 0.035rem;
  margin-top: 0.035rem;
  margin-bottom: 0px;
  justify-content: center;
  opacity: 0;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-name {
  opacity: 1;
}

.d-footer-prt:nth-child(odd) .d-footer-prt-name {
  margin-top: 0px;
  margin-bottom: 0.035rem;
}

.d-footer-prt-avatar {
  height: 0.11rem;
  min-height: 0.11rem;
  max-height: 0.11rem;
  width: 0.11rem;
  min-width: 0.11rem;
  max-width: 0.11rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.03rem;
  font-family: Montserrat-Medium;
  font-size: 0.06rem;
  background-color: red;
  border-radius: 50%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.d-footer-prt-avatar[data-aci="0"] {
  color: #A93B77;
  border-color: #A93B77;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="0"] {
  background-color: #A93B77;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="1"] {
  color: #E65A2D;
  border-color: #E65A2D;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="1"] {
  background-color: #E65A2D;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="2"] {
  color: #DF8500;
  border-color: #DF8500;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="2"] {
  background-color: #DF8500;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="3"] {
  color: #83A258;
  border-color: #83A258;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="3"] {
  background-color: #83A258;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="4"] {
  color: #00BF00;
  border-color: #00BF00;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="4"] {
  background-color: #00BF00;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="5"] {
  color: #00A79A;
  border-color: #00A79A;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="5"] {
  background-color: #00A79A;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="6"] {
  color: #0090FF;
  border-color: #0090FF;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="6"] {
  background-color: #0090FF;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="7"] {
  color: #5D63E8;
  border-color: #5D63E8;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="7"] {
  background-color: #5D63E8;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="8"] {
  color: #8E5BBD;
  border-color: #8E5BBD;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="8"] {
  background-color: #8E5BBD;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-prt-avatar[data-aci="9"] {
  color: #DB42B2;
  border-color: #DB42B2;
  border-style: solid;
  border-width: 0.005rem;
  background-color: transparent;
}

.d-footer-prt[data-tbsel="1"] .d-footer-prt-avatar[data-aci="9"] {
  background-color: #DB42B2;
  color: var(--v-clr-black);
  border-style: none;
}

.d-footer-mng {
  height: 0.305rem;
  min-height: 0.305rem;
  max-height: 0.305rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  flex-direction: column;
  color: var(--v-clr-inact-on-clr);
}

.d-footer-mng-icon {
  height: 0.11rem;
  min-height: 0.11rem;
  max-height: 0.11rem;
  margin-top: 0.09rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.1rem;
}

.d-footer-mng-txt {
  height: 0.03rem;
  min-height: 0.03rem;
  max-height: 0.03rem;
  margin-top: 0.025rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.03rem;
}

.d-footer-leave {
  border: 1px solid var(--v-clr-wh-act);
  border-radius: 0.02rem;
  justify-content: center;
  align-items: center;
  height: 0.11rem;
  min-height: 0.11rem;
  max-height: 0.11rem;
  margin-top: 0.1rem;
  padding-bottom: 0.05rem;
  padding-left: 0.0125rem;
}
.d-footer-leave .d-footer-mng-txt {
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/* new design */
.de-bottom {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--v-grd-blk-campaign-background);
  margin-top: 0.0925rem;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.de-base {
  flex-direction: column;
  height: 0.51rem;
  min-height: 0.51rem;
  max-height: 0.51rem;
  border-radius: 0.04rem;
  background: var(--v-grd-hs-cl-base);
  margin-top: -0.0425rem;
}

.de-title {
  font-family: Khand-Semibold;
  font-size: 0.06rem;
  color: var(--v-clr-wh-act);
  margin-left: 0.075rem;
  margin-right: 0.075rem;
  margin-top: 0.045rem;
  background: transparent;
  outline: none;
  border: none;
}

.de-title::placeholder {
  opacity: 0.6;
}

.de-description {
  font-family: Khand-Regular;
  font-size: 0.045rem;
  color: var(--v-clr-wh-act);
  margin-left: 0.075rem;
  margin-right: 0.075rem;
  margin-top: 0.03rem;
  background: transparent;
  outline: none;
  border: none;
}

.de-description::placeholder {
  opacity: 0.6;
}

.de-date-cntr {
  display: flex;
  position: relative;
  height: 0.08rem;
  min-height: 0.08rem;
  max-height: 0.08rem;
  margin-left: 0.075rem;
  margin-right: 0.075rem;
  margin-top: 0.03rem;
}

.de-complete-button-cntr {
  display: flex;
  justify-content: flex-start;
  padding-left: 0.075rem;
  margin-top: 0.02rem;
}

.de-date-picker {
  position: absolute;
  top: 0;
  opacity: 0;
  height: 0.08rem;
  min-height: 0.08rem;
  max-height: 0.08rem;
  width: 0.85rem;
  min-width: 0.85rem;
  max-width: 0.85rem;
}

input[type=date]::-webkit-calendar-picker-indicator {
  background-color: red;
  height: 0.08rem;
  min-height: 0.08rem;
  max-height: 0.08rem;
  width: 0.85rem;
  min-width: 0.85rem;
  max-width: 0.85rem;
}

.de-date {
  font-family: Khand-Medium;
  font-size: 0.06rem;
  color: var(--v-clr-wh-act);
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.de-options {
  flex-direction: column;
}

.de-option {
  height: 0.16rem;
  min-height: 0.16rem;
  max-height: 0.16rem;
  margin: 0.01rem 0px 0.01rem 0.01rem;
}

.tb-screen-data[data-tb-sodmod=sod] .de-option {
  display: none;
}

.de-option-title-box {
  flex: 1;
  border-radius: 0.03rem;
  background: white;
}

.de-option-title-box[data-optclridx="1"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(10, 90, 130) 20%, rgb(0, 80, 120) 100%);
}

.de-option-title-box[data-optclridx="2"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(90, 75, 140) 20%, rgb(80, 65, 130) 100%);
}

.de-option-title-box[data-optclridx="3"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(75, 95, 75) 20%, rgb(65, 85, 65) 100%);
}

.de-option-title-box[data-optclridx="4"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(105, 75, 75) 20%, rgb(95, 65, 65) 100%);
}

.de-option-title-box[data-optclridx="5"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(60, 80, 135) 20%, rgb(50, 70, 125) 100%);
}

.de-option-title-box[data-optclridx="6"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(120, 70, 115) 20%, rgb(110, 60, 105) 100%);
}

.de-option-title-box[data-optclridx="7"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(10, 105, 95) 20%, rgb(0, 95, 85) 100%);
}

.de-option-title-box[data-optclridx="8"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(140, 75, 60) 20%, rgb(130, 65, 50) 100%);
}

.de-option-title {
  font-family: Khand-Semibold;
  color: var(--v-clr-mod-boards-texts-button);
  font-size: 0.045rem;
  margin: auto 0.07rem;
}

.de-option[data-deoin="0"] .de-option-title {
  font-family: Khand-Regular;
  color: var(--v-clr-mod-boards-texts-button);
  opacity: 0.6;
}

.de-option-delete-box {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  margin: auto 0px;
  font-family: icons;
  font-size: 0.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--v-clr-inact-on-clr);
}

.de-option-delete-box[data-isdis="1"] {
  opacity: 0.45;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * misc. utility mixins
 */
.de-prt {
  display: flex;
  flex-direction: column;
  height: 0.625rem;
  min-height: 0.625rem;
  max-height: 0.625rem;
  margin-top: 0.06rem;
  border-radius: 0.04rem;
  background: var(--v-grd-de-prt);
}

.de-prt-title {
  font-family: Khand-Medium;
  font-size: 0.045rem;
  color: var(--v-clr-wh-act);
  margin-top: 0.045rem;
  justify-content: center;
}

.de-prt-avatar-groups {
  display: flex;
  flex-direction: row;
  height: 0.185rem;
  min-height: 0.185rem;
  max-height: 0.185rem;
  justify-content: center;
  margin-top: 0.045rem;
}

.de-prt-avatar-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 0.0075rem;
  margin-right: 0.0075rem;
  height: 0.185rem;
  min-height: 0.185rem;
  max-height: 0.185rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
}

.de-prt-avatar-title {
  font-family: Khand-Medium;
  font-size: 0.03rem;
  color: var(--v-clr-wh-act);
  overflow: visible;
  white-space: nowrap;
  margin-left: -0.05rem;
  width: 0.2rem;
  min-width: 0.2rem;
  max-width: 0.2rem;
  justify-content: center;
}

.de-prt-avatar-group:nth-child(even) .de-prt-avatar-title {
  margin-top: 0.035rem;
}

.de-prt-avatar {
  display: flex;
  flex-direction: row;
  border-radius: 50%;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  font-family: Montserrat-Medium;
  font-size: 0.06rem;
  align-items: center;
  justify-content: center;
}

.de-prt-avatar[data-aci="0"] {
  color: black;
  background-color: #A93B77;
}

.de-prt-avatar[data-aci="1"] {
  color: black;
  background-color: #E65A2D;
}

.de-prt-avatar[data-aci="2"] {
  color: black;
  background-color: #DF8500;
}

.de-prt-avatar[data-aci="3"] {
  color: black;
  background-color: #83A258;
}

.de-prt-avatar[data-aci="4"] {
  color: black;
  background-color: #00BF00;
}

.de-prt-avatar[data-aci="5"] {
  color: black;
  background-color: #00A79A;
}

.de-prt-avatar[data-aci="6"] {
  color: black;
  background-color: #0090FF;
}

.de-prt-avatar[data-aci="7"] {
  color: black;
  background-color: #5D63E8;
}

.de-prt-avatar[data-aci="8"] {
  color: black;
  background-color: #8E5BBD;
}

.de-prt-avatar[data-aci="9"] {
  color: black;
  background-color: #DB42B2;
}

.de-prt-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-left: 0.14rem;
  padding-right: 0.14rem;
  margin-top: 0.045rem;
}

.de-prt-button {
  height: 0.16rem;
  min-height: 0.16rem;
  max-height: 0.16rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  display: flex;
  flex-direction: column;
  font-family: Khand-Medium;
  font-size: 0.03rem;
  color: var(--v-clr-inact-on-clr);
  justify-content: space-between;
  align-items: center;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * misc. utility mixins
 */
.de-buttons {
  height: 0.22rem;
  min-height: 0.22rem;
  max-height: 0.22rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-left: 0.14rem;
  padding-right: 0.14rem;
  margin-top: 0.1rem;
  gap: 0.01rem;
}

.de-button-group {
  margin-left: auto;
  padding: 0.005rem 0.02rem;
  gap: 0.015rem;
  border-radius: 0.11rem;
}

.de-button {
  height: 0.16rem;
  min-height: 0.16rem;
  max-height: 0.16rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  display: flex;
  flex-direction: column;
  font-family: Khand-Medium;
  font-size: 0.03rem;
  color: var(--v-clr-inact-on-clr);
  justify-content: space-between;
  align-items: center;
  width: 0.14rem;
  min-width: 0.14rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-bottom: 0.0075rem;
}

.tb-screen-data[data-isacc="0"] .de-button-done {
  opacity: 0.45;
}

.de-button-icon {
  color: var(--v-clr-inact-on-clr);
  font-family: icons;
  font-size: 0.1rem;
}

.de-button-complete {
  border: 1px solid var(--v-clr-wh-act);
  border-radius: 0.02rem;
  padding: 0.025rem 0.1rem;
  font-size: 0.045rem;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  flex-direction: row;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.de-oe-ovl {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.de-oe-modal-container {
  width: 1rem;
  height: 100vh;
  position: absolute;
}

.de-oe-modal-container[data-ismdbl="0"] .de-oe-ovl {
  display: none;
}

.de-oe-modal-container[data-ismdbl="1"] .de-oe-ovl {
  backdrop-filter: blur(3px);
}

.de-oe-box {
  display: flex;
  height: 0.6rem;
  min-height: 0.6rem;
  max-height: 0.6rem;
  border-radius: 0.03rem;
  margin-top: 0.525rem;
  flex-direction: column;
}

.de-oe-box[data-optclridx="1"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(10, 90, 130) 20%, rgb(0, 80, 120) 100%);
}

.de-oe-box[data-optclridx="2"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(90, 75, 140) 20%, rgb(80, 65, 130) 100%);
}

.de-oe-box[data-optclridx="3"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(75, 95, 75) 20%, rgb(65, 85, 65) 100%);
}

.de-oe-box[data-optclridx="4"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(105, 75, 75) 20%, rgb(95, 65, 65) 100%);
}

.de-oe-box[data-optclridx="5"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(60, 80, 135) 20%, rgb(50, 70, 125) 100%);
}

.de-oe-box[data-optclridx="6"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(120, 70, 115) 20%, rgb(110, 60, 105) 100%);
}

.de-oe-box[data-optclridx="7"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(10, 105, 95) 20%, rgb(0, 95, 85) 100%);
}

.de-oe-box[data-optclridx="8"] {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(140, 75, 60) 20%, rgb(130, 65, 50) 100%);
}

.de-oe-title-box {
  display: flex;
  flex-direction: column;
  height: 0.085rem;
  min-height: 0.085rem;
  max-height: 0.085rem;
  margin: 0.075rem 0.075rem 0rem 0.075rem;
  color: var(--v-clr-black);
}

.de-oe-title-input {
  font-family: Khand-Semibold;
  color: var(--v-clr-mod-boards-texts-button);
  font-size: 0.045rem;
  background: transparent;
  border-style: none;
  width: 100%;
}

.de-oe-title-input::placeholder {
  color: var(--v-clr-mod-boards-texts-button);
  opacity: 0.6;
}

.de-oe-description-box {
  flex: 1;
  margin: 0 0.075rem;
}

.de-oe-description-input {
  font-family: Khand-Regular;
  color: var(--v-clr-mod-boards-texts-button);
  font-size: 0.045rem;
  background: transparent;
  border-style: none;
  width: 100%;
  height: 100%;
}

.de-oe-description-input::placeholder {
  color: var(--v-clr-mod-boards-texts-button);
  opacity: 0.6;
}

.de-oe-color-box {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  margin: 0.02rem 0.075rem;
  justify-content: space-between;
  align-items: center;
}

.de-oe-color-item {
  height: 0.055rem;
  min-height: 0.055rem;
  max-height: 0.055rem;
  width: 0.055rem;
  min-width: 0.055rem;
  max-width: 0.055rem;
  border-radius: 0.01rem;
}

.de-oe-color-item[data-optclridx="1"] {
  background-color: rgb(10, 90, 130);
}

.de-oe-color-item[data-optclridx="2"] {
  background-color: rgb(90, 75, 140);
}

.de-oe-color-item[data-optclridx="3"] {
  background-color: rgb(75, 95, 75);
}

.de-oe-color-item[data-optclridx="4"] {
  background-color: rgb(105, 75, 75);
}

.de-oe-color-item[data-optclridx="5"] {
  background-color: rgb(60, 80, 135);
}

.de-oe-color-item[data-optclridx="6"] {
  background-color: rgb(120, 70, 115);
}

.de-oe-color-item[data-optclridx="7"] {
  background-color: rgb(10, 105, 95);
}

.de-oe-color-item[data-optclridx="8"] {
  background-color: rgb(140, 75, 60);
}

.de-oe-done-button {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  margin-left: 0.03rem;
  font-family: icons;
  font-size: 0.1rem;
  color: var(--v-clr-black);
}

.de-oe-icons {
  display: flex;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  justify-content: flex-end;
  margin: 0 0.0475rem 0.0475rem 0.0475rem;
}

.de-oe-box[data-isacc="0"] .de-oe-done-button {
  opacity: 0.45;
}

/* ai assist overlay */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * Common z-index breakpoints
 */
.de-ai-assist-ovl {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  align-items: center;
  backdrop-filter: blur(3px);
  z-index: 100;
}

.de-ai-assist-ovl-cntr {
  margin-top: 0.62rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 0.62rem;
  min-height: 0.62rem;
  max-height: 0.62rem;
  width: 0.86rem;
  min-width: 0.86rem;
  max-width: 0.86rem;
  border-radius: 0.07rem;
  background: var(--v-grd-inspire-me-bg);
  padding: 0.035rem;
}

.de-ai-assist-ovl-cntr-row1 {
  height: 0.18rem;
  min-height: 0.18rem;
  max-height: 0.18rem;
  font-family: Khand-Semibold;
  font-size: 0.09rem;
  color: var(--v-clr-wh-act);
  justify-content: space-between;
  align-items: center;
}

.de-ai-assist-ovl-cntr-row1-svg-l {
  margin: auto;
  height: 0.11rem;
  min-height: 0.11rem;
  max-height: 0.11rem;
  width: 0.16rem;
  min-width: 0.16rem;
  max-width: 0.16rem;
  fill: var(--v-clr-wh-act);
}

.de-ai-assist-ovl-cntr-row1-svg-r {
  margin: auto;
  height: 0.16rem;
  min-height: 0.16rem;
  max-height: 0.16rem;
  width: 0.16rem;
  min-width: 0.16rem;
  max-width: 0.16rem;
  fill: var(--v-clr-wh-act);
}

.de-ai-assist-ovl-cntr-warn {
  display: flex;
  font-size: 0.0225rem;
  font-family: Khand-Regular;
  line-height: 1.4;
  text-align: center;
  color: var(--v-clr-wh-act);
  height: 0.11rem;
  min-height: 0.11rem;
  max-height: 0.11rem;
  justify-content: center;
}

.de-ai-assist-ovl-cntr-msg {
  display: flex;
  font-size: 0.045rem;
  font-family: Khand-Regular;
  line-height: 1.4;
  text-align: center;
  color: var(--v-clr-wh-act);
  height: 0.12rem;
  min-height: 0.12rem;
  max-height: 0.12rem;
  justify-content: center;
}

.de-ai-assist-ovl-cntr-buttons {
  height: 0.16rem;
  min-height: 0.16rem;
  max-height: 0.16rem;
  justify-content: space-around;
}

.de-ai-assist-ovl-cntr-button {
  flex-direction: column;
  height: 0.16rem;
  min-height: 0.16rem;
  max-height: 0.16rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  justify-content: space-between;
  align-items: center;
}

.de-ai-assist-ovl-cntr-button-icon {
  font-family: icons;
  font-size: 0.1rem;
  color: var(--v-clr-wh-act);
}

.de-ai-assist-ovl-cntr-button-txt {
  font-family: Khand-Regular;
  font-size: 0.0225rem;
  color: var(--v-clr-wh-act);
}

.de-ai-assist-ovl-dontshow {
  margin-top: 0.11rem;
  height: 0.12rem;
  min-height: 0.12rem;
  max-height: 0.12rem;
  width: 0.545rem;
  min-width: 0.545rem;
  max-width: 0.545rem;
  font-family: Khand-Medium;
  font-size: 0.04rem;
  color: var(--v-clr-wh-act);
  background-color: var(--v-clr-message-board-bg);
  border-radius: 0.06rem;
  justify-content: center;
  align-items: center;
}

/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * background-image from url or data-url
 */
.cl-vote {
  position: relative;
  height: 0.82rem;
  min-height: 0.82rem;
  max-height: 0.82rem;
  margin-left: 0.01rem;
  margin-right: 0.01rem;
}

.cl-vote-sod-bar {
  height: 0.46rem;
  min-height: 0.46rem;
  max-height: 0.46rem;
  width: 0.04rem;
  min-width: 0.04rem;
  max-width: 0.04rem;
  align-items: flex-end;
  justify-content: space-between;
  background: var(--v-grd-bar-tube);
  border-radius: 0.005rem;
  padding-left: 0.005rem;
  padding-right: 0.005rem;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-sod-bar {
  order: 2;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-sod-bar {
  order: 1;
}

.cl-vote-sod-bar-con {
  width: 0.01375rem;
  min-width: 0.01375rem;
  max-width: 0.01375rem;
  background-color: var(--v-clr-red-bar);
}

.cl-vote-sod-bar-pro {
  width: 0.01375rem;
  min-width: 0.01375rem;
  max-width: 0.01375rem;
  background-color: var(--v-clr-green-bar);
}

.cl-vote-mod-bar {
  height: 0.46rem;
  min-height: 0.46rem;
  max-height: 0.46rem;
  width: 0.04rem;
  min-width: 0.04rem;
  max-width: 0.04rem;
  align-items: flex-end;
  justify-content: space-between;
  border-radius: 0.005rem;
  position: relative;
  overflow: hidden;
}

.cl-vote-mod-bar-ovl {
  height: 0.46rem;
  min-height: 0.46rem;
  max-height: 0.46rem;
  width: 0.04rem;
  min-width: 0.04rem;
  max-width: 0.04rem;
  position: absolute;
  background: var(--v-grd-bar-tube);
  top: 0;
  left: 0;
  z-index: 100;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-mod-bar {
  order: 2;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-mod-bar {
  order: 1;
}

.tb-screen-tree[data-clpoc=con] .cl-vote[data-ocnt="2"] .cl-vote-mod-bar {
  padding-left: 0.005rem;
  padding-right: 0.005rem;
}

.tb-screen-tree[data-clpoc=con] .cl-vote[data-ocnt="3"] .cl-vote-mod-bar {
  padding-left: 0.00375rem;
  padding-right: 0.005rem;
}

.tb-screen-tree[data-clpoc=con] .cl-vote[data-ocnt="4"] .cl-vote-mod-bar {
  padding-left: 0.00375rem;
  padding-right: 0.00375rem;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote[data-ocnt="2"] .cl-vote-mod-bar {
  padding-left: 0.005rem;
  padding-right: 0.005rem;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote[data-ocnt="3"] .cl-vote-mod-bar {
  padding-left: 0.005rem;
  padding-right: 0.00375rem;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote[data-ocnt="4"] .cl-vote-mod-bar {
  padding-left: 0.00375rem;
  padding-right: 0.00375rem;
}

.cl-vote-mod-option {
  width: 0.01375rem;
  min-width: 0.01375rem;
  max-width: 0.01375rem;
  margin-left: 0.0025rem;
}

.cl-vote-mod-option:first-of-type {
  margin-left: 0;
}

.cl-vote-mod-option[data-optclridx="0"] {
  background-color: rgb(10, 90, 130);
}

.cl-vote-mod-option[data-optclridx="1"] {
  background-color: rgb(90, 75, 140);
}

.cl-vote-mod-option[data-optclridx="2"] {
  background-color: rgb(75, 95, 75);
}

.cl-vote-mod-option[data-optclridx="3"] {
  background-color: rgb(105, 75, 75);
}

.cl-vote-mod-option[data-optclridx="4"] {
  background-color: rgb(60, 80, 135);
}

.cl-vote-mod-option[data-optclridx="5"] {
  background-color: rgb(120, 70, 115);
}

.cl-vote-mod-option[data-optclridx="6"] {
  background-color: rgb(10, 105, 95);
}

.cl-vote-mod-option[data-optclridx="7"] {
  background-color: rgb(140, 75, 60);
}

.cl-vote[data-ocnt="3"] .cl-vote-mod-option {
  width: 0.00875rem;
  min-width: 0.00875rem;
  max-width: 0.00875rem;
}

.cl-vote[data-ocnt="4"] .cl-vote-mod-option {
  width: 0.00625rem;
  min-width: 0.00625rem;
  max-width: 0.00625rem;
}

.cl-vote-widget {
  width: 0.94rem;
  min-width: 0.94rem;
  max-width: 0.94rem;
  flex-direction: column;
  position: relative;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget {
  order: 1;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget {
  order: 2;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget {
  width: 0.94rem;
  min-width: 0.94rem;
  max-width: 0.94rem;
}

.cl-vote-widget-mouse {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.82rem;
  min-height: 0.82rem;
  max-height: 0.82rem;
  width: 0.94rem;
  min-width: 0.94rem;
  max-width: 0.94rem;
  z-index: 500;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-mouse {
  width: 0.94rem;
  min-width: 0.94rem;
  max-width: 0.94rem;
}

.cl-vote-widget-truth-meter {
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.5rem;
  min-width: 0.5rem;
  max-width: 0.5rem;
  flex-direction: column;
  transition: opacity 0.2s linear;
  color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter {
  align-self: flex-end;
}

.tb-screen-tree[data-isve="0"] .cl-vote-widget-truth-meter {
  visibility: hidden;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter {
  justify-content: flex-end;
  right: 0;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-truth-meter {
  justify-content: flex-start;
  left: 0;
}

.cl-vote-widget-truth-meter-text {
  height: 0.07rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  font-family: Khand-Semibold;
  font-size: 0.015rem;
  justify-content: flex-end;
  position: relative;
  opacity: 0.8;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="0"] .cl-vote-widget-truth-value {
  background-color: rgb(10, 90, 130);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="1"] .cl-vote-widget-truth-value {
  background-color: rgb(90, 75, 140);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="2"] .cl-vote-widget-truth-value {
  background-color: rgb(75, 95, 75);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="3"] .cl-vote-widget-truth-value {
  background-color: rgb(105, 75, 75);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="4"] .cl-vote-widget-truth-value {
  background-color: rgb(60, 80, 135);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="5"] .cl-vote-widget-truth-value {
  background-color: rgb(120, 70, 115);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="6"] .cl-vote-widget-truth-value {
  background-color: rgb(10, 105, 95);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="7"] .cl-vote-widget-truth-value {
  background-color: rgb(140, 75, 60);
}

.cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text {
  opacity: 1;
  transition: opacity 0.2s linear;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text[data-optclridx="0"] {
  color: rgb(10, 90, 130);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text[data-optclridx="1"] {
  color: rgb(90, 75, 140);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text[data-optclridx="2"] {
  color: rgb(75, 95, 75);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text[data-optclridx="3"] {
  color: rgb(105, 75, 75);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text[data-optclridx="4"] {
  color: rgb(60, 80, 135);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text[data-optclridx="5"] {
  color: rgb(120, 70, 115);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text[data-optclridx="6"] {
  color: rgb(10, 105, 95);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote[data-trtruth="1"] .cl-vote-widget-truth-meter-text[data-optclridx="7"] {
  color: rgb(140, 75, 60);
}

.cl-vote-widget-truth-meter-text span {
  position: absolute;
  bottom: 0.021555rem;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter-text {
  justify-content: flex-start;
}

.cl-vote-widget-truth-meter-text[data-txts="1"] span {
  font-size: 0.015rem;
  bottom: 0.021555rem;
}

.cl-vote-widget-truth-meter-text[data-txts="2"] span {
  font-size: 0.03rem;
  bottom: 0.01437rem;
}

.cl-vote-widget-truth-meter-text[data-txts="3"] span {
  font-size: 0.045rem;
  bottom: 0.007185rem;
}

.cl-vote-widget-truth-meter-text[data-txts="4"] span {
  font-size: 0.06rem;
  bottom: 0rem;
}

.cl-vote-widget-truth-meter-text[data-txts="5"] span {
  font-size: 0.06rem;
  bottom: 0rem;
}

.cl-vote-widget-truth-meter-dots {
  height: 0.06rem;
  min-height: 0.06rem;
  max-height: 0.06rem;
  width: 0.5rem;
  min-width: 0.5rem;
  max-width: 0.5rem;
  align-items: flex-end;
  justify-content: space-between;
  opacity: 0.8;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-truth-meter-dots div:nth-child(1) {
  height: 0.01375rem;
  min-height: 0.01375rem;
  max-height: 0.01375rem;
  width: 0.01375rem;
  min-width: 0.01375rem;
  max-width: 0.01375rem;
  margin: 0.01375rem;
  border-radius: 0.006875rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter-dots div:nth-child(1) {
  height: 0.04125rem;
  min-height: 0.04125rem;
  max-height: 0.04125rem;
  width: 0.04125rem;
  min-width: 0.04125rem;
  max-width: 0.04125rem;
  margin: 0rem;
  border-radius: 0.020625rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-truth-meter-dots div:nth-child(2) {
  height: 0.01925rem;
  min-height: 0.01925rem;
  max-height: 0.01925rem;
  width: 0.01925rem;
  min-width: 0.01925rem;
  max-width: 0.01925rem;
  margin: 0.011rem;
  border-radius: 0.009625rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter-dots div:nth-child(2) {
  height: 0.03575rem;
  min-height: 0.03575rem;
  max-height: 0.03575rem;
  width: 0.03575rem;
  min-width: 0.03575rem;
  max-width: 0.03575rem;
  margin: 0.00275rem;
  border-radius: 0.017875rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-truth-meter-dots div:nth-child(3) {
  height: 0.02475rem;
  min-height: 0.02475rem;
  max-height: 0.02475rem;
  width: 0.02475rem;
  min-width: 0.02475rem;
  max-width: 0.02475rem;
  margin: 0.00825rem;
  border-radius: 0.012375rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter-dots div:nth-child(3) {
  height: 0.03025rem;
  min-height: 0.03025rem;
  max-height: 0.03025rem;
  width: 0.03025rem;
  min-width: 0.03025rem;
  max-width: 0.03025rem;
  margin: 0.0055rem;
  border-radius: 0.015125rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-truth-meter-dots div:nth-child(4) {
  height: 0.03025rem;
  min-height: 0.03025rem;
  max-height: 0.03025rem;
  width: 0.03025rem;
  min-width: 0.03025rem;
  max-width: 0.03025rem;
  margin: 0.0055rem;
  border-radius: 0.015125rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter-dots div:nth-child(4) {
  height: 0.02475rem;
  min-height: 0.02475rem;
  max-height: 0.02475rem;
  width: 0.02475rem;
  min-width: 0.02475rem;
  max-width: 0.02475rem;
  margin: 0.00825rem;
  border-radius: 0.012375rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-truth-meter-dots div:nth-child(5) {
  height: 0.03575rem;
  min-height: 0.03575rem;
  max-height: 0.03575rem;
  width: 0.03575rem;
  min-width: 0.03575rem;
  max-width: 0.03575rem;
  margin: 0.00275rem;
  border-radius: 0.017875rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter-dots div:nth-child(5) {
  height: 0.01925rem;
  min-height: 0.01925rem;
  max-height: 0.01925rem;
  width: 0.01925rem;
  min-width: 0.01925rem;
  max-width: 0.01925rem;
  margin: 0.011rem;
  border-radius: 0.009625rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-truth-meter-dots div:nth-child(6) {
  height: 0.04125rem;
  min-height: 0.04125rem;
  max-height: 0.04125rem;
  width: 0.04125rem;
  min-width: 0.04125rem;
  max-width: 0.04125rem;
  margin: 0rem;
  border-radius: 0.020625rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-meter-dots div:nth-child(6) {
  height: 0.01375rem;
  min-height: 0.01375rem;
  max-height: 0.01375rem;
  width: 0.01375rem;
  min-width: 0.01375rem;
  max-width: 0.01375rem;
  margin: 0.01375rem;
  border-radius: 0.006875rem;
  background-color: var(--v-clr-wh-act);
}

.cl-vote-widget-control-band {
  height: 0.51rem;
  min-height: 0.51rem;
  max-height: 0.51rem;
  align-items: flex-start;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-control-band {
  justify-content: flex-end;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-control-band {
  justify-content: flex-start;
}

.cl-vote-widget-relevance-box {
  flex-direction: column;
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-box {
  order: 2;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-relevance-box {
  height: 0.25rem;
  min-height: 0.25rem;
  max-height: 0.25rem;
}

.cl-vote-widget-relevance-clipper {
  flex-direction: column;
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  overflow: hidden;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-relevance-clipper {
  height: 0.25rem;
  min-height: 0.25rem;
  max-height: 0.25rem;
}

.cl-vote-widget-relevance-value {
  background: var(--v-clr-green-vote-handle);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-value {
  background: var(--v-clr-red-vote-handle);
}

.cl-vote-widget-truth-box {
  position: relative;
  width: 0.5rem;
  min-width: 0.5rem;
  max-width: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 0.01375rem;
  background: var(--v-gr-truth-clip-bg);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box {
  background: var(--v-gr-truth-clip-bg-mod);
}

.cl-vote-widget-truth-box-note-indicator {
  position: absolute;
  font-family: icons;
  font-size: 0.1rem;
  color: var(--v-clr-inact-on-clr);
  right: -0.0275rem;
  bottom: -0.0275rem;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-box-note-indicator {
  right: unset;
  left: -0.0275rem;
}

.cl-vote-widget-truth-box-clip {
  width: 0.5rem;
  min-width: 0.5rem;
  max-width: 0.5rem;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-style: solid;
  border-width: 0.005rem;
  border-color: var(--v-clr-green-vote-frame);
  border-radius: 0.01375rem;
  overflow: hidden;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-box {
  border-color: var(--v-clr-red-vote-frame);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-box-clip {
  border-color: var(--v-clr-red-vote-frame);
}

.tb-screen-tree[data-clfoo="0"][data-clpoc=pro]:not([data-clisgh="1"]) .cl-vote-widget-truth-box {
  border-radius: 0.1rem;
  margin-left: -0.1rem;
}

.tb-screen-tree[data-clfoo="0"][data-clpoc=pro]:not([data-clisgh="1"]) .cl-vote-widget-truth-box-clip {
  border-radius: 0.1rem;
}

.tb-screen-tree[data-clfoo="0"][data-clpoc=con]:not([data-clisgh="1"]) .cl-vote-widget-truth-box {
  border-radius: 0.1rem;
  margin-right: -0.1rem;
}

.tb-screen-tree[data-clfoo="0"][data-clpoc=con]:not([data-clisgh="1"]) .cl-vote-widget-truth-box-clip {
  border-radius: 0.1rem;
}

.cl-vote-widget-truth-control {
  position: relative;
  height: 0.19rem;
  min-height: 0.19rem;
  max-height: 0.19rem;
  width: 0.49rem;
  min-width: 0.49rem;
  max-width: 0.49rem;
  overflow: hidden;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-control {
  justify-content: flex-end;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-truth-control {
  justify-content: flex-start;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control {
  height: 0.125rem;
  min-height: 0.125rem;
  max-height: 0.125rem;
  margin-top: 0.00125rem;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control:first-of-type {
  margin-top: 0;
}

.cl-vote-widget-truth-clipper {
  height: 0.19rem;
  min-height: 0.19rem;
  max-height: 0.19rem;
  overflow: hidden;
}

.tb-screen-tree[data-sodmod=sod][data-clfoo="1"][data-clpoc=con] .cl-vote-widget-truth-clipper {
  border-radius: 0 0.00875rem 0.00875rem 0;
}

.tb-screen-tree[data-sodmod=sod][data-clfoo="1"][data-clpoc=pro] .cl-vote-widget-truth-clipper {
  border-radius: 0.00875rem 0 0 0.00875rem;
}

.tb-screen-tree[data-sodmod=sod][data-clfoo="0"][data-clpoc=con] .cl-vote-widget-truth-clipper {
  border-radius: 0 0.095rem 0.095rem 0;
}

.tb-screen-tree[data-sodmod=sod][data-clfoo="0"][data-clpoc=pro] .cl-vote-widget-truth-clipper {
  border-radius: 0.095rem 0 0 0.095rem;
}

.cl-vote-widget-truth-value {
  height: 0.19rem;
  min-height: 0.19rem;
  max-height: 0.19rem;
  width: 0.5rem;
  min-width: 0.5rem;
  max-width: 0.5rem;
}

.tb-screen-tree[data-sodmod=sod][data-clpoc=con] .cl-vote-widget-truth-value {
  order: 2;
  background-color: var(--v-clr-vote-red);
}

.tb-screen-tree[data-sodmod=sod][data-clpoc=pro] .cl-vote-widget-truth-value {
  background-color: var(--v-clr-vote-green);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="0"] .cl-vote-widget-truth-value {
  background-color: rgb(10, 90, 130);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="1"] .cl-vote-widget-truth-value {
  background-color: rgb(90, 75, 140);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="2"] .cl-vote-widget-truth-value {
  background-color: rgb(75, 95, 75);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="3"] .cl-vote-widget-truth-value {
  background-color: rgb(105, 75, 75);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="4"] .cl-vote-widget-truth-value {
  background-color: rgb(60, 80, 135);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="5"] .cl-vote-widget-truth-value {
  background-color: rgb(120, 70, 115);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="6"] .cl-vote-widget-truth-value {
  background-color: rgb(10, 105, 95);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-control[data-optclridx="7"] .cl-vote-widget-truth-value {
  background-color: rgb(140, 75, 60);
}

.cl-vote-widget-truth-box-text {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  height: 0.19rem;
  min-height: 0.19rem;
  max-height: 0.19rem;
  width: 0.49rem;
  min-width: 0.49rem;
  max-width: 0.49rem;
  flex-direction: column;
  font-family: Khand-Medium;
  font-size: 0.075rem;
  color: var(--v-clr-wh-capsule);
  line-height: 1.25;
  padding-left: 0.06rem;
  padding-right: 0.06rem;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text {
  height: 0.25rem;
  min-height: 0.25rem;
  max-height: 0.25rem;
}

.cl-vote-widget-truth-box-text span {
  margin: auto;
}

.cl-vote-widget-truth-box-text-bg {
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  font-family: Khand-Medium;
  font-size: 0.03rem;
  z-index: 10;
}

.cl-vote-widget-truth-box-text-bg div {
  height: 0.125rem;
  min-height: 0.125rem;
  max-height: 0.125rem;
  align-items: flex-end;
  padding-left: 0.01rem;
  padding-right: 0.01rem;
  padding-bottom: 0.02rem;
  padding-top: 0.02rem;
}

.cl-vote-widget-truth-box-text-bg div:first-of-type {
  height: 0.125rem;
  min-height: 0.125rem;
  max-height: 0.125rem;
  align-items: flex-start;
}

.tb-screen-tree[data-clfoo="0"]:not([data-clisgh="1"]) .cl-vote-widget-truth-box-text-bg div:first-of-type {
  padding-left: 0.04rem;
  padding-right: 0.04rem;
}

.tb-screen-tree[data-clfoo="0"]:not([data-clisgh="1"]) .cl-vote-widget-truth-box-text-bg div:last-of-type {
  padding-left: 0.04rem;
  padding-right: 0.04rem;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-truth-box-text-bg div {
  justify-content: flex-end;
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text-bg div[data-optclridx="0"] {
  color: rgb(230, 230, 230);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text-bg div[data-optclridx="1"] {
  color: rgb(230, 230, 230);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text-bg div[data-optclridx="2"] {
  color: rgb(230, 230, 230);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text-bg div[data-optclridx="3"] {
  color: rgb(230, 230, 230);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text-bg div[data-optclridx="4"] {
  color: rgb(230, 230, 230);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text-bg div[data-optclridx="5"] {
  color: rgb(230, 230, 230);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text-bg div[data-optclridx="6"] {
  color: rgb(230, 230, 230);
}

.tb-screen-tree[data-sodmod=mod] .cl-vote-widget-truth-box-text-bg div[data-optclridx="7"] {
  color: rgb(230, 230, 230);
}

.cl-vote-widget-truth-box-highlight {
  height: 0.04rem;
  min-height: 0.04rem;
  max-height: 0.04rem;
  width: 0.49rem;
  min-width: 0.49rem;
  max-width: 0.49rem;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0.01rem;
  overflow: hidden;
  opacity: 0.8;
  fill: var(--v-clr-truth-glitter);
}

.cl-vote-widget-truth-box-highlight-fact {
  height: 0.01rem;
  min-height: 0.01rem;
  max-height: 0.01rem;
  width: 0.47rem;
  min-width: 0.47rem;
  max-width: 0.47rem;
  position: absolute;
  top: 0.01rem;
  left: 0.01rem;
  overflow: hidden;
  border-radius: 0.01rem 0.01rem 0 0;
  opacity: 0.8;
  background-color: var(--v-clr-truth-glitter);
}

.cl-vote-widget-relevance-meter-band {
  flex-direction: column;
  height: 0.185rem;
  min-height: 0.185rem;
  max-height: 0.185rem;
  opacity: 1;
  transition: opacity 0.2s linear;
  align-items: flex-start;
  margin-left: 0.05rem;
  margin-right: 0.065rem;
  opacity: 0.8;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-band {
  margin-left: 0.065rem;
  margin-right: 0.05rem;
  align-items: flex-end;
}

.tb-screen-tree[data-isve="0"] .cl-vote-widget-relevance-meter-band {
  visibility: hidden;
}

.cl-vote-widget-relevance-meter-dots {
  display: flex;
  align-items: center;
  height: 0.04rem;
  min-height: 0.04rem;
  max-height: 0.04rem;
  margin-top: 0.03rem;
  justify-content: space-between;
  width: 100%;
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(1) {
  height: 0.04rem;
  min-height: 0.04rem;
  max-height: 0.04rem;
  width: 0.04rem;
  min-width: 0.04rem;
  max-width: 0.04rem;
  margin: 0rem;
  border-radius: 0.02rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(1) {
  height: 0.01rem;
  min-height: 0.01rem;
  max-height: 0.01rem;
  width: 0.01rem;
  min-width: 0.01rem;
  max-width: 0.01rem;
  margin: 0.015rem;
  border-radius: 0.005rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(2) {
  height: 0.037rem;
  min-height: 0.037rem;
  max-height: 0.037rem;
  width: 0.037rem;
  min-width: 0.037rem;
  max-width: 0.037rem;
  margin: 0.0015rem;
  border-radius: 0.0185rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(2) {
  height: 0.013rem;
  min-height: 0.013rem;
  max-height: 0.013rem;
  width: 0.013rem;
  min-width: 0.013rem;
  max-width: 0.013rem;
  margin: 0.0135rem;
  border-radius: 0.0065rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(3) {
  height: 0.034rem;
  min-height: 0.034rem;
  max-height: 0.034rem;
  width: 0.034rem;
  min-width: 0.034rem;
  max-width: 0.034rem;
  margin: 0.003rem;
  border-radius: 0.017rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(3) {
  height: 0.016rem;
  min-height: 0.016rem;
  max-height: 0.016rem;
  width: 0.016rem;
  min-width: 0.016rem;
  max-width: 0.016rem;
  margin: 0.012rem;
  border-radius: 0.008rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(4) {
  height: 0.031rem;
  min-height: 0.031rem;
  max-height: 0.031rem;
  width: 0.031rem;
  min-width: 0.031rem;
  max-width: 0.031rem;
  margin: 0.0045rem;
  border-radius: 0.0155rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(4) {
  height: 0.019rem;
  min-height: 0.019rem;
  max-height: 0.019rem;
  width: 0.019rem;
  min-width: 0.019rem;
  max-width: 0.019rem;
  margin: 0.0105rem;
  border-radius: 0.0095rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(5) {
  height: 0.028rem;
  min-height: 0.028rem;
  max-height: 0.028rem;
  width: 0.028rem;
  min-width: 0.028rem;
  max-width: 0.028rem;
  margin: 0.006rem;
  border-radius: 0.014rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(5) {
  height: 0.022rem;
  min-height: 0.022rem;
  max-height: 0.022rem;
  width: 0.022rem;
  min-width: 0.022rem;
  max-width: 0.022rem;
  margin: 0.009rem;
  border-radius: 0.011rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(6) {
  height: 0.025rem;
  min-height: 0.025rem;
  max-height: 0.025rem;
  width: 0.025rem;
  min-width: 0.025rem;
  max-width: 0.025rem;
  margin: 0.0075rem;
  border-radius: 0.0125rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(6) {
  height: 0.025rem;
  min-height: 0.025rem;
  max-height: 0.025rem;
  width: 0.025rem;
  min-width: 0.025rem;
  max-width: 0.025rem;
  margin: 0.0075rem;
  border-radius: 0.0125rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(7) {
  height: 0.022rem;
  min-height: 0.022rem;
  max-height: 0.022rem;
  width: 0.022rem;
  min-width: 0.022rem;
  max-width: 0.022rem;
  margin: 0.009rem;
  border-radius: 0.011rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(7) {
  height: 0.028rem;
  min-height: 0.028rem;
  max-height: 0.028rem;
  width: 0.028rem;
  min-width: 0.028rem;
  max-width: 0.028rem;
  margin: 0.006rem;
  border-radius: 0.014rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(8) {
  height: 0.019rem;
  min-height: 0.019rem;
  max-height: 0.019rem;
  width: 0.019rem;
  min-width: 0.019rem;
  max-width: 0.019rem;
  margin: 0.0105rem;
  border-radius: 0.0095rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(8) {
  height: 0.031rem;
  min-height: 0.031rem;
  max-height: 0.031rem;
  width: 0.031rem;
  min-width: 0.031rem;
  max-width: 0.031rem;
  margin: 0.0045rem;
  border-radius: 0.0155rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(9) {
  height: 0.016rem;
  min-height: 0.016rem;
  max-height: 0.016rem;
  width: 0.016rem;
  min-width: 0.016rem;
  max-width: 0.016rem;
  margin: 0.012rem;
  border-radius: 0.008rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(9) {
  height: 0.034rem;
  min-height: 0.034rem;
  max-height: 0.034rem;
  width: 0.034rem;
  min-width: 0.034rem;
  max-width: 0.034rem;
  margin: 0.003rem;
  border-radius: 0.017rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(10) {
  height: 0.013rem;
  min-height: 0.013rem;
  max-height: 0.013rem;
  width: 0.013rem;
  min-width: 0.013rem;
  max-width: 0.013rem;
  margin: 0.0135rem;
  border-radius: 0.0065rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(10) {
  height: 0.037rem;
  min-height: 0.037rem;
  max-height: 0.037rem;
  width: 0.037rem;
  min-width: 0.037rem;
  max-width: 0.037rem;
  margin: 0.0015rem;
  border-radius: 0.0185rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=pro] .cl-vote-widget-relevance-meter-dots div:nth-child(11) {
  height: 0.01rem;
  min-height: 0.01rem;
  max-height: 0.01rem;
  width: 0.01rem;
  min-width: 0.01rem;
  max-width: 0.01rem;
  margin: 0.015rem;
  border-radius: 0.005rem;
  background-color: var(--v-clr-wh-act);
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-dots div:nth-child(11) {
  height: 0.04rem;
  min-height: 0.04rem;
  max-height: 0.04rem;
  width: 0.04rem;
  min-width: 0.04rem;
  max-width: 0.04rem;
  margin: 0rem;
  border-radius: 0.02rem;
  background-color: var(--v-clr-wh-act);
}

.cl-vote-widget-relevance-meter-text {
  display: flex;
  height: 0.105rem;
  min-height: 0.105rem;
  max-height: 0.105rem;
  margin-top: 0.01rem;
  color: var(--v-clr-wh-act);
  font-family: Khand-Semibold;
  font-size: 0.06rem;
  min-width: fit-content;
  justify-content: flex-end;
}

.tb-screen-tree[data-clpoc=con] .cl-vote-widget-relevance-meter-text {
  justify-content: flex-start;
}

.cl-vote-widget-relevance-meter-text[data-txts="0"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="1"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="2"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="3"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="4"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="5"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="6"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="7"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="8"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="9"] span {
  font-size: 0.06rem;
}

.cl-vote-widget-relevance-meter-text[data-txts="10"] span {
  font-size: 0.06rem;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
.cle-modal-window {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  display: flex;
  flex-direction: column;
  z-index: 10001;
}

.cle-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 1px;
  z-index: 10001;
  height: 0.615rem;
  min-height: 0.615rem;
  max-height: 0.615rem;
  margin-top: 0.5625rem;
  border-radius: 0.04rem;
  background: var(--v-grd-descr-lbl-green);
}

.cle-box[data-clpoc=con] {
  background: var(--v-grd-descr-lbl-red);
}

input.cle-title {
  height: 0.08rem;
  min-height: 0.08rem;
  max-height: 0.08rem;
  border-style: none;
  font-family: Khand-Medium;
  font-size: 0.06rem;
  background-color: transparent;
  margin: 0.045rem 0.075rem 0;
  color: var(--v-clr-wh-act);
}

input.cle-title::placeholder {
  opacity: 0.6;
}

.cle-description {
  height: 0.25rem;
  min-height: 0.25rem;
  max-height: 0.25rem;
  border-style: none;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  background-color: transparent;
  margin: 0.035rem 0.075rem 0;
  /* NOTE:
   * this is to hide resize handle in bottom right corner
   * works on Win10+Chrome, supposedly in Safari, too
   * see thsi SO answer:
   * https://stackoverflow.com/a/588106
   */
  resize: none;
  color: var(--v-clr-wh-act);
}

.cle-description::placeholder {
  opacity: 0.6;
}

.cle-buttons {
  height: 0.15rem;
  min-height: 0.15rem;
  max-height: 0.15rem;
  margin: 0.02rem 0.205rem 0;
  justify-content: flex-end;
  align-items: center;
  padding-left: 0.02rem;
  padding-right: 0.02rem;
}

.cle-button-group {
  margin-left: auto;
  margin-right: 0;
  padding: 0.005rem 0.015rem;
  gap: 0.01rem;
  border-radius: 0.1125rem;
}

.cle-button {
  height: 0.15rem;
  min-height: 0.15rem;
  max-height: 0.15rem;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--v-clr-inact-on-clr);
  text-align: center;
}

.cle-button-icon,
.cle-button-text {
  align-items: center;
}

.cle-button[data-isacc="0"] {
  opacity: 0.45;
}

.cle-button-icon {
  font-family: icons;
  font-size: 0.1rem;
}

.cle-button-text {
  font-size: 0.0225rem;
  font-family: Khand-Regular;
  margin: auto;
}

/*
 * misc. utility mixins
 */
.cl-description-box {
  height: 0.315rem;
  min-height: 0.315rem;
  max-height: 0.315rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  border-radius: 0.04rem;
  background: var(--v-grd-descr-lbl-green);
  color: var(--v-clr-wh-act);
  padding: 0.04rem 0.04rem 0.07rem;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  position: relative;
  margin-bottom: 0.03125rem;
  line-height: 1.25;
}

.tb-screen-tree[data-clpoc=con] .cl-description-box {
  background: var(--v-grd-descr-lbl-red);
}

.cl-fact-opinion-box {
  height: 0.0625rem;
  min-height: 0.0625rem;
  max-height: 0.0625rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  position: absolute;
  bottom: 0.03rem;
  left: 0rem;
  justify-content: space-between;
  padding: 0 0.25rem 0;
}

.cl-fact-btn {
  height: 0.0625rem;
  min-height: 0.0625rem;
  max-height: 0.0625rem;
  width: 0.17rem;
  min-width: 0.17rem;
  max-width: 0.17rem;
  border-style: solid;
  border-width: 0.0025rem;
  border-color: var(--v-clr-inact-on-clr);
  border-radius: 0.0075rem;
  font-family: Khand-Regular;
  font-size: 0.0375rem;
  color: var(--v-clr-inactive-fact-btn);
  align-items: center;
  justify-content: center;
}

.tb-screen-tree[data-clfoo="1"]:not([data-clisgh="1"]) .cl-fact-btn {
  border-style: none;
  background-color: var(--v-clr-active-fact-btn-bg);
  color: var(--v-clr-active-fact-btn);
}

.tb-screen-tree[data-isve="0"] .cl-fact-btn {
  opacity: 0.45;
}

.cl-opinion-btn {
  height: 0.0625rem;
  min-height: 0.0625rem;
  max-height: 0.0625rem;
  width: 0.17rem;
  min-width: 0.17rem;
  max-width: 0.17rem;
  border-style: solid;
  border-width: 0.0025rem;
  border-color: var(--v-clr-inact-on-clr);
  border-radius: 0.03125rem;
  font-family: Khand-Regular;
  font-size: 0.0375rem;
  color: var(--v-clr-inactive-opinion-btn);
  align-items: center;
  justify-content: center;
}

.tb-screen-tree[data-clfoo="0"]:not([data-clisgh="1"]) .cl-opinion-btn {
  border-style: none;
  background-color: var(--v-clr-active-opinion-btn-bg);
  color: var(--v-clr-active-opinion-btn);
}

.tb-screen-tree[data-isve="0"] .cl-opinion-btn {
  opacity: 0.45;
}

.cl-lower-buttons {
  height: 0.14rem;
  min-height: 0.14rem;
  max-height: 0.14rem;
  margin-top: 0.17rem;
  margin-bottom: 0.05rem;
  padding: 0 0.1rem 0 0.04rem;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.cl-lower-group {
  margin-left: auto;
  margin-right: 0.02rem;
  padding: 0.005rem 0.015rem;
  gap: 0.0075rem;
  border-radius: 0.07rem;
}

.cl-lower-btn {
  height: 0.14rem;
  min-height: 0.14rem;
  max-height: 0.14rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: var(--v-clr-inact-on-clr);
}

.cl-lower-btn-icon {
  font-family: icons;
  font-size: 0.1rem;
}

.cl-lower-btn-txt {
  font-family: Khand-Regular;
  font-size: 0.0225rem;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.um-modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--v-contact-manager-background);
  flex-direction: column;
  z-index: 1000;
}

.um-modal[data-um-mt] {
  background: transparent;
}

.um-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.um-item-edit-cntr {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 0.1rem;
  height: 0.63rem;
  min-height: 0.63rem;
  max-height: 0.63rem;
  background: var(--v-um-item-edit-bg-gradient);
  border-radius: 0.03rem;
}

.um-item-edit-top {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding-top: 0.03rem;
  padding-left: 0.03rem;
  padding-right: 0.03rem;
}

.um-ie-avatar {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  background-color: yellow;
  margin-left: 0.085rem;
  margin-top: 0.065rem;
  margin-right: 0.025rem;
  font-size: 0.045rem;
  font-family: Khand-Regular;
  color: black;
  justify-content: center;
  align-items: center;
}

.um-ie-text-cntr {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 0.095rem;
}

.um-ie-txt {
  height: 0.061rem;
  min-height: 0.061rem;
  max-height: 0.061rem;
  font-size: 0.06rem;
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  background-color: transparent;
  border: none;
  margin-top: 0.02rem;
}

.um-ie-txt::placeholder {
  color: var(--v-um-text-lond-disabled-color);
}

.um-ie-txta {
  height: 0.14rem;
  min-height: 0.14rem;
  max-height: 0.14rem;
  font-size: 0.03rem;
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  background-color: transparent;
  border: none;
}

.um-ie-txta::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.um-buttons {
  display: flex;
  flex-direction: row;
  height: 0.05rem;
  min-height: 0.05rem;
  max-height: 0.05rem;
  width: 0.86rem;
  min-width: 0.86rem;
  max-width: 0.86rem;
  margin-top: 0.03rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-around;
}

.um-button {
  display: flex;
  flex-direction: column;
  height: 0.04rem;
  min-height: 0.04rem;
  max-height: 0.04rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  z-index: 2000;
  align-self: center;
}

.um-button-text {
  color: white;
  font-size: 0.045rem;
  margin: auto;
}

.um-modal[data-um-eacc="0"] .um-done-button {
  opacity: 0.5;
}

.um-insp-cntr {
  height: 0.4rem;
  min-height: 0.4rem;
  max-height: 0.4rem;
  margin: 0.03rem;
  display: flex;
  flex-direction: column;
}

.um-insp-name {
  height: 0.06rem;
  min-height: 0.06rem;
  max-height: 0.06rem;
  font-family: Khand-Regular;
  font-size: 0.045rem;
}

.um-insp-desc {
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  font-family: Khand-Regular;
  font-size: 0.03rem;
}

.um-insp-desc-empty {
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  font-family: Khand-Regular;
  font-size: 0.03rem;
}

/* user edits (bottom action icons) */
.user-profile-screen {
  display: flex;
  flex-direction: column;
  height: 100vh ;
  min-height: 100vh ;
  max-height: 100vh ;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  font-family: Khand-Regular;
  background: var(--v-contact-manager-background);
}

.user-profile-header {
  height: 0.19rem;
  min-height: 0.19rem;
  max-height: 0.19rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.user-profile-tbox {
  height: 0.39rem;
  min-height: 0.39rem;
  max-height: 0.39rem;
  width: 0.71rem;
  min-width: 0.71rem;
  max-width: 0.71rem;
  display: flex;
  flex-direction: column;
  border-radius: 0.05rem;
  margin-top: 0.03rem;
  margin-left: 30px;
}

.user-profile-tbox-title {
  font-family: Khand-Semibold;
  font-size: 0.06rem;
  color: var(--v-clr-inact-on-clr);
  margin-left: auto;
  margin-right: auto;
}

.user-profile-edit-cntr {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 0.1rem;
  height: 0.63rem;
  min-height: 0.63rem;
  max-height: 0.63rem;
  background: var(--v-um-item-edit-bg-gradient);
  border-radius: 0.03rem;
}

.user-profile-edit-top {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding-top: 0.03rem;
  padding-left: 0.03rem;
  padding-right: 0.03rem;
}

.user-profile-text-cntr {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 0.095rem;
}

.user-profile-ie-txt {
  height: 0.07rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  font-size: 0.06rem;
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  background-color: transparent;
  border: none;
}

.user-profile-label-txt {
  height: 0.07rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  font-size: 0.045rem;
  font-family: Khand-Semibold;
  color: var(--v-clr-inact-on-clr);
  background-color: transparent;
  border: none;
}

.user-profile-edits {
  display: flex;
  flex-direction: row;
  height: 0.32rem;
  min-height: 0.32rem;
  max-height: 0.32rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  padding-top: 0.1rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  justify-content: flex-end;
  align-items: center;
}

.user-profile-edit-pill {
  margin-left: auto;
  padding: 0.003rem 0.009rem;
  gap: 0.006rem;
  border-radius: 0.1rem;
}

.user-profile-edit {
  color: var(--v-clr-inact-on-clr);
  display: flex;
  flex-direction: column;
  height: 0.15rem;
  min-height: 0.15rem;
  max-height: 0.15rem;
  width: 0.105rem;
  min-width: 0.105rem;
  max-width: 0.105rem;
  justify-content: center;
  align-items: center;
}

.user-profile-edit[data-isdis] {
  opacity: 0.45;
}

.user-profile-button-icon {
  font-family: icons;
  font-size: 0.085rem;
  margin: 0;
}

.user-profile-ie-avatar {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  background-color: yellow;
  margin-left: 0.085rem;
  margin-top: 0.065rem;
  margin-right: 0.025rem;
  font-family: Montserrat-Medium;
  font-size: 0.06rem;
  color: var(--v-clr-tray-avatar-text);
  justify-content: center;
  align-items: center;
}

.user-profile-ie-avatar[data-aci="0"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #A93B77;
}

.user-profile-ie-avatar[data-aci="1"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #E65A2D;
}

.user-profile-ie-avatar[data-aci="2"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #DF8500;
}

.user-profile-ie-avatar[data-aci="3"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #83A258;
}

.user-profile-ie-avatar[data-aci="4"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #00BF00;
}

.user-profile-ie-avatar[data-aci="5"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #00A79A;
}

.user-profile-ie-avatar[data-aci="6"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #0090FF;
}

.user-profile-ie-avatar[data-aci="7"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #5D63E8;
}

.user-profile-ie-avatar[data-aci="8"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #8E5BBD;
}

.user-profile-ie-avatar[data-aci="9"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #DB42B2;
}

.user-profile-edit-text {
  pointer-events: none;
  margin-top: 0.009375rem;
  margin-left: auto;
  margin-right: auto;
  font-family: Khand-Regular;
  font-size: 0.027rem;
  text-align: center;
  line-height: 1.25;
}

/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
.user-invite-modality-window {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(1, 1, 1, 0.5);
  backdrop-filter: blur(3px);
  flex-direction: column;
  z-index: 1000;
}

.user-invite-top-window {
  height: 0.6rem;
  min-height: 0.6rem;
  max-height: 0.6rem;
}

.user-invite-bg {
  flex-direction: column;
  width: 0.94rem;
  min-width: 0.94rem;
  max-width: 0.94rem;
  min-height: 0.435rem;
  max-height: 0.435rem;
  height: 0.435rem;
  margin: 0.03rem;
  border-radius: 0.03rem;
  padding: 0.03rem;
  background-color: rgb(128, 128, 128);
  z-index: 2000;
}

.user-invite-email {
  flex: 1;
  border-style: none;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.01rem 0.015rem 0.01rem 0.015rem;
  margin-bottom: 0.005rem;
  border-radius: 0.003rem;
}

.user-invite-name {
  flex: 1;
  border-style: none;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.01rem 0.015rem 0.01rem 0.015rem;
  margin-bottom: 0.003rem;
  border-radius: 0.003rem;
}

.user-invite-button-line {
  display: flex;
  flex-direction: row;
  height: 0.1rem;
  margin-top: 0.03rem;
  justify-content: space-around;
}

.user-invite-button {
  display: flex;
  border-color: white;
  border-width: 0.00375rem;
  border-style: solid;
  border-radius: 0.02rem;
  width: 0.13rem;
  z-index: 2000;
  align-self: center;
}

.user-invite-button-text {
  color: white;
  font-size: 0.045rem;
  margin: auto;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.um-modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--v-contact-manager-background);
  flex-direction: column;
  z-index: 1000;
}

.um-modal[data-um-mt] {
  background: transparent;
}

.um-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.um-item-edit-cntr {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 0.1rem;
  height: 0.63rem;
  min-height: 0.63rem;
  max-height: 0.63rem;
  background: var(--v-um-item-edit-bg-gradient);
  border-radius: 0.03rem;
}

.um-item-edit-top {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding-top: 0.03rem;
  padding-left: 0.03rem;
  padding-right: 0.03rem;
}

.um-ie-avatar {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  background-color: yellow;
  margin-left: 0.085rem;
  margin-top: 0.065rem;
  margin-right: 0.025rem;
  font-size: 0.045rem;
  font-family: Khand-Regular;
  color: black;
  justify-content: center;
  align-items: center;
}

.um-ie-text-cntr {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 0.095rem;
}

.um-ie-txt {
  height: 0.061rem;
  min-height: 0.061rem;
  max-height: 0.061rem;
  font-size: 0.06rem;
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  background-color: transparent;
  border: none;
  margin-top: 0.02rem;
}

.um-ie-txt::placeholder {
  color: var(--v-um-text-lond-disabled-color);
}

.um-ie-txta {
  height: 0.14rem;
  min-height: 0.14rem;
  max-height: 0.14rem;
  font-size: 0.03rem;
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  background-color: transparent;
  border: none;
}

.um-ie-txta::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.um-buttons {
  display: flex;
  flex-direction: row;
  height: 0.05rem;
  min-height: 0.05rem;
  max-height: 0.05rem;
  width: 0.86rem;
  min-width: 0.86rem;
  max-width: 0.86rem;
  margin-top: 0.03rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-around;
}

.um-button {
  display: flex;
  flex-direction: column;
  height: 0.04rem;
  min-height: 0.04rem;
  max-height: 0.04rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  z-index: 2000;
  align-self: center;
}

.um-button-text {
  color: white;
  font-size: 0.045rem;
  margin: auto;
}

.um-modal[data-um-eacc="0"] .um-done-button {
  opacity: 0.5;
}

.um-insp-cntr {
  height: 0.4rem;
  min-height: 0.4rem;
  max-height: 0.4rem;
  margin: 0.03rem;
  display: flex;
  flex-direction: column;
}

.um-insp-name {
  height: 0.06rem;
  min-height: 0.06rem;
  max-height: 0.06rem;
  font-family: Khand-Regular;
  font-size: 0.045rem;
}

.um-insp-desc {
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  font-family: Khand-Regular;
  font-size: 0.03rem;
}

.um-insp-desc-empty {
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  font-family: Khand-Regular;
  font-size: 0.03rem;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.um-tename {
  border-style: none;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.01rem 0.015rem 0.01rem 0.015rem;
  margin-bottom: 0.003rem;
  border-radius: 0.003rem;
}

.um-te-buttons {
  display: flex;
  flex-direction: row;
  height: 0.04rem;
  min-height: 0.04rem;
  max-height: 0.04rem;
  width: 0.86rem;
  min-width: 0.86rem;
  max-width: 0.86rem;
  margin-top: 0.03rem;
  justify-content: space-around;
}

.um-te-button {
  display: flex;
  flex-direction: column;
  height: 0.04rem;
  min-height: 0.04rem;
  max-height: 0.04rem;
  width: 0.12rem;
  min-width: 0.12rem;
  max-width: 0.12rem;
  z-index: 2000;
  align-self: center;
}

.um-te-button-text {
  color: white;
  font-size: 0.045rem;
  margin: auto;
}

/* common border width on the user screen */
.user-header {
  display: flex;
  color: var(--v-clr-text-lond);
  min-height: 0.13rem;
  max-height: 0.13rem;
  height: 0.13rem;
  margin: auto;
  align-items: center;
}

.user-header-box {
  display: flex;
  min-width: 0.3333rem;
  max-width: 0.3333rem;
  width: 0.3333rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  height: 0.07rem;
  font-size: 0.045rem;
  font-family: Khand-Regular;
  border-style: none;
}

.user-header-box[data-tbsel="1"] {
  border-style: solid;
  border-width: 0.001875rem;
  border-color: rgba(255, 255, 255, 0.33);
  border-radius: 0.02rem;
}

.user-header-text {
  margin: auto;
}

/*
 * tray list container row, flex column, scrollable, stretched items of equal height
 */
.user-tray-cntr {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: scroll;
  /* LL20200610: 
   * It seems that there is no standard way of turning on/off inertial scrolling
   * (='app-like scrolling') in css
   * On my phone (Android9) the default scroll behaviour is 'app-like', that is
   * inertial.
   * On iOS the default behaviour is 'non-app-like', this is confirmed by Istvan and my
   * own experience.
   * On Safari (MacOS/iOS) there is a special css attribute '-webkit-overflow-scrolling'
   * that controls 'app-like' and 'non-app-like' behaviour.
   * see the dirty detials in
   * https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
   * CanIUse also confirms this:
   * https://caniuse.com/#search=-webkit-overflow-scrolling
   */
  -webkit-overflow-scrolling: touch;
}

/* contains exectly one sticky header */
.user-tray-group {
  /* LL20200612
   * the issue 'user screen groups are rendered on top of each other' seems to be a Safari
   * issue, see for example
   * https://stackoverflow.com/questions/32689686/overlapping-css-flexbox-items-in-safari
   * the answer
   * https://stackoverflow.com/a/32695233
   * proves to be almost correct, however
   *   -webkit-flex: 0;
   * spoils the fun, when this is added Safari behaves as if neither lines were added
   */
  /* this attribute confuses Safari, do not use it
  -webkit-flex: 0;
  */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/*
 * tray base mixin
 * flex row, height 20 unit (1 unit is set .01 vw)
 * solid border of width 1px
 */
.user-tray {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  border-width: 0.00125rem;
  border-style: solid;
  border-color: rgb(102, 102, 102);
  margin: 0.03rem 0.03rem 0.01rem 0.03rem;
  z-index: 0;
}

/*
 * avatar
 */
.user-tray-avatar {
  min-height: 0.08rem;
  max-height: 0.08rem;
  height: 0.08rem;
  min-width: 0.08rem;
  max-width: 0.08rem;
  width: 0.08rem;
  object-fit: contain;
  margin: auto 0.03rem auto 0.06rem;
}

.user-tray-name-cntr {
  align-items: center;
  flex: 1;
  margin: 0.01875rem 0.02rem 0.01875rem 0.02rem;
}

.user-tray-name {
  /*	padding: $tb-u;
  */
  /*
   * the element this class is used on must have a block display mode,
   * inline, flex, etc. breaks text-overflow: ellipsis,
   * white-space: nowrap is also important,
   * see the discussion (Reggie Pinkham's note) of this SO reply:
   * https://stackoverflow.com/a/17783233
   */
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.03rem;
  font-family: Khand-Regular;
  /* 
   * NOTE: should be set according to background tone,
   * should we add a special color constant here?
   */
  color: var(--v-clr-text-lond);
}

.user-tray-icon {
  /*	padding: $tb-u;
  */
  /*
   * the element this class is used on must have a block display mode,
   * inline, flex, etc. breaks text-overflow: ellipsis,
   * white-space: nowrap is also important,
   * see the discussion (Reggie Pinkham's note) of this SO reply:
   * https://stackoverflow.com/a/17783233
   */
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.03rem;
  font-family: Khand-Regular;
  /* 
   * NOTE: should be set according to background tone,
   * should we add a special color constant here?
   */
  color: var(--v-clr-text-lond);
  /*
   * NOTE: all this fiddling with margins is to try to center the +/- sign,
   * this is a fragile solution because font glyphs are baseline aligned
   * not center or top or bottom aligned in their bounding box
   */
  margin-top: -0.013rem;
  font-size: 0.075rem;
}

.user-check-box {
  display: flex;
  /* ugly, ugly hack */
  max-width: 0.06rem;
  max-height: 0.08rem;
  width: 0.06rem;
  height: 0.08rem;
  margin: auto 0.07rem;
  border-width: 0.0025rem;
  border-style: none;
  border-color: rgb(153, 153, 153);
}

.user-check-box[data-tb-disabled] {
  opacity: 0.5;
}

.user-check-box-marker {
  display: none;
}

.user-tray[data-tbsel="1"] .user-check-box-marker {
  display: flex;
  margin: auto;
  max-width: 0.02rem;
  max-height: 0.02rem;
  width: 0.02rem;
  height: 0.02rem;
  background-color: rgb(42, 207, 255);
}

.user-separator {
  display: flex;
  /* sticky headers */
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 0;
  height: 0.09rem;
  min-height: 0.09rem;
  max-height: 0.09rem;
  margin: 0.01rem 0.03rem 0.01rem 0.03rem;
  border-width: 0.00125rem;
  /* border-style: solid;
  border-color: $clr-user-border;
  */
  z-index: 2;
  background-color: rgb(30, 30, 30);
}

.user-group-header-bg-cntr {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  width: 100%;
  height: 0.2725rem;
  min-height: 0.2725rem;
  max-height: 0.2725rem;
  overflow-y: hidden;
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.user-group-header-bg {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.user-header-tray {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  border-width: 0.00125rem;
  border-style: solid;
  margin: 0.03rem 0.03rem 0.01rem 0.03rem;
}

/* this is the only one used for the invite ghost */
.user-tray[data-tb-user-tray-state=new] {
  border-color: rgb(129, 161, 221);
  border-radius: 0.02rem;
  margin: 0 0.03rem 0.01rem 0.03rem;
}

.user-tray-invite-avatar {
  min-height: 0.07rem;
  max-height: 0.07rem;
  height: 0.07rem;
  min-width: 0.07rem;
  max-width: 0.07rem;
  width: 0.07rem;
  object-fit: contain;
  margin: 0.02rem 0.03rem auto 0.06rem;
}

.user-tray-invite-name-cntr {
  align-items: center;
  flex: 1;
  margin: 0.01875rem 0.02rem 0.01875rem 0.02rem;
}

.user-tray-invite-name {
  /*	padding: $tb-u;
  */
  /*
   * the element this class is used on must have a block display mode,
   * inline, flex, etc. breaks text-overflow: ellipsis,
   * white-space: nowrap is also important,
   * see the discussion (Reggie Pinkham's note) of this SO reply:
   * https://stackoverflow.com/a/17783233
   */
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.03rem;
  font-family: Khand-Regular;
  color: rgb(129, 161, 221);
}

.user-search {
  margin: 0.03rem 0.03rem 0.01rem 0.03rem;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  border-style: none;
  border-radius: 0.02rem;
  font-family: Khand-Regular;
  background: rgb(32, 32, 32);
  color: var(--v-clr-text-lond);
  font-size: 0.045rem;
}

.user-tray[data-tb-user-tray-state=search] .user-tray-invite-search {
  background: rgb(76, 76, 76);
}

.user-search-icon {
  min-height: 0.07rem;
  max-height: 0.07rem;
  height: 0.07rem;
  min-width: 0.07rem;
  max-width: 0.07rem;
  width: 0.07rem;
  object-fit: contain;
  padding: 0.01rem;
  margin: auto 0.02rem;
}

.user-search-icon[data-tb-user-search-is-valid="0"] {
  opacity: 0.5;
}

/* DEPRECATED
.user-tray-invite-search-close-icon {
	@include user-invite-icon-base();
	padding: ( 2 * $tb-u );
	margin: auto ( 2 * $tb-u );

}
END DEPRECATED */
.user-search-input {
  background: transparent;
  border-style: none;
  flex: 1;
  /*
   * NOTE: need to repeat font properties here,
   * otherwise user agent styles overwrite them
   */
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  font-size: 0.03rem;
}

.user-search-input::placeholder {
  opacity: 0.5;
}

.user-invite-tray-state-edit {
  flex: 1;
}

.user-invite-tray-state-add {
  flex: 1;
  flex-direction: column;
}

.user-tray-names-container {
  background: rgb(76, 76, 76);
  flex-direction: column;
  margin: 0 0.02rem;
  justify-content: space-around;
  border-radius: 0.02rem;
  flex: 3;
}

.user-tray-invite-name-input {
  background: transparent;
  border-style: none;
  color: var(--v-clr-text-lond);
  margin-left: 0.02rem;
}

.user-tray-invite-button-line {
  justify-content: flex-end;
  margin: 0.02rem;
}

.user-tray-invite-button {
  min-width: 0.3333rem;
  max-width: 0.3333rem;
  width: 0.3333rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  height: 0.07rem;
  border-style: solid;
  border-width: 0.001875rem;
  border-color: rgba(255, 255, 255, 0.33);
  border-radius: 0.02rem;
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  font-size: 0.045rem;
  justify-content: center;
}

/* new design, the above is mainly deprecated */
/* user list stuff */
.um-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  position: relative;
  margin-top: 0.125rem;
}

.uli-scroll-indicator {
  mask-image: var(--v-um-li-scroll-indicator-t-gradient-mask);
  height: 0.06rem;
  min-height: 0.06rem;
  max-height: 0.06rem;
  width: 0.8rem;
  min-width: 0.8rem;
  max-width: 0.8rem;
  position: absolute;
  z-index: 1;
}

.uli-scroll-indicator img {
  height: 0.035rem;
  min-height: 0.035rem;
  max-height: 0.035rem;
  width: 0.035rem;
  min-width: 0.035rem;
  max-width: 0.035rem;
  margin: auto;
}

.uli-scroll-indicator:first-child {
  top: 0px;
}

.uli-scroll-indicator:last-child {
  mask-image: var(--v-um-li-scroll-indicator-b-gradient-mask);
  bottom: 0px;
}

.um-list-empty {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  align-items: center;
  justify-content: center;
}

.um-list-hint {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Khand-Regular;
  color: rgb(0, 241, 255);
  font-size: 0.045rem;
}

.uli-container {
  display: flex;
  flex-direction: row;
  height: 0.12rem;
  min-height: 0.12rem;
  max-height: 0.12rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
}

.uli-arrow-r {
  font-size: 0.08rem;
  color: #ffffff;
  margin-top: -0.1rem;
  padding-left: 0.5rem;
}

.uli-fold {
  display: flex;
  flex-direction: row;
  height: 0.12rem;
  min-height: 0.12rem;
  max-height: 0.12rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
}

.uli-fold-img {
  margin: auto;
  height: 0.06rem;
  min-height: 0.06rem;
  max-height: 0.06rem;
  width: 0.06rem;
  min-width: 0.06rem;
  max-width: 0.06rem;
  align-items: baseline;
  font-family: icons;
  font-size: 0.06rem;
  color: var(--v-clr-text-lond);
}

/* deprecated
.uli-fold-img[data-list-item-fold="u"] {
//	background-image: data-url($pth-img-inline + '/icon_arrow_right.min.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;  
}

.uli-fold-img[data-list-item-fold="d"] {
//	background-image: data-url($pth-img-inline + '/icon_arrow_down.min.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;  
}
*/
.uli-indent {
  height: 0.12rem;
  min-height: 0.12rem;
  max-height: 0.12rem;
  width: 0.08rem;
  min-width: 0.08rem;
  max-width: 0.08rem;
}

.uli-avatar {
  display: flex;
  flex-direction: row;
  height: 0.12rem;
  min-height: 0.12rem;
  max-height: 0.12rem;
  width: 0.11rem;
  min-width: 0.11rem;
  max-width: 0.11rem;
}

.uli-avatar-img {
  margin: auto;
}

.uli-avatar-div {
  margin: auto;
  margin-bottom: auto;
  margin-left: 0px;
  margin-right: auto;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  font-family: Montserrat-Medium;
  font-size: 0.06rem;
  justify-content: center;
  align-items: center;
}

.uli-avatar-div[data-aci="0"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #A93B77;
}

.uli-avatar-div[data-aci="1"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #E65A2D;
}

.uli-avatar-div[data-aci="2"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #DF8500;
}

.uli-avatar-div[data-aci="3"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #83A258;
}

.uli-avatar-div[data-aci="4"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #00BF00;
}

.uli-avatar-div[data-aci="5"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #00A79A;
}

.uli-avatar-div[data-aci="6"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #0090FF;
}

.uli-avatar-div[data-aci="7"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #5D63E8;
}

.uli-avatar-div[data-aci="8"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #8E5BBD;
}

.uli-avatar-div[data-aci="9"] {
  color: var(--v-clr-tray-avatar-text);
  background-color: #DB42B2;
}

.uli-text {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0.03rem;
  height: 0.12rem;
  min-height: 0.12rem;
  max-height: 0.12rem;
  width: 0.53rem;
  min-width: 0.53rem;
  max-width: 0.53rem;
  font-family: Khand-Regular;
  color: var(--v-um-text-lond-color);
  font-size: 0.0375rem;
  justify-content: space-evenly;
}

.uli-text[data-um-ind="1"] {
  width: 0.45rem;
  min-width: 0.45rem;
  max-width: 0.45rem;
}

.uli-text-name {
  font-family: Khand-Regular;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.uli-text-email {
  font-family: Khand-Regular;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 0.0425rem;
}

.uli-select {
  display: flex;
  flex-direction: row;
  height: 0.12rem;
  min-height: 0.12rem;
  max-height: 0.12rem;
  width: 0.07rem;
  min-width: 0.07rem;
  max-width: 0.07rem;
}

.uli-select-img {
  margin: auto;
  height: 0.045rem;
  min-height: 0.045rem;
  max-height: 0.045rem;
  width: 0.045rem;
  min-width: 0.045rem;
  max-width: 0.045rem;
}

.uli-select-img[data-list-item-select=s] {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGc+CiAgICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjIgMEEyMiAyMiAwIDAgMCAwIDIyYTIyIDIyIDAgMCAwIDIyIDIyIDIyIDIyIDAgMCAwIDIyLTIyQTIyIDIyIDAgMCAwIDIyIDB6bTAgMmEyMCAyMCAwIDAgMSAyMCAyMCAyMCAyMCAwIDAgMS0yMCAyMEEyMCAyMCAwIDAgMSAyIDIyIDIwIDIwIDAgMCAxIDIyIDJ6Ii8+CiAgICA8Y2lyY2xlIGZpbGw9IiNmZmZmZmYiIGN4PSIyMiIgY3k9IjIyIiByPSIxMiIvPgogIDwvZz4KPC9zdmc+Cg==);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.uli-select-img[data-list-item-select=p] {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJtbSIgaGVpZ2h0PSIzMm1tIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEgMXYzMGgzMFYxem00IDRoMTF2MjJINXoiIHBhaW50LW9yZGVyPSJmaWxsIG1hcmtlcnMgc3Ryb2tlIi8+Cjwvc3ZnPgo=);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.uli-select-img[data-list-item-select=u] {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTIyIDBBMjIgMjIgMCAwIDAgMCAyMmEyMiAyMiAwIDAgMCAyMiAyMiAyMiAyMiAwIDAgMCAyMi0yMkEyMiAyMiAwIDAgMCAyMiAwem0wIDJhMjAgMjAgMCAwIDEgMjAgMjAgMjAgMjAgMCAwIDEtMjAgMjBBMjAgMjAgMCAwIDEgMiAyMiAyMCAyMCAwIDAgMSAyMiAyeiIvPgo8L3N2Zz4K);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.uli-inspect-img {
  margin: auto;
  height: 0.045rem;
  min-height: 0.045rem;
  max-height: 0.045rem;
  width: 0.045rem;
  min-width: 0.045rem;
  max-width: 0.045rem;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExIDMwaDM1LjE3TDI5LjU5IDQ2LjU5bDIuODIgMi44Mkw1My44MyAyOCAzMi40MSA2LjU5bC0yLjgyIDIuODJMNDYuMTcgMjZIMTF2NHoiLz4KPC9zdmc+Cg==);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.um-slist-cntr {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.um-slist {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  /*
  border-left-style: solid;
  border-left-width: ( 0.25 * $tb-u );
  border-right-style: solid;
  border-right-width: ( 0.25 * $tb-u );
  border-color: $um-text-lond-disabled-color;
  */
}

.uli-snav-cntr {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0px;
  right: 0.035rem;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  width: 0.035rem;
  min-width: 0.035rem;
  max-width: 0.035rem;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.uli-snav-cntr a {
  height: 0.035rem;
  min-height: 0.035rem;
  max-height: 0.035rem;
  width: 0.035rem;
  min-width: 0.035rem;
  max-width: 0.035rem;
  border-radius: 100%;
  color: var(--v-clr-text-lond);
  font-family: Khand-Regular;
  font-size: 0.03rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.uli-snav-cntr a:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.uli-scontainer {
  display: flex;
  flex-direction: column;
  margin-bottom: -0.03125rem;
}

.uli-stext {
  display: flex;
  flex-direction: column;
  height: 0.08rem;
  min-height: 0.08rem;
  max-height: 0.08rem;
  padding-left: 0.04rem;
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  font-size: 0.03rem;
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 0.0625rem;
  margin-top: -0.025rem;
}

/* user edits (bottom action icons) */
.um-edits {
  display: flex;
  flex-direction: row;
  height: 0.32rem;
  min-height: 0.32rem;
  max-height: 0.32rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  padding-top: 0.12rem;
  padding-bottom: 0.1rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  justify-content: flex-end;
  align-items: center;
}

.um-edit-pill {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.004rem;
  padding: 0.004rem 0.01rem;
  border-radius: 0.15rem;
  max-width: calc(100% - 0.2rem);
  width: auto;
  margin-left: auto;
}

.um-edit {
  color: var(--v-clr-inact-on-clr);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 0.1rem;
  min-width: 0.1rem;
  max-width: 0.1rem;
  text-align: center;
  gap: 0.004rem;
  white-space: normal;
}

.um-button-icon {
  font-family: icons;
  font-size: 0.075rem;
  margin: 0;
}

.um-edit-text {
  pointer-events: none;
  font-family: Khand-Regular;
  font-size: 0.0255rem;
  text-align: center;
  line-height: 1.25;
  padding-bottom: 0.0035rem;
  white-space: normal;
}

.um-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  font-family: Khand-Regular;
  background: var(--v-contact-manager-background);
  position: relative;
}

.um-screen-bg {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  position: absolute;
  top: 0;
  z-index: 0;
}

.um-screen-fg {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  position: absolute;
  top: 0;
  z-index: 1;
  /* TODO: force a new stacking contaxt inside this container somehow */
}

.um-header {
  height: 0.19rem;
  min-height: 0.19rem;
  max-height: 0.19rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.um-search-icon {
  font-size: 0.1rem;
  font-family: icons;
  color: var(--v-clr-inact-on-clr);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.um-tbox {
  height: 0.39rem;
  min-height: 0.39rem;
  max-height: 0.39rem;
  width: 0.71rem;
  min-width: 0.71rem;
  max-width: 0.71rem;
  display: flex;
  flex-direction: column;
  border-radius: 0.05rem;
  margin-top: 0.03rem;
  margin-left: 0.01875rem;
}

.um-tbox-title {
  font-family: Khand-Semibold;
  font-size: 0.06rem;
  color: var(--v-clr-inact-on-clr);
  margin-left: auto;
  margin-right: auto;
}

.um-tbox-description {
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  font-size: 0.03rem;
  margin-left: auto;
  margin-right: auto;
}

.um-tbox-hint {
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond);
  font-size: 0.03rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--v-um-text-orange-color);
  display: none;
}

.um-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--v-um-main-background);
  /* workaround to avoid bottom darker line on the tabs in some circumstances */
  margin-top: -1px;
  padding-top: 1px;
  z-index: 1;
}

/*
 * Contact Manager Screen tabs
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
.um-tabs {
  display: flex;
  flex-direction: row;
  height: 0.0925rem;
  min-height: 0.0925rem;
  max-height: 0.0925rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  justify-content: space-between;
  position: relative;
}

.um-tab {
  display: flex;
  flex-direction: column;
  height: 0.08rem;
  min-height: 0.08rem;
  max-height: 0.08rem;
  width: 0.3rem;
  min-width: 0.3rem;
  max-width: 0.3rem;
  z-index: 2;
  font-family: Khand-Medium;
  font-size: 0.04rem;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.um-tabs-search {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.71rem;
  min-width: 0.71rem;
  max-width: 0.71rem;
  border-radius: 0.05rem;
  background-color: var(--v-um-search-contacts-bg-color);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.1rem;
}

.um-spacer {
  margin-top: 50px;
}

.um-tabs-search input {
  background-color: transparent;
  border: none;
  color: var(--v-um-text-lond-color);
  margin-left: 0.05rem;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 0.05rem;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  flex: 1;
}

.um-tabs-search input::placeholder {
  color: var(--v-um-text-lond-color);
  font-family: Khand-Regular;
  font-size: 0.035rem;
}

.um-tabs-search img {
  height: 0.06rem;
  min-height: 0.06rem;
  max-height: 0.06rem;
  width: 0.06rem;
  min-width: 0.06rem;
  max-width: 0.06rem;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 0.02rem;
}

.um-tabs-bg {
  height: 0.0925rem;
  min-height: 0.0925rem;
  max-height: 0.0925rem;
  position: absolute;
  top: 0;
  left: 0;
}

.um-tab-bg {
  height: 0.0925rem;
  min-height: 0.0925rem;
  max-height: 0.0925rem;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  position: absolute;
  top: 0;
  left: 0;
}

.um-tabs[data-um-selected-tab=mc] .um-tab-bg[data-um-selected-tab=mc] {
  z-index: 1;
  fill: var(--v-clr-um-cl-front);
}

.um-tabs[data-um-selected-tab=mc] .um-tab[data-um-selected-tab=mc] {
  color: var(--v-clr-wh-act);
}

.um-tabs[data-um-selected-tab=mc] .um-tab-bg[data-um-selected-tab=g] {
  fill: var(--v-clr-um-cl-mid);
}

.um-tabs[data-um-selected-tab=mc] .um-tab[data-um-selected-tab=g] {
  color: var(--v-clr-inact-on-clr);
}

.um-tabs[data-um-selected-tab=mc] .um-tab-bg[data-um-selected-tab=c] {
  fill: var(--v-clr-um-cl-back);
}

.um-tabs[data-um-selected-tab=mc] .um-tab[data-um-selected-tab=c] {
  color: var(--v-clr-inact-on-clr);
}

.um-tabs[data-um-selected-tab=g] .um-tab-bg[data-um-selected-tab=mc] {
  fill: var(--v-clr-um-cl-mid);
}

.um-tabs[data-um-selected-tab=g] .um-tab[data-um-selected-tab=mc] {
  color: var(--v-clr-inact-on-clr);
}

.um-tabs[data-um-selected-tab=g] .um-tab-bg[data-um-selected-tab=g] {
  z-index: 1;
  fill: var(--v-clr-um-cl-front);
}

.um-tabs[data-um-selected-tab=g] .um-tab[data-um-selected-tab=g] {
  color: var(--v-clr-wh-act);
}

.um-tabs[data-um-selected-tab=g] .um-tab-bg[data-um-selected-tab=c] {
  fill: var(--v-clr-um-cl-back);
}

.um-tabs[data-um-selected-tab=g] .um-tab[data-um-selected-tab=c] {
  color: var(--v-clr-inact-on-clr);
}

.um-tabs[data-um-selected-tab=c] .um-tab-bg[data-um-selected-tab=mc] {
  fill: var(--v-clr-um-cl-mid);
}

.um-tabs[data-um-selected-tab=c] .um-tab[data-um-selected-tab=mc] {
  color: var(--v-clr-inact-on-clr);
}

.um-tabs[data-um-selected-tab=c] .um-tab-bg[data-um-selected-tab=g] {
  fill: var(--v-clr-um-cl-back);
}

.um-tabs[data-um-selected-tab=c] .um-tab[data-um-selected-tab=g] {
  color: var(--v-clr-inact-on-clr);
}

.um-tabs[data-um-selected-tab=c] .um-tab-bg[data-um-selected-tab=c] {
  z-index: 1;
  fill: var(--v-clr-um-cl-front);
}

.um-tabs[data-um-selected-tab=c] .um-tab[data-um-selected-tab=c] {
  color: var(--v-clr-wh-act);
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * flex weights
 */
.text-screen-bg {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: white;
  overflow-y: scroll;
}

.text-cntr {
  flex-direction: column;
  flex: 1;
  padding: 0.04rem 0.03rem 0.04rem 0.03rem;
  font-family: Khand-Regular;
  font-size: 0.045rem;
  overflow-y: scroll;
  text-align: justify;
}

.text-gradient {
  height: 0.18rem;
  min-height: 0.18rem;
  max-height: 0.18rem;
  background: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0) 0.18rem, rgba(0, 0, 0, 0));
}

/*
 * classes to be used in the html content snipets
 * extend tese as needed
 */
.text-fs-72px {
  font-size: 0.09rem;
}

.text-f-bold {
  font-family: Khand-Bold;
}

.text-center {
  margin: auto;
}

.text-flex-row {
  display: flex;
  flex-direction: row;
}

.text-flex-w1 {
  flex: 1;
}

/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/*
 * flex weights
 */
.settings-cntr {
  display: flex;
  flex-direction: column;
  padding: 0.14rem 0.08rem 0.08rem;
  justify-content: flex-start;
  flex: 1;
  background: linear-gradient(rgb(0, 73, 255) 0%, rgb(105, 88, 255) 100%);
  width: 0.85rem;
  min-width: 0.85rem;
  max-width: 0.85rem;
  border-radius: 0.065rem;
  align-self: center;
  margin-bottom: 0.3rem;
}

.settings-themes-text {
  font-size: 0.06rem;
  font-family: Khand-Medium;
  color: var(--v-clr-text-lond-settings);
  display: flex;
  justify-content: center;
  margin-bottom: 0.05rem;
}

.settings-edit-text {
  pointer-events: none;
  margin-top: 0.0125rem;
  margin-left: auto;
  margin-right: auto;
  font-family: Khand-Regular;
  color: var(--v-clr-text-lond-settings);
  font-size: 0.03rem;
}

.settings-edits {
  display: flex;
  flex-direction: row;
  margin-bottom: 1.3125rem;
  margin-left: 0.0625rem;
  margin-right: 0.0725rem;
  margin-bottom: 0.06rem;
  justify-content: space-between;
}

.settings-edit {
  display: flex;
  flex-direction: column;
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  width: 0.15rem;
  min-width: 0.15rem;
  max-width: 0.15rem;
}

.settings-button-icon {
  color: var(--v-clr-text-lond-settings);
  font-family: icons;
  font-size: 0.1rem;
  margin-left: 0.025rem;
  margin-top: -0.025rem;
}

.settings-help-text {
  font-size: 0.06rem;
  font-family: Khand-Medium;
  color: var(--v-clr-text-lond-settings);
  display: flex;
  justify-content: center;
  margin-bottom: 0.05rem;
}

.settings-themes {
  display: flex;
  flex-direction: row;
  margin-bottom: 1.3125rem;
  margin-left: 0.12rem;
  margin-right: 0.15rem;
  margin-bottom: 0.0625rem;
  justify-content: space-between;
}

.settings-help {
  display: flex;
  flex-direction: row;
  margin-left: 0.0625rem;
  margin-right: 0.075rem;
  justify-content: space-between;
}

.settings-decision-view-text {
  font-size: 0.06rem;
  font-family: Khand-Medium;
  color: var(--v-clr-text-lond-settings);
  display: flex;
  justify-content: center;
  margin-top: 0.1rem;
  margin-bottom: 0.05rem;
}

.settings-decision-view {
  display: flex;
  flex-direction: row;
  margin-left: 0.12rem;
  margin-right: 0.12rem;
  justify-content: space-between;
  gap: 0.2rem;
}

.settings-theme {
  display: flex;
  flex-direction: column;
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  width: 0.15rem;
  min-width: 0.15rem;
  max-width: 0.15rem;
}

.settings-theme[data-sel-theme=light-theme][data-theme=dark-theme] .settings-button-icon {
  opacity: 0.45;
}

.settings-theme[data-sel-theme=dark-theme][data-theme=light-theme] .settings-button-icon {
  opacity: 0.45;
}

/* .settings-button-icon{
	color: $clr-wh-act-settings;
	font-family: $fnt-icons;
	font-size: $fnt-sz-icon;
	margin-left: (2.5 * $tb-u);
	margin-top: (-2.5 * $tb-u);

}
 */
.settings-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.07rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.12rem;
  padding-right: 0.12rem;
  height: 0.18rem;
  min-height: 0.18rem;
  max-height: 0.18rem;
  color: #ffffff;
  font-size: 0.06rem;
  font-family: Khand-Regular;
  border-radius: 0.09rem;
  border: solid;
  border-width: 0.005rem;
}

.reset-tutorial-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.55rem;
  min-width: 0.55rem;
  max-width: 0.55rem;
  color: #ffffff;
  font-size: 0.045rem;
  font-family: Khand-Medium;
  border-radius: 0.065rem;
  border-width: 0.0025rem;
  border: solid #ffffff;
  margin-left: 0.225rem;
}

/* ugly, ugly hack, think about something more generic */
body.dark-theme .settings-button[data-theme=dark-theme] {
  background-color: #6A58FF;
  border: none;
}

body.light-theme .settings-button[data-theme=light-theme] {
  background-color: #6A58FF;
}

.settings-section {
  font-size: 0.06rem;
  font-family: Khand-Medium;
  color: var(--v-clr-wh-act-settings);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.05rem;
}

.settings-check {
  font-size: 0.1rem;
  font-family: icons;
  color: var(--v-clr-wh-act-settings);
}

/* .icon-checked{
	color:$clr-icon-checked-ondark;
}
.icon-checked-onlight{
	color: $clr-icon-checked-onlight;
}
//GS Test
.icon-cancel{
	color:$clr-icon-cancel-ondark;
}
.icon-cancel-onlight{
	color: $clr-icon-cancel-ondlight;
} */
/*
 * ThinkBar Screen classes
 */
/*
 * ThinkBar Paths
 * do _not_ add '/' at the end of paths
 */
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * background-image from url or data-url
 */
/*
 * flex weights
 */
/*
 * misc. utility mixins
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
.tut-background {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 1rem;
  height: 100vh;
  font-family: Khand-Semibold;
  background: var(--v-grd-start-background);
}

.tut-top {
  display: flex;
  flex-direction: row;
  margin-top: 0.2rem;
}

.tut-middle {
  display: flex;
  flex-direction: row;
  margin-left: 0.125rem;
}

.tut-chicken1 {
  height: 0.325rem;
  align-items: right;
  margin-top: -0.1rem;
  min-height: 0.325rem;
  max-height: 0.325rem;
}

.tut-chicken2 {
  height: 0.325rem;
  min-height: 0.325rem;
  max-height: 0.325rem;
  align-items: left;
  margin-top: -0.0625rem;
}

.tut-top-text {
  display: flex;
  flex-direction: column;
}

.tut-middle-text {
  display: flex;
  flex-direction: column;
  margin-top: 0.025rem;
  margin-right: 0.0125rem;
}

.tut-row1 {
  color: white;
  display: flex;
  margin-left: 0.1125rem;
  line-height: 0.125rem;
  font-size: 0.115rem;
}

.tut-row2 {
  color: white;
  display: flex;
  justify-content: left;
  margin-left: 0.15rem;
  line-height: 0.025rem;
  font-size: 0.045rem;
}

.tut-row3 {
  color: white;
  margin-left: 0.075rem;
  display: flex;
  justify-content: left;
  font-size: 0.06rem;
}

.tut-row4 {
  font-size: 0.115rem;
  color: white;
  display: flex;
  justify-content: right;
  margin-right: 0.125rem;
  line-height: 0.125rem;
}

.tut-row5 {
  font-size: 0.045rem;
  color: white;
  display: flex;
  justify-content: right;
  margin-right: 0.1rem;
  line-height: 0.025rem;
}

.tut-row6 {
  font-size: 0.06rem;
  color: white;
  display: flex;
  justify-content: right;
  margin-right: 0.05rem;
}

.tut-row7 {
  display: flex;
  justify-content: center;
}

.tut-dont-show-button {
  background-color: white;
  color: #0038ed;
  margin-bottom: 0.315rem;
  font-family: Khand-Medium;
  font-size: 0.0375rem;
  justify-content: center;
  width: 0.3rem;
  display: flex;
  margin-left: 0.35rem;
  margin-right: 0.65rem;
  margin-top: 0.025rem;
  align-items: center;
  border-radius: 0.0125rem;
}

.tut-campaigns-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.55rem;
  min-width: 0.55rem;
  max-width: 0.55rem;
  color: #ffffff;
  font-size: 0.045rem;
  font-family: Khand-Medium;
  border-radius: 0.065rem;
  border-width: 0.0025rem;
  border: solid #ffffff;
  margin-left: 0.225rem;
}

.tut-more-button {
  font-size: 0.03rem;
  color: white;
  display: flex;
  justify-content: right;
  line-height: 0.1rem;
  margin-bottom: 0.1575rem;
  font-weight: 500;
  margin-left: 0.1rem;
}

.tut-arrow-r {
  font-size: 0.1rem;
  color: #ffffff;
  margin-right: 0.09375rem;
}

.tut-more-cntr {
  height: 0.2575rem;
  min-height: 0.2575rem;
  max-height: 0.2575rem;
}

.tut-please-wait {
  color: white;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  font-size: 0.06rem;
}

/*
 * Overlays base
 */
/*
 * ThinkBar menu
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar font config
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/* 
Units quick ref:
- px: CSS pixel (1px = 1/96in, web standard unit)
- pt: Point (1pt = 1/72in ≈ 1.333px, used for print)
- rem: Root em (1rem = font-size of <html>, default ~16px)
*/
/*
 * To be able to calculate the line height
 * we add a constant which gives
 *  line height / em square height
 * ratio. note that this varies with fonts, for the Khand
 * fonts we use currently it is 1.529 as for Khand
 *   em size: 1000
 *   ascender: 1050
 *   descender: 479
 */
/*
 * it seems Kati&Zoli uses 12px, 18px, 24px and 36px fonts
 */
/* aka 12pt */
/* aka 12pt */
/* aka 12pt */
/* aka 24pt */
/*
 * some utilities
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * misc. utility mixins
 */
/*
 * Overlays base
 */
.m-icon {
  font-family: icons;
  font-size: 0.1rem;
  color: var(--v-clr-black);
}

.tb-overlay-menu {
  position: absolute;
  /* 
   * overlays are turned on/off from code,
   * typically they start hidden
   */
  /* this is no longer needed as ko takes care of hiding/showing the overlay
  display: none;
  */
  /*
   * default overlay z-index is 1000,
   * might need to override in subsequent overlay classes
   * as needed
   */
  z-index: 10010;
  top: 0;
  left: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  background-color: rgba(0, 0, 0, 0.3);
}

.tb-overlay-menu[data-visible-columns="2"] {
  width: 2.01rem;
  min-width: 2.01rem;
  max-width: 2.01rem;
}

.tb-overlay-menu[data-visible-columns="3"] {
  width: 3.02rem;
  min-width: 3.02rem;
  max-width: 3.02rem;
}

.menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.5rem;
  min-width: 0.5rem;
  max-width: 0.5rem;
  min-height: 0.75rem;
  border-top-left-radius: 0.056rem;
  border-bottom-left-radius: 0.056rem;
  background-color: rgb(230, 230, 230);
  padding: 0.04rem 0.04rem 0.04rem 0.08rem;
  font-family: Khand-Regular;
  color: black;
  display: flex;
  flex-direction: column;
}

.menu-inner-cntr {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.menu-icon-header {
  display: flex;
  justify-content: flex-end;
}

.menu-list-cntr {
  display: flex;
  flex-direction: column;
  font-size: 0.045rem;
  vertical-align: bottom;
  flex: 1;
}

.menu-list-spacer {
  height: 0.045rem;
}

.menu-list-item-logout {
  display: flex;
  flex-direction: column;
}

.menu-list-item-logout-user-name {
  font-family: Khand-Regular;
  font-size: 0.015rem;
}

.menu-footer {
  display: flex;
  font-size: 0.03rem;
}

/*
 * Inspire result overlay on the decision screen
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Overlays base
 */
.tb-overlay-decision-inspire-result {
  position: absolute;
  /* 
   * overlays are turned on/off from code,
   * typically they start hidden
   */
  /* this is no longer needed as ko takes care of hiding/showing the overlay
  display: none;
  */
  /*
   * default overlay z-index is 1000,
   * might need to override in subsequent overlay classes
   * as needed
   */
  z-index: 10010;
  top: 0;
  left: 0;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  min-height: 100vh;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}

.decision-inspire-result-panel {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 0.88rem;
  min-width: 0.88rem;
  max-width: 0.88rem;
  min-height: 0.8rem;
  font-family: Khand-Regular;
}

.decision-inspire-result-panel-top {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin-top: 0.04rem;
  margin-left: 0.04rem;
  margin-right: 0.04rem;
  margin-bottom: 0;
}

.decision-inspire-result-panel-top-column {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.decision-inspire-result-panel-top-column-title {
  display: flex;
  justify-content: left;
  height: 0.08rem;
  min-height: 0.08rem;
  max-height: 0.08rem;
  font-size: 0.045rem;
  color: white;
}

.decision-inspire-result-panel-top-column[data-claim-kind=con] .decision-inspire-result-panel-top-column-title {
  justify-content: right;
}

.decision-inspire-result-panel-top-column-line {
  display: flex;
  justify-content: left;
  height: 0.06rem;
  min-height: 0.06rem;
  max-height: 0.06rem;
  font-size: 0.03rem;
  color: white;
}

.decision-inspire-result-panel-top-column[data-claim-kind=con] .decision-inspire-result-panel-top-column-line {
  justify-content: right;
}

.decision-inspire-result-panel-top-trunk {
  width: 0.16rem;
  min-width: 0.16rem;
  max-width: 0.16rem;
}

.decision-inspire-result-panel-button-cntr {
  display: flex;
}

.decision-inspire-result-panel-button-cntr-btn {
  width: 0.24rem;
  min-width: 0.24rem;
  max-width: 0.24rem;
  height: 0.08rem;
  max-height: 0.08rem;
  min-height: 0.08rem;
  margin: auto;
  font-size: 0.03rem;
  font-family: Khand-Regular;
  text-align: center;
  color: black;
  background-color: var(--v-clr-text-lond);
  border-radius: 0.04rem;
  justify-content: center;
  align-items: center;
}

.decision-inspire-result-panel-button-cntr-btn[data-button-kind=cancel] {
  color: var(--v-clr-text-lond);
  background-color: rgba(0, 0, 0, 0);
  border-width: 0.002rem;
  border-style: solid;
}

.decision-inspire-result-panel-button-cntr-sep {
  width: 0.16rem;
  min-width: 0.16rem;
  max-width: 0.16rem;
}

/*
 * Decision editor ai assist result overlay on the decision editor screen
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * misc. utility mixins
 */
/*
 * Overlays base
 */
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
.tb-overlay-decision-editor-result {
  position: absolute;
  /* 
   * overlays are turned on/off from code,
   * typically they start hidden
   */
  /* this is no longer needed as ko takes care of hiding/showing the overlay
  display: none;
  */
  /*
   * default overlay z-index is 1000,
   * might need to override in subsequent overlay classes
   * as needed
   */
  z-index: 10010;
  flex-direction: column;
  top: 0;
  left: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}

.decision-editor-result-panel {
  display: flex;
  flex-direction: column;
  margin-top: 0.1525rem;
  margin-left: 0px;
  margin-right: 0px;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  min-height: 0.8rem;
  font-family: Khand-Regular;
}

.decision-editor-result-sod-mod-cntr {
  margin-top: 0.02rem;
  margin-bottom: 0.02rem;
  margin-left: auto;
  margin-right: auto;
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.8rem;
  min-width: 0.8rem;
  max-width: 0.8rem;
}

.decision-editor-result-sod-mod-btn {
  height: 0.1rem;
  min-height: 0.1rem;
  max-height: 0.1rem;
  width: 0.4rem;
  min-width: 0.4rem;
  max-width: 0.4rem;
  align-items: center;
  justify-content: center;
  font-size: 0.045rem;
}

.decision-editor-result-sod-mod-btn:first-child {
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.decision-editor-result-sod-mod-btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}

.decision-editor-result-sod-mod-btn[data-suggestion-mode="0"] {
  visibility: hidden;
}

.decision-editor-result-sod-mod-btn[data-suggestion-mode="1"] {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  mask-image: linear-gradient(90deg, #fff 0%, #fff 65%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%);
  mask-size: 390%, 100%;
  animation: der-clip-fade 3s infinite alternate;
}

.decision-editor-result-title {
  margin-top: 0.05rem;
  margin-left: auto;
  margin-right: auto;
  height: 0.07rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  width: 0.9rem;
  min-width: 0.9rem;
  max-width: 0.9rem;
  font-size: 0.045rem;
}

.decision-editor-result-title[data-suggestion-mode="0"] {
  visibility: hidden;
}

.decision-editor-result-title[data-suggestion-mode="1"] {
  position: relative;
  background-color: white;
  padding-left: 0.02rem;
  align-items: center;
  color: black;
  border-radius: 0.07rem;
  mask-image: linear-gradient(90deg, #fff 0%, #fff 65%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%);
  mask-size: 390%, 100%;
  animation: der-clip-fade 3s infinite alternate;
}

@keyframes der-clip-fade {
  100% {
    -webkit-mask-position: right;
    mask-position: right;
  }
}
.decision-editor-result-no-sugg {
  margin-top: 0.4775rem;
  margin-bottom: 0.325rem;
  margin-left: auto;
  margin-right: auto;
  height: 0.15rem;
  min-height: 0.15rem;
  max-height: 0.15rem;
  width: 0.4rem;
  min-width: 0.4rem;
  max-width: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.03rem;
  background-color: rgba(240, 240, 240, 0.9);
  color: black;
  font-size: 0.045rem;
}

.decision-editor-result-close-btn {
  height: 0.07rem;
  min-height: 0.07rem;
  max-height: 0.07rem;
  width: 0.2rem;
  min-width: 0.2rem;
  max-width: 0.2rem;
  margin-top: 0.03rem;
  margin-right: 0.06rem;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.07rem;
  background-color: white;
  color: black;
  font-size: 0.045rem;
}

/*
 * Inspire spinner overlay on the decision screen
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Common z-index breakpoints
 */
/*
 * misc. utility mixins
 */
/*
 * Overlays base
 */
.ai-sp-ovl {
  position: absolute;
  /* 
   * overlays are turned on/off from code,
   * typically they start hidden
   */
  /* this is no longer needed as ko takes care of hiding/showing the overlay
  display: none;
  */
  /*
   * default overlay z-index is 1000,
   * might need to override in subsequent overlay classes
   * as needed
   */
  z-index: 10010;
  top: 0;
  left: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}

.ai-sp-pnl {
  position: relative;
  margin: auto;
  height: 0.3rem;
  min-height: 0.3rem;
  max-height: 0.3rem;
  width: 0.6rem;
  min-width: 0.6rem;
  max-width: 0.6rem;
  font-family: Khand-Regular;
  color: var(--v-clr-wh-act);
  fill: var(--v-clr-wh-act);
}

/* Movement */
@keyframes ai-sp-animation-move {
  0% {
    left: 0px;
  }
  100% {
    left: 0.4rem;
  }
}
.ai-sp-pnl-animation {
  height: 0.2rem;
  min-height: 0.2rem;
  max-height: 0.2rem;
  width: 0.2rem;
  min-width: 0.2rem;
  max-width: 0.2rem;
  font-family: icons;
  font-size: 0.2rem;
  position: absolute;
  top: 0px;
  left: 0px;
  animation: ai-sp-animation-move 4s linear infinite;
}

/* Frame switching with opacity */
.ai-sp-pnl-animation i {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: ai-sp-animation-frames 0.4s steps(4) infinite;
}

.ai-sp-pnl-animation i:nth-child(1) {
  animation-delay: 0s;
}

.ai-sp-pnl-animation i:nth-child(2) {
  animation-delay: 0.1s;
}

.ai-sp-pnl-animation i:nth-child(3) {
  animation-delay: 0.2s;
}

.ai-sp-pnl-animation i:nth-child(4) {
  animation-delay: 0.3s;
}

/* Keyframes for only showing one frame at a time */
@keyframes ai-sp-animation-frames {
  0% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.ai-sp-pnl-text {
  position: absolute;
  font-size: 0.045rem;
  font-family: Khand-Semibold;
  margin: auto;
  bottom: 0;
  justify-content: center;
  width: 0.6rem;
  min-width: 0.6rem;
  max-width: 0.6rem;
}

/*
* ThinkBar menu
*/
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Overlays base
 */
.tb-overlay-modal-dialog {
  position: absolute;
  /* 
   * overlays are turned on/off from code,
   * typically they start hidden
   */
  /* this is no longer needed as ko takes care of hiding/showing the overlay
  display: none;
  */
  /*
   * default overlay z-index is 1000,
   * might need to override in subsequent overlay classes
   * as needed
   */
  z-index: 10010;
  top: 0;
  left: 0;
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  min-height: 100vh;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}

.tb-overlay-modal-dialog[data-visible-columns="2"] {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
}

.tb-overlay-modal-dialog[data-visible-columns="3"] {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
}

.modal-dialog-panel {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 0.6rem;
  min-width: 0.6rem;
  max-width: 0.6rem;
  height: 0.3rem;
  min-height: 0.3rem;
  border-radius: 0.056rem;
  background-color: rgb(230, 230, 230);
  font-family: Khand-Regular;
  color: black;
}

.modal-dialog-inner-cntr {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  margin: 0.04rem;
}

.modal-dialog-text {
  font-size: 0.045rem;
  margin: 0;
}

.modal-dialog-textarea {
  font-size: 0.03rem;
  border-style: none;
  font-family: Khand-Regular;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.03rem 0.04rem 0.03rem 0.04rem;
  /* NOTE:
   * this is to hide resize handle in bottom right corner
   * works on Win10+Chrome, supposedly in Safari, too
   * see thsi SO answer:
   * https://stackoverflow.com/a/588106
   */
  resize: none;
}

.modal-dialog-footer {
  display: flex;
  flex-direction: row;
  margin: 0;
}

.modal-dialog-footer-side {
  width: 0.02rem;
  min-width: 0.02rem;
  max-width: 0.02rem;
}

.modal-dialog-button {
  font-size: 0.03rem;
  width: 0.2rem;
  min-width: 0.2rem;
  max-width: 0.2rem;
  height: 0.05rem;
  min-height: 0.05rem;
  max-height: 0.05rem;
  border-radius: 0.025rem;
  border: none;
}

.modal-dialog-alternatives-cntr {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0.04rem;
  justify-content: space-around;
}

.modal-dialog-alternative {
  font-size: 0.03rem;
  height: 0.05rem;
  min-height: 0.05rem;
  max-height: 0.05rem;
  border-radius: 0.025rem;
  border: none;
}

/*
* ThinkBar menu
*/
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Overlays base
 */
.tut-title {
  padding-left: 0.08rem;
  padding-right: 0.08rem;
  justify-content: center;
}

.tut-description {
  justify-content: center;
}

.tut-overlay-text {
  background-color: #1b32cb;
  display: flex;
  flex-direction: column;
  color: white;
  font-family: Khand-Medium;
  font-size: 0.06rem;
  margin-top: 0.42rem;
  margin-left: 0.07rem;
  margin-right: 0.07rem;
  padding-top: 0.075rem;
  padding-left: 0.075rem;
  padding-right: 0.075rem;
  padding-bottom: 0.34rem;
  margin-bottom: 1.1rem;
  border-radius: 0.065rem;
  line-height: 0.075rem;
}

.tut-ovl-arrow-r {
  font-size: 0.1rem;
  margin-left: 0.25rem;
  padding-top: 0.05rem;
}

.tut-ovl-dont-show-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.13rem;
  min-height: 0.13rem;
  max-height: 0.13rem;
  width: 0.55rem;
  min-width: 0.55rem;
  max-width: 0.55rem;
  background-color: #1b32cb;
  color: #ffffff;
  font-size: 0.04rem;
  font-family: Khand-Medium;
  border-radius: 0.065rem;
  margin-top: 0.325rem;
}

/*
 * Inspire result overlay on the decision screen
 */
/* semantic colors */
/* light-on-dark text color */
/* test test test */
/* Seetings colors are the same in light and dark color themes, so it need its own color*/
/* dark-on-light text color */
/* hint text, blueish */
/*
 * option color theme
 */
/*
 * glitter color
 */
/*
 * menu
 */
/*
 * new decision screen
 */
/*
 * claim screen
 */
/*
 * user screen
 */
/*
 * decision screen
 */
/*
 * decision editor screen
 */
/*
 * new design
 */
/**um list tab back*/
/**um list tab middle*/
/**um list tab front*/
/*linear-gradient(
	to bottom,
	rgba(80, 73, 209, 1) 0%,
	rgba(0, 0, 0, 1) 15%,
	rgba(0, 1, 2, 1) 47%,
	rgba(0, 5, 9, 1) 58%,
	rgba(0, 12, 20, 1) 66%,
	rgba(0, 22, 37, 1) 73%,
	rgba(0, 35, 59, 1) 78%,
	rgba(0, 51, 87, 1) 83%,
	rgba(0, 70, 119, 1) 88%,
	rgba(0, 93, 157, 1) 92%,
	rgba(0, 118, 200, 1) 95%,
	rgba(0, 146, 246, 1) 99%,
	rgba(0, 151, 255, 1) 100%);
*/
/**campaign list tab back*/
/**campaign list tab middle*/
/**campaign list tab front*/
/**campaign list front*/
/**campaign background*/
/**campaign list label & board*/
/**date, date bar*/
/**inactive on color*/
/**White, active*/
/** white in capsule*/
/**inactive on black*/
/**black*/
/*
 * option color theme
 */
/**inactive on color*/
/**inactive on color*/
/**contacts board on campaign*/
/**green vote handle*/
/**green vote frame*/
/**green PRO, %*/
/**vote green*/
/**red vote handle*/
/**red vote frame*/
/**red PRO, %*/
/**vote red*/
/**bar tube*/
/**bar tube MOD*/
/**green bar*/
/**red bar*/
/** description label green*/
/** description label red*/
/**delete circle button*/
/**message board*/
/**ai mode lighting*/
/*
 * ThinkBar unit
 * js sets html.font-size as needed, all other things (layouts, font and image sizes)
 * are set with respect to this unit (with very few exceptions)
 */
/*
 * Overlays base
 */
.tb-overlay-teams-config {
  position: absolute;
  /* 
   * overlays are turned on/off from code,
   * typically they start hidden
   */
  /* this is no longer needed as ko takes care of hiding/showing the overlay
  display: none;
  */
  /*
   * default overlay z-index is 1000,
   * might need to override in subsequent overlay classes
   * as needed
   */
  z-index: 10010;
  top: 0;
  left: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  height: 100vh;
  /*
   * NOTE:
   * this makes the overlay "transparent"to clicks
   * see https://stackoverflow.com/a/4839672
   */
  pointer-events: none;
  background-color: white;
}

.teams-config-panel {
  /*
   * NOTE:
   * this is needed, otherwise the 'pointer-event: none' property is inherited
   */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 90vw;
  min-width: 90vw;
  max-width: 90vw;
  height: 90vh;
  min-height: 90vh;
  max-height: 90vh;
  font-family: Khand-Regular;
}

.teams-config-panel-input {
  display: none;
}

/*.teams-config-panel-label {
	display: none;
}
*/
.teams-config-edit-label {
  font-family: Khand-Regular;
  font-size: 0.06rem;
  cursor: pointer;
}

/* Apply custom styles for radio label */
input[type=radio] + label {
  font-family: Khand-Regular;
  font-size: 0.06rem;
  display: inline-block;
  padding: 5px 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/* Apply custom styles for selected radio label */
input[type=radio]:checked + label {
  background-color: #3366ff;
  border-color: #3366ff;
  color: white;
}

/* Apply custom styles for unfilled radio group */
.teams-config-panel:not(:has(:checked)) label {
  border-color: red;
}

/* deprecated */
.teams-config-panel-top {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin-top: 4wv;
  margin-left: 4wv;
  margin-right: 4wv;
  margin-bottom: 0;
}

.teams-config-panel-top-column {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.teams-config-panel-top-column-title {
  display: flex;
  justify-content: left;
  height: 8wv;
  min-height: 8wv;
  max-height: 8wv;
  font-size: 0.045rem;
  color: white;
}

.teams-config-panel-top-column[data-claim-kind=con] .teams-config-panel-top-column-title {
  justify-content: right;
}

.teams-config-panel-top-column-line {
  display: flex;
  justify-content: left;
  height: 6wv;
  min-height: 6wv;
  max-height: 6wv;
  font-size: 0.03rem;
  color: white;
}

.teams-config-panel-top-column[data-claim-kind=con] .teams-config-panel-top-column-line {
  justify-content: right;
}

.teams-config-panel-top-trunk {
  width: 16wv;
  min-width: 16wv;
  max-width: 16wv;
}

.teams-config-panel-button-cntr {
  display: flex;
}

.teams-config-panel-button-cntr-btn {
  width: 24wv;
  min-width: 24wv;
  max-width: 24wv;
  height: 8wv;
  max-height: 8wv;
  min-height: 8wv;
  margin: auto;
  font-size: 0.03rem;
  font-family: Khand-Regular;
  text-align: center;
  color: black;
  background-color: var(--v-clr-text-lond);
  border-radius: 4wv;
  justify-content: center;
  align-items: center;
}

.teams-config-panel-button-cntr-btn[data-button-kind=cancel] {
  color: var(--v-clr-text-lond);
  background-color: rgba(0, 0, 0, 0);
  border-width: 0.002rem;
  border-style: solid;
}

.teams-config-panel-button-cntr-sep {
  width: 16wv;
  min-width: 16wv;
  max-width: 16wv;
}

/*
 * Enable user selection for input[text] and textarea tags
 */
input[type=text], textarea {
  -webkit-touch-callout: none; /* iOS Safari */
  resize: none; /* no resize handle for textareas, please */
  -webkit-user-select: text; /* Safari */
  -khtml-user-select: text; /* Konqueror HTML */
  -moz-user-select: text; /* Old versions of Firefox */
  -ms-user-select: text; /* Internet Explorer/Edge */
  user-select: text; /* Non-prefixed version, currently */
}