:root {
  --search-input-background: transparent;
  --search-input-text: #ffffff;
  --search-input-placeholder: #757575;
  --search-input-border: #cacaca;
  --search-input-search-btn: #333333;
  --search-input-clear-btn: #cc0000;
  --search-suggestion-box-title: #333333;
  --search-suggestion-box-item-background: #f4f4f4;
  --search-suggestion-box-item-text: #333333;
  --search-suggestion-box-item-hover-background: #dbdbdb;
  --search-suggestion-box-item-hover-text: #333333;
  --search-result-background: #f4f4f4;
  --search-result-text: #333333;
  --accordion-title-background: transparent;
  --accordion-title-text: azure;
  --accordion-title-hover-background: #fc4e46;
  --accordion-title--hover-text: #000000;
  --accordion-content-background: #140808;
  --accordion-content-text: inherit;
  --accordion-content-background-found: red;
  --accordion-content-text-found: #f4f4f4;
  --accordion-btn-all-background: #ff2233;
  --accordion-btn-all-text: #333333;
  --accordion-btn-all-hover-background: #dbdbdb;
  --accordion-btn-all-hover-text: #333333;
  --accordion-btn-pagination-background: #f4f4f4;
  --accordion-btn-pagination-text: #333333;
  --accordion-btn-pagination-hover-background: #dbdbdb;
  --accordion-btn-pagination-hover-text: #333333;
  --accordion-btn-pagination-active-background: #dbdbdb;
  --accordion-btn-pagination-active-text: #333333; }

.as-d-none {
  display: none !important; }

.as-cursor-pointer {
  cursor: pointer; }

.as-cursor-not-allowed {
  cursor: not-allowed !important; }

.as .as-search-container {
  display: flex;
  position: relative;
  margin-bottom: 10px; }
  .as .as-search-container .as-search__input {
    padding: 7px 65px 10px 30px;
    border: 1px solid var(--search-input-border);
    border-radius: 55px;
    background: var(--search-input-background);
    outline: 0;
    width: 80%;
	margin: auto;
	  transition:ease all 1s;
}

    .as .as-search-container .as-search__input::placeholder {
      color: var(--search-input-placeholder); }
  .as .as-search-container .as-search__search_btn,
  .as .as-search-container .as-search__clear_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
  .as .as-search-container .as-search__clear_btn {
    right: 15px;
    cursor: pointer; }
  .as .as-search-container .as-search__search_btn {
    right: 40px; }

.as .as-search-result {
  margin-bottom: 10px;
  background: var(--search-result-background);
  color: var(--search-result-text);
  padding: 10px 35px 10px 10px;
  border-radius: 30px;
	text-align:center;
}

.as .as-search__input:hover {
	background-color:#1f0000;
	animation:searching 7s infinite;
}

.as .as-search-suggestion-box {
  margin-bottom: 5px;
  display: none; 
/*	display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;*/ }
  .as .as-search-suggestion-box .as-search-suggestion-box__title {
    color: var(--search-suggestion-box-title);
    margin-top: 5px; }
  .as .as-search-suggestion-box .as-search-suggestion-box__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .as .as-search-suggestion-box .as-search-suggestion-box__items > * {
      margin-top: 5px;
      margin-left: 10px;
      padding: 5px 10px;
      border-radius: 25px;
      text-align: center;
      color: var(--search-suggestion-box-item-text);
      background: var(--search-suggestion-box-item-background);
      transition: background 200ms linear;
      cursor: pointer; }
      .as .as-search-suggestion-box .as-search-suggestion-box__items > *:hover {
        color: var(--search-suggestion-box-item-hover-text);
        background: var(--search-suggestion-box-item-hover-background); }

.as .as-accordion + .as-accordion {
  margin-top: 10px; }
.as .as-accordion.as-accordion-pagination-hide {
  display: none !important; }
.as .as-accordion .as-accordion__title {
    background: var(--accordion-title-background);
    color: var(--accordion-title-text);
    cursor: pointer;
    border-radius: 0;
    transition: background 200ms linear;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #773535;
    display: grid;
    grid-template-columns: 44% 15% 39%;
    gap: 1rem;
    /* padding: 1% .75% 0 2%; */
    /* color: #fefefe; */
}


section.songs> h2 {
    width: 90%;
    display: grid;
    grid-template-columns: 38% 15% 40%;
    text-align: left;
}

/*------------ACCORDION H2 STYLES FOR ALBUM LISTING ON DISCOGRAPHY/music.html PAGE--assign class name albumgrid to each section-----START-------*/
.as .as-accordion .as-accordion__title.albumgrid {grid-template-columns: auto 30% 15%;}
/*------------ACCORDION H2 STYLES FOR ALBUM LISTING ON DISCOGRAPHY/music.html PAGE--------END------*/


.as .as-accordion .as-accordion__title:hover {
    background: var(--accordion-title-hover-background);
    color: black;
}
  .as .as-accordion .as-accordion__title > .as-accordion__title-icon {
    margin-right: 10px; display:none;}
.as .as-accordion .as-accordion__content {
  margin-top: 0;
  padding: 10px 20px;
  background: var(--accordion-content-background);
  color: var(--accordion-content-text);
  border-left: solid 2px #773535;
  border-right: solid 2px #773535;
border-bottom: solid 2px #773535; 
width: 90%;
margin: 0 auto;
}

.album-list-spacing .as-accordion__content {
width: 100% !important;
}

.voicespace{padding: 2rem 7rem;}

.as-accordion__content {padding: 1em 7em 2em;}
.as-accordion__content h3{
	display: block;
	text-align: center;
	margin-top: 1em;
	color:#e57373;}
.as-accordion__content ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	line-height: 2em;
	padding:1em 7em 2em;
	list-style:none;}
.as-accordion__content li{color:white; padding:0;}
.as-accordion__content li::before{
			content:'';background-image:url("../../../../images/icons/icon_song-spacer.svg");
			background-size:8px 8px; 
			padding:1em; 
			background-repeat: no-repeat; 
			vertical-align: baseline;
			background-position: center;
		}
.as-accordion__content ul li.song{position: relative;left: -50%; }

.as .as-accordion mark {
  background: var(--accordion-content-background-found);
  color: var(--accordion-content-text-found);
  border-radius: 25px;
  padding: 2px 10px; }

.as .as-accordion-pagination,
.as .as-accordion-btn-all {
  display: none;
/*	display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 10px 10px 10px;*/ 
}
  .as .as-accordion-pagination > *,
  .as .as-accordion-btn-all > * {
    margin: 5px 0 0 0;
    text-align: center;
    border-radius: 50%;
    padding: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background 200ms linear;
    display: flex;
    align-items: center;
    justify-content: center; }

.as .as-accordion-btn-all > * {
  background: var(--accordion-btn-all-background);
  color: var(--accordion-btn-all-text); }
  .as .as-accordion-btn-all > *:hover {
    background: var(--accordion-btn-all-hover-background);
    color: var(--accordion-btn-all-hover-text); }
.as .as-accordion-btn-all .as-accordion-btn-all__open,
.as .as-accordion-btn-all .as-accordion-btn-all__close {
  display: flex;
  align-items: center;
  justify-content: center; }
.as .as-accordion-btn-all .as-accordion-btn-all__open {
  margin-right: 10px; }

.as .as-accordion-pagination {
  margin-top: 5px; }
  .as .as-accordion-pagination > * {
    background: var(--accordion-btn-pagination-background);
    color: var(--accordion-btn-pagination-text); }
    .as .as-accordion-pagination > *.as-accordion-pagination__active {
      background: var(--accordion-btn-pagination-active-background);
      color: var(--accordion-btn-pagination-active-text); }
    .as .as-accordion-pagination > *:hover {
      background: var(--accordion-btn-pagination-hover-background);
      color: var(--accordion-btn-pagination-hover-text); }
    .as .as-accordion-pagination > * + * {
      margin-left: 10px; }

@keyframes searching{
	0%{background:#1f0000;}
	10%{background:#773535;}
	25%{background: #773535;}
	50%{background: #1f0000}
	25%{background: #773535;}
	100%{background: #1f0000;}
}

/* For Mobile Portrait View */
@media screen 
	and (max-width: 767px) 
    and (orientation: portrait) {
		.as .as-accordion .as-accordion__title {
			grid-template-columns: auto;
			padding:1% .75% 3% 2%
		}
		.as-accordion__content ul {padding: 1em 2em 2em;}
		
	section.songs> h2{
		grid-template-columns: auto !important;
		padding: 2% 2% 3% 2%;
		gap: 0;
	}
	
}



/* For Mobile Landscape View */
@media screen 
	and (min-width: 600px)
	and (max-width: 900px)
	and (orientation:landscape) {
		
		section.songs> h2 {
		grid-template-columns: auto !important;
		text-align: center;
		}
}