@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

:root {
  --table-head-height: 2.6em;
}

.disabled {
  pointer-events: none;
}

.error {
  display: block;
  color: red;
  margin: 0 0 .2em 0;
}

/* overview page */

#logo {
  display: inline-block;
  font-size: 2em;
  line-height: .65em;
  height: 28px;
  /* text-decoration inconsistent across browsers */
  /*text-decoration: underline !important;*/
  border-bottom: 2px solid #3366ff;
}

.logopic {
  margin-bottom: 0em;
}

.logopic img {
  display: block;
  width: 30px;
  float: left;
  margin-right: 5px;
}

.logopic div {
  color:#ffe596;
  line-height: 68px;
  float: left;
  
}

.logopic a, .logopic a:visited {
  color:#ffe596;
  text-decoration: underline !important;
  text-decoration-color: #3366ff !important;
}

.subtitlediv {
  font-size: .8em;
  padding: 0 0 0 2.3rem;
}

body.setlists {
    overflow-x: hidden;
	color: #e2e2e2;
	background-color: #777;
}

#heaven {
    font-family: freemonobold;
    line-height: .73em;
}

@-moz-document url-prefix() {
    #heaven {
        line-height: .73em;
    }
}

#linkstable a {
  color: #fafafa;
  text-decoration: none;
}

.numbercount {
    color:#000;
}

.listinfo-date {
  font-size: 1em;
}

/* li inconsistent across devices
   so we have to use a table instead
*/

#linkstable {
  position: fixed;
  top: 6.04em;
  /*border-top: 1px solid red;*/
  font-size: 1.49em;
  width: auto;
  border-collapse: collapse;
  margin: 0 0 0 .8em;
  float: left;
  clear: both;
}

#linkstable thead {
  border-bottom: 2px solid #3f3f3f;
}

#linkstable th {
  color: #fafafa;
  background: transparent;
}

.linkmark {
	display: block;
	position: absolute;
	left: -.27em;
	top: .65em;
	right: 0;
	background-color: #f80;
	width: .9em;
	height: .9em;
	margin: .3em 0 0 .3em;
	border-radius: 50%;
}

th .linkmark {
  top: .1em;
}

.linkmark.dark {
  background-color: #3b3b3b;
}

#linkstable th {
  line-height: 1.5em;
  border: none;
  padding: 0 0 .6em 0;
}

#linkstable th:nth-child(2) {
  padding: 0 0 .6em .6em;
  text-align:left;
}

#linkstable th a {
    color: #eee;
}

#linkstable th .numbercount {
    color: #404040;
}

#linkstable td {
  padding: .6em 0 0 0;
}

#linkstable td:nth-child(1) {
  position:relative;
  vertical-align:top;
  width:.9em;
}

#linkstable td:nth-child(2) {
  padding: .6em 0 0 .6em;
}

/* define absolute font size for body to (hopefully) prevent browser irregularities */
body {
  width: 100%;
  font-family: 'tex_gyre_adventor';
  font-size: 16px;
  padding: 0;
  margin: 0px;
  background-color: #f7f7f7;
}

a.comment-indicator:hover + comment { background:#ffd; position:absolute; display:block; border:1px solid black; padding:0.5em;  } 
a.comment-indicator { background:red; display:inline-block; border:1px solid black; width:0.5em; height:0.5em;  } 
comment { display:none;  }

#titlenumbercount {
  font-weight: normal;
  color:#444;
}

body.dark #titlenumbercount {
  color:#ddd;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

/* em, strong and b point to different subfoundries */
em {
   font-weight: normal;
   font-style: italic;
}

.table-cell-overflow {
    max-width: 100px;
}
.table-cell-nowrap {
    overflow-x: hidden;
    white-space: nowrap;
}

#listinfo {
  margin: 0 0 0 .9em;
  max-width: 70vw;
}
input {
  display: block;
	padding: 0;
	margin: 0 .6em 0 0;
	font-size: 1.5em;
	width: 1.3em;
	height: 1.3em;
	background-color: #e5e5e5;
	border: 2px solid #aaa;
	border-radius: 50%;
}
input.plus {
  line-height: 1.2em;
  float:right;
  clear:none;
}
input.minus {
  line-height: .3;
  margin: 0 .9em 0 0;
  float:right;
  clear:none;
}
#zoombuttoncontainer {
  position: absolute;
  right: 0;
  top: 0;
  margin: .7em 0;
}

.dark input {
    color: #fff;
    background-color: #3a3c3d;
    border-color: #727272;
}

#header {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1;
}

#subhead {
    position: relative;
    width: 100vw;
    height: 3.4em;
    background-color: #f7f7f7;
    overflow-y: hidden;
    border-bottom: 1px solid #909090;
}

.dark #subhead {
    background-color: #2d2e30;
    border-bottom: 1px solid #727272;
}

#pagehead {
    color:#ffe596;
    background-color:#777;
    width: 100%;
    margin:0;
    padding: 0;
    height: 9em;
}

#pagehead h1 {line-height: 2em; margin-top: 0; margin-left: 20px;}
#pagehead h3 {line-height: 1.9em; margin-left: 20px;}

.padder {
  padding: 1rem;
}

@media only screen and (max-width: 1000px) {
  .padder {
    padding: .8rem;
  }
  body.setlists {
    font-size: .9em;
  }
}

.titlediv {
  float: left;
  clear: none;
  padding: 0;
  color:#ffe596;
}

.buttoncontainer {
  float: right;
  clear: none;
  padding: 0;
}

.missing {
  color: #FF4411;
}

.dark .nodata {
  color: #c2c2c2;
}

.nodata {
  color: #909090;
}

.fontawesome {
  font-family: FontAwesome;
}

/* lightbox better on bigger screens */
/*
a.plain { display: none;}
a.popup { display: inline;}
*/

@media only screen and (max-width: 1000px) {
	
	/* lightbox not working very good on small screens */
	/*
	a.plain { display: inline;}
	a.popup { display: none;}
	*/
	
	thead:has(th:nth-last-child(n + 5)) {
		color: red !important;
	}

	body.playlist {
		font-size: .9em;
	}

	
	#toggletheme #togglemanual {
	  border: 2px solid #909090;
	}
}

.headerbutton {
    display: block;
    margin: 0 0 1em 0;
    padding: 0;
    cursor: pointer;
    height: 1.5em;
    width: 5em;
    text-align: center;
    line-height: 1.4em;
    font-weight: bold;
    color: #ddd;
    border: 2px solid #aaa;
    border-radius: 1.1em;
}

.langbutton {
    display: block;
    margin: 0 0 1em 0;
    padding: 0;
    cursor: pointer;
    height: 1.5em;
    width: 5em;
    text-align: center;
    line-height: 1.4em;
    color: #ddd;
    border: 2px solid #aaa;
    border-radius: 1.1em;
}

.langbutton a, .langbutton a:visited {
  color: #ddd;
  text-decoration: none ;
}

#loginbutton {
    color: #ddd;
}

.formbutton {
    display: block;
    position: sticky;
    float: left;
    cursor: pointer;
    bottom: .5em;
    padding: 0;
    font-size: 1em;
    font-weight: 600;
    margin: .5em;
    background-color: #444;
    color: #eee;
    width: 5em;
    height: 1.5em;
    border: 2px solid #aaa;
    border-radius: 1.3em;
}

#cancelupdate {
  float: right;
}

#getnumbers a {
  color: #ddd;
}

#getnumbers a:visited {
  color: #fff;
}

#masterform {
  position: relative;
  width: auto;
  border: 1px solid #333;
  margin-top: 0;
  background-color: #444;
  color: #eee;
}

#masterform.mobile {
  display: block;
  float: left;
  clear: both;
  width: auto;
  height: auto;
  background-color: transparent;
  border: none;
}

#selectnumbers {
  display: block;
  margin: 0;
  font-weight: bold;
  background-color: #444;
  color: #eee;
  text-align: left !important;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

#selectnumbers::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

#selectscroll {
  height: calc(100vh - 5em);
  overflow-y: scroll;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

#selectscroll::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    /*padding-top: 100px;*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
}

/* Modal Content */
.modal-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: transparent;
    margin: auto;
    padding: 0;
}

.mobile #selectnumbers {
  display: block;
  margin: 0 0 1em 0;
  float:left;
  width: 5.7em;
  height: 1.8em;
  border: 2px solid #909090;
  border-radius: 1em;
  text-align-last: center;

  background: -webkit-linear-gradient(white, #666);
  border: 1px solid #ccc;
  color: white;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  -webkit-appearance: none;
}

.mobile option {
    font-size: 16px;
}

#pageurl-hidden {
    display: none;
}

#pagehead .col1 {
  float:left;
  margin-right: 1em;
}

#pagehead .col2 {
  float:right;
}

label {
  display: block;
}

.modal {
  display: none;
}

#toggletheme {
	color: #fff;
	border: 2px solid #bbb;
	background-color: #555 !important;
}

#toggletheme.dark {
	color: #333;
	border: 2px solid #fff;
	background-color: #cdcdcd !important;
}

#togglemanual {
    color: #fff;
}

body.dark {
	color: #f9f8f5;
	background-color: #2d2e30;
}

#sortmybody.dark {
	color: #dfdfdf;
	background-color: #2d2e30;
}
#sortmybody.dark tr:nth-child(even) {
	background-color: #3a3b3c;
}
#sortmybody.dark a {
	color: #7FAFFF;
}
#sortmybody.dark a:visited {
	color: #7FAFFF;
}
#sortmybody.dark .mp3link {
	color: #7FAFFF;
}
#sortmybody.dark .red {
	color: #FF6828;
}
#sortmybody.dark td {
	border-color: #606060;
}
#sortmybody.dark tr.sorting-row td {
	background-color: #33597f;
}
#sortmybody.dark tr.sorting-row td a {
	color: #7FAFFF;
}
#sortmybody.dark tr.sorting-row td a:visited {
	color: #7FAFFF;
}
#sortmybody.dark .highlighted > td {
    background-color: #323E53;
}
#sortmybody.dark .border-highlight > td {
    border-bottom: 1px solid #7FAFFF;
}

#sortMe.dark th {
	color: #ccc;
	background-color: #3a3c3d;
	border-color: #727272;
}
#sortMe.dark th.ascending {background-color: #55595a !important; color: #ffe596 !important; border-color: #909090 !important; }
#sortMe.dark th.descending {background-color: #55595a !important; color: #ffe596 !important; border-color: #909090 !important; }
#sortMe.dark th.ascending:before { content: "▲\00a0"; font-family: freemonoregular; color: #08E733 !important; vertical-align: top; }
#sortMe.dark th.descending:before { content: "▼\00a0"; font-family: freemonoregular; color: #FF6024 !important; vertical-align: top; }

/* end dark theme */

/* drag&drop table */
.dragcolumn {
    color: black !important;
    text-decoration: underline;
}

.dark .dragcolumn {
    color: white !important;
    text-decoration: underline;s
}

.draghandle {cursor: ns-resize;}

td.draghandle {

}

#sortmybody .draghandlemark {
	display: block;
	position: absolute;
	right: .2em;
	top: 50%;
	transform: translate(0, -70%);
	background-color: #F82;
	width: 1.6em;
	height: 1.6em;
	margin: .3em 0 0 .3em;
	cursor: ns-resize;
	border-radius: 50%;
	text-align: center;
	color: #fff;
}

#sortmybody.dark .draghandlemark {
    color: #000;
    background-color: #FF8717;
}

#sortmybody .manually.moved .draghandlemark {color: #fff; background-color: #0EC716;}
#sortmybody .moved .draghandlemark {color: #fff; background-color: #2495DF; /* darkish blue */ }

#sortmybody.dark .manually.moved .draghandlemark {color: #000; background-color: #1DE42C;}
#sortmybody.dark .moved .draghandlemark {color: #000; background-color: #359CF9; /* lighter blue */ }

/*.manual { border: 2px solid #F93 !important; color: #fff !important; background-color: #F28012;}*/
.manual { border-color: #BBB !important; color: #fff !important; background-color: #555; }
.manual.save { border-color: #1DE42C !important; background-color: #0EC716; }


#sortmybody tr.sorting-row td {background-color: #bfdff3;}
#sortmybody tr.sorting-row td a { color: #003488; }
#sortmybody tr.sorting-row td a:visited { color: #003488; }

/****************************************************/

#title td {
	padding-left: 1.3em;
}

#sortmybody td { border-bottom: 1px solid #e5e5e5; padding: .3em .2em .2em;  }		
#sortmybody tr:nth-child(even) {
	background-color: #f4f4f4;
}
#sortmybody td:nth-child(6) {
	padding-right: .6em;
}
#sortmybody td:nth-child(4) {
	padding-left: .4em;
}
#sortmybody td:nth-child(5) {
	padding-left: .4em;
}
#sortmybody a {
	color: #205ff4;
}
#sortmybody a:visited {
	color: #205ff4;
}
#sortmybody .red {
	color: #CC0000;
}
#sortmybody .mp3link {
	color: #205ff4;
	cursor: pointer;
}
#sortmybody .highlighted > td {
    background-color: #e4ecf8;
}
#sortmybody .border-highlight > td {
    border-bottom: 1px solid #205ff4;
}

#sortMe th {
    top: 0;
    position: sticky;
    margin: 0;
	padding: 0 .3em;
    background-color: #eee;
    color: #555;
    border-top: 2px solid #909090;
    border-bottom: 2px solid #909090;
    border-left: 1px solid #909090;
    border-right: 1px solid #909090;
    line-height: var(--table-head-height);
    z-index: 1;
    cursor: pointer;
    text-align: center;
}

#sortMe tr {
  scroll-margin: calc( var(--table-head-height) + 3px ) 0;
}

#sortMe td {
  margin: 0;
}

#sortMe {
    /*
     * Gve 2024-09-08
     * try setting initial table display to none to speed up rendering
     * try inline first
     */
    width: 100%;
    border: 0;
	margin: 0 0 3px 0;
    border-collapse: separate;
    border-spacing: 0;
	/* fishing for some 2D/3D acceleration */
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
}

#scrollwrapper {
    position: fixed;
    top: 12.4em;
    height: calc(100vh - 12.4em);
    width:100%;
    margin: 0;
    overflow-x: auto;
}

#sortMe th.nosort { cursor: auto;}

#sortMe th:before { content: "◇\00a0"; font-family: freemonoregular; vertical-align: top; }
#sortMe th.nosort:before { content: none; }

th.ascending {background-color: #fff !important; color: #333 !important; border-color: #666 !important; }
th.descending {background-color: #fff  !important; color: #333 !important; border-color: #666 !important; }
#sortMe th.ascending:before { content: "▲\00a0"; font-family: freemonoregular; color: #04C010; vertical-align: top; }
#sortMe th.descending:before { content: "▼\00a0"; font-family: freemonoregular; color: #EF3808; vertical-align: top; }

#loadingcontainer {
	display: none;
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
	max-width: 1410px;
	background-color: #fff;
	opacity: .5;
}

#loadingpos {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#loading {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/*** Firefox 121 PDF Viewer Dark Theme for userContent.css ***/
/*

    These rules are from
    resource://pdf.js/web/viewer.css or
    https://searchfox.org/mozilla-release/source/toolkit/components/pdfjs/content/web/viewer.css
    Lines within:
    @media (prefers-color-scheme: dark) {}

 */
[mozdisallowselectionprint] > body {
  --main-color:rgb(249 249 250);
  --body-bg-color:rgb(42 42 46);
  --progressBar-color:rgb(0 96 223);
  --progressBar-bg-color:rgb(40 40 43);
  --progressBar-blend-color:rgb(20 68 133);
  --scrollbar-color:rgb(121 121 123);
  --scrollbar-bg-color:rgb(35 35 39);
  --toolbar-icon-bg-color:rgb(255 255 255);
  --toolbar-icon-hover-bg-color:rgb(255 255 255);
  --sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
  --sidebar-toolbar-bg-color:rgb(50 50 52);
  --toolbar-bg-color:rgb(56 56 61);
  --toolbar-border-color:rgb(12 12 13);
  --button-hover-color:rgb(102 102 103);
  --toggled-btn-color:rgb(255 255 255);
  --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
  --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
  --dropdown-btn-bg-color:rgb(74 74 79);
  --separator-color:rgb(0 0 0 / 0.3);
  --field-color:rgb(250 250 250);
  --field-bg-color:rgb(64 64 68);
  --field-border-color:rgb(115 115 115);
  --treeitem-color:rgb(255 255 255 / 0.8);
  --treeitem-bg-color:rgb(255 255 255 / 0.15);
  --treeitem-hover-color:rgb(255 255 255 / 0.9);
  --treeitem-selected-color:rgb(255 255 255 / 0.9);
  --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
  --thumbnail-hover-color:rgb(255 255 255 / 0.1);
  --thumbnail-selected-color:rgb(255 255 255 / 0.2);
  --doorhanger-bg-color:rgb(74 74 79);
  --doorhanger-border-color:rgb(39 39 43);
  --doorhanger-hover-color:rgb(249 249 250);
  --doorhanger-hover-bg-color:rgb(93 94 98);
  --doorhanger-separator-color:rgb(92 92 97);
  --dialog-button-bg-color:rgb(92 92 97);
  --dialog-button-hover-bg-color:rgb(115 115 115);
  --loading-icon:url(images/loading-dark.svg);
  --editor-toolbar-bg-color:#2b2a33;
  --editor-toolbar-fg-color:#fbfbfe;
  --editor-toolbar-border-color:#2b2a33;
  --editor-toolbar-hover-bg-color:#52525e;
  --editor-toolbar-active-bg-color:#5b5b66;
  --editor-toolbar-focus-outline-color:#0df;
  --alt-text-tooltip-bg:#1c1b22;
  --alt-text-tooltip-fg:#fbfbfe;
  --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
  --dialog-bg-color:#1c1b22;
  --dialog-border-color:#1c1b22;
  --dialog-shadow:0 2px 14px 0 #15141a;
  --text-primary-color:#fbfbfe;
  --text-secondary-color:#cfcfd8;
  --focus-ring-color:#0df;
  --hover-filter:brightness(1.4);
  --textarea-bg-color:#42414d;
  --radio-bg-color:#2b2a33;
  --radio-checked-bg-color:#15141a;
  --radio-checked-border-color:#0df;
  --button-cancel-bg-color:#2b2a33;
  --button-save-bg-color:#0df;
  --button-save-fg-color:#15141a;
}
/*** END PDF Viewer DARK THEME ***/

html {
  padding: 0;
  visibility: visible;
  opacity: 1;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}