.attr-list {display:flex; margin-bottom:2rem }
.attr{ margin:0.5rem; border: 1px solid #888;max-width: 200px; flex-grow:1}
.attr-available {border-color:darkgreen}
.attr-not-available {border-color:darkred}
.attr-label{font-weight:bold;color: white;background: var(--colour-pri-dark);padding:0.25rem 0.5rem;}
.attr-value{text-align:center;  border-top: 1px dashed #888;;padding:0.25rem 0.5rem}
.available-icon-x{font-size:0.9rem; vertical-align: baseline !important;}
.attr-available .attr-icon { color:darkgreen; }
.attr-not-available .attr-icon { color:darkred; }
.attr .attr-icon {text-align: center;padding:0.25rem 0.5rem}
.attr .attr-icon span{font-size:3rem;}
.attr-desc {font-size:0.8rem; line-height:1rem; color:#555; padding:0.5rem}*{box-sizing: border-box; padding:0; margin:0}

body {
    color: #222;
    font-family: Arial;
    font-size: 15px;
    word-wrap: break-word;
	line-height: 1.5rem;
}

/* body.testing {border-top:5px solid #ff0;} */

h1.minimal {text-transform: uppercase;
font-size: 1.5rem;}

input[type="submit"] {-webkit-appearance: none;}

.small {font-size:0.75rem;}

#breadcrumb .Element{position:relative;}

footer {padding-top:2rem;}

.toggle:hover{cursor:pointer;}

hr {margin:1rem 0.5rem;border-top: 1px dashed #eee}

.tap {cursor:pointer}

.flex, .flex-wrap { display:flex; justify-content: space-evenly; align-items:baseline}
.flex-wrap { flex-wrap: wrap; }
.flex > *, .flex-wrap > * { flex-grow:1; }

.bold {font-weight: bold}
.dark-mode #logo {filter: invert(1);}
.dark-mode table { border: 1px solid #444; }

.dark-mode tr:nth-child(2n)
{ background: #161616; }

.dark-mode .feed-item:nth-of-type(2n) {
  background-color: #161616;
}

.dark-mode .type-text-base:required, .dark-mode input[type="text"]:required {border-right:4px solid #f33}	.calendar-date-box {
		background-color: transparent;
	}

	.calendar-date {
		text-align: center;
		width: 60px;
		border: 1px solid #c8c8c8;
		background-color: #fff;
	}
	.calendar-date .month {background-color:#E28B09;color:#fff;font-size:1.3rem;text-transform: uppercase;}
	.calendar-date .date {color:#000;font-size:1.8rem;line-height:2rem}
	.calendar-date .year {color:#a5a5a5}

	.date-list .calendar-date {width:50px;}
	.date-list .calendar-date .month {font-size:1.1rem;}
	.date-list .calendar-date .date {font-size:1.2rem;}
	.date-list .calendar-date .year {}

	.type-input-dateselect .type-input-control {display:flex;}
.email-review{ margin:0.5rem; padding:0.5rem; background-color:#eee;border:1px solid #ccc}
.email-body{margin:1rem 0 0 0;background-color:#fff;border:1px solid #ccc;padding:0.5rem;}.feed-list {border:1px solid #3498db;}
.feed-title{margin:0;padding:0.25rem 0.5rem;color:#fff;background-color:#3498db;}
.feed-item{padding:0.25rem 0.5rem 1rem;position:relative}
.feed-item:nth-of-type(2n){background-color:#e0ffff;}
.feed-item .time {font-size:0.7rem;color:#3498db;padding: 0 0 0 1rem;display:inline;}
.feed-item .title {font-size:0.9rem;color:#444;font-weight:bold;display:inline;}
.feed-item .summary {font-size:0.9rem;opacity:0.75;max-height: 6rem;
overflow: hidden;transition:max-height 333ms;padding-left: 0.5rem;}
.feed-item .summary:hover{max-height:100rem}
.feed-dismiss{position:absolute;top:0;right:0;font-size:0.7rem;padding:0 0.2rem;}.feedback-cta {opacity:0.75; transition: color 250ms, opacity 250ms;}
.feedback-cta:hover {opacity:1; cursor:pointer;}
.feedback-cta.feedback-positive:hover, .feedback-sent.feedback-positive {color:green}
.feedback-cta.feedback-negative:hover, .feedback-sent.feedback-negative {color:red}
.feedback-complete {opacity:0.5;}/* forms */
fieldset {margin:1rem 0;border-radius:0;border:0;}
legend {border-radius:0;padding:0.125rem 0.5rem;background-color: #3498db;color:#fff;text-transform:uppercase;margin-bottom:0.75rem}
legend.toggle {cursor:pointer;}

.flexi .type-input {max-width:800px;}

span.input input[type="text"], span.input .type-text-base
{min-width:250px;border:0;border: 2px solid #f0f0f0;background-color:#fff;padding:0.33rem 0.5rem}

.type-text-base, input[type="text"], input[type="email"], input[type="password"], input[type="password"], textarea, .flexi select
{
    border-radius: 0;
    padding: 0.75rem;
	border: 2px solid #f0f0f0;
}

.flexi .type-input {display:flex;flex-wrap:wrap;}
.type-input-item {min-width:200px;flex:1;margin: 0 0 0.75rem;}
.type-input-item .type-input-item {min-width:auto;} /* nested inputs */
.type-input-label { border-bottom:1px solid #ccc; background-color:#eeeeee42;margin-right:1rem;}

.type-input-control input[type="text"],.type-input-control input[type="number"],.type-input-control input[type="email"], .type-input-control input[type="password"] {width:95%;}
.type-input-control textarea {width:100%;min-height:5rem;}
.type-input-help, .type-input-comment {color:#888}
.control-full{flex:100%;margin-bottom: 2rem;}
.type-input-control label {display:block;margin-bottom: 0.5rem;}
.type-input-label .label, .type-input-comment {padding: 0.5rem 1rem;display: block;
text-align: left;}

/*
input:required, select:required {background-color:#fee;}
.type-text-base:required, input[type="text"]:required,input[type="number"]:required,input[type="email"]:required, input[type="password"]:required{border-right:4px solid #fcc;}
*/
input:invalid, select:invalid{background-color:#fee;border-right:4px solid #fcc;}


form.flexi .btn {margin:0.5rem}

fieldset form{margin:0 auto;}
.labels label {margin-bottom:1em;display: block;}
.labels span.label{display:block;}

.text-right{text-align:right;}
.remove {vertical-align: bottom;}

.type-input-checkboxes .choice-help { margin-left: 2rem; opacity: 0.75; margin-bottom: 0.5rem;}
.type-input-checkboxes .flex-wrap label {min-width:50%}

/* btns */
input.btn
{border: 1px solid #666; background-color:#E28B09;margin-top:0.25rem;padding:0.5rem 1rem;color:#fff;cursor:pointer; transition: background-color 250ms;font-size: 16px;font-family: inherit;text-transform:uppercase;min-width: 10rem;}
input.btn:hover{background-color:#3498db}

.type-input + .type-input-submit {margin-top:1rem;}

.btn-full {width:100%}

.option-row { display:flex;justify-content:left;align-items:baseline; margin-top:2rem}
/* ? .option-row div{ margin:auto 0!important} */

/* legacy */
.wf_time{display: flex;}.highlight {background-color:#ff0;}

 #menu-box
 {
 	top:1rem;
	width:200px;
 	left: -185px;
 	position:absolute;
 	border:1px solid #9f9;
 	margin:0;padding:0;
 	transition: all 0.5s;
background-color:#cfc;

 }

 #menu-box:hover {left:-1px;}

  .menu-block
  {
  	padding:1rem;
  	border-right:1rem solid #f00;

  }

.menu-block ul {padding-left:1rem;}
.menu-block li {list-style-position: inside;}	.menu-group{margin:1rem 0 0;}
	.menu-group-description {font-size:1rem; padding: 0 1rem 1rem;}
	.menu-group-title{font-size: 1.25rem;padding:0.25rem 0.5rem;background-color:#ddd;border-bottom:1px solid #ccc; cursor:pointer;margin-bottom:1rem}
	.menu-items{display:flex;flex-wrap:wrap;gap:1rem}
	.menu-item{flex:1;border:1px solid #ccc;margin-bottom:1rem;min-width:300px}
	.menu-item-title{position:relative;padding:0.25rem 0.5rem;text-transform:uppercase;background-color:#ccc;border-bottom:1px solid #bbb; cursor:pointer;font-size: 1.125rem;margin-bottom:1rem;}
	.menu-item-description {font-size:0.9rem; padding: 0 1rem;}

	.menu-item-title .menu-icon {position:absolute; vertical-align: bottom;right: 0.25rem;right: 0;
height: 100%;
top: 0;
padding: 0.25rem;}.opentime-uk{text-align:center;font-size:1.5rem}
.time{padding:0.25rem;}
.time.closed {background-color:#ffd9d9;}
.time.open {background-color:#d9ffd9;}
.time span {margin-right:0.125rem;}
.time .thing {font-size:1.1rem;}

.time .email,.time .phone ,.time .period,.time .day {font-size:0.9rem;margin:0.125rem;}
.time  .day{font-style: italic;}
.time .open,.time .close {font-size:1.1rem;}

.open + .close:before
 { content:"\2014";margin:0 0.25rem}

.time .status {display:block;font-size:0.9re,;font-weight:bold;text-transform:uppercase;}span.stars {margin-left:0.5rem;}

.unset .icon {opacity:0.25;color:#000;}
.set .icon {opacity:1;color:#dd6;}
/* Suggest.css 2017-04-04 */

.suggestion-box { position:relative; border:0px solid transparent }

.suggestion-box input.suggest {padding: 0.5em;border: 1px solid #ccc;}

ul.suggestions-list {z-index:99;position:absolute;left: 0;margin:0;padding:0;width:100%;background-color: #eee;border: 1px solid #ccc;border-top:0}

ul.suggestions-list { height:auto; transition: max-height 1s; list-style:none;}

.suggestions-list  ul {background-color:#fff;margin:0;padding:0.25rem}


.suggestions-list  li.click { cursor:pointer;padding:0.5em; list-style-type: none; }

ul.suggestions-list  li:hover, ul.suggestions-list  li.highlight
{ opacity:1; transition: opacity 125ms, background-color 250ms;}

ul.suggestions-list li.highlight {text-decoration:none;background-color:#eee;}
ul.suggestions-list li.parent {font-size:0.9rem;text-align:left;}

.suggestions-list  li {background-color:#fff;margin:0;padding:0.25rem;font-size:1rem;text-align:left;}

.suggestion {clear:both;}

#content-box { overflow: visible !important; }table{margin: 1rem 0;border: 1px solid #ddd;}

th{background:#999;color:#fff;font-weight:normal }
tr:nth-child(even) {background: #f6f6f6}
td{padding: 0.25rem 0.5rem;}

th.sorting{cursor:pointer}
th.sorting_asc{cursor:n-resize}
th.sorting_desc{cursor:s-resize}	.tabs-ui, .tabs-content {width:100%}
	.tabs-ui {display:flex; margin: 0; padding: 0;}
	.tabs-ui li {flex:1;text-align:center;border:1px solid #000; list-style-type:none;background-color:#ddd}
	.tabs-ui li.selected {background-color:#fff;border-bottom:0;}
	.tabs-ui li a {display:block;text-decoration:none;width: 100%;height: 100%;}


	.tabs-content > div {display:none;}
	/*.tabs-content div:nth-child(n+2){}*/
	.tabs-content{margin-bottom:1rem;border:1px solid #000; border-top:0;}
	.tabs-content .block-box {padding:0.5rem;}

	.tabs-content .selected{display:block!important;}/* timer */

	 .clickable { cursor:pointer }
	 .xlive { font-weight:bold; }

	 .split-time {display:none;}
	 .live .split-time {display:block;}

	 .timers, .reminders {display:flex;flex-wrap: wrap;}
	 .timer-btn {border:1px solid #888; border-radius:5px;text-align:center;
		background-color:#fcc;padding:0.25em 0.5em; margin:0.25em;color:#000;transition:background-color 300ms;}
	 .timer-btn.live {background-color:#cfc;}#tree .hidden {display:none;}
#tree .expander {width:1rem;height: 1rem;background-color:#0f0;display: inline-block;cursor:pointer;}
#tree .expander.open{background-color:#f00;}

#tree li span.title {cursor:pointer;}
.selected > .title {font-weight:bold;}.hidden {display:none;}
.faint {opacity:0.5}
.bigger {font-size:1.33rem;}

legend.toggle + * { display:none; }

h1 {text-shadow: 1px 1px #aaa;}
h2, h3 {text-shadow: 1px 1px #ddd;}

h3.toggle{}

h3.toggle::before {
  content: '\e94f';
  font-family: "Material Symbols Outlined";
  padding: 0 0.5rem 0 0;
  vertical-align: text-bottom;
  color: var(--colour-pri-dark);
}

ul { margin-left: 2rem; }
li { list-style-type: square}

#breadcrumb-box {
margin: 0 auto 1rem;
    border-bottom: 1px solid #dcdcdc;
    color: #4d4f53;
    background-color: #ececec;
}

#breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0.5rem;
    justify-content: flex-start;
}

#breadcrumb li {
    margin-right: 0.25rem;
    white-space: nowrap;
    list-style-type: none;
}

#breadcrumb li::before {
    content: "/";
color: #999;
padding: 0 0.25rem;
}

#breadcrumb .tools
{
	list-style-type:none;position:absolute;right:0;top:0
}
#breadcrumb .tools li:before{content:"";}

.group {display:inline-block;}
.group-item{}
.group .link{padding: 0.25rem 0.5rem;display: block; }
.group-links{ max-height:0px;overflow:hidden;
			  position: absolute;
			  background-color: #fff;border-color:#ddd;
			  min-width: 160px;
			  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			  z-index: 1;transition: max-height 1s;
			  }

#breadcrumb .group-links {position:fixed;}
.group > .icon{opacity:0.66; padding:0 0.3rem}
.group:hover > .icon{opacity:0.99}
.group:hover .group-links{max-height:100%;}

.reactions-choose {vertical-align: top;}
.reactions-choose .group-links{ position: fixed;min-width: 1em;}

#notice ul {margin-left:0}

.flex-box {gap:1rem;}
.pop-menu
{
  display: inline-block;
  position: fixed;
border:1px solid #3498db;
background-color: #fff;
padding:0;margin:0;
left:0;
width:300px;
margin-left:-265px;
transition:margin-left 333ms;
border-right:35px solid #3498db;
min-height:125px;
border-top: 1px solid #fff;
border-left:0;
}

.pop-menu:hover{margin-left:0px;z-index:9001;border-top: 1px solid #3498db;}


.pop-menu .menu-title
{
	letter-spacing:1px;
text-transform: uppercase;
background: transparent;
color: #fff;
position: absolute;
top: 9px;
right: -131px;
transform-origin: 0 0;
transform: rotate(90deg);
white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 101px;
  font-size: 0.85rem;
}

.pop-menu ul {}
.pop-menu li {list-style-type:none}

.is-icon{background-size:contain;background-repeat:no-repeat;background-position:center;color:transparent;width:40px;overflow:hidden;display:inline-block}
.refresh.is-icon{background-image:url('icons/icons8/icons8-refresh-64.png');}
.nuke.is-icon{background-image:url('icons/icons8/icons8-radioactive-32.png');}
.schedule.is-icon{background-image:url('icons/icons8/icons8-schedule-30.png');}
.cancel.is-icon{background-image:url('icons/icons8/icons8-cancel-50.png');}
.archive.is-icon{background-image:url('icons/icons8/icons8-archive-49.png');}

a.icon {font-size: 0;background-size:contain;background-repeat:no-repeat;background-position:center;color:transparent;width:40px;overflow:hidden;display:inline-block;min-height: 1em;}
.icon-settings{background-image:url('icons/icons8/icons8-settings-48.png');}
.reaction{background-repeat: no-repeat;opacity:0.5;transition:opacity 250ms}.reaction:hover{opacity:1;}
.reaction-1 {background-image:url('icons/icons8/icons8-tick-box-24.png');}
.reaction-2 {background-image:url('icons/icons8/icons8-thumbs-up-48.png');}
.reaction-3 {background-image:url('icons/icons8/icons8-thumbs-down-48.png');}
.reaction-4 {background-image:url('icons/icons8/icons8-heart-48.png');}
.reaction-count{background-repeat: no-repeat;padding:0 0.5rem 0 1.25rem;background-size: contain;margin-left: 0.5rem;}

.pre{ white-space: pre; font-size: 0.8em; font-family: monospace;line-height: 1rem;}
.fade-in {display:none;}

#pop-view-box, #obscurer{
	position: fixed;
top: 0;
left: 0;
z-index: 99;
width:100%;
height:95%;
padding:0;margin:0
}

#pop-view-box{overflow-x: hidden;
overflow-y: scroll;}

#obscurer {background-color: #000;opacity: 0.5;z-index: 98;height:100%;}

#pop-view{ width: max-content;
margin: 2.5% auto;
border: 1px solid #000;
padding: 1rem;
background: #fff;}

.fragment-highlight {background-color: #ffc;}

.drop-target
{margin-bottom:1.5rem; background-color:#f5f5f5;height: 1.5rem;transition: border linear 250ms;}

.dragging {}
.dragging .drop-target {border:1px dashed #777}
.dragging .drag-subject {}

.edit-me{border:3px solid transparent;min-height:1.5rem}
.edit-me:hover{border:2px dashed orange;cursor:pointer} .edit-me.editing{display:none;}
.edit-empty {}

a.call-to-action {text-transform:uppercase;border:2px solid #dede36; display:inline-block;background-color:#368ade;color:#fff;padding:0.5em;font-size:1.5em;transition:background-color 0.5s}
a.call-to-action:hover{background-color:#de8a36}

.copy-me-click {display:inline-block; height:1rem; background-position: top center;
background-repeat: no-repeat;
background-size: contain; opacity:0.25; cursor:pointer; padding:0 1rem; background-image:url('icons/icons8/icons8-documents-24.png');}
.copy-me-click:hover{opacity:1}

.btns{display:flex; justify-content: space-evenly; gap:0.5rem}
.btn-icon {background-color:var(--colour-pri-dark); color:#fff; padding:0.25rem 0.75rem 0.25rem 0.5rem; flex:1 }
.btn-icon:hover {background-color:var(--colour-alt-dark)}
.btn-icon:hover {background-color:var(--colour-alt-dark)}
.material-symbols-outlined {vertical-align:bottom; margin-right:0.25rem; text-decoration:none;}
.btn-icon-block .material-symbols-outlined {display:block;}
.btn-disabled, .btn-disabled:hover {background-color:#888;cursor: not-allowed;}

@media (hover:none) {
  .pop-menu
  {
	  position:unset;
	  margin:0 0 1rem 0;
	  border:0;
	  display:block;
	  width:unset;
	  min-height:unset;
	  background-color: #205d85;
color: #fff;
  }

	.pop-menu .menu-title{all: unset; display:block; padding:0.25rem 0.5rem;}
  .pop-menu ul {display:none;}
  .pop-menu.open ul {display:block;}
}

@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}.up-item {margin:0 0 0.5rem 0.5rem;padding:0.5rem;border:1px solid #999; border-left:0.5rem solid #999}
.up-feed, .up-published {font-size:0.75rem;text-transform:uppercase;color:#333}
.up-published {color:#555;margin:0 0 0.5rem 0;display:block;}
.up-title{display:block;font-size:1.25rem;}
.up-start-date, .up-end-date{font-style:italic;}
.up-start-time,.up-end-time {color:#222;}
.up-start-date + .up-start-time, .up-end-date + .up-end-time
{ padding-left:0.5rem}
.up-start-date + .up-end-date:before, .up-start-time + .up-end-time:before,.up-start-time + .up-end-date:before
 { content:"\2014";margin:0 0.25rem}
.up-info {display:block;padding:0.25rem 0.5rem;margin:0.25rem 0 0 0; background-color:#d9d9d9;}

.up-info {position: relative;overflow:hidden}/*max-height:5rem;*/
.up-info p {margin:0.25rem 0;}#accordion { padding:0; }    
ul#accordion > li {
    list-style:none;

    }    
#accordion  li label {

    display:block;
	cursor:pointer;
	text-decoration:underline;
	font-weight: bold;
	color: blue;
    }    
	

#accordion label + input[type='checkbox'] {
      display: none;
	  
	  
}    
/* hide content by default */
#accordion .content {
	
	max-height:0;
transition: all 500ms;
	overflow:hidden;
	margin-left: 0.5rem;

}
/* Show content boxes when the radio buttons are checked */
#accordion label + input[type='checkbox']:checked + .content {
    display:block;
	max-height:1000px;
	margin-bottom:0.5rem;
}