/*//////////style from template beginning//////////*/

* {
  box-sizing: border-box;
}

body {
  /*background-color: #f1f1f1;*/
  background-color: Bisque;
  padding-left: 20px;
  padding-right: 20px;
  font-family: Arial;
   margin:0;
 /* margin-top: 0; */ 
 /* overflow-x: hidden;*/
  
}

/* Center website */
.main {
 /* max-width: 1000px; */
 
   background-color:  DodgerBlue;  

   /* margin: auto;*/
 
}

/*
h1 {
  font-size: 50px;
  word-break: break-all;

}
*/

/*

.row {
  margin: 10px -16px;
  
min-height: 100%;  
  
}




/* Add padding BETWEEN each column 
.row,
.row > .column {
  padding: 8px;
}


*/



/* Create three equal columns that floats next to each other */
.column {
  float: left;
  /*width: 33.33%;*/
  width: 24.99999%;
  
    background-color: orange;


  
  /*display: none; /* Hide all elements by default */
}


/*

/* Clear floats after rows
.row:after {
  content: "";
  display: table;
  clear: both;
}

*/




/* Content */
.content {
  background-color: lightgreen;
  padding: 10px;


/*min-height: 180px;*/

 
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
  border-radius: 5px;


}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

/*//////////style from template end//////////*/



#header {
  
  background-color: yellow;

 position: sticky;
  top: 0;
  z-index: 999;


 
}


#title {
  font-size: 60px;
  font-weight: bolder;
  color: #04AA6D;
  /*-webkit-text-stroke: 1px black; /* width and color, makes outline */
}


#home_info_button {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  
  background-color: #04AA6D;
  border-radius: 5px;
  border: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 6px 10px;
  color: white;
  cursor: pointer;
}


#home_info_button_icon {
  font-size: 20px;
  font-weight: bold;   
  padding-right: 4px;
  vertical-align: -2px;;
}

#home_info_button:hover, #home_info_button:active {
    background-color: #059862;
}


#cart-div {
  background-color:purple;    
  width: 100%;
  display: inline-block;
}

#cart-container {
  background-color:green;
  position:relative;
/*  left: 800px;*/
  cursor: pointer;
  display: inline-block;
float: right;
right:100px;
  /*scale: 0.7;*/
  /*background-repeat: no-repeat;*/

 

}


#cart-icon {
  font-size: 40px;    
  color: blue;
    
}


#cart-count {
  /*font-size: 20px;*/
 /*font-size: calc(.8vw + .8vh);*/
 font-size: 16px;
  font-weight: bold;
  color: white;
  position: absolute;
  bottom: 26px;
  left: 24px;

 
  border-radius: 50%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
/*height: 60%;*/
height: 50%;
/*width: 20%;*/
width: auto;
/*max-height: 40%;*/
min-width: 50%;

            /*padding-bottom: 20%;*/
/* padding: 5px;  */

  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 5px;




}





/*
#cart-image {
    
  background-color: white;
  width:78px; height: 54px;
  -webkit-mask-image: url('images/cart_icon_trans.png');  
  mask-repeat: no-repeat;

}

*/

#cart-text {
  position: absolute;
  bottom: 5px;
  left: 40px;
  font-size: 14px;
  font-weight: bolder;
  color: white;
}


#buttons_and_search_container {
background-color: red;    
overflow: auto;

  
}

#buttons_container {
background-color: #BDB76B;
float: left;   
margin-right: 10px;
}



#search_input_container {
 background-color: lightblue;
 display: inline-block;
 vertical-align: -2px;


 
}

#searchInput {
  /*padding: 5px 40px 5px 15px;*/
  padding: 5px 0px 5px 15px;
  border: 2px solid lightgray;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  height: 30px;
  outline: none;
  float: left;
  border-right: none;


}

#searchInput:focus {

 
}


#searchInputButton {

  padding: 4px 10px;
  border: 2px solid lightgray;
  background: white;
  font-size: 17px;
  height: 30px;
  cursor: pointer;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-left: none;

}


#searchInputResults {
  background-color: white;    
  border-top: 2px solid white;
  border-right: 2px solid lightgray;
  border-bottom: 2px solid lightgray;
  border-left: 2px solid lightgray;
  position: absolute;
  width: 260px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-left: 12px;

}


.search_result_div {
  border: 1px solid white;    
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
 

}

.search_active {
  background-color: red;    
  border-left: 5px solid #04AA6D;   
    
}

/* did with javascript instead
.search_result_div:hover {
  background-color: pink;    
    
    
}
*/




/*  /// this was causing the divs to go outside edge
.gridview {
  margin: 10px -16px;

}
*/



/* Add padding BETWEEN each column
.gridview,
.gridview > .column {
  padding: 10px;
}
 */

.column {
  padding: 10px;
}



/* Clear floats after rows */ 
.gridview:after {
  content: "";
  display: table;
  clear: both;
}




.iframe_container {
  background-color: pink;   


/*min-height: inherit;*/


  position: relative;
  padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ /* https://faq.dailymotion.com/hc/en-us/articles/360022841393-How-to-preserve-the-player-aspect-ratio-on-a-responsive-page#:~:text=In%20the%20CSS%20for%20the,56.25%25%20%3D%2016%3A9.*/
  cursor: pointer;

}


.thumbnail {
  height: 100%;
  width: 100%;    

  position: absolute;

}

.iframe {
  height: 100%;
  width: 100%;
  
  position: absolute; 

}


.song_title_container {
  text-transform: capitalize;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: bold;
  color:red;
}


.audio_price_title {
  padding-right: 4px;    
  padding-bottom: 4px;   
    
}


.sheet_price_title {
  padding-right: 4px;    
    
}

.audio_add_to_cart_button_container {
  padding-bottom: 4px;    
  background-color: pink;
  color:red;
}


.sheet_add_to_cart_button_container {
    
    
}


.audio_add_button {
  background-color: #04AA6D;
  border-radius: 5px;
  border: none;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  /*padding: 6px 18px;*/
  color: white;
  cursor: pointer;        
    
}

.audio_add_button:hover, .audio_add_button:active {
    background-color: #059862;
}


.sheet_add_button {
  background-color: #04AA6D;
  border-radius: 5px;
  border: none;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
 /* padding: 6px 18px;*/
  color: white;
  cursor: pointer;        
    
}

.sheet_add_button:hover, .sheet_add_button:active {
    background-color: #059862;
}



/*//////////////////////cart page ////////////////////////////*/

/*see if need to clear floats*/

#cart_main {
  background-color: pink;    
  
}

#cart_header{
  background-color: lightblue;
   
}


#cart_site_name {
  background-color: yellow;   
  font-size: 30px;
  font-weight: bold;
  overflow:auto;
}

#cart_site_name_link {
  cursor: pointer;    
    
}

#cart_title_container{
  background-color: orange;     
  text-align: center;
  height: 68px; /*just so i can see it*/

}


/*
#cart_cart_icon{
  background-color: red; 
  font-size: 60px;    
  font-weight: bolder;
  float:left;
 margin-top: -9px;
  margin-left: 216px;
position:absolute;
 width: auto;
  height: auto;
  top: 10%;
  left: 10%;

}

*/


#icon_and_title_container {

 
  background-color: lightblue;
  /*white-space: nowrap; */ 



}



#cart_cart_icon{
  background-color: red; 
  font-size: 60px;    
  font-weight: bolder;

  

}




#cart_title {
  background-color: lightgreen;    
  font-size: 40px;
  font-weight: bold;
  vertical-align: 2px;


}




#home_button_container {
  float:right;

    
    
}

#home_button {
    
 
  background-color: #04AA6D;
  border-radius: 5px;
  border: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 6px 18px;
  color: white;
  cursor: pointer;    



}

#home_button:hover, #home_button:active {
    background-color: #059862;
}


#cart_table_container{
  margin: auto;
  width: 100%;    
  background-color: purple; 
 
    
}

#cart_table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 50%;
  margin: auto;
  
}

#cart_table td, #cart_table th {
  border: 1px solid #ddd;
  padding: 8px;
}

#cart_table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}


#cart_table td:nth-child(1) {text-transform: capitalize;}

#cart_table td:nth-child(3) {text-align: center;}

#cart_table th:nth-child(1) {width: 60%;}

#cart_table th:nth-child(2) {width: 15%;}

#cart_table th:nth-child(3) {width: 10%;}

#cart_table tr:nth-child(even){background-color: #f2f2f2;}

#cart_table tr:nth-child(odd){background-color: white;}

#cart_table tr:hover {background-color: #d7faed;}

.cart_delete_button {
  cursor: pointer;    
   
}

#cart_buttons_container{
  background-color: brown;    
  width: 50%;
  margin: auto;  
    
}

#cart_total_container{
  background-color: #00FFFF;
  margin-left: 70%;    
  padding-top: 10px;
  padding-bottom: 10px;
}


#cart_total_label {
    
  color: red;
  padding-right: 10px;
  font-weight: bold;    
}


#empty_cart_button_container{
  background-color: #C71585;
  float:left;    
  
    
}
#checkout_button_container{
  background-color: #BDB76B;  
  margin-left: 70%;    
  
}

#checkout_button{
  background-color: #04AA6D;
  border-radius: 5px;
  border: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 6px 18px;
  color: white;
  cursor: pointer;    
}

#checkout_button:hover, #checkout_button:active {
    background-color: #059862;
}


#empty_cart_button {
    background-color: #04AA6D;
    border-radius: 5px;
    border: none;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 6px 18px;
    color: white;
    cursor: pointer;
    
    
}

#empty_cart_button:hover, #empty_cart_button:active {
    background-color: #059862;
}


#empty_cart_title {
  background-color: green;
  padding-top: 100px;
  padding-bottom: 10px;
  width: 50%;
  margin: auto;
  text-align: center;
  font-size: 34px;
  font-weight: bolder;
  
}

#continue_shopping_button_container {
  background-color: blue;
  width: 50%;
  margin: auto;
  text-align: center;
    
}


#continue_shopping_button {
  background-color: #04AA6D;
  border-radius: 5px;
  border: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 6px 18px;
  color: white;
  cursor: pointer;     
    
}

#continue_shopping_button:hover, #continue_shopping_button:active {
    background-color: #059862;
}





/*////////////////////end cart page//////////////////////////*/



/*//////////////////////info page////////////////////////////*/

p {
  max-width: 30em;
  font-size: 16px;

}







/*////////////////////end info page/////////////////////////////*/




/*//////////////////////success page////////////////////////////*/
#success_page_main {
    


}

#success_page_header {
  background-color: lightblue;    
}

#success_page_site_name {
  background-color: yellow;   
  font-size: 30px;
  font-weight: bold;
}

#success_page_site_name_link {
  cursor: pointer;    
}


#success_page_content {
    
  text-align: center;

}


#success_page_check_icon {
  font-size: 40px;
  margin-top: 60px;
  margin-bottom: 20px;
  color: #04AA6D;  
  
}


#success_page_thank_you {
  font-size: 40px;
  font-weight: bolder;
  
    
}


#success_page_message {
    
/*width: 80%;
margin: auto;
*/

}

.p_success_page {
  margin: auto;   
  max-width: 40em;
}


#success_page_home_button {
  margin-top: 10px;    
  background-color: #04AA6D;
  border-radius: 5px;
  border: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 6px 18px;
  color: white;
  cursor: pointer;     
    
}

#success_page_home_button:hover, #success_page_home_button:active {
    background-color: #059862;
}




/*////////////////////end success page/////////////////////////////*/


/*//////////////////////link expired page////////////////////////////*/
#link_expired_page_main {
    

}

#link_expired_page_header{
  background-color: lightblue;    
}

#link_expired_page_site_name{
  background-color: yellow;   
  font-size: 30px;
  font-weight: bold;
}

#link_expired_page_site_name_link{
  cursor: pointer;    
}


#link_expired_page_content {
    
  text-align: center;

}


#link_expired_page_clock_icon {
  font-size: 40px;
  margin-top: 60px;
  margin-bottom: 20px;
  color: red;  
  
}


#link_expired_page_notice {
  font-size: 40px;
  font-weight: bolder;
  color: red;  
    
}


.p_link_expired_page {
  margin: auto;   
  max-width: 40em;
}


#link_expired_page_home_button {
  margin-top: 10px;    
  background-color: #04AA6D;
  border-radius: 5px;
  border: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 6px 18px;
  color: white;
  cursor: pointer;     
    
}

#link_expired_page_home_button:hover, #success_page_home_button:active {
    background-color: #059862;
}




/*////////////////////end link expired page/////////////////////////////*/