/*=======================
youtube CSS styles
========================*/

body {
background: var(--background)!important;
color: var(--foreground)!important;

--spacer-height: 8rem;

}

.darkmode {
	/* background: black!important;
	color: white!important; */

}

.chapter {
margin: 0 auto;
width: fit-content;
}


.playlist_wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	align-items: stretch;
    gap: 40px;
    /*max-width: 1200px;*/
    max-width: 90%;
margin: 0 auto;
}



.playlist-box_info {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
	color: var(--black);
	width: fit content;
padding-bottom: 1rem;

	border-radius: 15px;
 box-shadow: inset 0 0 0 2px var(--foreground);  

}

.playlist-box_info::before {
  position: absolute;
    content: " ";
    top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Places the pseudo-element behind the content */
   opacity: 1;
  
}

.playlistTitle {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--foreground);
    text-align: center;
	padding: 1rem 0;
	margin-bottom: 1rem;
}

img.playlistImage {
width: 180px;
margin: 0 auto;
/* padding: 5px; */
/* background-color: #ccc9c9;
border: 4px solid #ccc9c9; */
/* opacity: 1; */
}


.songTitle {
	position: relative;
  color: var(--foreground);
	font-size: .8rem;
	font-weight: 700;
  text-transform: uppercase;
    padding: 0 2rem;
    text-align: center;
	margin: 0 auto 0.5rem;
}

.song-items, .song-itemsJP {
  /* color: var(--foreground); */
    text-transform: none;
padding: 0 2rem;
margin: .5rem auto 0;
font-size: 1rem;
  font-weight: 400;
  line-height: 1.4rem;
 text-align: left;
}

.underline_text {
  text-decoration: underline!important;
}

.video_title {
  font-family: var(--primary-ENfont)!important;
  color: var(--black);
}

.playlistbutton, .playlistbuttonJP {
width: 100px;
margin: 2rem auto 1.5rem;
cursor: pointer;
-webkit-appearance:	button;
  -moz-appearance:	button;
  appearance: button;
  background-image: linear-gradient(to bottom, #fff, #f8eedb);
  border-radius: .5rem;
  color: var(--black);
  font-weight: 700;
  text-align: center;
  text-transform: none;
  transition: all .1s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
 
/*CHECK FOR MOBILE*/
 user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.playlistbutton:hover, .playlistbuttonJP:hover {
    color: var(--black);
    font-weight: 900;
  background-image: linear-gradient(to bottom, #fff, #f8eedb);
  transform: scale(1.3);
}


.youtube_box {
  background: var(--white);
  padding: 0;
}

.about_button {
color: var(--foreground);
background: transparent;
}

.about_button:hover {
color: var(--ms-red);
letter-spacing: .2rem;
}

/*==================
Tablepress
 tablepress-id-3
 tablepress-id-4
================*/

/* .tablepress th,
.tablepress td {
    border: 1px solid #ff0000!important;
} */


/* .tablepress {
    table-layout: auto !important;
    word-break: normal !important;
} */
 .tablepress-scroll-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden;
    width: 100%;
}


.tablepress-id-3,
.tablepress-id-4 {
    /* width: 100%; */
        /* max-height: 400px; */
    overflow-y: auto;
    display: block;
}

.tablepress tbody td {
    line-height: 1.5; /* Adjust this value as needed */
}

.tablepress tbody tr:not(:first-child) td {
    border-top: 2px solid #000000 !important;
}

.tablepress-id-3 tbody td p , 
.tablepress-id-4 tbody td p {
    margin: 0 !important;
    padding: 10px 0 !important;
}


.tablepress-id-3 td,
.tablepress-id-4 td {
  height: 150px!important;
}

.tablepress>:where(tbody.row-striping)>:nth-child(even)>*,
.tablepress>:where(tbody.row-striping)>:nth-child(odd)>*,
.tablepress tbody td {
background: transparent;
}

.tablepress-id-3.tablepress thead th,
.tablepress-id-4.tablepress thead th  {
	background: transparent;
  color: var(--foreground);
}

.tablepress-id-3 tbody td,
.tablepress-id-4 tbody td {
    border: none;
}

.tablepress-id-3 tbody td,
.tablepress-id-4 tbody td {
color: var(--foreground);
}

    .tablepress-id-3 thead tr th,
    .tablepress-id-4 thead tr th
   {
		letter-spacing: .2rem;
    border-bottom: 2px solid var(--foreground);
		border-top: none;
		border-left: none;
		border-right: none;
	}

.tablepress-id-3 .column-1,
.tablepress-id-4 .column-1 {
font-weight: 900;
width: 20px!important;
white-space: nowrap; 
overflow: scroll;
}

.tablepress-id-3 .column-2,
.tablepress-id-4 .column-2 {
width: 50px!important;
white-space: nowrap; 
overflow: scroll;
}

.tablepress-id-3 .column-3,
.tablepress-id-4 .column-3 {
width: 100px!important;
white-space: nowrap; 
overflow: scroll;
}

.tablepress-id-3 .column-4,
.tablepress-id-4 .column-4 {
width: 1em;
}

.tablepress-id-3 .column-5,
.tablepress-id-4 .column-5 {
width: 200px!important;
white-space: nowrap; 
overflow: scroll;
}

.tablepress-id-3 .column-6,
.tablepress-id-4 .column-6 {
width: 200px!important;
white-space: nowrap; 
overflow: scroll;
} 






/* ==============================
=================================
=================================
        @MEDIA QUERIES
=================================
=================================
================================= */

/* ============= Small Mobile  320px - 480px =============*/
@media (max-width: 480px) {

}

/* ============= Large Mobile / Tabletse (Portrait) 481px – 768px =============*/
@media (min-width: 481px) and (max-width: 768px) {


}

/* ============= Tablets / Small Laptops 769px – 1024px =============*/
@media (min-width: 769px) and (max-width: 1024px) {

}

/* ============= Desktops / Laptops 1025px and up =============*/
@media (min-width: 1025px) {

}