/*
 * global
 */

fieldset {
	border:     none;
	padding:    0;
	margin-top: 1em;
	max-width:  60em;
}

fieldset legend {
	font-weight: bold;

}

fieldset.bordered {
	border:  1px solid darkgray;
	padding: 1ex;
}

fieldset.floating {
	display: inline-block;
}

div.page-actions {
	/*position: absolute;*/
	/*top:      1ex;*/
	/*right:    1ex;*/
	float: right;
}

div.page-actions a {
	display:          block;
	text-decoration:  none;
	color:            inherit;
	border:           1px solid darkgray;
	background-color: lightgray;
	padding:          2px;
	text-align:       center;
	margin-bottom:    2px;
}

div.page-actions a:hover {
	border:           1px solid blue;
	background-color: lightblue;
}

div.page-actions div#search-view {
	border:           1px solid darkgray;
	background-color: lightgray;
	padding:          2px;
	text-align:       center;
	margin-bottom:    2px;
	display:          grid;
	grid-gap:         2px;
	grid-template-areas:
        'title title'
        'field submit'
        'value submit';
}

div.page-actions div#search-view div.title {
	grid-area: title;
}

div.page-actions div#search-view select {
	grid-area: field;
}

div.page-actions div#search-view input {
	grid-area: value;
}

div.page-actions div#search-view button {
	grid-area: submit;
}

div#tablespace {
	overflow: auto;
	clear:    both;
}

div#tablespace div#table-control {
	position: absolute;
	right:    0;
}

div#tablespace div#table-control button img {
	height: 1em;
}

div#tablespace div#table-control div#search-view {
	display: inline-block;
}


div#tablespace ul.table-tabs {
	margin: 0;
}

div#tablespace ul.table-tabs li {
	display:          inline-block;
	border:           1px solid darkgray;
	background-color: #f7f7f7;
	padding:          1ex;
	border-bottom:    none;
	border-radius:    5px 5px 0 0;
}

div#tablespace ul.table-tabs li.active {
	background-color: lightgray;
}

div#tablespace ul.table-tabs li a {
	text-decoration: none;
	color:           inherit;
}

div#tablespace ul.table-tabs li.active a {
	font-weight: bold;
}

div#tablespace div#tabspace {
	min-height: 2em;
}

p.message {
	border:           1px solid darkgray;
	border-radius:    5px;
	background-color: #f7f7f7;
	padding:          3px;
}

p.message {
	border-color:     orange;
	background-color: #fff0b0;
}


/*
 * Pages
 */


/* homepage */

div.registration-list-entry {
	margin-bottom: 1em;
}

div.registration-list-entry div.title {
	font-size:   180%;
	font-weight: bold;
}

a#add-link {
	display:    block;
	text-align: right;
}

/*
  instances
 */

div#instance-view {
	max-width: 60em;
}


/* instance list entry panel */


a.instance-list-entry {
	display:         block;
	margin-top:      1ex;
	padding:         1ex;
	margin-left:     2em;
	color:           black;
	text-decoration: none;
}

a.instance-list-entry img.status-icon {
	height: 1em;
	float:  right;
}

a.instance-list-entry div.instance-title {
	display:       block;
	font-size:     130%;
	font-weight:   bold;
	border-bottom: 1px solid darkgray;
}

a.instance-list-entry div.instance-registration {
	text-align: right;
}


dl#instance-view-timeline dt {
	font-weight: bold;

}

/* form element list */

div#element-list {
	display:         table;
	width:           100%;
	border-collapse: collapse;
	margin-bottom:   1ex;
}

div#element-list a.form-element {
	display:         table-row;
	text-decoration: inherit;
	color:           inherit;
}

div#element-list a.form-element.odd {
	background-color: #f8f8f8;
}

div#element-list a.form-element.even {
	background-color: #f0f0f0;
}

div#element-list a.form-element div.infos {
	display: table-cell;
	padding: 3px;
}

div#element-list a.form-element div.infos div.info {
	display: table-row;
}

div#element-list a.form-element div.infos div.info div.label {
	display:     table-cell;
	font-weight: bold;
}

div#element-list a.form-element div.infos div.info div.text {
	display:      table-cell;
	padding-left: 1ex;
}

div#element-list a.form-element div.actions {
	display:    table-row;
	text-align: right;
}

div#element-list a.form-element div.actions input[type=submit] {
	min-width: 10em;
}

/* mails */

div#instance-mail-display {
	display: flex;
	gap:     1em;
}

div#instance-mail-list {
	display:               grid;
	grid-template-columns: repeat(auto-fill, 32em);
	grid-gap:              2em 1ex;
	margin-top:            3em;
	flex-grow:             5;
}

div#instance-mail-list div.instance-mail {
	position:         relative;
	border:           1px solid darkgray;
	border-radius:    10px;
	background-color: #f0f0f0;
	padding-bottom:   1em;
}

div#instance-mail-list div.instance-mail div.status a {
	display:          inline-block;
	white-space:      nowrap;
	text-decoration:  none;
	color:            inherit;
	border:           1px solid darkgray;
	border-radius:    3px;
	padding:          2px 1ex;
	background-color: lightgray;
}

div#instance-mail-list div.instance-mail div.status a:hover {
	text-decoration:     none !important;
	color:               #3070b3;
	border-bottom-color: #3070b3;
	background-color:    #b8d5ff;
}


div#instance-mail-list div.instance-mail div.status a img {
	vertical-align: middle;
}

div#instance-mail-list a.instance-mail img.validation-icon {
	max-height: 2em;
	max-width:  2em;
	float:      right;
}

div#instance-mail-list a.instance-mail {
	display:         block;
	vertical-align:  top;
	margin-top:      1em;
	text-decoration: none;
	color:           inherit;
}

div#instance-mail-list a.instance-mail div.title {
	position:         absolute;
	top:              -1em;
	left:             1em;
	padding:          4px;
	font-weight:      bold;
	font-size:        120%;
	border:           1px solid darkgray;
	border-radius:    10px;
	background-color: lightgray;
}

div#instance-mail-list a.instance-mail div.description {
	display:  inline-block;
	padding:  1ex;
	overflow: auto;
}

div#instance-mail-list a.instance-mail div.flags {
	position: absolute;
	right:    1ex;
	top:      -1em;
}

div#instance-mail-list a.instance-mail div.flags img.language-flag {
	height:         1em;
	border:         1px solid black;
	margin:         2px;
	vertical-align: middle;
}

div#instance-mail-list a.instance-mail div.flags img.language-flag.missing {
	border: 3px solid red;
}

div#instance-mail-list a.instance-mail div.flags img.language-flag.partial {
	border: 3px solid yellow;
}

div#instance-mail-list div.instance-mail div.status {
	position:   absolute;
	bottom:     0;
	right:      0;
	padding:    1ex;
	text-align: right;
}

div#instance-mail-list div.instance-mail img.status {
	position: absolute;
	bottom:   1ex;
	left:     1ex;
}

div#instance-mail-list div.instance-mail.committed {
	background-color: rgb(188, 253, 188);
}

div#instance-mail-list div.instance-mail.waiting {
	background-color: rgb(255, 194, 194);
}

div#instance-mail-list div.instance-mail.not-needed {
	border-color: lightgray;
	color:        lightgray;
}

div#instance-mail-list div.instance-mail.not-needed div.title {
	border-color: lightgray;
	color:        darkgray;
}

div#instance-mail-list div.instance-mail.not-needed div.flags {
	display: none;
}

div#instance-mail-todo {
	max-width: 20em;
	flex-grow: 1;
}

div#instance-mail-todo div.title {
	background-color: #3070b3;
	font-weight:      bold;
	color:            white;
	padding:          2px;
	text-align:       center;
}

div#instance-mail-todo div.todo-entry {
	background-color: lightgray;
	padding:          0 2px;
}

div#instance-mail-todo div.todo-entry.odd {
	background-color: #e7e7e7;
}

/* mail */

form#instance-mail-edit {
	position:   relative;
	margin-top: 2em;
}

form#instance-mail-edit div#language-selector {
	position: absolute;
	top:      -2em;
	right:    1em;
}

form#instance-mail-edit div#language-selector div.title {
	text-align:  center;
	font-weight: bold;
}

form#instance-mail-edit div#language-selector a {
	text-decoration: none;
}

form#instance-mail-edit div#mail-edit-fieldsets {
	display: flex;
}

form#instance-mail-edit div#mail-edit-fieldsets fieldset {
	flex-grow: 0;
}

form#instance-mail-edit div#mail-edit-fieldsets fieldset#mail-edit-fields {
	width:     60em;
	min-width: 40em;
}

form#instance-mail-edit div#mail-edit-fieldsets fieldset#mail-edit-fields div.message {
	display:               grid;
	grid-gap:              1em;
	grid-template-columns: min-content auto;
	border:                1px solid darkgray;
	border-radius:         4px;
	padding:               1ex;
	background-color:      whitesmoke;
	margin-bottom:         1em;
}

form#instance-mail-edit div#mail-edit-fieldsets fieldset#mail-edit-fields div.message.warning {
	border:           1px solid orangered;
	background-color: lightgoldenrodyellow;
}


form#instance-mail-edit div#mail-edit-fieldsets fieldset#mail-edit-fields div.message img.icon {
	max-width:  4em;
	max-height: 4em;
}

form#instance-mail-edit div#mail-edit-fieldsets fieldset#mail-attachments {
	flex-grow: 1;
	min-width: 30em;
}

form#instance-mail-edit div#mail-edit-fieldsets fieldset#mail-attachments table#mail-template-attachments th {
	text-align: left;
}

table#instance-mail-variables {
	border-collapse: separate;
	border-spacing:  1ex 1px;
}

table#instance-mail-variables td {
	vertical-align: baseline;
}

/* templates */

div.instance-template-list a.instance-template {
	position:        relative;
	display:         inline-block;
	vertical-align:  top;
	margin-top:      1em;
	text-decoration: none;
	color:           inherit;
}

div.instance-template-list a.instance-template div.title {
	position:         absolute;
	top:              -1em;
	left:             1em;
	padding:          4px;
	font-weight:      bold;
	font-size:        120%;
	border:           1px solid darkgray;
	border-radius:    10px;
	background-color: lightgray;
}

div.instance-template-list a.instance-template div.description {
	display:          inline-block;
	width:            30em;
	height:           16em;
	border:           1px solid darkgray;
	border-radius:    10px;
	background-color: #f0f0f0;
	padding:          1ex;
	overflow:         auto;
}

div.instance-template-list a.instance-template div.flags {
	position: absolute;
	right:    1ex;
	top:      -1em;
}

div.instance-template-list a.instance-template div.flags img.language-flag {
	height:         1em;
	border:         1px solid black;
	margin:         2px;
	vertical-align: middle;
}

div.instance-template-list a.instance-template div.flags img.language-flag.missing {
	border: 3px solid red;
}

div.instance-template-list a.instance-template div.flags img.language-flag.partial {
	border: 3px solid yellow;
}

/* template */

form#instance-template-edit {
	position:   relative;
	margin-top: 2em;
}

form#instance-template-edit div#language-selector {
	position: absolute;
	top:      -2em;
	right:    1em;
}

form#instance-template-edit div#language-selector div.title {
	text-align:  center;
	font-weight: bold;
}

form#instance-template-edit div#language-selector a {
	text-decoration: none;
}

form#instance-template-edit div#template-edit-fieldsets {
	display: flex;
}

form#instance-template-edit div#template-edit-fieldsets fieldset {
	flex-grow: 0;
}

form#instance-template-edit div#template-edit-fieldsets fieldset#template-edit-fields {
	width:     60em;
	min-width: 40em;
}

form#instance-template-edit div#template-edit-fieldsets fieldset#template-attachments {
	flex-grow: 1;
	min-width: 30em;
}

form#instance-template-edit div#template-edit-fieldsets fieldset#template-attachments table#template-template-attachments th {
	text-align: left;
}

table#instance-template-variables {
	border-collapse: separate;
	border-spacing:  1ex 1px;
}

table#instance-template-variables td {
	vertical-align: baseline;
}


/* institution list */

table#instance-list {
	width: 100%;
}

table#instance-list th {
	text-align: left;
}

table#instance-list td.title {
	width: 90%;
}

table#instance-list td.start-time {
	width:       8%;
	white-space: nowrap;
}

table#instance-list td.registration {
	width:       2%;
	white-space: nowrap;
}

/* assistant_view */

table#assistant-options {
	table-layout: fixed;
}

table#assistant-options tr.options th {
	font-size:   150%;
	font-weight: bold;
}

table#assistant-options td {
	vertical-align: top;
}

table#assistant-options div.example {
	border:           1px solid darkblue;
	border-radius:    5px;
	background-color: lightblue;
	padding:          1ex;
	max-width:        30em;
	margin-bottom:    2px;
}

div#assistant-multilang-string label {
	display:     block;
	font-weight: bold;
}

div#assistant-multilang-text label {
	display:     block;
	font-weight: bold;
}

div.assistant-commit-stage div.title {
	border-bottom: 1px solid darkgray;
}

div.assistant-commit-stage div.title span.text {
	font-size:   120%;
	font-weight: bold;
}

div.assistant-commit-stage div.title a.edit {
	float:           right;
	text-decoration: none;
}

/* event panel */

b.event-time {
	display:   inline-block;
	min-width: 14em;
}

/* registration form */

form#registration-form div.flag {
	max-width: 60em;
}

form#registration-form div.flag.error {
	border:           1px solid red;
	border-radius:    5px;
	padding:          1ex;
	background-color: #fff0f0;
	margin-bottom:    2px;
}

form#registration-form div.flag div.error-msg {
	color:     red;
	font-size: 80%;
}

/* registration commit */

form#registration-commit fieldset.event {
	border:  1px solid darkgray;
	padding: 1ex;
}

form#registration-commit fieldset div.place {
	border:         1px solid darkgray;
	border-radius:  5px;
	padding:        1ex;
	width:          20em;
	display:        inline-block;
	vertical-align: top;
}

form#registration-commit p.privacy-issue {
	font-size: 90%;
	margin:    0;
}

/* registration view */

form#registration-view div#instance-forms {
	display:    flex;
	column-gap: 1em;
	flex-wrap:  wrap;
}

form#registration-view div#instance-forms div.fieldset {
	flex-grow: 1;
	max-width: 60em;
	min-width: 40em;
}

/* registrations view */

form#registrations-view {
	position: relative;
}

form#registrations-view div#tablespace {
	overflow: auto;
	width:    100%;
}

form#registrations-view table#registrations {
	background-color: darkgray;
}

form#registrations-view table#registrations th {
	white-space:      nowrap;
	background-color: lightgray;
}

form#registrations-view table#registrations td {
	vertical-align:   baseline;
	padding:          2px;
	background-color: lightgray;
}

form#registrations-view table#registrations td.timestamp {
	white-space: nowrap;
}

form#registrations-view table#registrations td.places {
	text-align: center;
}

form#registrations-view table#registrations td.option {
	text-align: center;
}

form#registrations-view table#registrations td.mails a {
	text-decoration: none;
	color:           inherit;
}

form#registrations-view table#registrations tr.even td {
	background-color: #f0f0f0;
}

form#registrations-view table#registrations tr.odd td {
	background-color: #f8f8f8;
}

/* registration state history */

table#registration-status-history thead th {
	text-align: left;
}

/* invites */

form#invites-view {
	position: relative;
}

form#invites-view div#table-control {
	position: absolute;
	right:    0;
}


form#invites-view table#invites {
	background-color: darkgray;
	width:            100%;
}

form#invites-view table#invites th {
	white-space:      nowrap;
	background-color: lightgray;
}

form#invites-view table#invites td {
	vertical-align:   baseline;
	padding:          2px;
	background-color: #f0f0f0;
	white-space:      nowrap;
}

form#invites-view table#invites tr.used td {
	vertical-align:   baseline;
	padding:          2px;
	background-color: #ffb0b0;
}

form#invites-view table#invites tr.open td {
	vertical-align:   baseline;
	padding:          2px;
	background-color: #b0ffb0;
}

/* invites fields */

form#invites-fields div.error {
	border:           1px solid red;
	border-radius:    5px;
	padding:          1ex;
	background-color: #fff0f0;
	margin-bottom:    2px;
}

form#invites-fields div.error-msg {
	color:     red;
	font-size: 80%;
}

/* invite uploaded */

form#invites-uploaded div.import-sheet {
	display:       inline-block;
	min-width:     24em;
	border:        1px solid darkgray;
	border-radius: 5px;
	padding:       5px;

}

form#invites-uploaded div.import-sheet div.title {
	text-align:  center;
	font-size:   120%;
	font-weight: bold;
}

form#invites-uploaded div.import-sheet select {
	width: 100%;
}

form#invites-uploaded div.import-sheet div.separator {
	margin-top: 1em;
	text-align: center;
}

form#invites-uploaded div.import-sheet div.column {
	display: table-row;
}

form#invites-uploaded div.import-sheet div.column div.name {
	display:       table-cell;
	padding-right: 1em;
}

form#invites-uploaded div.import-sheet div.column div.selector {
	display: table-cell;
}

/* instance edit */

div.field.actions {
	display:               grid;
	grid-template-columns: auto auto;
}

div.field.actions div.right-actions {
	text-align: right;
}

input#revoke-event-button {
	color: red;
}

form#instance-edit-form {
	display:   grid;
	grid-gap:  1em;
	grid-template-areas:
    'basic options'
    'actions actions';
	max-width: 121em;
}

form#instance-edit-form fieldset {
	width: 100%;
}

form#instance-edit-form fieldset#basic {
	grid-area: basic;
}

form#instance-edit-form fieldset#options {
	grid-area: options;
}

form#instance-edit-form fieldset#options div#option-list {
	display:               grid;
	grid-template-columns: auto min-content;
}

form#instance-edit-form div.field.actions {
	grid-area: actions;
	width:     inherit;
	max-width: inherit;
}

/* mail template */

table#instance-template-variables th {
	text-align: left;
}

table#instance-template-variables tr.variant td.description {
	padding-left: 2em;
}

/* mail template test */

form#instance-mail-test div.flag {
	max-width: 60em;
}

form#instance-mail-test div.flag.error {
	border:           1px solid red;
	border-radius:    5px;
	padding:          1ex;
	background-color: #fff0f0;
	margin-bottom:    2px;
}

form#instance-mail-test div.flag div.error-msg {
	color:     red;
	font-size: 80%;
}

/* mail template test */
form#instance-mail-attachment-modifiers-form div#modifiers {
	display: flex;
}

form#instance-mail-attachment-modifiers-form div#modifiers a.modifier {
	border:          1px solid darkgray;
	border-radius:   5px;
	display:         block;
	flex-grow:       0;
	width:           26em;
	text-decoration: none;
	color:           inherit;
	padding:         1ex;
}

form#instance-mail-attachment-modifiers-form div#modifiers a.modifier div.title {
	font-weight: bold;
	font-size:   120%;
}

/* requirements */
form#instance-requirements table {
	width: 100%;
}

form#instance-requirements table tr.sufficient {
	background-color: lightgreen;
}

form#instance-requirements table tr.required {
	background-color: #ffb0b0;
}

form#instance-requirements table th {
	text-align: left;
}

/* lottery */

form#lottery-start {
}

/* instance statistics portlet */

div#instance-statistics {
	border:        1px solid darkgray;
	width:         100%;
	position:      relative;
	margin-bottom: 2em;
}

div#instance-statistics div.header {
	background-color: #e6e6e6;
	border-bottom:    1px solid darkgray;
	text-align:       center;
	padding:          3px;
	font-weight:      bold;
	font-size:        120%;
	position:         relative;
}

div#instance-statistics div.separator {
	background-color: #e6e6e6;
	border-bottom:    1px solid darkgray;
	border-top:       1px solid darkgray;
	text-align:       center;
	padding:          3px;
	font-weight:      bold;

}

div#instance-statistics div#usage-display {
	background-color: #008000;
	color:            white;
}

div#instance-statistics div#usage-display div#indicator {
	background-color: #e00000;
	width:            38%;
	white-space:      nowrap;
	padding:          3px;
}

div#instance-statistics div.even {
	background: white;
}

div#instance-statistics div.odd {
	background: whitesmoke;
}

div#instance-statistics div.group-display {
	width:                 100%;
	display:               grid;
	grid-template-columns: auto min-content;
}

div#instance-statistics div.group-display.with-places {
	grid-template-columns: auto min-content min-content;
}


div#instance-statistics div.group-display div.group-name {
	padding-left: 2px;
	text-align:   left;
}

div#instance-statistics div.group-display div.registrations {
	text-align:    right;
	padding-right: 2px;
	min-width:     3ex;
}

div#instance-statistics div.group-display.with-places div.registrations {
	padding-right: 1ex;
}

div#instance-statistics div.group-display div.places {
	text-align:    right;
	font-style:    italic;
	padding-right: 2px;
	min-width:     3ex;
}

div#instance-statistics div#instance-statistics-timestamp {
	font-size:   60%;
	position:    absolute;
	right:       2px;
	bottom:      -1.2em;
	padding:     0;
	margin:      0;
	line-height: initial;
	text-align:  right;
}

/* instance notices portlet */

div#instance-notices div.value {
	display:  grid;
	position: relative;
	grid-gap: 1px;
	grid-template-areas:
        'sender time'
        'subject subject';
}

div#instance-notices div.value div.subject {
	grid-area:   subject;
	font-weight: bold;
}

div#instance-notices div.value div.time {
	grid-area:   time;
	font-size:   75%;
	text-align:  right;
	line-height: initial !important;
}

div#instance-notices div.value div.sender {
	grid-area:   sender;
	font-size:   75%;
	line-height: initial !important;
}

div#instance-notices div.value div.body {
	grid-area:        body;
	position:         absolute;
	display:          none;
	border:           1px solid darkgray;
	border-radius:    4px;
	padding:          3px;
	background-color: whitesmoke;
	width:            200%;
	max-height:       10em;
	overflow:         auto;
	top:              2.5em;
	right:            1em;
	z-index:          1;
}

div#instance-notices div.value:hover div.body {
	display: block;
}


/*
 * timeline_view.pt
 */

table#timeline {
}

table#timeline tr.header {
	background-color: #b8b8b8;
}

table#timeline tr.body.even {
	background-color: #f0f0f0;
}

table#timeline tr.body.odd {
	background-color: #e8e8e8;
}

table#timeline tr.body.even.base {
	background-color: #fff0f0;
}

table#timeline tr.body.odd.base {
	background-color: #ffe8e8;
}

table#timeline tr.body.even.active {
	background-color: #f0f0ff;
}

table#timeline tr.body.odd.active {
	background-color: #e8e8ff;
}

table#timeline td {
	vertical-align: baseline;
	padding:        0 1ex;
}

table#timeline td.checkbox {
	padding: 0;
}

table#timeline td.operations ul {
	margin:       unset;
	padding-left: 1ex;
}

form#timeline-edit div#confirm-past-change {
	position:         relative;
	background-color: #ffe0e0;
	border:           1px solid red;
	width:            60em;
	margin-bottom:    1em;
	padding:          1ex;
}

form#timeline-edit div#confirm-past-change legend {
	top:         -1em;
	color:       red;
	font-weight: bold;
}

/* lottery groups */

form#lottery table#lottery-groups {
	margin-bottom: 1ex;
}

form#lottery table#lottery-groups td, th {
	padding: 2px;
}

form#lottery table#lottery-groups tr.header {
	background-color: #e6e6e6;
}

form#lottery table#lottery-groups tr.body {
	background-color: #f0f0f0;
}

form#lottery table#lottery-groups tr.body.even {
	background-color: #f8f8f8;
}

form#lottery-group table#lottery-group-rules tr.header {
	background-color: #e6e6e6;
}

form#lottery-group table#lottery-group-rules tr.body {
	background-color: #f0f0f0;
}

form#lottery-group table#lottery-group-rules tr.body.even {
	background-color: #f8f8f8;
}

/* instance attachments */

form#instance-attachment-form div.attachments {
	display:               grid;
	grid-template-columns: repeat(auto-fit, 40em);
	grid-gap:              1ex;
}

form#instance-attachment-form div.attachment label {
	font-size:   130%;
	font-weight: bold;
}

form#instance-attachment-form div.attachment {
	border:        1px solid darkgray;
	border-radius: 5px;
	position:      relative;
	padding:       1ex;
}

form#instance-attachment-form div.attachment div.actions {
	margin: 1em 0;
}

form#instance-attachment-form div.attachment div.images div.image {
	position: relative;
}

form#instance-attachment-form div.attachment div.images div.image img.icon.delete {
	max-height: 24px;
	max-width:  24px;
	position:   absolute;
	right:      -12px;
	top:        -12px;
	display:    none;
}

form#instance-attachment-form div.attachment div.images div.image:hover img.icon.delete {
	display: inherit;
}

form#instance-attachment-form div.attachment div.images div.image img {
	max-height: 10em;
}

form#instance-attachment-form div.attachment div.image-infos div.info div.header {
	font-size:   110%;
	font-weight: bold;
	margin:      1ex 0;
}

form#instance-attachment-form div.attachment div.image-infos div.info div.value img {
	height: 1em;
}

/*
 * Permissions_view.pt
 */

form#permissions fieldset {
	border: none;
}

form#permissions table#usermatrix th.admin-name {
	text-align:  left;
	white-space: nowrap;
}

form#permissions table#usermatrix th.admin-name img {
	vertical-align: middle;
}


table.permissionsmatrix thead td {
	position: relative;
	height:   16em;
}

table.permissionsmatrix tbody td {
	background-color: lightgreen;
	position:         relative;
	padding:          4px;
}

table.permissionsmatrix tbody th {
	background-color: lightblue;
	position:         relative;
	width:            16em;
	padding:          4px;
}

table.permissionsmatrix thead td span {
	display:           block;
	white-space:       nowrap;
	position:          relative;
	top:               7em;
	transform:         rotate(-45deg);
	-ms-transform:     rotate(-45deg); /* IE 9 */
	-moz-transform:    rotate(-45deg); /* Firefox */
	-webkit-transform: rotate(-45deg); /* Safari and Chrome */
	-o-transform:      rotate(-45deg); /* Opera */
	width:             1.2em;
	left:              1ex;
}

table.permissionsmatrix tbody td.allperms {
	background-color: lightsalmon;
}

table.permissionsmatrix tbody th select {
	width: 100%;
}

.lines {
	border-bottom: 1px solid #a2ad00;
}

/* widgets */

table.select-option-list {
	margin-bottom: 1ex;
}

table.select-option-list td {
	background-color: #f0f0f0;
}

table.select-option-list th {
	background-color: #e0e0e0;
}

table.select-option-list td.error {
	padding:          3px;
	background-color: #ffa0a0;
}

input.integer-widget {
	text-align: right;
}

/* fields */

div.field {
	margin-bottom: 1em;
	max-width:     60em;
	position:      relative;
}

div.field.error {
	border:           1px solid red;
	border-radius:    5px;
	padding:          1ex;
	background-color: #fff0f0;
	margin-bottom:    2px;
}

div.field.error div.error-msg {
	color:     red;
	font-size: 80%;
}

div.field label {
	display:     block;
	font-size:   110%;
	font-weight: bold;

}

div.field p.description {
	margin-top:    0;
	margin-bottom: 2px;
	font-size:     90%;
}

div.field b.language {
	font-size: 90%;
}

/* field views */

div.field-view label {
	display:     block;
	font-size:   110%;
	font-weight: bold;
}


/* field textline */

div.field.textline input {
	width:      100%;
	box-sizing: border-box;
}

div.field.textfield textarea {
	width:      100%;
	box-sizing: border-box;
}

/* field multilang textline */

div.field.multilang-textline input {
	width:      100%;
	box-sizing: border-box;
}

div.field.multilang-textfield textarea {
	width:      100%;
	box-sizing: border-box;
}

/* field address */

div.field.address textarea {
	width:      100%;
	box-sizing: border-box;
}

div#city-row {
	display: flex;
}

div#city-row input.address-zip {
	flex-grow: 0;
}

div#city-row input.address-city {
	flex-grow:   1;
	margin-left: 1ex;
}

/* field name */

div.field div.labeled {
	display:       flex;
	margin-bottom: 1ex;
}

div.field div.labeled label {
	position:  relative;
	flex-grow: 1;
}

div.field div.labeled label span {
	position:  absolute;
	top:       -1ex;
	left:      1ex;
	font-size: 60%;
}

div.field div.labeled input {
	margin-top: 1em;
}

div#name-row input {
	width:      100%;
	box-sizing: border-box;
}

div#name-row label.name-given-names {
	margin-right: 1ex;
}


div#title-row label.name-title-pre {
	margin-right: 1ex;
}

div#blueprints {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(40em, 1fr));
	grid-gap:              1ex;
}

div#blueprints div.blueprint {
	border:        1px solid darkgray;
	border-radius: 5px;
	position:      relative;
	padding:       1ex 1ex 2ex;
}

div#blueprints div.blueprint div.info-box {
	padding:     3px;
	font-size:   80%;
	line-height: normal;
}

div#blueprints div.blueprint div.info-box div.box-label {
	text-align:  right;
	font-weight: bold;
}


div#blueprints div.blueprint div.shared-by {
	float: right;
}

div#blueprints div.blueprint div.shared-to {
	float: right;
}

div#blueprints div.blueprint div.actions {
	position: absolute;
	bottom:   1px;
	right:    1ex;
}

div#blueprints div.blueprint div.actions a {
	text-decoration: none;
}

div#blueprints div.blueprint div.actions a img {
	height: 1em;
}


/* config mails */

div.global-mail-list a.global-mail {
	position:        relative;
	display:         inline-block;
	vertical-align:  top;
	margin-top:      1em;
	text-decoration: none;
	color:           inherit;
}

div.global-mail-list a.global-mail div.title {
	position:         absolute;
	top:              -1em;
	left:             1em;
	padding:          4px;
	font-weight:      bold;
	font-size:        120%;
	border:           1px solid darkgray;
	border-radius:    10px;
	background-color: lightgray;
}

div.global-mail-list a.global-mail div.description {
	display:          inline-block;
	width:            30em;
	height:           16em;
	border:           1px solid darkgray;
	border-radius:    10px;
	background-color: #f0f0f0;
	padding:          1ex;
	overflow:         auto;
}

div.global-mail-list a.global-mail:hover div.description {
	background-color: #e0e0ff;
	color:            black;
}

div#formspace {
	display:               grid;
	grid-template-columns: 3fr minmax(16em, 1fr);
	grid-gap:              1ex;
}

div#remarks div.remark {
	border: 1px solid darkgray;
}

div#remarks div.remark div.title {
	padding:          5px;
	background-color: #e6e6e6;
}

div#remarks div.remark p, div#remarks div.remark a {
	margin:      5px 5px 1ex 5px;
	font-size:   90%;
	line-height: 1em;
}

div#registration-mail-view {
	display:               grid;
	grid-template-columns: repeat(auto-fit, 60em);
	grid-gap:              1ex;
}

div#registration-mail-view div.mail-view {
	border:        1px solid darkgray;
	border-radius: 5px;
	background:    lightgray;
	position:      relative;
	margin-top:    1em;
	padding:       2em 1ex 1ex;
}

div#registration-mail-view div.mail-view div.title {
	font-weight:   bold;
	font-size:     180%;
	position:      absolute;
	top:           -1em;
	border:        1px solid darkgray;
	border-radius: 5px;
	padding:       0.5ex;
	color:         white;
	background:    darkgray;
}

div#registration-mail-view div.mail-view div.headers {
	display:               grid;
	grid-template-columns: min-content auto;
	grid-gap:              1px 1ex;
	margin-top:            1em;
	margin-bottom:         1ex;
}

div#registration-mail-view div.mail-view div.headers div.header {
	font-weight: bold;
}

div#registration-mail-view div.mail-view div.body {
	border:     1px inset darkgray;
	padding:    1ex;
	background: white;
	height:     40em;
	overflow:   auto;
}

div#registration-mail-view div.mail-view div.attachments {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	grid-gap:              1ex;
	margin-top:            1ex;
}

div#registration-mail-view div.mail-view div.attachments span.attachment {
	display:         block;
	border:          1px inset darkgray;
	padding:         1ex;
	background:      white;
	text-align:      center;
	text-decoration: none;
	color:           inherit;
}


div#registration-mail-view div.mail-view div.attachments span.attachment img.icon {
	max-height: 6em;
	max-width:  6em;
}


/*
 * panel instance_media.pt
 */

div.media-view {
	width:     min-content;
	display:   grid;
	grid-template-areas:
    'image image'
    'title author';
	font-size: 80%;
}

div.media-view img {
	grid-area: image;
}

div.media-view div.title {
	grid-area:   title;
	font-weight: bold;
}

div.media-view div.author {
	grid-area:  author;
	text-align: right;
	font-style: italic;
}

div#register-form-helps p {
	margin-top:    0;
	margin-bottom: 2px;
	padding:       0 2px;
}


div#register-form-helps pre {
	margin-top:    0;
	margin-bottom: 2px;
	padding:       0 2px;
	line-height:   initial;
	font-size:     80%;
	white-space:   pre-wrap;
	word-wrap:     break-word;
}


/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {

	div#instance-statistics {
		width: 100%;
	}

	img#media-banner_image {
		width: 100%;
	}

	div.registration-list-entry div.title {
		font-size:   130%;
		font-weight: bold;
	}

	a.instance-list-entry div.instance-title {
		font-size: 110%;
	}

	a.instance-list-entry div.instance-registration {
		font-size: 75%;
	}

	a#add-link {
		display: none;
	}

	div#instance-notices div.value {
		grid-template-areas:
            'sender time'
            'subject subject'
			'body body';
	}

	div#instance-notices div.value div.body {
		display:          block;
		position:         initial;
		top:              initial;
		right:            initial;
		width:            inherit;
		background-color: inherit;
		border:           none;
		border-radius:    0;
	}

}