/* 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 {
    color: black;
    text-align: left;
    border-radius: 4px;
    padding: 1px 4px;
}

/* styling for all labels attached to options when option has been disabled*/
.optionlabeldisabled {
    color: grey;
    text-align: left;
    border-radius: 4px;
    padding: 1px 4px;
}

/* 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;
}

/* Style the options tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* 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;
}

/* Readonly text fields associated with multiselectbox */
.readonlytextinfo {
	width:100ch;
}

/* 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;
}

/* ReadOnly, but to look like disabled */
.readonlyinput {
  border: 1px solid #ccc;
  background-color: #eee;
  color: #555;
}

#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 beter support mobile
*/
.side_text_button {
    width:8ch;
}

/** 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 {
	width:3ch;
}

.smallinputfield {
	width:10ch;
}

.mediuminputfield {
	width:20ch;
}

.largeinputfield {
	width:40ch;
}

.verylargeinputfield {
	width:80ch;
}

.fieldadded {
	background-color:#ffffcc
}

.fieldedited {
	background-color:#ccffcc
}

.fielddeleted {
	background-color:#fa573c
}

#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;
}