/* START OF INTERFACE STYLES */

::selection {
  color: var(--bodybg);
  background: var(--active);
}

#extramenu {
  position: relative;
  display: flex;
  margin-top: 0.5em !important;
  margin-bottom: 0 !important;
}


#extramenu>a {
  display: block;
  background-color: var(--lighterrowbg);
  text-align: center;
  /* vertical-align: middle; */
  flex-grow: 1;
  margin: 0;
  color: var(--lightrowfg);
  font-size: 80%;
  height: 100%;
}


#btn_ivf {
  border-right: 0.05em var(--bodybg) solid;
  border-left: 0.05em var(--bodybg) solid;
  box-sizing: border-box;
}

#extramenu>a.ob_active {
  background-color: var(--lightrowbg);

}



.ob_row,
.ob_label,
.ob_stuff {
  position: relative;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}



.ob_row {
  display: flex;
  /*height: var(--rowheight);
		KEEP AS Re MINDER:
		needs to be disabled to allow for flex when extra info rows are displayed*/
  line-height: var(--rowheight);
  width: 100%;
  margin: var(--rowmargins) 0 0;
  /* SMALLIFY 4vw */
}


.ob_rowvertical {
  /* style for US and CRL rows, need divs to stack vertically */
  flex-direction: column;
}

.innerrow {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.infoline {
  font-size: 55%;
  line-height: 1.8em;
  text-align: center;
}

.infoline a {
  color: var(--menufg);
}

.infoline a:hover {
  color: var(--lightrowfg);
}

#del_date,
#efw_box {
  /* color: var(--delcolor); */
  display:block;
  background: var(--lightrowbg);
  transition: height var(--animspeed);
  height: 0;
}

#del_date.delivered,
#efw_box.efweighed {
  /* color: green; */
  /* background:blue; */
  height: 1.7em;
  line-height: 1.7em;
}

#del_date {
  color: var(--delcolor);
  pointer-events: none;
}

#buttonpart {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  font-size: 70%;
  height: var(--navheight);
  line-height: var(--navheight);
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  vertical-align: middle;
  padding: 0.25em 0;
}

/* #sharetext {
	display: block;
	font-size: 70%;
	line-height: 2em;
	text-align: right;
} */


#buttonpart .blankbox {
  width: calc(var(--navheight) * 0.6);
  height: calc(var(--navheight) * 0.6);
}

/* #buttonpart div:not(.blankbox) {
} */

.imagebutton {
  height: 100%;
  position: relative;
  cursor: pointer;
  /* pointer-events:none; */
}





#submenubox {
  display: block;
  position: relative;
}


/*
#submenubox {
	display: flex;
	position:relative;
	flex-direction: row;
	height:100%;
	margin-right: 0.5em;
}
*/


.ob_label {
  width: 49%;
  height: 100%;
  font-size: 100%;
  vertical-align: middle;
  padding-left: 0.25em;
}

.date_out {
  cursor: pointer;
}

.date_out.active {
  cursor: ew-resize;
  background-color: var(--active);
}

.ob_stuff {
  position: relative;
  background-color: var(--lightrowbg);
  color: var(--lightrowfg);
  height: 100%;
  width: 49%;
  align-items: center;
  padding-right: 0.25em;

}

.ob_stuff label {
  font-size: 80%;
}

input[type="number"] {
  margin-left: 0.15em;
  margin-right: 0.1em;
  width: 1.5em;
  height: 70%;
  font-size: 100%;
  text-align: center;
  background-color: #fff3;
  /* border-bottom: 1px dotted var(--menufg);*/
}

input[type="number"]:focus {
  background-color: white;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
  /* Firefox hack to hide number arrows */
}



.clickable {
  cursor: pointer;
}

.date_out:active {
  cursor: ew-resize;
  background-color: var(--activesolid);
}


.date_out {
  display: block;
  text-align: center;
  /* vertical-align: middle; */
  font-size: 70%;
  background-color: var(--lightrowbg);
  align-self: stretch;
  white-space: nowrap;
  overflow: hidden;
}


.ob_longrow {
  background-color: var(--lightrowbg);
  color: var(--lightrowfg);
}

.longdate {
  font-size: 80%;
  background-color: transparent;
  position: relative;
  align-items: center;
  display: flex;
  width: 45%;
}

#tm_arrow,
#help {
  font-size: 70%;
}

#tm_row {
  transition: filter var(--animspeed);
}

#tm_row.inactive {
  filter: grayscale(1) contrast(0.6) brightness(1.1);
}

#crl_row,
#us_row,
#ivf_row {
  margin-top: 0;
  display: none;
}


#us_row {
  display: flex;
}


#crl_out {
  text-align: left;
  display: flex;
  flex-direction: column;
  font-size: 75%;
  width: 100%;
  cursor: pointer;
  transition: all var(--animation);
  max-height: 100%;
}


#crl_out>div {
  padding-left: 0.25em;
  position: relative;
  left: 0;
  border: 0.001em solid var(--linkcolor);
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  max-height: var(--rowheight);
  transition: all var(--animation);
}

#crl_out>div.ob_active {
  background: var(--active);
}


#crl_out.crl_selected>div:not(.ob_active) {
  opacity:0;
  max-height: 0;
  /* line-height:0; */
}


#crl_mm {
  width: 4em;
}

#crl_infoline.crl_warning {
  color: var(--broken);
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


#cycle_label {
  font-size: 70%;
  cursor: default;
}

#cycle_label.mod {
  background: var(--active);
  color: var(--lightrowfg);
  cursor: pointer;
}

#slider_box {
  background: transparent;
  width: 69%;
}


.slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 0.75em;
  border-radius: 5px;
  background: var(--lightrowbg);
  outline: none;
  opacity: 1;
  transition: opacity var(--animspeed);
}



.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--linkcolor);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--linkcolor);
  cursor: pointer;
}

.slider:focus::-webkit-slider-thumb {
  background: var(--activesolid);
}

.slider:focus::-moz-range-thumb {
  background: var(--activesolid);
}


h2,
h3,
h4 {
  margin: 1.5em 0 0.25em 0;
}


h1 {
  font-size: 120%;
  margin: 1em 0 1.5em 0;
  font-size: 300%;
  font-weight: bold;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  display: table;
  /* hack to keep block confined around content */
  text-shadow: 0 0 0.3em var(--navbg),
    0 0 0.7em var(--navbg),
    0 0 1em var(--navbg),
    0 0 1.2em var(--navbg);
  position: relative;
}

h2 {
  font-size: 140%;
  font-weight: bold;
  margin: 1em 0 1.5em 0;
  position: relative;
  display: table;
  /* hack to keep ::after block confined around content */
  font-family: "Times New Roman", serif;
}

h2::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -0.25em;
  left: -0.25em;
  right: -0.5em;
  top: 0.25em;
  border-bottom: 0.08em solid var(--otherfg);
  border-left: 0.08em solid var(--otherfg);
  /* border-radius: 0.5em; */
  border-image: linear-gradient(to right, var(--navbg), #00000000) 1;
  pointer-events: none;
}


h3 {
  font-size: 120%;
  font-weight: bolder;
  margin: 1.5em 0 1em;
  position: relative;
  display: table;
}


h3::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -0.25em;
  left: -0.25em;
  right: -0.5em;
  top: 0.25em;
  border-bottom: 0.08em solid var(--otherfg);
  /* border-radius: 0.5em; */
  border-image: linear-gradient(to right, var(--navbg), #00000000) 1;
  pointer-events: none;
}



h4 {
  font-size: 105%;
  display: block;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: 0 0 0.3em var(--navbg),
    0 0 1em var(--navbg);
}

ul {
  margin: 0.5em 0 0 1.5em;
  padding: 0;
  list-style: disc;
}

ul li {
  margin-top: 0.5em;
  margin-bottom: 0.5ex
}

ul.b {
  margin-left: 2ex;
}

ul.sublist>li {
  margin-top: 0;
  margin-bottom: 0;
}

ul.sublist {
  margin-top: 0.2em;
  margin-bottom: 0.5em;
}


.show-menu a.btn:focus {
  background: var(--activesolid) !important;
}


/* HELP SECTION 
http://output.jsbin.com/nonoz/1
*/
#about {
  color: whitesmoke;
  font-size: 80%;
  font-weight: normal;
  margin: 1em;
}

#about.hide {
  animation-name: fadeout;
  animation-duration: 1s;
  opacity: 0;
  display: none;
  visibility: hidden;
  position: absolute;
  height: 0px;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
    height: 100px;
    visibility: visible;
  }

  to {
    opacity: 0;
    height: 0px;
    visibility: hidden;
  }
}


/* Standard syntax */
@keyframes fadeout {
  from {
    opacity: 1;
    height: 100px;
    visibility: visible;
  }

  to {
    opacity: 0;
    height: 0px;
    visibility: hidden;
  }
}



#notes_row textarea {
  margin: 0.25em 0.25em;
  height: calc(var(--rowheight) - 0.5em);
  width: 80%;
  box-sizing: border-box;
  font-size: 75%;
  min-height: 2.5em;
}

#notes_row {
  margin-bottom: var(--rowmargins);
}


.ob_noteslabel {
  font-size: 80%;
  width: auto !important;
}




/* 
*********************************************
Screen @media switchers
*********************************************
*/

@media only screen and (min-width: 651px) {

  #ob_main,
  #patient_page {
    margin: 0 0.5em;
    /*width: 70vw;padding-left: 15vw;*/
    flex: 0 0 var(--fixedwidth);
  }

  #about {
    width: calc(1.2 * var(--fixedwidth));
  }

  footer {
    display: none;
  }
}

/* in between sizes */
@media only screen and (min-width: 450px) and (max-width: 650px) {
  main {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: var(--navheight);
    /* to account for footer */
  }

  #page_ob main {
    width: var(--fixedwidth);
  }

  #about {
    right: 1em;
  }

  footer {
    display: flex;
  }
}


/* For smaller screens, or mobile touch device */
@media only screen and (max-width: 450px),
screen and (max-width: 450px) and (pointer: coarse) {

  :root {
    --navheight: var(--navheightflex);
    --navimgsize: var(--navimgflex);
    --rowheight: var(--rowheightflex);
    --rowmargins: var(--rowmarginsflex);
  }

  body {
    font-size: calc(var(--fontscale) * 5vw);
  }


  ins.adsbygoogle {
    width: auto;
    overflow: hidden;
  }

  main {
    /*padding-top: var(--navheightflex);*/
    margin: 0;
    padding-bottom: var(--navheight);
    /* to account for footer */
  }

  #ob_main,
  #patient_page {
    width: 100%;
  }

  #about {
    display: none;
  }

  footer {
    display: flex;
  }

}


.lastmod {
  font-size: 60%;
  color: #556;
}



/* PATIENTS style stuff */


/* #pt_table {
	width: 100%;
} */


.ptdisplay {
  width: 100%;
  border-collapse: collapse;
}


.ptdisplay td {
  box-shadow: inset 0 0 0.1em 0.01em var(--otherfg);
  text-align: center;
  vertical-align: middle;
  /* line-height: 1.2em; */
  word-wrap: break-word;
  white-space: normal;
  padding: 0.25em;
}



tr.pt_delivered td.pt_date::after {
  /* color: var(--delcolor); */
  background: url("../img/icon_babyface.svg");
  content: " ";
  display: inline-block;
  position: relative;
  background-size: 100% 100%;
  height: 1.2em;
  width: 1.2em;
  vertical-align: middle;
  margin-left: 0.1em;

}



td.pt_type {
  font-size: 76%;
}

.ptrow {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.ptrow div {
  display: flex;
  border: 0.01em solid var(--otherfg);
}

.pt_notes {
  text-align: center;
  position: relative;
  background: url("../img/icon_list.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1em;
  cursor: pointer;
}


td.pt_del {
  background: url("../img/trash.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1em;
  width: 1.2em;
  cursor: pointer;
  /* visibility: var(--hidetrash);
   display: table-cell; */
  display: var(--hidetrash);
}


td#pt_delall {
  /* display: block; */
  margin-top: 1em;
  cursor: pointer;
  line-height: 2.5em;
  /* visibility: var(--hidetrash);
  display: table-cell; */
  display: var(--hidetrash);
}

td#pt_delall::after {
  content: "_";
  background: url("../img/trash.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1em;
  width: 1.2em;
  display: inline-block;
}



td.pt_save {
  background: url("../img/icon_import.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1em;
  width: 1.2em;
  cursor: pointer;
}


.ptlist_header {
  font-size: 90%;
}

.ptlist_header th {
  white-space: nowrap;
  height: 1.3em;
  line-height: 1.3em;
  text-align: center;
}

/* https://yoksel.github.io/url-encoder/ */
tr.ptlist_header th.clickable::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 2.6458334 2.6458334'%3E%3Cg transform='translate(214.18882,-59.032711)' id='layer1'%3E%3Cpath d='' id='path817' /%3E%3C/g%3E%3C/svg%3E");
  line-height: 1em;
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.2em;
}


tr.ptlist_header th.clickable._rev::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 2.6458334 2.6458334'%3E%3Cg transform='translate(214.18882,-59.032711)' id='layer1'%3E%3Cpath d='m -212.8659,61.296833 -1.12499,-1.94854 h 2.24998 z' style='opacity:1;fill:%23ffffff;fill-opacity:1;fill-rule:evenodd;stroke:%23ffffff;stroke-width:0.13225767;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' id='path817' /%3E%3C/g%3E%3C/svg%3E");
  line-height: 1em;
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.2em;
}


tr.ptlist_header th.clickable._fwd::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 2.6458334 2.6458334'%3E%3Cg transform='translate(214.18882,-59.032711)' id='layer1'%3E%3Cpath d='m -212.8659,59.414422 -1.12499,1.94854 h 2.24998 z' style='opacity:1;fill:%23ffffff;fill-opacity:1;fill-rule:evenodd;stroke:%23ffffff;stroke-width:0.13225767;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' id='path817' /%3E%3C/g%3E%3C/svg%3E");
  line-height: 1em;
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.2em;
}


#ptlistconsent em {
  font-style: normal;
}

#ptlistconsent ul {
  margin-top: 0;
}

.hide {
  display: none;
}

/* }{ FIX THIS -- each popnote needs to be unique. Multiple popnoes should be allowed */

pre.popnote_popup {
  white-space: break-spaces;
}


.popnote_popup {
  display: block;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  width: 65%;
  max-height: 55%;
  top: 25%;
  background: var(--lightrowbg);
  color: var(--lightrowfg);
  z-index: 1100;
  font-weight: normal;
  padding: 0.5em;
  overflow-y: auto;
  box-shadow: inset 0 0 0.5em;
  resize: both;
}

.popnote_popup b {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5em;
}

.popnote_popup a {
  color: var(--menufg);
  text-decoration: underline;
}

.popupclose {
  position: absolute;
  text-align: center;
  right: 0.1em;
  top: 0.1em;
  font-size: 65%;
  background-color: var(--navbg);
  border: none;
  padding: 0.4em 0.6em;
  cursor: pointer;
  user-select: none;
}


.popnote_popup::-webkit-scrollbar {
  width: 0.75em;
  background: var(--menubg);
}

.popnote_popup::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0.1em var(--navbg);
  box-shadow: inset 0 0 0.1em var(--navbg);
}

.popnote_popup::-webkit-scrollbar-thumb {
  background-color: var(--lighterrowbg);
}

.popnote_popup#cookieconsent {
  top: auto;
  bottom: 0.25em;
  width: 90%;
  height: auto;
  overflow: hidden;
  line-height: 65%;

}

.popnote_popup#cookieconsent span {
  font-size: 90%;
  line-height: 1em;
}


.popup_yes,
.popup_no {
  border: solid 0.1em var(--navbg);
  background: var(--lighterrowbg);
  border-radius: 0.5em;
  padding: 0.25em 1em;
  box-shadow: none;
  animation: buttonpulse 1.5s alternate infinite;
}

@keyframes buttonpulse {
  0% {
    box-shadow: none;
  }

  /* h-offset v-offset blur spread color */
  100% {
    box-shadow: 0 0 0.5em 0.5em var(--active)
  }

  /* 100% {box-shadow:none;} */
}


.popup_no {
  background: var(--lightrowbg);
  animation: none;
}

.popup_yes:hover {
  background: var(--menubg);
}

.popup_no:hover {
  background: var(--menuhover);
}

.popup_yes:active {
  background: var(--active);
}




#floatbutton {
  position: fixed;
  right: 0.5em;
  bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  font-size: 70%;
  display: block;
  height: 3em;
  width: 3em;
}



#floatbutton span {
  margin-left: 0.5em;
}



#patient_page {
  font-size: 90%;
  font-family: serif;
}


#panel_import {
  margin-bottom: 1em;
}

#panel_import h3 {
  margin-top: 0;
}



/*#savept::after,*/
#saveptname {
  content: var(--updatename);
  position: absolute;
  display: inline-block;
  margin-left: 0.2em;
  font-size: 95%;
  color: var(--menufg);
}




/* FIXED POSITION BOTTOM MENU if small screen */

@media only screen and (max-width: 650px) {

  #buttonpart {
    position: fixed;
    bottom: 0;
    background: var(--navbg);
    z-index: 1000;
  }

}


#quickhelp,
#closehelp {
  position: fixed;
  top: calc(0.25 * var(--btnsize));
  right: calc(1.25 * var(--btnsize));
  height: calc(0.5 * var(--btnsize));
  width: calc(0.5 * var(--btnsize));
  margin: auto;
  border: none !important;
  background-size: cover;
  background-color: transparent !important;
}

#closehelp {
  font-size: 70%;
  background-image: url('../img/icon_close.svg');
}

#quickhelp {
  background-image: url('../img/icon_quickhelp.svg');
}



/*
https://stackoverflow.com/questions/43938860/how-to-tint-image-with-css#43938944
 Adjust icon colors according to preferences
old::

img, .pt_notes, .pt_del, .pt_save, .pt_delivered .pt_date::after, tr.ptlist_header, th.clickable::after 

.btn img, .pt_notes img, .pt_del img
{
filter: hue-rotate(calc((var(--basecolor) - 240) * 1deg)) saturate(calc((var(--saturation) * 100%))) brightness(var(--darkness));
}

img[src*="obwheel"][src$=".svg"] {
filter: saturate(calc((var(--saturation) * 100%))) brightness(var(--darkness));
}

/* */

img[src*="icon_"][src$=".svg"],
.pt_notes,
.pt_date::after,
#quickhelp,
#closehelp {
  filter: hue-rotate(calc((var(--basecolor) - 240) * 1deg)) saturate(calc((var(--saturation) * 100%))) brightness(var(--darkness));
}


/* External link */

a[href^="http"] {
  /* :not([href*="#"]) {*/
  text-decoration: underline;
  position: relative;
}


/*
a[href^="http"]:not([href*="#"])::after {
	content: "*";
	position: absolute;
	font-size:70%;
	top:-0.4em;
}

/* * /

a[href^="http"]:not([href*="#"]):not(.imghref)::after {
	position: relative;
	display:inline-block;
	height: 0.6em;
	width: 0.6em;
	margin-bottom: 0.4em;
	margin-left:0.1em;
	content: " ";
	mask-size:0.6em;
	mask-image: url("../img/externalplain.svg");
	background-color:var(--linkcolor);
}

/* */

span[title] {
  border-bottom: dotted 0.13em;
  cursor: help;
}



/* #resetbtn, #savept { */
#buttonpart>div {
  width: var(--navheight);
  height: var(--navheight);
}

#submenubox {
  --btnsize: var(--navheight);
}

@media only screen and (hover: hover) {
  /* Keyboard shortcuts assistance */

  .keycuts #extramenu a,
  .keycuts #buttonpart>div {
    position: relative;
  }

  .keycuts *::before {
    background: var(--menufg);
    color: white;
    position: absolute;
    z-index: 5;
    font-size: calc(var(--navheight)/3);
    --keysize: 1.1em;
    height: var(--keysize);
    width: var(--keysize);
    line-height: var(--keysize);
    border-radius: var(--keysize);
    display: block;
    opacity: 0;
    /* vertical-align: middle; */
    text-align: center;
    top: 0.15em;
    right: 0.15em;
    /*	text-transform: capitalize;*/
  }


  .keycuts #calcaption::before {
    content: "#";
  }

  .keycuts #calmonthheader::before {
    content: "m";
  }

  .keycuts #savept::before {
    content: "s";
  }

  .keycuts #resetbtn::before {
    content: "r";
  }

  .keycuts #submenubox::before {
    content: "f";
  }

  .keycuts #float_delivery::before {
    content: "d";
  }

  .keycuts #delbtn::before {
    content: "z";
  }


  .keycuts #float_share::before {
    content: "";
  }


  .keycuts #float_ptlist::before {
    content: "p";
  }

  .keycuts #ptlist::before {
    content: "p";
  }



  .keycuts #menubtn::before {
    content: "\\";
  }

  .keycuts #btn_us::before {
    content: "u";
  }

  .keycuts #btn_ivf::before {
    content: "i";
  }

  .keycuts #btn_crl::before {
    content: "c";
  }

  .keycuts #lmp_label::before {
    content: "l";
  }

  .keycuts #conception_label::before {
    content: "1";
  }

  .keycuts #tri2_label::before {
    content: "2";
  }

  .keycuts #tri3_label::before {
    content: "3";
  }

  .keycuts #edd_label::before {
    content: "d";
  }

  .keycuts #tm_date::before {
    right: 20%;
    content: "t";
  }


  .keycuts #tm_arrow::before {
    content: "w";
  }


  .keycuts #ega_box::before {
    content: "e";
  }

  .keycuts .ob_noteslabel::before {
    content: "n";
    right: -25%;
  }

  .keycuts #cycle_label::before {
    content: "y";
  }


  .keycuts.flashhints *::before {
    animation: helpfade 6s linear;
    opacity: 0;
  }


  .keycuts.showhints *::before {
    opacity: 1;
  }

}

/* @media only screen and (hover: hover) */

#delbtn {
  position: absolute;
  top: 0;
  right: 0.5em;
  width: var(--rowheight);
  background: url("../img/icon_babyface.svg") no-repeat center;
  background-size: calc(0.9 * var(--rowheight));
  filter: saturate(0) brightness(0.5);
  opacity: 0;
  pointer-events: none;
  transition: var(--animspeed);
  transition-property: opacity, filter;
}

#delbtn.enable {
  pointer-events: all;
  opacity: 1;
  filter: none;
  cursor: pointer;
}



/* #resetbtn, #savept, #ptlist { */
#buttonpart>div {
  position: relative;
}

#resetbtn::after {
  content: "reset";
}

#savept::after {
  content: "save";
}

#ptlist::after {
  content: "list";
}

#editlist::after {
  content: "edit";
}

#export_all::after {
  content: "export";
}

#importbtn::after {
  content: "import";
}

#ptmenu_gomain::after {
  content: "main";
}





/* #resetbtn::after, #savept::after, #ptlist::after { */
#buttonpart>div::after {
  position: absolute;
  display: inline-block;
  margin-left: 0.2em;
  font-size: 95%;
  background: var(--menufg);
  color: white;
  z-index: 5;
  --keysize: 1.1em;
  height: var(--keysize);
  line-height: var(--keysize);
  border-radius: var(--keysize);
  padding: calc(var(--keysize) * 0.5);
  vertical-align: middle;
  text-align: center;
  top: 0.15em;
  right: calc(-0.6 * var(--btnsize));
  animation: helpfade 10s linear;
  opacity: 0;
  pointer-events: none;
}

#ptlist::after {
  right: calc(0.6 * var(--btnsize));
}

@keyframes helpfade {
  0% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


img#menuburger,
img.menuburger {
  background: var(--navbg);
  border-radius: 0.5em;
}



/* ---------------- GENERALIZED CSS ---------------- */
/* ---------------- GENERALIZED CSS ---------------- */
/* ---------------- GENERALIZED CSS ---------------- */
/* ---------------- GENERALIZED CSS ---------------- */


nav,
.circlemenu,
.floatingcal {
  font-weight: bold;
  font-family: Arial, sans-serif;
}



em {
  font-style: italic;
  font-weight: bold;
}


main {
  display: block;
  position: relative;
  font-size: 90%;
  line-height: 1.25em;
  /* font-family: serif; */
  /* font-weight: normal; */
  padding-left: 1em;
  padding-right: 1em;
  color: var(--otherfg);
  margin-bottom: 3em;
}

#page_ob main {
  font-family: sans-serif;
  font-weight: bold;
  padding-left: 0;
  padding-right: 0;
}



div.twocol {
  /*	https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ */
  /*	AUTOMATIC COLUMNS! */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  /*auto auto;*/
  grid-column-gap: 1em;
  margin-right: 0;
  margin-left: 0;
  justify-content: space-around;
}

div.twocol>div:not(.card) {
  display: grid;
}


div.card {
  /*	box-shadow: inset 0 0 0.7em 0.07em var(--lightrowbg);*/
  border: solid 0.07em var(--lightrowbg);
  border-radius: 2em;
  padding: 1.6em;
  position: relative;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  line-height: 1.5em;
}

div.card ul {
  margin-top: 0.1em;
}

div.card>div {
  margin-top: 0.2em;
  margin-bottom: 0.35em
}

div.card>div::first-letter {
  /* font-size: 125%; */
  position: relative;
  /* margin-left: 0.25em; */
  /*	text-shadow: 0 0 0.3em var(--navbg),
					0 0 1em var(--navbg);*/
}




div.card h3 {
  display: inline-block;
  font-size: 110%;
  font-weight: bold;
  /*	box-shadow: 0 0 0.2em 0.05em var(--lightrowbg);*/
  box-shadow: 0 0 1em 0.25em var(--otherbg);
  border-radius: 0.4em;
  padding: 0.12em 0.25em;
  margin: 0;
  position: absolute;
  left: 1.5em;
  top: -0.75em;
  /*	font-family: serif;, headingfont;*/
  font-family: "Times New Roman", serif;
  background: var(--otherbg);
  text-shadow: 0 0 0.3em var(--navbg),
    0 0 1em var(--navbg);
}

div.card h3::after {
  all: unset;
}




main>div:not(.card) {
  /*	box-shadow: inset 0 0 0.7em 0.07em var(--lightrowbg);*/
  /* border: solid 0.07em red; */
  /* border-radius: 2em; */
  /* padding: 1.6em; */
  position: relative;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  line-height: 1.35em;
}

img.badge {
  --badgesize: min(200px, 8em);
  height: var(--badgesize);
  width: var(--badgesize);
}




/* ---------------- PAGE-specific CSS ---------------- */
/* ---------------- PAGE-specific CSS ---------------- */
/* ---------------- PAGE-specific CSS ---------------- */
/* ---------------- PAGE-specific CSS ---------------- */


/* #page_help #welcome img {*/
#page_help ul li img,
#page_about ul li img {
  height: 1.5em;
  width: 1.5em;
  margin-right: 0.5em;
  vertical-align: middle;
}


#page_settings input {
  background-color: var(--lightrowbg);
  color: var(--lightrowfg);
}

#page_settings input::placeholder {
  font-size: 80%;
  color: var(--menufg);
}

#page_settings input:focus {
  background: var(--lighterrowbg);
}


#page_settings #dateformat {
  width: 17em;
  padding-left: 0.5em;
}


#page_settings input[type="password"] {
  width: 10em;
}


#page_settings .slider {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

#page_settings #prefs button {
  width: 8em;
  text-align: center;
  padding: 0.2em;
}

#page_settings .checkbox label {
  display: table;
  position: relative;
  padding-left: 1.5em;
  margin-top: 0.35em;
  cursor: pointer;
  font-size: 80%;
  line-height: 1em;
  user-select: none;
}


#page_settings label:hover {
  background-color: var(--navbg);
}

#page_settings .checkbox input {
  display: none;
}

#page_settings .checkbox label span {
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
  background-color: #eee;
}


#page_settings .checkbox label span::after {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  width: 0.22em;
  height: 0.45em;
  border: solid white;
  border-width: 0 0.1em 0.1em 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

#page_settings .checkbox input+label:hover span {
  background-color: #ccc;
}

#page_settings .checkbox input:checked+label span {
  background-color: var(--navbg);
}

#page_settings .checkbox input:checked+label span::after {
  display: block;
}


div.disabled {
  filter: saturate(10%) brightness(50%);
  pointer-events: none;
}

#page_settings .checkbox input:not(:checked)+label~label {
  pointer-events: none;
  filter: saturate(10%) brightness(0.6);
}

#page_settings span.info {
  font-size: 80%;
}


#page_settings #prefs>div {
  margin-top: 2em;
}


#page_settings #fontscale_num {
  width: 3em;
}



select,
button {
  font-size: 70%;
}


#page_help div.instruct img {
  display: block;
  margin: 0.5em auto;
}

/* min(150px, 8em);*/
#page_contact .badge {
  width: min(150px, 8em);
  height: min(150px, 8em);
}

#buymebeer {
  height: 3em;
  width: 9em;
}

#page_patients #aboutptlist-notreally {
  /* KEEP THIS AS "rem" */
  position: fixed;
  bottom: 0.6rem;
  left: 0.6rem;
  cursor: pointer;
  color: var(--menufg);
  height: 1.5rem;
  width: 1.5rem;
  text-align: center;
}

#page_patients #aboutptlist {
  /* KEEP THIS AS "rem" */
  position: relative;
  cursor: pointer;
  color: var(--menufg);
  height: 1.5rem;
  width: 1.5rem;
  text-align: center;
  margin-top: 1em;
}


#page_changelog #oldstuff {
  color: #aaa;
}

#page_changelog h3 {
  font-size: 110%;
  margin: 1.5em 0 0;
}


#page_changelog li {
  margin-top: 0.25em;
  margin-bottom: 0;
}

#page_changelog h3 a {
  color: var(--otherfg);
}

#page_changelog h3 a:hover::after {
  content: " #";
}


/* Using visibility is ok because 
menu items are positioned absolutely,
plus gethelp is at the end of the list */
#gethelp {
  visibility: hidden
}

#page_ob #gethelp,
#page_settings #gethelp,
#page_patients #gethelp {
  visibility: visible;
}



#page_404 span.breakoff {
  animation: breakoff linear infinite 8s;
  position: absolute;
  transform-origin: 80% 85%;
  /*	-webkit-text-stroke: 1px red;*/
}



body#page_ob {
  background: black;
}


#mainoverlay {
  position: fixed;
  background: var(--otherbg);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transition: opacity var(--animspeed);
  pointer-events: none;
  opacity: 0;
  display: block;
}


.formula .eq {
  overflow-x: auto;
}



.downloadapp {
  text-align: center;
  float: right;
  max-width: 7em;
  margin-right:1em;
  padding: 1em;
  border:solid 1px var(--navbg);
  border-radius: 0.5em;
}

.downloadapp:hover {
  border-color:var(--active);
}


#kbdhelp {
  white-space: pre-wrap;
  font-size: 80%;
  column-count: 2;
  column-rule: solid #222 0.2em;
}


#promiseprompt {
  position: fixed;
	z-index:1001;
  top: 10em;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  padding: 0.2em 1em 0.5em;
  border: 1px solid var(--menubg);
  background: var(--otherbg);
  line-height: 1.25em;
  width: min(calc(var(--fixedwidth)*0.70),70vw);
  border-radius: 0.5em;
}

#promisetext {
  text-align: left;
  margin-bottom: 0.75em;
}

#promiseprompt input {
  background: var(--lightrowbg);
  color: var(--bodybg);
  /* margin: 0.5em 0; */
  padding: 0.1em 0;
  width:100%;
}


#promiseprompt #promisebtns {
  text-align: right;
}

#promisebtns button {
  margin: 0.25em;
  border: none;
  background: transparent;
  color: var(--otherfg);
  font-size: 90%;
  transition: all var(--animation);
  border-radius: 0.2em;
  padding:0.2em;
}

#promisebtns button:hover {
  background: var(--bordercolor);
}

#promisebtns button:active {
  background: var(--active);
}

  

/* For narrow screens */
@media only screen and (min-width: 651px) {
  #page_ob main {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    background: black;
  }
}


@media only screen and (max-width: 300px) {
  #page_help div.instruct img {
    width: 100%;
  }
}

@media all and (display-mode: standalone) {
  #getapp {
    display: none;
  }
}




@keyframes breakoff {
  0% {
    opacity: 1
  }

  20% {
    opacity: 1;
    transform: rotate(0deg);
  }

  20.5% {
    opacity: 0;
  }

  21% {
    opacity: 0;
  }

  21.5% {
    opacity: 1;
  }

  22% {
    opacity: 0.8;
  }

  22.5% {
    opacity: 0.5;
  }

  23% {
    opacity: 1;
  }

  23.5% {
    opacity: 0.2;
  }

  24% {
    opacity: 0;
  }

  24.5% {
    opacity: 0.8;
  }

  25% {
    opacity: 0;
    transform: rotate(8deg);
  }

  26% {
    opacity: 1;
  }

  27% {
    opacity: 0.2;
  }

  28% {
    opacity: 0.8
  }

  29% {
    opacity: 1
  }

  30% {
    opacity: 0.5;
    transform: rotate(15deg);
  }

  32.5% {
    transform: rotate(210deg);
  }

  35% {
    transform: rotate(150deg);
  }

  37.5% {
    transform: rotate(200deg);
  }

  40% {
    transform: rotate(160deg);
  }

  42.5% {
    transform: rotate(200deg);
  }

  45% {
    transform: rotate(165deg);
  }

  47.5% {
    transform: rotate(190deg);
  }

  50% {
    transform: rotate(170deg);
  }

  52.5% {
    transform: rotate(180deg);
  }

  55% {
    transform: rotate(175deg);
  }

  57.5% {
    opacity: 0.5;
    transform: rotate(180deg);
  }

  60% {
    opacity: 0.5;
  }

  63% {
    opacity: 0;
    transform: translate(0, 95vh) rotate(180deg)
  }

  70% {
    opacity: 0;
    transform: none;
  }

  90% {
    opacity: 0.1
  }

  91% {
    opacity: 0.3;
  }

  91.5% {
    opacity: 0;
  }

  92% {
    opacity: 0.5;
  }

  92.5% {
    opacity: 1;
  }

  93% {
    opacity: 0.6;
  }

  93.5% {
    opacity: 0.2;
  }

  94% {
    opacity: 0.7;
  }

  94.5% {
    opacity: 0;
  }

  95% {
    opacity: 0.6;
  }

  95.5% {
    opacity: 0.9;
  }

  96% {
    opacity: 1;
  }

  97% {
    opacity: 0.6;
  }

  98% {
    opacity: 0.5;
  }

  99% {
    opacity: 0.9
  }

  100% {
    opacity: 1
  }
}