/* Consistent font throughout */
* {
 font-family: 'Source Sans Pro', sans-serif;
}

/* Padding for user optin enclosing tds to seperate one option from next */
.optionrowpadding {
	padding-bottom:0.5em;
}

/* styling for all labels attached to options */
.optionlabel,
.optionlabeldisabled {
    text-align: left;
    border-radius: 4px;
    padding: 1px 4px;
}

.optionlabel {
    color: var(--bs-body-color);
}

.optionlabeldisabled {
    color: var(--bs-secondary-color);
}

/* Reports */
.warning {
	border: 1px solid #aaaaaa;
	background: #cccccc url(warning.png) 50% 50% repeat-x;
	color: white;
	font-weight: bold;
}

.subheading {
	border: 1px solid #aaaaaa;
	background: #cccccc url(subheading.png) 50% 50% repeat-x;
	color: white;
	font-weight: bold;
}

.sectionheading {
	border: 1px solid #aaaaaa;
	background: #cccccc url(sectionheading.png) 50% 50% repeat-x;
	color: white;
	font-weight: bold;
}

html {
    position: relative;
}

/* Required for sticky footer */
html {
  height: 100%;
}

/* Header image size */
.headerimage {
	width: 389px;
}

/* Required for sticky footer, apply this class to body tag */
.remote {
  display: flex;
  flex-direction: column;
  height:97%;
}

/* Required for sticky footer */
footer {
  margin-top: auto;
  width:100%;
}

/* Footer divider */
.footer {
	background: #cccccc url(subheading.png) 50% 50% repeat-x;
	width:100%;
	height:1px;

}

/* Footer divider content */
.footercontent {
	width:100%;
    height:50px;
    text-align:center
}

/** Actual link within footer */
.footerlink {
    padding-right:4px;

}

/* Charts */
.canvasjs-chart-credit {
   display: none;
}

#basefolder {
	width:40ch;
}

#subfolder {
	width:40ch;
}


/* Used square rather than round bullets */
ul {
    list-style-type: square;
}

 /* Style the options tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the options tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Debugging
table, th, td {
   border: 1px solid black;
}
*/
.indentedmultiselect {
    padding-left: 50pt;
}

/* Remote:Error Message Font Colour */
.error {
	color:#FF0000;
	font-weight: bold;
}

/* Remote:Info Message Font Colour */
.success {
	color:#4192f4;
	font-weight: bold;
}

/* Idented when depends on checkobox being enabled */
.indentedtextfield {
    text-indent: 2.0em;
}

.indentedtextfield3 {
    text-indent: 3.0em;
}

/*
Ident start page content
*/
.startcontentindent {
    padding-left: 2.0em;
}

.combo {
	vertical-align: text-top;
	min-width: 20ch;
}

/*
When displays multiple rows(doesnt on mobile)
*/
.showmultiselect {
	min-width:50ch;
}


/*
When displays single row(doesnt on mobile)
*/
.showsingleselect {
	min-width:30ch;
}

/*
When can actually select multiple
*/
.multiselect {
	min-width:20ch;
}

/* Align label vertically to top matches top of multivalue combo */
.combolabel {
	vertical-align:top;
}


#folder {
	width:80ch;
}

.licenseinputfield {
	max-width:50ch;
}

/* Delete Criteria orderable list
*/
.delete_criteria ul {
  padding-left: 0;
  width: 40ch;
  list-style-type: none;
  border: 1px solid darkgray;
  vertical-align:top;
  overflow-y:auto;
}

.delete_criteria li {
  padding: 2px 4px;
}

.delete_criteria li.selected {
  color: HighlightText;
  background-color: Highlight;
}


/* Delete AudioFormat orderable list
*/
.delete_audioformat ul {
  padding-left: 0;
  width: 40ch;
  list-style-type: none;
  border: 1px solid darkgray;
  vertical-align:top;
  height:15ex;
  overflow-y:auto;
}

.delete_audioformat li {
  padding: 2px 4px;
}

.delete_audioformat li.selected {
  color: HighlightText;
  background-color: Highlight;
}

/*
To ensure consistent width text buttons
*/
.text_button {
    width:25ch;
}

/*
Smaller button at side to better support mobile
*/
.side_text_button {
    width:8ch;
    white-space: nowrap;
}

/** Grey out labels as well as disabling input fields themselves*/
.label_disabled {
    color:grey;
}


/** Set labels back to default when reneabling input fields */
.label_enabled {
    color;
}

.genre_grey_list {
	width:50ch;
	height:20em;
}

/**
Edit Songs
*/
.verysmallinputfield {
	min-width:3ch;
}

.smallinputfield {
	min-width:10ch;
}

.mediuminputfield {
	min-width:20ch;
}

.largeinputfield {
	min-width:40ch;
}

.verylargeinputfield {
	min-width:80ch;
}

#dropzone {
	background-image: url("images/dropzone.jpg");
  border: 3px solid black;
  min-width:300px;
  min-height:100px;
  max-width:300px;
  max-height:100px;
}

#dropzone.dragover {
  background: rgba(0, 0, 0, .5);
}




#res {
}

.largeartwork{
    display: flex;
     flex-wrap: wrap;
}

.largeartwork img {
	width:200px;
	height:200px;
	border: 3px solid grey;
	object-fit: contain;
}

[data-bs-theme="light"] {
    --songkong-header-bg: #e8eef5;
    --songkong-header-color: #212529;
    --songkong-header-border: #cbd5df;
}

[data-bs-theme="dark"] {
    --songkong-header-bg: #283746;
    --songkong-header-color: #f0f2f4;
    --songkong-header-border: #435364;
}

.songkong-table-header {
    --bs-table-bg: var(--songkong-header-bg);
    --bs-table-color: var(--songkong-header-color);
    --bs-table-border-color: var(--songkong-header-border);
}

.songkong-card-header {
    background-color: var(--songkong-header-bg);
    color: var(--songkong-header-color);
    border-color: var(--songkong-header-border);
}

[data-bs-theme="dark"] .jstree-hovered,
[data-bs-theme="dark"] .jstree-clicked {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .jstree-wholerow-hovered {
    background: #465a72 !important;
}

[data-bs-theme="dark"] .jstree-wholerow-clicked {
    background: #5a708d !important;
}

.extraWhitespace {
    white-space: pre;
    background-color: #ffcccc;
}

:root,
[data-bs-theme="light"] {
    --songkong-inconsistency-0: transparent;
    --songkong-inconsistency-1: rgba(245, 192, 5, 0.30);
    --songkong-inconsistency-2: rgba(245, 192, 5, 0.60);
    --songkong-inconsistency-3: rgba(245, 192, 5, 0.70);
}

[data-bs-theme="dark"] {
    --songkong-inconsistency-0: transparent;
    --songkong-inconsistency-1: #f07800;
    --songkong-inconsistency-2: #ff8a00;
    --songkong-inconsistency-3: #ff9f1a;
}

:root,
[data-bs-theme="light"] {
    --songkong-match-excellent: #198754;
    --songkong-match-good: rgba(25, 135, 84, 0.30);
    --songkong-match-warning: rgba(245, 192, 5, 0.60);
    --songkong-match-poor: rgba(220, 53, 69, 0.45);
}

[data-bs-theme="dark"] {
    --songkong-match-excellent: #198754;
    --songkong-match-good: rgba(25, 135, 84, 0.55);
    --songkong-match-warning: #f07800;
    --songkong-match-poor: #8f3f45;
}
.songkong-match-excellent {
    background-color: var(--songkong-match-excellent) !important;
    color: white;
}

.songkong-match-good {
    background-color: var(--songkong-match-good) !important;
}

.songkong-match-warning {
    background-color: var(--songkong-match-warning) !important;
}

.songkong-match-poor {
    background-color: var(--songkong-match-poor) !important;
}

.artwork-figure .figure-caption {
    color: var(--bs-table-color);
}