/* vim: set tabstop=3:softtabstop=3:shiftwidth=3:noexpandtab */

/* Colors */

:root {
	--font-size-normal: 11pt;
	--font-size-h1: 11pt;
	--font-size-h2: 11pt;
	--font-size-h3: 11pt;
	--font-normal: Arial, Helvetica, sans-serif;
	--font-header: Arial, Helvetica, sans-serif;
	--font-button: Arial, Helvetica, sans-serif;
	
	--selectable-hover-bg: #a0c2fa;
	--selectable-hover-fg: inherit;
	--selectable-selected-bg: #347dc7;
	--selectable-selected-fg: white;
	--selectable-normal-bg: white;
	--selectable-normal-fg: inherit;
	--title-background: rgba(204, 204, 204, 0.6);
	--title-bg: rgba(204, 204, 204, 0.6);
	--border-title: 1px solid #505050;
	--border-normal: 1px solid #e0e0e0;
	--border-dialog: 3px solid #909090;
	--border-radius-dialog: 5px;
	--widget-bg: #eeeeee;
	--content-bg: #e0e0e0;


	--tab-bg: rgba(204, 204, 204, 0.6);
	--tab-bg-active: rgb(173, 203, 211);

	--list-normal: white;
	--warn-color: #fac2b9;

	--tool-icon-width: 16px;
	--tool-icon-height: 16px;

	--tab-icon-width: 24px;
	--tab-icon-height: 24px;

	--toolbar-icon-width: 36px;
	--toolbar-icon-height: 36px;

	--toolbar-button-width: 48px;
	--toolbar-button-height: 48px;

	--button-small-width: 20px;
	--button-small-height: 20px;
}

/* Markup */

body, input, textarea {
	font-family: var(--font-normal);
	font-size: var(--font-size-normal);
}

h1, h2, h3, h4 {
	font-family: var(--font-header)
}

button {
	font-family: var(--font-button);
	font-weight: bold;
}

.page {
	display: flex;
	flex-direction: column;
	width: 99%;
	margin-left: auto;
	margin-right: auto;
	height: calc(100vh - 1em);
}

.page-rest {
	flex-grow: 1;
	height: calc(100% - 2em - var(--toolbar-icon-height));
}

#tab_patients, #patients-data, #tab_mm {
	height: 100%;
}

#tab_patient {
	height: 100%;
	overflow: auto;
}

input {
	font-size: var(--font-size-normal);
}

.dialog {
	border: 1px solid black;
	width: 450px;
}

.login, .reset-passwd {
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
}

.dialog table {
	width: 100%;
}

td.inp40 {
	width: 300px;
}

td.inp40 input[type="text"], td.inp40 input[type="password"] {
	width: calc(100% - 5px);
}

.dialog input[type="submit"] {
	width: 100%;
}

.dialog textarea {
	width: calc(100% - 5px);
}

td.error {
	color: red;
	text-align: center;
}

td.message {
	text-align: center;
}

span.message {
	color: blue;
}

div.message {
	margin: 2em;
}

span.error {
	color: red;
}

th.title {
	background: #79c45e;
}

td.explain { 
	background: #cccccc;
	border: 1px solid #909090;
}

.height100 {
	height: 100%;
}

/*****************************************
 * Menus / Toolbars
 *****************************************/

.menu {
	width: 100%;
	background: #cccccc;
	padding-bottom: 3px;
	padding-top: 3px;
	border: 1px solid black;
	flex-basis: content;
	display: flex;
}

.qlbt-operation-menu .qlbt-operation-menu-item {
	padding-top: 3px;
	padding-bottom: 3px;
}

.qlbt-operation-menu {
	min-height: 30px !important;
	min-width: 200px !important;
}

.menu .main, .menu .main2 {
	display: inline-block;
	padding-left: 0.5em;
}

.menu .main2 {
	margin-left: auto;
	margin-right: 10px;
}  

.menu .section {
	display: inline-block;
	height: var(--toolbar-button-height);
}

.menu .section .buttons {
	height: 100%;
}


.menu button {
	box-shadow: 2px 2px 2px 2px #b0b0b0;
	margin-bottom: 4px;
}

.menu button.pressed {
	box-shadow: -1px -1px 1px 1px #808080;
    position: relative;
    top: 2px;
}

.menu button.checked {
	border: 1px solid #505050;
	border-radius: 5px;
	box-shadow: none;
}

span.tb-combo {
	display: inline-block;
	min-width: 250px;
}

.toolbar-vertical {
	width: var(--toolbar-button-width);
	height: 100%;
	border: 1px solid black;
}

.toolbar-vertical button img, .menu button img, .buttons-vertical button img {
	width: var(--toolbar-icon-width);
	height: var(--toolbar-icon-height);
}

.menu span.vsep {
	height: var(--toolbar-icon-height);
	margin-left: 3px;
	margin-right: 3px;
	display: inline-block;
	border-right: 2px solid #505050;
}

.status {
	width: 100%;
	height: 2em;
	background: #404040;
	color: white;

	border: 1px solid black;
	flex-basis: content;
}

.status .part {
	display: inline-block;
	vertical-align: middle;
	padding-left: 5px;
}

.status .part button {
	margin-left: 5px;
}

.status .modified {
	width: 10px;
}

.status .session, .status .title, .status .license {
	width: calc(33% - 120px);
}

.status .queue {
	width: 200px;
	background: white;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 5px;
	border: 1px solid black;
	height: 80%;
	border-radius: 10px;
}

.status .queue .progress {
	display: inline-block;
	background: darkblue;
	height: 100%;
}

.center {
	text-align: center;
}

/**************************************************************************************
 * Datepicker
 **************************************************************************************/

 .air-datepicker.-bottom-left-.-from-bottom-.-active- {
	z-index: 20000;
 }

/**************************************************************************************
 * HBox / VBox / GridBox
 **************************************************************************************/

 .hbox {
	display: flex;
	gap: 3px;
	height: 100%;
	align-items: stretch;
 }

 .vbox {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
 }

 .hbox .fill {
	flex-grow: 1;
 }

 .vbox .fill {
	flex-grow: 1;
 }

 table.gridbox {
	width: 100%;
 }

 .indent {
	margin-left: 1em;
 }

 .stand-apart {
	margin-left: 1em;
	margin-top: 1em;
	font-weight: bold;
 }

 fieldset.groupbox {
	height: 100%;
	padding: 5px;
 }

 button.normal img {
	width: var(--toolbar-icon-width);
	height: var(--toolbar-icon-height);
 }

 button.normal.label img {
	height: 1.5em;
	width: 1.5em;
	vertical-align:middle;
	padding-right: 3px;
	margin-bottom: 3px;
 }

 button.normal.label span {
	vertical-align: middle;
 }

 
/**************************************************************************************
 * FilterTable
 **************************************************************************************/

 .filtertable-canvas {
	height: calc(100% - 20px);
	overflow-x: auto;
 }

table.filtertable {
	border-collapse: collapse;
	border: var(--border-normal);
	margin: 0px;
	empty-cells: show;
	width: calc(100% - 5px);
	margin-left: auto;
	margin-right: auto;
}

table.filtertable thead {
	position: relative;
	width: 100%;
}

table.filtertable tbody {
	width: 100%;
}

table.filtertable tr.navigate {
	height: 30px;
}

table.filtertable tr.navigate td {
	width: 100%;
	vertical-align: middle;
	height: 30px;
}

table.filtertable tr.navigate span.nav-prev, 
.rep-book-title span.nav-prev, 
.rep-book-title span.nav-next,
table.filtertable tr.navigate span.nav-next 
{
	display: inline-block;
	padding: 0;
	background: var(--content-bg);
	border: 1px solid black;
	border-radius: 5px;
	cursor: pointer;
	height: 22px;
	width: 35px;
	text-align: center;
	padding-top: 3px;
	user-select: none; 
}

table.filtertable tr.navigate span.nav-prev,
.rep-book-title span.nav-prev {
	margin-right: auto;
	margin-left: 2px;
}

table.filtertable tr.navigate span.nav-next,
.rep-book-title span.nav-next {
	margin-left: auto;
	margin-right: 2px;
}

table.filtertable tr.navigate span.nav-prev:hover,
table.filtertable tr.navigate span.nav-next:hover,
.rep-book-title span.nav-prev:hover,
.rep-book-title span.nav-next:hover {
	color: blue;
	background: #c0c0c0;
	transition: background-color 250ms linear;
}

table.filtertable tr.navigate span.disabled,
.rep-book-title span.disabled {
	cursor: default;
	border: 1px solid #909090;
	border-radius: 5px;
	color: #c0c0c0;
}

table.filtertable tr.navigate span.disabled:hover,
.rep-book-title span.disabled:hover {
	color: #c0c0c0 !important;
	background: var(--content-bg) !important;
}

table.filtertable tr {
	width: 100%;
}

table.filtertable tr.filters td {
	background: var(--title-background);
}

table.filtertable tr.filters td input[type="text"] {
	width: calc(100% - 10px);
}

table.filtertable tr.filters td select {
	width: 100%;
}

table.filtertable th {
	background: var(--title-background);
	border: var(--border-title);
	padding-left: 2px;
	padding-right: 2px;
	user-select: none;	
}

table.filtertable tr.data td {
	border: var(--border-normal);
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 3px;
	padding-bottom: 3px;
	user-select: none;
}

table.filtertable tr.data td span.color {
	width: 20px;
	height: 20px;
	border: 1px solid black;
	border-radius: 10px;
	display: inline-block;
}

table.filtertable tr {
	cursor: default;
}

table.filtertable tr.data {
	background: var(--selectable-normal-bg);
	color: var(--selectable-normal-fg);
}

table.filtertable tr.data:hover {
	background: var(--selectable-hover-bg);
	color: var(--selectable-hover-fg);
}

table.filtertable tr.data.selected  {
	background: var(--selectable-selected-bg);
	color: var(--selectable-selected-fg);
}

table.filtertable .ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* modal layer - prevents clicking on the widgets beneath it */

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.0); /* Black w/ opacity */
}

/* ModalDialog */

.modaldialog {
	background: var(--widget-bg);
	top: 150px;
	border: var(--border-dialog);
	border-radius: var(--border-radius-dialog);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 5px 5px #cccccc;
	min-width: 350px;
	display: flex;
	flex-direction: column;
}

.modaldialog .title {
	background: var(--title-bg);
	padding: 5px;
	border-bottom: var(--border-dialog);
	cursor: default;
	font-weight: bold;
}

.modaldialog .buttons {
	padding: 5px;
	cursor: default;
	text-align: right;
}

.modaldialog .buttons button {
	margin-left: 5px;
	min-width: 80px;
}

.modaldialog .content {
	margin: 5px;
	flex-grow: 1;
	display:flex;
	flex-direction: column;
}

.modaldialog.msgbox img.icon {
	width: 48px;
}

.modaldialog.msgbox td {
	margin-right: 5px;
}

.modaldialog.msgbox td.message {
	padding: 5px;
}

/* TextEdit */

textarea.textedit {
	width: 100%;
	height: 100%;
	resize: none;
}

/* ComboBox */

.listbox {
	width: 100%;
	height: 100%;
}

.widget-combobox-list, .listbox, .dropdown-list, .popupmenu {
	background: var(--list-normal);
	border-top: var(--border-normal);
	border-left: var(--border-normal);
	border-right: var(--border-normal);
	cursor: default;
}

.widget-combobox-list, .dropdown-list, .popupmenu { 
	box-shadow: rgba(0,0,0,.2) 0 2px 8px;
	color: #444;
}

.widget-combobox-list, .dropdown-list, .popupmenu {	
	position: absolute;
}

.widget-combobox-list .item, .listbox .items .item, .dropdown-list .item {
	border-bottom: var(--border-normal);
	height: 1.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; 
	user-select: none;
	vertical-align: middle;
}

.widget-combobox-list .item img, 
.listbox .items .item img, 
.dropdown-list .item img {
	height: 1.4em;
	width: 1.4em;
	vertical-align: middle;
	padding-left: 3px;
	padding-right: 3px;
}

.widget-combobox-list .item span.label, 
.listbox .items .item span.label,
.dropdown-list .item span.label {
	vertical-align: middle;
	padding-left: 3px;
} 

.widget-combobox-list .item:hover {
   background: var(--selectable-hover-bg);
   color: var(--selectable-hover-fg);
}

.widget-combobox {
	width: calc(100% - 5px);
	margin-left: auto;
	margin-right: auto;
}

.widget-combobox input[type="text"] {
	width: calc(100% - 40px);
	vertical-align: middle;
}

.widget-combobox input[type="text"].readonly {
	cursor: default;
	user-select: none;
}

.widget-combobox span.input {
	display: inline-block;
	width: calc(100% - 40px);
	border: 1px solid #c0c0c0;
	background: white;
	vertical-align: middle;
	height: 1.5em;
	cursor: default;
	overflow-x: clip;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}

.widget-combobox span.input img {
	height: 1.4em;
	width: 1.4em;
	vertical-align: middle;
	padding-left: 3px;
	padding-right: 3px;
}

.widget-combobox span.input span.label {
	vertical-align: middle;
	padding-left: 3px;
}

.widget-combobox button.combobox {
	vertical-align: middle;
	margin-left: 3px;
	width: unset;
}

.popupmenu .item { 
	height: 1.5em;
} 

.popupmenu span.arrow {
	float: right;
	margin-right: 3px;
}

.submenu, .popupmenu, .dropdown-list, .widget-combobox-list {
	/*animation: SubMenuFadeIn 1s;*/
	border-radius: 5px;

}

@keyframes SubMenuFadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
 }

button.popupbutton {
	font-size: 15px;
	font-style: bold;
	background: none;
	border: none;
	cursor: pointer;
	color: black;
	position: absolute; 
	border: 1px solid #c0c0c0;
	border-radius: 50%;
	padding-left: 5px;
	padding-right: 5px;
	background: rgba(128, 128, 128, 0.6);
	z-index: 9999;
}
  
button.popupbutton i {
	animation: PopupButtonFadeIn 2s;
}

@keyframes PopupButtonFadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
 } 

.popupmenu {
	display:flex;
	flex-direction: column;
	min-width: 200px;
	padding: 5px;
}

.popupmenu .header {
	background: #d0d0d0;
	height: 1.5em;
	border-bottom: var(--border-normal);
	border-top: var(--border-normal);
	text-align: center;
}

.popupmenu {
	border-bottom: var(--border-normal);
}

.items {
	height: 100%;
	width: 100%;
}

.listbox .items .item, .dropdown-list .item, .popupmenu .item {
	height: 1.2em;
	padding-left: 0.25em;
	padding-right: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0.25em;
}

.popupmenu .item.colors, .dropdown-list .item.colors {
	min-height: 30px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow: 1;
	height: auto;
}

.popupmenu .item.colors:hover, .dropdown-list .item.colors:hover {
	background: inherit;
}

.popupmenu .item.colors .color:hover, .dropdown-list .item.colors .color:hover {
	border: 1px solid black;
}

.popupmenu .header:hover, .dropdown-list .header:hover {
	background: #d0d0d0;
}

.popupmenu .item.colors .color, .dropdown-list .item.colors .color {
	width: 20px;
	height: 20px;
	margin-top: auto;
	margin-bottom: auto;
	border: 1px solid #c0c0c0;
	margin-left: 3px;
}

.listbox .header {
	background: var(--title-background);
	border: var(--border-normal);
	padding-left: 0.25em;
	padding-right: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0.25em;
}


.listbox .items .item:hover, .dropdown-list .item:hover, .popupmenu .item:hover  {
   background: var(--selectable-hover-bg);
   color: var(--selectable-hover-fg);
}

.listbox .items .item.selected {
	background: var(--selectable-selected-bg);
	color: var(--selectable-selected-fg);
}


/********************************************************************
 * Quill integration
 ********************************************************************/

 .editor-toolbar button {
	width: 32px !important;
	height: 32px !important;
}

.ql-editor p, .ql-editor li {
	font-size: 12pt;
	font-family: Arial;
}

.content-pane {
	background: var(--widget-bg);
	/*overflow-y: scroll;*/
}

.editor-pane {
	background: white;
}

.editor-pane li[data-list="unordered"] {
	list-style-type: disc;
   list-style-position: inside;
}

.editor-pane li[data-list="unordered"]:before {
    content: none;
}

.editor-pane h1, .editor-pane .ql-editor h1 {
	background: #d0d0d0;
	color: black;
	font-weight: bold;
	font-size: var(--font-size-h1);
	margin-bottom: 0.3em;
}

.editor-pane h2, .editor-pane .ql-editor h2 {
	background: #d0d0d0;
	color: #335ba1;
	font-weight: bold;
	font-size: var(--font-size-h2);
	margin-bottom: 0.3em;
}

.editor-pane h2, .editor-pane .ql-editor h3 {
	font-weight: bold;
	font-size: var(--font-size-h3);
	margin-bottom: 0.3em;
}

.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
	height: 32px;
}

.ql-snow .ql-color-picker, .ql-snow .ql-icon-picker {
	height: 32px;
	width: 36px;
}

.ql-snow .ql-picker {
	height: 32px;
}

.ql-toolbar.ql-snow .ql-picker-label {
	padding-top: 3px;
	font-size: 120%;
}

.ql-toolbar.ql-snow .ql-picker-item[data-value="1"]::before
{
	background: #d0d0d0 !important;
	color: black !important;
	font-weight: bold !important;
	font-size: var(--font-size-h1) !important;
}

.ql-toolbar.ql-snow .ql-picker-item[data-value="2"]::before
{
	background: #d0d0d0 !important;
	color: #335ba1 !important;
	font-weight: bold !important;
	font-size: var(--font-size-h2) !important;
	margin-bottom: 3px !important;
}

.ql-toolbar.ql-snow .ql-picker-item[data-value="3"]::before
{
	font-weight: bold !important;
	font-size: var(--font-size-h3) !important;
	margin-bottom: 3px !important;
}

.ql-toolbar.ql-snow .ql-picker-item[data-value=""]::before
{
	font-size: var(--font-size-normal) !important;
}

.ql-toolbar.ql-snow.nl .ql-picker-label[data-value="1"]::before,
.ql-toolbar.ql-snow.nl .ql-picker-item[data-value="1"]::before 
{
  content: "Kop 1" !important; 
}

.ql-toolbar.ql-snow.nl .ql-picker-label[data-value="2"]::before,
.ql-toolbar.ql-snow.nl .ql-picker-item[data-value="2"]::before 
{
  content: "Kop 2" !important; 
}

.ql-toolbar.ql-snow.nl .ql-picker-label[data-value="3"]::before,
.ql-toolbar.ql-snow.nl .ql-picker-item[data-value="3"]::before 
{
  content: "Kop 3" !important; 
}

.ql-toolbar.ql-snow.nl .ql-picker-label[data-value=""]::before, 
.ql-toolbar.ql-snow.nl .ql-picker-item[data-value=""]::before 
{
  content: "Normaal" !important; 
}

.ql-toolbar.ql-snow.de .ql-picker-label[data-value="1"]::before,
.ql-toolbar.ql-snow.de .ql-picker-item[data-value="1"]::before 
{
  content: "Überschrift 1" !important; 
}

.ql-toolbar.ql-snow.de .ql-picker-label[data-value="2"]::before,
.ql-toolbar.ql-snow.de .ql-picker-item[data-value="2"]::before 
{
  content: "Überschrift 2" !important; 
}

.ql-toolbar.ql-snow.de .ql-picker-label[data-value="3"]::before,
.ql-toolbar.ql-snow.de .ql-picker-item[data-value="3"]::before 
{
  content: "Überschrift 3" !important; 
}

.ql-toolbar.ql-snow.de .ql-picker-label[data-value=""]::before,
.ql-toolbar.ql-snow.de .ql-picker-item[data-value=""]::before 
{
  content: "Normal" !important; 
}

.ql-toolbar.ql-snow.en .ql-picker-label[data-value="1"]::before,
.ql-toolbar.ql-snow.en .ql-picker-item[data-value="1"]::before 
{
  content: "Heading 1" !important; 
}

.ql-toolbar.ql-snow.en .ql-picker-label[data-value="2"]::before,
.ql-toolbar.ql-snow.en .ql-picker-item[data-value="2"]::before 
{
  content: "Heaading 2" !important; 
}

.ql-toolbar.ql-snow.en .ql-picker-label[data-value="3"]::before,
.ql-toolbar.ql-snow.en .ql-picker-item[data-value="3"]::before 
{
  content: "Heading 3" !important; 
}

.ql-toolbar.ql-snow.en .ql-picker-label[data-value=""]::before,
.ql-toolbar.ql-snow.en .ql-picker-item[data-value=""]::before 
{
  content: "Normal" !important; 
}

table.quill-better-table td {
	vertical-align: top;
	border: 1px solid black;
}

.ql-toolbar button img {
	height: 30px;
}

.ql-toolbar button img:hover {
	filter: saturate(500%);
}

.ql-toolbar button.disabled img, .ql-toolbar button.disabled img:hover {
	filter: grayscale(1);
}

.qlbt-operation-menu-§{
	cursor: default;	
}

.qlbt-operation-menu-item:hover {
	background: #a0c2fa;
}

div.editor-context {
	border: 1px solid #909090;
	display: none;
	z-index: 10000;
	height: 30px;
	position: absolute;
	background: #cccccc;
	border-radius: 5px;
	padding: 3px;
}

div.editor-context button {
	height: 98%;
	box-shadow: 1px 1px 1px 1px #b0b0b0;
	border: 1px solid #b0b0b0;
	border-radius: 5px;
}

div.editor-context button img {
	height: 100%;
}

span.editor-context-handle {
	cursor: default;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	padding-right: 3px;
	margin-right: 3px;
	/*border-right: 1px solid #909090;*/
	/* margin-bottom: 10px; */
	height: 100%;
	display: inline-block;
	/* margin-top: -10px; */
	/* padding-bottom: 10px; */
	position: relative;
	top: 0px;
}

table.dojo-table {
	width: unset;
}

/********************************************************************
 Resizer
 ********************************************************************/

 .resize-handle {
	cursor: se-resize;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 15px;
	height: 15px;
	border-right: 4px solid #3e5a87;
	border-bottom: 4px solid #3e5a87;
	border-radius: 3px;
	translate: 4px 4px;
} 

/*********************************************************************
 * Editing classifications
 *********************************************************************/

.edit-classification {
	display: flex;
}

.edit-classification .flower {
	width: 250px;
	height: 250px;
}

.edit-classification .text {
	display: flex;
}

.edit-classification .text textarea {
	min-width: 250px;
	flex-grow: 1;
}

.classification-label {
	/*border: 1px solid #d0d0d0;*/
	width: 200px;
	height: 200px;
}

/* Fields */

input.warn {
	background: var(--warn-color);
}

button.colorbutton {
	width: 40px;
	height: 26px;
}

button.colorbutton span {
	width: 20px;
	height: 14px;
	display: inline-block;
	vertical-align: middle;
}

.colorpicker, span.colorpicker {
	height: 26px;
}

.colorpicker span.label, span.colorpicker span.label {
	display: inline-block;
	margin-left: 7px;
	vertical-align: middle;
}

fieldset.pairs {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-row-gap: 5px;
	grid-column-gap: 5px;
	border: none;
	margin: 0;
}

fieldset.pairs textarea.remarks {
	min-height: 100px;
}

.fill {
	flex-grow: 1; 
}

fieldset.vgroup {
	flex-grow: 1;
}

fieldset.vgroup .vparts {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
 
fieldset.group .parts {
	display: flex;
	flex-direction: row;
}

td input[type="text"], fieldset.pairs input[type="text"],
td input[type="datepicker"], fieldset.pairs input[type="datepicker"],
td input[type="datetimepicker"], fieldset.pairs input[type="datetimepicker"]  {
	width: calc(100% - 10px);
}

td .tool-button, fieldset.pairs .tool-button {
	white-space: nowrap;
}

td .tool-button input[type="text"], fieldset.pairs .tool-button input[type="text"] {
	width: calc(100% - 45px);
}

td .multiple, fieldset.pairs .multiple {
	display: inline-block;
}

td .multiple input[type="text"], fieldset.pairs .multiple input[type="text"] {
	width: auto;
}

td textarea, fieldset.pairs textarea {
	width: calc(100% - 10px);
	font-family: arial;
	font-size: 90%;
}

/* Widgets / GUI */

div.group {
	width: calc(100% - 10px);
	height: 100%;
}

div.group .label {
	font-size: 11pt;
	font-weight: bold;
	height: 1.2em;
	padding-top: 0.2em;
	padding-left: 5px;
	color: #606060;
	font-style: italic;
}

div.group .content {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 1px solid #909090;
	/*border-radius: 10px;*/
	margin-bottom: 10px;
	height: calc(100% - 1.2em - 25px);
}

.tabbed {
	display: flex;
	align-items: stretch;
	margin-top: 15px;
	height: 26px;
	margin-left: 4px;
}

.tabbed .contents {
	background: var(--content-bg);
	width: 100%;
	height: 100%;
	border: var(--border-normal);
	padding: 10px;
	margin-top: 2px;
}

.vtabbed {
	display: flex;
	align-items: stretch;
	margin-top: 0;
	height: calc(100% - 10px);
	width: 100%;
	padding: 0;
	margin-left: 0;
}

.vtabbed .contents {
	background: var(--content-bg);
	width: 100%;
	height: calc(100% - 15px);
	border: var(--border-normal);
	padding: 0;
	margin-top: 2px;
}

.tab-content {
	width: 100%;
	height: 100%;
	border: 1px solid #909090;
	border-radius: 5px;
	padding: 0;
	background: var(--content-bg);
}

.vertical-tabs {
	width: 34px;
}

.vertical-tabs .tabs {
	display: flex;
	flex-direction: column;
}

.vertical-tabs .tabs .tab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.vertical-tabs .tabs .tab img {
	rotate: -90deg;
}

.tab {
	background: var(--tab-bg);
	padding-top: 10px;
	padding-bottom: 10px;
	border: var(--border-normal);
	border-radius: 15px 0px 0px 0px;
	cursor: default;
	margin-top: 2px;
	margin-bottom: 0;
	text-wrap: nowrap;
	padding-left: 5px;
	padding-right: 5px;
}

.tab.active {
	background: var(--tab-bg-active);
}

.vertical-tabs .tab {
	border-radius: 0px 0px 15px 0px;
}

.vertical-tabs .tab img {
	margin-left: 0;
	margin-bottom: 5px;
	margin-right: 0;
	margin-top: 0;
}

.tab img { 
	width: var(--tab-icon-width);
	height: var(--tab-icon-height);
	margin-right: 5px;
}

button.tool img {
	width: var(--tool-icon-width);
	height: var(--tool-icon-height);
}

button.tool {
	margin-left: 5px;
}

.hsplit {
	width: 100%;
	height: 100%;
	display: flex;
}

.hsplit .left {
	height: 100%;
	margin-right: 4px;
}

.hsplit .right {
	height: 100%;
	margin-left: 4px;
}

.vsplit .top {
	width: 100%;
	margin-bottom: 4px;
	height: 100%;
}

.vsplit {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.vsplit .bottom {
	width: 100%;
	margin-top: 4px;
	height: 100%;
}

.ui-resizable-e { 
    cursor: e-resize; 
    width: 4px; 
    right: -2px; 
    top: 0; 
    bottom: 0; 
    background-color: #909090;
}

.ui-resizable-s { 
    cursor: s-resize; 
    height: 4px; 
    bottom: -2px; 
    left: 0; 
    right: 0; 
    background-color: #909090;
}

/* Patient info */

img.patient-photo {
	object-fit: contain;
	width: 200px;
	height: 200px;
}

/* Classification Flower with content */

.classificationflower-container {
	height: 100%;
	width: 100%;
}

.classificationflower-buttons {
	height: 2em;
	width: 100%;
	margin-top: 5px;
	margin-left: 5px;
}

.classificationflower-buttons button, .classificationflower-buttons span {
	margin-left: 5px;
}

.classificationflower-canvas {
	height: calc(100% - 2.2em);
	width: 100%;
	overflow-x: auto;
	overflow-y: auto;
}

.classificationflower {
	position: relative;
}

.classificationflower .classificationflower-leaf 
{
	position: absolute;
}

.classificationflower .classificationflower-leaf .standard {
	min-width: 200px;
	min-height: 50px;
}

.classificationflower .classificationflower-leaf.ps {
	min-width: 200px;
	min-height: 200px;
}

.classificationflower .classificationflower-leaf .edgy {
	min-width: 200px;
	min-height: 50px;
}

.classificationflower .classificationflower-leaf .standard {
	width: fit-content;
	height: fit-content;
}

.classificationflower .classificationflower-leaf .edgy {
	width: fit-content;
	height: fit-content;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 0px;
}

.classificationflower h2 {
	text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    margin-left: 10px;
    margin-right: 10px;
	font-size: 120%;
}

.classificationflower .simple {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
}

.classificationflower span.zoom {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	width: 3em;
}

.classificationflower button.zoom {
	width: 1.5em;
}

.classificationflower .flower, 
.classificationflower .leaf {
	width: 49%;
	height: 49%;
	border: 1px solid #808080;
}

.classificationflower .flower button.classifcationflower-button {
	position: absolute;
	top: 0;
	left: 0;
}

.classificationflower .leaf .classifications {
	overflow-y: scroll;
	height: calc(100% - 2em);
}
 
.classificationflower-leaf-text {
	padding-left: 5px;
	padding-right: 5px;
	border-top: 1px dotted #909090;
}

.classificationflower-leaf-text:last-child {
	border-bottom: 1px dotted #909090;
  }

.classificationflower-leaf-text:hover {
	background-color: rgba(100, 100, 100, 0.8);
}


.classificationflower .classificationflower-leaf td.right {
	border-left: 1px solid #909090;
	max-width: 350px;
}

.classificationflower .classificationflower-leaf td.left {
	max-width: 350px;
}

.classificationflower-canvas {

	span.unmarked, span.weight-0 {
		color: #909090;
	}

	span.weight-1, span.weight-2, span.weight-3, span.weight-4 {
		padding-left: 0.8em;
		text-indent: -0.8em;
	}

	span.weight-1:before, span.weight-2:before, span.weight-3:before, span.weight-4:before {
		content: "• ";	
	}

	span.weight-2 {
		font-weight: bold;
	}

	span.weight-3 {
		font-weight: bold;
		font-style: italic;
	}

	span.weight-4 {
		font-weight: bold;
		font-style: italic;
		font-variant: small-caps;
	}
}

.classificationflower button.change
{
	margin-left: 5px;
	margin-top: 5px;
}

.classificationflower .flower-change
{
	margin-top: 5px;
	margin-right: 5px;
	float: right;
}

.classificationflower .flower-change img
{
	width: 40px;
	height: 40px;
}

.classificationflower span {
	display: block;
	cursor: pointer;
	user-select: none;
}

.classificationflower .classificationflower-leaf span {
	width: 100%;
	overflow-wrap: break-word;
}

.classificationflower .classificationflower-leaf.standard {
	shape-outside: ellipse(closest-side farthest-side);
	border: 1px solid black;
}

.classificationflower .classificationflower-leaf.ps span:hover {
	background-color: #93bdef;
}

.classificationflower .classificationflower-leaf.en span:hover {
	background-color: #d4db58;
}

.classificationflower .classificationflower-leaf.ex span:hover {
	background-color: #d5894b;
}


.classificationflower td {
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: top;
}



/* Classifications */

span.classification.blink {
	background: rgb(54, 231, 54) !important;
}

span.classification[cl_idx="0"] {
	background: #bdd8f8;
}

span.classification[cl_idx="1"], span.classification[cl_idx="3"], span.classification[cl_idx="4"], span.classification[cl_idx="6"] {
	background: #f8b884;
}

span.classification[cl_idx="2"], span.classification[cl_idx="5"], span.classification[cl_idx="7"] {
	background: #f2f884;
}

span.classification.ps, .classificationflower-leaf.ps {
	background: #bdd8f8;
}

span.classification.ex, .classificationflower-leaf.ex {
	background: #f8b884;
}

span.classification.en, .classificationflower-leaf.en {
	background: #f2f884;
}

span.classification.ps_en {
	background: linear-gradient(#bdd8f8 50%, #f2f884 50%);
}

span.classification.ps_ex {
	background: linear-gradient(#bdd8f8 50%, #f8b884 50%);
}

span.classification.ps_en_ex {
	background: linear-gradient(#bdd8f8 33%, #f2f884 33%, #f8b884 33%);
}

span.classification.en_ex {
	background: linear-gradient(#f2f884 50%, #f8b884 50%);
}

/* Materia Medica */

.tab-mm .books {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.tab-mm .remedies {
	height: calc(100% - 2em);
}

#mm-mmwiki {
	padding-left: 10px;
	padding-right: 10px;
	height: calc(100% - 2em);
	overflow: auto;
}

/* Wiki */

.tab-help, .tab-books {
	height: 100%;
}

.wiki {
	height: 100%;
}

.wiki .toc {
	height: 100%;
	overflow: auto;
}

.wiki .toc ul ul {
	padding-left: 1em;
}

.wiki .toc ul ul ul {
	padding-left: 1em;
	font-size: 90%;
}

.wiki .toc a, .wiki .toc a:visited {
	text-decoration: none;
	color: darkgreen;
}

.wiki .toc a:hover {
	text-decoration: none;
	color: darkolivegreen
}


.wiki .mmwiki {
	overflow: auto;
	height: calc(100% - 10px);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}

/* Shop */

.shop-access {
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.shop-access h1 {
	color: darkred;
	text-align: left;
}

.shop-access p, .shop-access li {
	font-size: 120%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.shop-access ul {
	margin-top: 1em;
	margin-bottom: 1em;
}

.shop-access li {
	font-style: italic;
}

.tab-shop {
	height: 100%;
}

.shop-table {
	height: 100%;
}

/* Flower with entries */

svg.flower {
	width: 100%;
	height: 100%;
}

.flower-in, .flower-ep, .flower-ia, .flower-soa {
	width: fit-content;
	height: fit-content;
}

.flower-cs {
	width: fit-content;
	height: fit-content;
}

.flower-am, .flower-he, .flower-dg {
	width: fit-content;
	height: fit-content;
}

.flower-content {
	width: fit-content;
	height: fit-content;
	column-count: 2;
}

.flower-content p {
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 0;
	margin-top: 0;
}

.flower-header {
	font-weight: bold;
	text-align: center;
	width: 100%;
	padding-bottom: .5em;
}

/*****************************************
 * Repertory
 *****************************************/

  .tab-rep {
	height: 100%;
	width: 100%;
 }

 .tab-rep .tab-content {
	width: 100%;
	height: 100%;
 }

 .repertory-book {
	display: flex;
	width: 100%;
	height: 100%;
 }

 .rep-book-chapters {
	width: 25%;
	height: 100%;
	display: none;
	border: 1px solid black;
	background-color: var(--widget-bg);
	z-index: 30;
	top: 0;
	left: 0;
	right: 75%;
	bottom: 0;
	position: absolute;
 }

 .rep-book-chapters img {
	width: 75px;
	height: 75px;
	padding: 2px;
	margin: 0;
 }

 .rep-book-chapters img:hover {
	background: #d0d0d0;
 }

 .rep-book-chapters img:active {
	border: 1px solid black;
 }

 .rep-book-content {
	width: 100%;
	height: 100%;
	margin: 0;
	padding : 5px;
	position: relative;
 }

 .rep-book-title {
	width: calc(100% - var(--toolbar-button-width));
	height: 30px;
	border-bottom: 2px solid black;
 }

 .rep-book-title span.title {
	font-weight: bold;
	display: inline-block;
	text-align: center;
	text-wrap: nowrap;
	text-overflow: ellipsis;
	width: calc(100% - 78px);		/* 2x 35px + 8 */
 }

 .rep-book {
	column-count: 3;
	column-fill: auto;
	padding: 10px;
	column-rule: solid black;
	font-size: 110%;
	height: calc(100% - 50px);
	width: calc(100% - var(--toolbar-button-width));
 	padding: 5px;
 }

 .symptom.blink {
	background: rgb(54, 231, 54) !important;
 }

 .symptom.marked {
	background: yellow;
 }

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

 .symptom span.remedies {
	margin: 0;
	padding: 0;
}

.symptom span.sym-links {
	cursor: pointer;
}

.symptom span.depth-0 {
	text-transform: uppercase;
	text-align: center;
	font-size: 150%;
}

 .symptom span.depth-1 span.sympart {
	text-transform: uppercase;
 }

 .symptom span.depth-1 {
	margin-left: 3px;
	display: inline-block;
	text-indent: -15px;
	padding-left: 15px;
 }

 .symptom span.depth-2 {
	margin-left: 10px;
	display: inline-block;
	text-indent: -20px;
	padding-left: 20px;
 }

 .symptom span.depth-2:before {
	content: "• ";
 }

 .symptom span.depth-3 {
	margin-left: 20px;
	font-size: 90%;
	display: inline-block;
	text-indent: -30px;
	padding-left: 30px;
 }

 .symptom span.depth-3:before {
	content: "- ";
 }

 .symptom span.depth-4 {
	margin-left: 25px;
	font-size: 80%;
	display: inline-block;
	text-indent: -35px;
	padding-left: 35px;
 }

 .symptom span.depth-5:before {
	content: "⋮ ";
 }

 .symptom span.depth-5 {
	margin-left: 30px;
	font-size: 75%;
	display: inline-block;
	text-indent: -40px;
	padding-left: 40px;
 }

 .symptom span.depth-6 {
	margin-left: 35px;
	font-size: 70%;
	display: inline-block;
	text-indent: -45px;
	padding-left: 45px;
 }

 .remedies span.remedy,
 .symptom span.remedies span.remedy {
	cursor: pointer;
	text-wrap: nowrap;
 }

 .remedies span.remedy span.weight-1,
 .symptom span.remedies span.weight-1 {
	color: black;
	font-style: normal;
	font-weight: normal;
 }

 .symptom span.remedies span.weight-1:before {
	content: none;
 }

 .remedies span.remedy span.weight-2,
 .symptom span.remedies span.weight-2 {
	color: #1b83fa;
	font-style: normal;
	font-weight: normal;
 }

 .symptom span.remedies span.weight-2:before {
	content: none;
 }

 .remedies span.remedy span.weight-3,
 .symptom span.remedies span.weight-3 {
	color: #855b4d;
	font-weight: bold;
	font-style: normal;
 }

 .symptom span.remedies span.weight-3:before {
	content: none;
 }

 .remedies span.remedy span.weight-4,
 .symptom span.remedies span.weight-4 {
	color: #a40fd6;
	font-weight: bold;
	font-style: normal;
 }

 .symptom span.remedies span.weight-4:before {
	content: none;
 }

 /*********** Search ***********/

 .rep-search-panel {
	display: flex;
	width: 100%;
	height: 100%;
 }

 .rep-search-panel .rep-search {
	width: 25%;
	margin: 5px;
	border-right: 1px solid black;
	height: 100%;
 }

 .rep-search-panel .rep-search table {
	width: 100%;
 }

span.input-button {
	display: inline-block;
	width: 100%;
}


.rep-search-panel .rep-search span.input-button input[type="text"],
.rep-search-panel .rep-search span.input-button input[type="number"] {
	width: calc(100% - 40px);
	vertical-align: middle;
}

 button.small {
	width: var(--button-small-width);
	height: var(--button-small-height);
	padding: 0;
	vertical-align: middle;
 }

 button.small img {
	width: var(--tool-icon-width);
	height: var(--tool-icon-height);
	padding: 0;
	margin: 0;
 }

 .rep-search-panel .rep-search button.small {
	width: var(--button-small-width);
 }

 .rep-search-panel .rep-search select, .rep-search button {
	width: 100%;
 }


 .rep-search-panel .search-results {
	width: 75%;
	height: 100%;
	padding: 5px;
 }

 .rep-search-panel .search-results div.status {
	height: 30px;
	width: calc(100% - 10px);
	margin: 0;
	padding: 5px;
	background: var(--content-bg);
	color: black;
	text-align: left;
	border: none;
	border-bottom: 1px solid black;
 }

 .rep-search-panel .search-results div.status span.status {
	vertical-align: middle;
	border: none;
	background: inherit;
	color: inherit;
 }
 
 .rep-search-panel .search-results .rubrics {
	height: calc(100% - 30px);
	width: 100%;
 }

 .rep-search-panel .search-results .symptoms {
	height: calc(100% - 20px);
	width: calc(100% - 10px);
	overflow-y: auto;
	padding: 5px;
 }

 .rep-search-panel .search-results .remedies {
	height: 25%;
	width: (100% - 10px);
	overflow-y: auto;
	border-top: 1px solid black;
	padding: 5px;
 }

 .rep-search-panel .search-results .symptom {
	cursor: pointer;
	padding-bottom: 3px;
 }

 .rep-search-panel .search-results .symptom.selected {
	background: var(--selectable-selected-bg);
	color: var(--selectable-selected-fg);
 }


 .rep-search-panel .search-results .symptom span.sym-prefix
 {
	width: 25px;
	display: inline-block;
 }

 .rep-search-panel .search-results .symptom span.sym-postfix
 {
	margin-left: 5px;
	display: inline-block;
 }

 .rep-search-panel .search-results .symptom span.rem-count
 {
	margin-left: 5px;
	display: inline-block;
 }

 .ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }

/*****************************************
 * Shop
 *****************************************/

 .tab-shop {
	height: calc(100% - 20px);
 }

 .shop  .header {
	background: #505050;
	color: white;
	height: 40px;
	display: flex;
	vertical-align: middle;
	font-size: 15pt;
	padding-left: 5px;
	padding-top: 5px;
	flex-wrap: nowrap;
	width: 100%;
 }

 .shop .header .logo {
	vertical-align: middle;
	display: inline-block;
	height: 100%;
	margin-right: 20px;
 }

 .shop .header .logo img {
	height: 80%;
 }

 .shop .header .left, .shop .header .center, .shop .header .right {
	vertical-align: middle;
	display: inline-block;
	line-height: 35px;
	text-align: inherit;
	padding-right: 15px;
	padding-left: 15px;
 }

 .shop .header .left {
	/*border-right: 1px solid black;*/
 }	

.shop .header .left, .shop .header .right {
	flex-grow: 0;
}

 .shop .header .center {
	flex-grow: 1;
 }

 .shop .plan-content
 {
	display: flex;
	background: white;	
 }

 .shop .plan-content h1 {
	text-align: center;
 }

 .shop fieldset {
	margin-top: 5px;
	height: 100%;
 }

 .shop .current-plan {
	width: 25%;
 }

.shop .current-plan .image {
	margin-left: auto;
	margin-right: auto;
}

 .shop .current-plan img {
	max-width: 500px;
	width: 90%;
 }

 .shop .plan {
	flex-grow: 2;
 }

 .shop .plan table {
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
 }

 .shop .plan table td, .shop .plan table th {
	padding: 5px;
	border : 1px solid black;
 }

 td.vink {
	text-align: center;
	font-size: 120%;
	color: #303030;
	text-align: center;
 }

 th.bronze, th.bronze_plus, th.silver, th.gold, th.none {
	font-size: 130%;
	width: 230px;
	text-align: center !important;
	vertical-align: top !important;
 }

 .shop.plan td.image {
	text-align: center;
 }

 .shop.plan td.bronze img, .shop.plan td.bronze_plus img, .shop.plan td.silver img, .shop.plan td.gold img, .shop.plan td.none img {
	width: 75px;
	float: left; 
	padding-right: 5px;
	padding-bottom: 5px;
 }

 td.bronze, td.bronze_plus, td.silver, td.gold, td.none {
	text-align: left;
	vertical-align: top;
	div.price {
		text-align: center;
		padding-top: 5px;
	}
	div.discount {
		text-align: center;
		padding-top: 5px;
		padding-bottom: 5px;
		font-weight: bold;
	}
 }

 
 .shop.plan th.warning {
	background: #acc1f2;
 }

 th.bronze, td.bronze {
	background: #CD7F32;
 }

 th.bronze_plus, td.bronze_plus {
	background: #abed92;
 }

th.none, td.none {
	background: #f0f0f0;
}

 th.silver, td.silver {
	background: #C0C0C0;
 }

 th.gold, td.gold {
	background: #FFD700;
 }

 th.feature {
	text-align: left;
	font-weight: normal;
	text-wrap: nowrap;
	span.info {
		padding-left: 5px;
		padding-right: 5px;
		font-size: 110%;
		cursor: pointer;
	 }
 }

 .shop.plan h2 {
	text-align: center;
	padding: 1em;
	font-size: 140%;
	font-weight: bold;
	font-family: Dejavu Sans, Arial, Verdana, sans-serif;
	margin: 0;
 }

 .shop.plan h3 {
	text-align: center;
 }

 .shop.plan .price-info {
	padding: 5px;
	margin-top: 0.5em;
	font-weight: bold;
 }

 .shop.plan .description {
	padding: 5px;
	margin-top: 1em;
 }

 .shop.plan h2.gold, .shop.plan button.gold {
	background: gold;
	border: 1px solid yellow;
 }

 .shop.plan h2.silver, .shop.plan button.silver {
	background: silver;
	border: 1px solid #d0d0d0;	
 }

 .shop.plan h2.bronze, .shop.plan button.bronze {
	background: #CD7F32;
	border: 1px solid #CD7F32;
 }

 .shop.plan h2.none {
	background: #909090;
	border: 1px solid var(--content-bg);
 }

 .shop.plan button {
    border-radius: 5px;
    padding: 10px;
    width: 200px;
    font-weight: bold;
    font-size: 120%;
	transition: 250ms ease;
}

.shop.plan button.current {
    border-radius: 0px;
    padding: 10px;
    width: 200px;
    font-weight: bold;
    font-size: 120%;
	transition: 250ms ease;
	color: #606060;
}

.shop.plan button.gold:hover {
	background: #c49a1d;	
}

.shop.plan button.silver:hover {
	background: rgb(129, 126, 126);	
}

.shop.plan button.bronze:hover {
	background: #d49352;
}

.shop.plan button.gold.current:hover {
	background: gold;
}
.shop.plan button.silver.current:hover {
	background: silver
}

.shop.plan button.bronze.current:hover {
	background: #CD7F32;
}

.shop.plan button.bronze_plus.current:hover {
	background: #738c78;
}

.shop.plan button.none.current:hover
{
	background: #909090;
}

.shop.plan button.gold:active, 
.shop.plan button.silver:active, 
.shop.plan button.bronze:active,
.shop.plan button.bronze_plus:active,  
.shop.plan button.none:active 
{
	border: 1px solid black;
	transition: none;
}

.shop.plan button.gold.current:active,
.shop.plan button.silver.current:active, 
.shop.plan button.bronze.current:active,
.shop.plan button.bronze_plus.current:active,
.shop.plan button.none_plus.current:active
 {
	border: none;
	transition: none;
}

/*****************************************************
 Widget infoPopup
 *****************************************************/

.info-popup {
	position: absolute;
	background: #f0f0f0;
	border: 1px solid #909090;
	border-radius: 5px;
	padding: 5px;
	z-index: 10000;
	max-width: 300px;
}

.info-popup .title {
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid black;
	padding: 5px;
}

.info-popup .content {
	padding: 5px;
}