@primary-color: #880000;
@primary-color-highlight: #AA0000;

:root{
    --background-color: rgb(21,22,23);
    --primary-color: rgba(61, 97, 6, 0.94);
    --primary-color-highlight: rgba(64, 98, 13, 0.94);
    /*--primary-color-highlight: #954bffff;*/
    --secondary-color: rgba(50, 79, 6, 0.8);
    --secondary-color-highlight: rgba(63, 101, 6, 0.8);
    --tertiary-color: rgba(42, 65, 6, 0.67);
    --quaternary-color: rgba(34, 52, 6, 0.67);
    --menu-item-color: rgb(150, 148, 147);
    --menu-item-color-highlight: #726f6a;
    --menu-text-color: #8b8988;
    --menu-text-color-highlight: #726f6a;
    --area-color: rgb(21, 22, 23);
    --border-color: rgb(93, 87, 77);
    --text-color: #acaaa8ff;
    --text-color-hightlight: #f50000ff;
    --upBtn-color: rgb(33, 103, 13);
    --upBtn-color-highlight: rgb(13, 94, 34);
    --upBtn-color-disabled: rgb(50, 59, 43);;
    --downBtn-color: rgb(130, 13, 13);
    --downBtn-color-disabled: rgb(51, 41, 41);
    --downBtn-color-highlight: rgb(148, 147, 146);
    --plusBtn-color: rgb(26, 13, 106);
    --plusBtn-color-highlight: rgb(47, 37, 105);
    --plusBtn-color-disabled: #3d3757ff;;
}

html{
    font-family: Arial;
    height: 100% !important;
}

body {
    height: 100% !important;
    background-image: url("../img/background.svg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: auto;
    background-color: var(--background-color);
    color: var(--text-color);
}
input, button {
    border-color: #48433c;
    color: #8b8988;
    background-color: #141516;
}
div.postlabel {
	text-align: left;
}
div.labeled-item {
	text-align: right;
}
.upbtn {
  background-color: var(--upBtn-color); /* Blue background */
  border: none; /* Remove borders */
  color: var(--text-color); /* Grey text */
  padding: 3px 5px; /* Some padding */
  font-size: 1em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}
.upbtn-disabled {
	background-color: var(--upBtn-color-disabled);
  border: none; /* Remove borders */
    color: var(--text-color); /* Grey text */
  padding: 3px 5px; /* Some padding */
  font-size: 1em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

.upbtn:disabled {
	background-color: var(--upBtn-color-disabled);
}
.upbtn:hover:disabled {
	background-color: var(--upBtn-color-disabled);
}
/* Darker background on mouse-over */
.upbtn:hover {
  background-color: var(--upBtn-color-highlight);
}
.downbtn {
  background-color: var(--downBtn-color); /* Blue background */
  border: none; /* Remove borders */
  color: var(--text-color); /* Grey text */
  padding: 3px 5px; /* Some padding */
  font-size: 1em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

.downbtn-disabled {
  background-color: var(--downBtn-color-disabled);
  border: none; /* Remove borders */
  color: var(--text-color); /* Grey text */
  padding: 3px 5px; /* Some padding */
  font-size: 1em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.downbtn:hover {
  background-color: var(--downBtn-color-highlight);
}
.downbtn:disabled {
	background-color: var(--downBtn-color-disabled);
}
.downbtn:hover:disabled {
	background-color: var(--downBtn-color-disabled);
}

div.dance-group {
	display: flex;
}

.plusbtn {
  background-color: var(--plusBtn-color); /* Blue background */
  border: none; /* Remove borders */
  color: var(--text-color); /* Grey text */
  padding: 3px 5px; /* Some padding */
  font-size: 0.8em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}
.plusbtn-disabled {
  background-color: var(--plusBtn-color-disabled);
  border: none; /* Remove borders */
  color: var(--text-color); /* Grey text */
  padding: 3px 5px; /* Some padding */
  font-size: 0.8em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

.plusbtn:disabled {
	background-color: var(--plusBtn-color-disabled);
}
.plusbtn:hover:disabled {
	background-color: var(--plusBtn-color-disabled);
}
/* Darker background on mouse-over */
.plusbtn:hover {
  background-color: var(--plusBtn-color-highlight);
}

.addbtn {
  background-color: #654bff; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 3px 5px; /* Some padding */
  font-size: 1em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}
.addbtn-disabled {
	background-color: #ac9eff;
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 3px 5px; /* Some padding */
  font-size: 1em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

.addbtn:disabled {
	background-color: #ac9eff;
}
.addbtn:hover:disabled {
	background-color: #ac9eff;
}
/* Darker background on mouse-over */
.addbtn:hover {
  background-color: #513ccc;
}

.add-input-group {
	display: none;
/* 	visibility: hidden; */
}

.content {
    text-align: center;
    background:var(--tertiary-color);
    display: block;
    overflow: auto;
    min-height: 100% !important;
}

/* MENU */
/* Style the button that is used to open and close the collapsible content */
.menubutton {
    background-color: var(--secondary-color);
    color: var(--menu-text-color);
    cursor: pointer;
    padding: 1em;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1em;
}
.menubutton:hover {
    color: var(--menu-text-color-highlight);
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
    background-color: var(--secondary-color);
}

/* Style the collapsible content. Note: hidden by default */
.menu {
    padding: 0 18px;
    position: absolute;
    display: none;
    overflow: hidden;
    background-color: var(--secondary-color);
    font-size: 1em;
    z-index: 100;
}

.menuitem {
    padding: 1em;
}

.menuitem a {
    text-decoration: none;
    color: var(--menu-item-color)
}
.menuitem a:hover {
    text-decoration: none;
    color: var(--menu-item-color-highlight)
}

.menutitle {
    font-weight: bold;
}

.th {
    font-weight: bold;
}
.td {
    display: flex;
    text-align: left;
}
.danceName {
    padding-left: 10px;
}
.tr {
    padding: 1em 0;
}
.tr.even {
    background: var(--tertiary-color)
}
.tr.odd {
    background: var(--quaternary-color)
}

.mobile-desc {
    padding-right: 5px;
}

#item-table {
    display: none;
    /*margin: 1%;*/
    border: 1px solid var(--border-color);
    margin-top: 2em;

}
.row.tr {
    margin-left: 0px;
    margin-right: 0px;
}
.field-group {
    display: flex;
    padding: 0.5em;
}

.label {
    padding-right: 5px;
    text-align: right;
}

#bpm-feedback {
    display: block;
    height: 3em;
}

.tagging-group {
    padding: 20px;
}

#beat_button {
    font-size: 2em;
}

#contributions, #dance_scores, #band_scores, #stats {
    margin-bottom: 2em;
    margin-left:auto;
    margin-right:auto;
    border-style: solid;
}
h1.title {
    margin-top: 1em;
}
#contributions {
    margin-top: 2em;
}
th {
    border-bottom: 2px solid var(--border-color);
}
th, td {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 5px 10px;
}
tr:nth-child(even) {background: var(--tertiary-color)}
tr:nth-child(odd) {background: var(--background-color)}

@media(min-width:992px){
    .content {
        width:80%;
        margin:0 auto;
    }

    .menu {
        background-color: var(--primary-color);
        color: var(--menu-item-color);
        cursor: pointer;
        padding: 1em;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 1em;
        display: flex;
        position: relative;
        overflow: visible;
    }

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .collapsible:hover {
        background-color: var(--secondary-color);
    }

    /* Style the collapsible content. Note: hidden by default */
    div.menu-group {
        display: block;
    }
    .menu-group {
    	margin: 0px 10px 0px 0px ;
        padding: 0 18px;
        display: none;
        overflow: hidden;
       /*background-color: var(--primary-color);*/
        font-size: 1em;
    }

    .menuitem{
    	margin: 0px 5px 0px 5px;
    }

    .menutitle {
        background-color: var(--primary-color);
        color: var(--menu-text-color);
        cursor: pointer;
        padding: 1em;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 1em;
    }
    .menutitle:hover {
        background-color: var(--primary-color-highlight);
        color: var(--menu-text-color-highlight);
    }
    .menuselection {
        padding: 0 18px;
        position: absolute;
        display: none;
        overflow: hidden;
        background-color: var(--secondary-color);
        font-size: 1em;
    }

    .tagging-group {
        padding: 10px;
    }

    #beat_button {
        font-size: 1.5em;
    }

}
div.language-list {
    text-align: left;
}
div.language-selection {
    margin-left: 1em;
    display: list-item;
}
div#dance_score {
    display: none;
}
div#band_score {
    display: none;
}
div.title {
    font-size: 2em;
}
input#dance, input#official {
    height: 1.5em;
}
div.input {
    text-align: left;
}
.audio-group {
    text-align: left;
}
button.subject-button {
    height: 4em;
    background-color: var(--secondary-color);
    border: 2px solid var(--primary-color);
    margin: 0.5em 0px 2px 0.5em;
}

.subject-button:hover {
    background-color: var(--secondary-color-highlight);
}
div.detail-url, div.detail-description, div.detail-image {
    width: 100%;
    padding: 0.5em;
    box-shadow: 5px 5px 10px #444444;
}
div.detail-image.empty {
    padding-top: 70%; /* 1:1 Aspect Ratio */
    position: relative;
    background-color: #dddddddd;
}
div.detail-image {
    background-color: var(--secondary-color);
}
.detail-description {
    background-color: var(--secondary-color);
    height: 100%;
    box-shadow: 5px 5px 10px #444444;
}
div#image-col, div#descr-col {
    margin-bottom: 1em;
}
.empty-text {
    position: absolute;
    top: 45%;
    left: 0;
    bottom: 0;
    right: 0;
}
div.detail-url {
    margin-top: 1em;
    background-color: var(--secondary-color);
}
.empty {
    cursor: pointer; /* Mouse pointer on hover */
}
.url-input, .description-input {
    width: 100%;
    height: 100%;
}
.subcontainer {
    height: 100%;
    padding: 0.5em;
}
.detail-description-text {
    background-color: #fff;
    height: 100%;
    text-align: left;
    padding: 5px;
}
a.detail-url {
    display: inline-block;
    width: 100%;
    background-color: var(--area-color);
}
img.detail-image {
    width: 100%;
}
div.box {
    border: 1px solid var(--border-color);
    background-color: var(--area-color);
    padding: 2em;
}
div.error-message {
    margin: 2em;
}
div.note {
    font-size: 0.5em;
}
a.internal-link {
    font-style: normal;
    font-weight: bold;
    color: var(--text-color);
}
div#count {
    font-size: larger;
}
span.accent {
    font-weight: bold;
}
div.login-message {
    font-weight: bold;
    color: #be2626;
}
.spotify-icon, .spotify-icon-inline, .spotify-icon-inline2 {
    height: 2em;
}
.spotify-icon-inline {
    position: absolute;
    bottom: 0;
}
.spotify-icon-inline2 {
    position: absolute;
    bottom: 0.3em;
}
.musicbrainz-icon, .musicbrainz-icon-inline {
    height: 2em;
}
.musicbrainz-icon-inline {
    position: absolute;
    bottom: 0;
}
div.subdiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2em;
}
div#video-container {
    display: none;
}