:root {
  --header-height: 2.4rem;
  --footer-height: 2.4rem;
  --padding-side: .4rem;
  --sidebar-width: 16rem;
  --body-width: 60rem;
  --bottom-border: 8px;
  --anim-delay: 1s;
  
  
  --theme-color: #326CC0;
  --theme-color-blue: #326CC0; 
  --theme-color-default: var(--theme-color-blue);
  --theme-bgcolor-light: #f8f8f8;
  
  --theme-color-dark: #222222; 
  --theme-color-light: #eeeeee; 
  
  --theme-color-teal: teal;
  
/*   --theme-color-chocolate: #7B3F00;  */
/*   --theme-color-coffee: #6F4E37;  */
  
  --theme-color-chocolate: #835130;
  --theme-color-coffee: #5d281e;
  
  --theme-color-shamrock: #009E60; 
  --theme-color-grape: #6F2DA8; 
  --theme-color-gold: darkgoldenrod; 
  --theme-color-slate: #2F4F4F; 
  --theme-color-indigo: indigo; 
  --theme-color-orchid: #ae61a0; 
  
  --theme-color-earlgrey: #9b1c04;
  
  --theme-color-burgundy: #900020; 
  --theme-color-auburn: #A52A2A; 
  
  --theme-color-pink: #FF1493;
  --theme-color-orangered: #ff4400;
  
  --text-color: black;
  --text-color-header: white;
  --link-color: var(--theme-color);
  --tel-color: var(--theme-color-teal);
  --bleep-color: var(--theme-color-orangered);
  --progress-bgcolor: rgba(0,0,0,.5);
  --icon-color: inherit;
  --menusection-bgcolor: rgba(255,255,255,.2);
}

html {
  border-bottom: var( --bottom-border ) solid var( --theme-color );
}



html[data-font="Toolbox"], html[data-font="Toolbox"] input, #font_toolbox {
  font-family: "Raleway", sans-serif;
}
html[data-font="System"], html[data-font="System"] input, #font_system {
  font-family: system-ui, sans-serif;
}

html[data-font="Sans"], html[data-font="Sans"] input, #font_sans {
/* San Francisco, Roboto, Segoe */
  font-family: sans-serif;
}

html[data-font="Serif"], html[data-font="Serif"] input, #font_serif {
  font-family: serif;
}
html[data-font="Mono"], html[data-font="Mono"] input, #font_mono {
  font-family: monospace;
}

html[data-font="Cursive"], html[data-font="Cursive"] input, #font_cursive {
  font-family: cursive;
}

html:not([data-font]) #font_toolbox,
html[data-font=""] #font_toolbox,
html[data-font="Toolbox"] #font_toolbox,
html[data-font="System"] #font_system,
html[data-font="Sans"] #font_sans,
html[data-font="Serif"] #font_serif,
html[data-font="Mono"] #font_mono,
html[data-font="Cursive"] #font_cursive {
  font-weight: bold;
  color: var(--link-color);
}


/* Needs to be before the theme definitions */
#changetheme input {
  background-color: var(--theme-color);
  color: white;
}

html[data-theme="Default"], #changetheme input[value="Default"] {
  --theme-color: var(--theme-color-blue);
}
html[data-theme="Dark"], #changetheme input[value="Dark"] {
  --theme-color: var(--theme-color-dark);
  --text-color-header: white;
  --text-color: #ddd;
  --link-color: #02b8ff;
  --link-color-visited: #06b;
  --bgcolor: #111;
  --eee: black;
  --ddd: #181818;
  --ccc: #222;
  --theme-color-text: var(--link-color);
  --inputbox-bgcolor: var(--eee);
  --inputbutton-bgcolor: var(--ccc);
  --theme-bgcolor-light: #222;
  --color-done: #555;
  --color-fill: #777;
  --ggg: #222;
  --progress-bgcolor: #222;
  --highlight: #420;
}

html[data-theme="Dark"] canvas, 
html[data-theme="Dark"] img, 
html[data-theme="Dark"] iframe {
  filter: brightness(90%);
} 

html[data-theme="Light"], #changetheme input[value="Light"] {
  --theme-color: var(--theme-color-light);
  --theme-bgcolor-light: var(--theme-color-light);
  --theme-color-text: var(--theme-color-blue);
  --link-color: var(--theme-color-blue);
  --text-color-header: #333;
  --text-color: #555;
  --inputbutton-bgcolor: var(--theme-bgcolor-light);
/*   --icon-color: #888; */
  --menusection-bgcolor: white;
  --heading-color: #08d;
}
#changetheme input[value="Light"] {
  color: #333;
  font-weight: normal;
}


html[data-theme="Teal"], #changetheme input[value="Teal"] {
  --theme-color: var(--theme-color-teal);
  --link-color: #0aa;
  --heading-color: #074;
}
html[data-theme="Shamrock"], #changetheme input[value="Shamrock"] {
  --theme-color: var(--theme-color-shamrock);
  --link-color: #0aa;
  --heading-color: #074;
}
html[data-theme="Slate"], #changetheme input[value="Slate"] {
  --theme-color: var(--theme-color-slate);
  --link-color: #0aa;
  --heading-color: #074;
}
html[data-theme="Coffee"], #changetheme input[value="Coffee"] {
  --theme-color: var(--theme-color-coffee);
  --progress-bgcolor: rgba(255,255,255,.2);
  --heading-color: #800;
}
html[data-theme="Chocolate"], #changetheme input[value="Chocolate"] {
  --theme-color: var(--theme-color-chocolate);
  --progress-bgcolor: rgba(255,255,255,.2);
  --heading-color: #800;
}
html[data-theme="Earl Grey, hot"], #changetheme input[value="Earl Grey, hot"] {
  --theme-color: var(--theme-color-earlgrey);
  --progress-bgcolor: rgba(255,255,255,.2);
  --heading-color: #800;
}
html[data-theme="Gold"], #changetheme input[value="Gold"] {
  --theme-color: var(--theme-color-gold);
  --link-color-visited: var(--theme-color-gold);
  --theme-bgcolor-light: #f8f8f8;
  --heading-color: #800;
}
html[data-theme="Orchid"], #changetheme input[value="Orchid"] {
  --theme-color: var(--theme-color-orchid);
  --progress-bgcolor: rgba(255,255,255,.2);
  --link-color: #f0d;
  --heading-color: #c09;
}
html[data-theme="Princess"], #changetheme input[value="Princess"] {
  --theme-color: var(--theme-color-pink);
  --heading-color: #800;
}


a[href="#ui_preview"]:visited {
  color: var(--link-color);
}





body[data-known="yes"] .anon,
body:not([data-known="yes"]) .nona {
  display: none !important;
}

i.fa, i.far, i.fas, i.fab, i.fal, i.fad {
  width: 1.2em;
  text-align: center;
  color: var(--icon-color);
}

#ui_sidebar h4,
#ui_sidebar li,
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ui_header, #ui_footer, #ui_sidebar, #page_container article {
  box-sizing: border-box;
}

#wikimid, #wikitext {
  padding: 0;
  margin: 0;
}

#ui_header {
  color: var(--text-color-header);
  background-color: var( --theme-color );
  padding: 0 var( --padding-side );
  position: fixed !important;
  width: 100% !important;
  max-width: 100% !important;
  top: 0;
  left: 0;
  height: var( --header-height );
  line-height: var( --header-height );
  z-index: 4;
}


#ui_header p {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  text-align: center;
  align-items: center;
  max-width:  var(--body-width);
  margin: 0 auto;
}

#ui_header a {
  color: var(--text-color-header);
}


#ui_header .header_progress {
  background-color: rgba(0,0,0,.7);
  height: 2px;
  width: 0px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 7;
}

#page_container article {
/*   border: 1px dotted red; */
  padding: var(--padding-side) var(--padding-side) 20mm var(--padding-side);
}

#ui_footer {
  position: fixed !important;
  width: 100%;
  max-width: 100%;
  bottom: 0;
  left: 0;
  height: var( --header-height ); 
  background-color: var(--theme-bgcolor-light);
  border-top: 2px solid var( --theme-color );
  border-bottom: var(--bottom-border) solid var( --theme-color );
  z-index: 4;
  white-space: nowrap;
  overflow-x: auto;
  text-align: center;
}

#ui_footer:empty {
  display: none;
}

#ui_sidebar {
  position: fixed !important;
  background-color: var( --theme-color );
  top: var( --header-height );
  left: 100vw;
  transition: left var(--anim-delay);
  width: var( --sidebar-width );
  max-width: 80vw;
  z-index: 6;
  height: 100vh;
  max-height: calc( 100vh - var(--header-height) - var(--bottom-border) + 2px );
  padding: var( --padding-side );
  padding-bottom:  var(--bottom-height);
  color: var(--text-color-header);
  overflow: auto;
}

#wikitext.sidebar_open #ui_sidebar {
  left: calc( 100vw - var(--sidebar-width) );
  transition: left var(--anim-delay);
  box-shadow: -4px 5px 6px rgba(0, 0, 0, .5);
}
#ui_sidebar a {
  color: var(--text-color-header);
}

#ui_sidebar .menusection {
  display: none;
  background-color: var(--menusection-bgcolor);
  margin: 0 var(--padding-side);
  padding: var(--padding-side);
  border-radius: calc( var(--padding-side) / 2 );
  font-size: 90%;
}
#ui_sidebar input[name="sb_radio"],
#ui_sidebar .menusection h4 > i:first-child {
  display: none;
}

#ui_sidebar ul.synclist li[data-role="list-divider"] {
  background-color: transparent;
}

#sb_rd_0:checked ~ #sb_ms_0,
#sb_rd_1:checked ~ #sb_ms_1,
#sb_rd_2:checked ~ #sb_ms_2,
#sb_rd_3:checked ~ #sb_ms_3,
#sb_rd_4:checked ~ #sb_ms_4,
#sb_rd_5:checked ~ #sb_ms_5,
#sb_rd_6:checked ~ #sb_ms_6,
#sb_rd_7:checked ~ #sb_ms_7 {
  display: block;  
}


#sb_menulabels {
  display: flex;
  justify-content: space-evenly;
}

#sb_menulabels label {
  cursor: pointer;
  padding: calc( var(--padding-side) / 2 ) var(--padding-side);
  border-radius: calc( var(--padding-side) / 2 ) calc( var(--padding-side) / 2 ) 0 0;
}

#sb_rd_1:checked ~ #sb_menulabels label[for="sb_rd_1"],
#sb_rd_2:checked ~ #sb_menulabels label[for="sb_rd_2"],
#sb_rd_3:checked ~ #sb_menulabels label[for="sb_rd_3"],
#sb_rd_4:checked ~ #sb_menulabels label[for="sb_rd_4"],
#sb_rd_5:checked ~ #sb_menulabels label[for="sb_rd_5"],
#sb_rd_6:checked ~ #sb_menulabels label[for="sb_rd_6"],
#sb_rd_7:checked ~ #sb_menulabels label[for="sb_rd_7"],
#sb_rd_0:checked ~ #sb_menulabels label[for="sb_rd_0"]  {
  background-color: var(--menusection-bgcolor);
}

#ui_sidebar .menusection h4 {
  margin-top: 0;
  font-size: 1rem;
}

#feedback_buttons {
  display: flex;
  justify-content: space-around;
  font-weight: bold;
}

#ui_help .frame.inline-block {
  text-align: center;
  line-height: 1;
  padding: 0.1em 0.4em;
  border-radius: .1em;
}


#ui_welcome h2 {
  background-color: var(--bgcolor) !important;
}



















#ui_menu, #ui_back {
  font-size: 1.5em;
}

#ui_menu, #ui_back, .ui_openmenu {
  cursor: pointer;
}


#ui_back i {
  transition: transform calc( var(--anim-delay) / 2 );
}


#ui_back.scrolled i {
  transform: rotate(90deg);
}

#ui_menu i {
  transition: transform var(--anim-delay);
}

#wikitext.sidebar_open #ui_menu i {
  transform: rotate(360deg);
}

#spa_overlay {
  position: fixed !important;
  top:0;
  left:0;
  bottom:0;
  right: 0;
  z-index: 5;
  display: none;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
#wikitext.sidebar_open #spa_overlay {
  display: block;
}

#page_container article {
  display: none;
  position: fixed !important;
  top: var( --header-height );
  left: 0;
  width: 100%;
  max-height: calc( 100vh - var(--header-height) - var(--footer-height) );
  overflow: auto;
  transition: width var(--anim-delay);
}

#page_container article > * {
  max-width: var(--body-width);
  margin: 0 auto;
}

#page_container article > *.vspace {
  margin-top: 25px;
}

#page_container article.open,
#page_container article:last-child, #page_container article:target {
  display: block;
}

#page_container article.open ~ article:last-child, 
#page_container article:target ~ article:last-child {
  display: none;
}


@media screen and (min-width: 72rem) {
  #ui_footer,
  #ui_header .hwrap,
  #page_container article {
    width: calc( 100vw - var(--sidebar-width) );
  }
  
  #ui_sidebar {
    left: calc( 100vw - var(--sidebar-width) );
  }
  #wikitext.sidebar_open #ui_menu i {
    transform: none;
  }
  #wikitext.sidebar_open #spa_overlay {
    display: none;
  }
  
  #wikitext.sidebar_open #ui_sidebar {
    box-shadow: none;
  }

}

@media screen and (min-width: 36rem) and (max-width: 72rem) {
  
  #wikitext.sidebar_open #ui_header .hwrap,
  #wikitext.sidebar_open #ui_header .hwrap p {
    width: 100%;
    max-width: 100%;
  }
  
  #wikitext.sidebar_open #ui_footer,
  #wikitext.sidebar_open #page_container article  {
    width: calc( 100vw - var(--sidebar-width) );
  }
  
  
  #wikitext.sidebar_open #ui_menu i {
/*     transform: none; */
  }
  #wikitext.sidebar_open #spa_overlay {
    display: none;
  }
  
  #wikitext.sidebar_open #ui_sidebar {
    box-shadow: none;
  }

}


#ui_otherhospitals li[data-path],
#ui_myhospitals li[data-path] {
  cursor: pointer;
}

#ui_otherhospitals li[data-path] strong,
#ui_myhospitals li[data-path] strong {
  float: right;
  color: var( --link-color );
}

#ui_myhospitals li[data-path]::before {
  content: "● ";
}

#ui_myhospitals li[data-path].open::before {
  color: green;
}
#ui_myhospitals li[data-path].available::before {
  color: lightgreen;
}

#ui_myhospitals li[data-path].restricted::before {
  color: orangered;
}

#ui_myhospitals li[data-path].closed::before {
  color: darkred;
}
#ui_myhospitals li[data-path].inactive,
#ui_myhospitals li[data-path].inactive::before {
  color: #777;
}

.coverpicture div.img {
  padding: var( --padding-side );
}


.coverpicture img {
  width: 240px;
  border-radius: 0px !important;
}

#loading_overlay {
  height: 100vh;
  width: 100vw;
  position: fixed !important;
  background-color: rgba(0,0,0,0.2);
  z-index: 7;
  display: none;
  top: 0;
  left: 0;
}

body.loading #loading_overlay {
  display: block;
}

.loadingwrap {
  background-image: url(images/ld.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--theme-bgcolor-light);
  padding: var(--padding-side);
  border-radius: calc( var(--padding-side) / 2 );
  width: 16em;
  text-align: center;
}


#page_container article > .vspace.novspace,
.vspace.novspace {
  margin-top: 0;
}
.inline-block {
  display: inline-block;
}

#comment_text {
  font-family: inherit;
}

#comment_text::placeholder {
  font-size: 90%;
}


#ui_welcome {
  text-align:center;
}

#ui_welcome .welcomebuttons {
  margin: 0;
  text-align: left;
  max-width: 30rem;
  margin: 0 auto;
}

#page_container .smaller {
  font-size: 90%;
  line-height: 1.3;
}





#modialog { 
  display: none;
  background-color: rgba(0,0,0,.4);
  position: fixed;
  top:0;
  bottom:0;
  width:100%;
  overflow: hidden;
  z-index:1500;
}

#modialog-box { 
  text-align: center;
  background-color: var(--theme-bgcolor-light);
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 20em;
  max-height: 90vh;
  max-width: 80vw;
  overflow: auto;
  padding: .5em;
  border-radius: .5em;
  border: 1px solid var(--link-color);
}

#modialog-box h5 {
  margin: 0;
  padding: .1rem .2rem;
  background-color: var(--eee);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



#modialog-buttons span[data-key] {
  color: var( --link-color ); 
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  padding: 1mm 2mm;
}
#modialog-buttons, #modialog-content {
  text-align: center;
  color: var(--text-color);
  text-shadow: none;
}
#modialog-buttons {
  user-select: none;
}
#modialog-buttons span.downloading {
  background-image: url(images/ld.gif);
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  padding-left: 1.5em;
  font-weight: bold;
  color: var(--text-color);
  cursor: text;
}



input.astext {
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0; 
}

input.astext::-webkit-inner-spin-button,
input.astext::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.refreshlists {
  float: right;
  color: var(--link-color);
  font-weight: normal;
  cursor: pointer;
}

#page_container > article h1 {
  font-size: 1.5rem;
}
#page_container > article h2 {
  font-size: 1.3rem;
}
#page_container > article h3 {
  font-size: 1.1rem;
}

#sb_nav_list:empty + div.vspace {
  display: none;
}



#fsize_inc, #fsize_dec, #fsize_reset {
  cursor: pointer;
}

#fsize_dec {
  font-size: calc( 1rem - 2px );
}

#fsize_inc {
  font-size:  calc( 1rem + 2px );
}
#fsize_reset {
  font-size: 16px;
}

.btn_theme {
  --gap: .2rem;
  --width: calc( ( 100% - 2.0 * var(--gap) ) / 3.0 );
  display: grid;
  grid-template-columns: var(--width) var(--width) var(--width);
  grid-gap: var(--gap);
}

@media screen and (max-width: 25rem) {
  .btn_theme input {
    font-size: .9em;
  }
}

input:disabled {
  opacity: 0.5;
}


.btn_theme .inputbutton {
  border-width: 1px;
/*   -webkit-border-radius: 0; */
  border-radius: .2rem;
  padding: .2rem .4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.revheader {
  cursor: pointer;
  color: #777;
  font-size: .9em;
}

.csum {
  color: #777;
  font-size: .9em;
  word-wrap: break-word;
}


.right {
  text-align: right;
}
.left {
  text-align: left;
}

li.done {
  color: #555;
  text-decoration: line-through;
}