.youtube-playlist-search {
  margin: clamp(48px, 5.3333333333vw, 64px) 0 clamp(56px, 8vw, 96px);
}
.youtube-playlist-search h1 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #071f79;
}
.youtube-playlist-search .desc {
  margin-top: clamp(20px, 3.6458333333vw, 28px);
  text-align: center;
}
.youtube-playlist-search .desc p {
  font-size: clamp(16px, 2.34375vw, 18px);
  line-height: 1.6;
}

.container {
  max-width: 1280px;
  width: 90%;
  margin-inline: auto;
}
@media only screen and (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 clamp(15px, 3.90625vw, 30px);
  }
}

#video-count {
  font-size: clamp(14px, 1.3333333333vw, 16px);
  margin-bottom: clamp(24px, 2.6666666667vw, 32px);
}

#no-results-message {
  text-align: center;
  color: #000;
  margin-top: 5rem;
}

#youtube-video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: clamp(24px, 2.8571428571vw, 40px) clamp(16px, 2.8571428571vw, 40px);
}
@media only screen and (max-width: 767px) {
  #youtube-video-list #youtube-video-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

#youtube-search-wrapper {
  background: #f6f7fb;
  padding: clamp(24px, 3.3333333333vw, 40px) 0;
  margin: clamp(26px, 3.3333333333vw, 40px) 0 clamp(40px, 5.3333333333vw, 64px);
}

#youtube-search-container {
  position: relative;
  max-width: 850px;
  width: 90%;
  margin-inline: auto;
}
#youtube-search-container .input-area {
  position: relative;
}
#youtube-search-container .input-area::before {
  position: absolute;
  content: "";
  top: 50%;
  left: clamp(14px, 1.3333333333vw, 16px);
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTQxNiAyMDhjMCA0NS45LTE0LjkgODguMy00MCAxMjIuN0w1MDIuNiA0NTcuNGMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM3MtMzIuOCAxMi41LTQ1LjMgMEwzMzAuNyAzNzZjLTM0LjQgMjUuMi03Ni44IDQwLTEyMi43IDQwQzkzLjEgNDE2IDAgMzIyLjkgMCAyMDhTOTMuMSAwIDIwOCAwUzQxNiA5My4xIDQxNiAyMDh6TTIwOCAzNTJhMTQ0IDE0NCAwIDEgMCAwLTI4OCAxNDQgMTQ0IDAgMSAwIDAgMjg4eiIvPjwvc3ZnPg==") center center/contain no-repeat;
}
#youtube-search-container p {
  font-size: clamp(14px, 2.0833333333vw, 16px);
  line-height: 1.6;
  padding-left: 1em;
  text-indent: -1em;
  margin-top: 0.75em;
}

#youtube-search {
  font-size: 18px;
  padding: clamp(16px, 1.5vw, 18px) clamp(10px, 1vw, 12px) clamp(16px, 1.5vw, 18px) clamp(54px, 4.6666666667vw, 56px);
  width: 100%;
  border: solid 2px #000;
}

:is(:is(input, textarea, .input), select):is(:focus, .focus, .focused) {
  box-shadow: 0 0 0 0.0625em rgb(240, 241, 243), 0 0 0 0.25em #74c0fc;
}

#youtube-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: clamp(8px, 0.8333333333vw, 10px);
}
#youtube-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 3.3333333333vw, 40px);
  height: clamp(34px, 3.3333333333vw, 40px);
  font-size: clamp(14px, 1.3333333333vw, 16px);
  font-weight: 700;
  color: #102e9e;
  border: solid 2px #102e9e;
  cursor: pointer;
}
#youtube-pagination button.prev-btn, #youtube-pagination button.next-btn {
  border: none;
}
#youtube-pagination .active {
  color: #fff;
  background-color: #102e9e;
}

.video-item {
  background: #f6f7fb;
}
.video-item a {
  display: block;
  transition: 0.3s ease-in-out;
}
.video-item a:hover {
  opacity: 0.7;
}
.video-item a:hover .video-thumb img {
  scale: 1.08;
}
.video-item a .video-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.video-item a .video-thumb::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTc2IDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTc2IDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRjAwMzM7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01NDkuNywxMjQuMWMtNi4zLTIzLjctMjQuOC00Mi4zLTQ4LjMtNDguNkM0NTguOCw2NCwyODgsNjQsMjg4LDY0UzExNy4yLDY0LDc0LjYsNzUuNQoJCWMtMjMuNSw2LjMtNDIsMjQuOS00OC4zLDQ4LjZDMTQuOSwxNjcsMTQuOSwyNTYuNCwxNC45LDI1Ni40czAsODkuNCwxMS40LDEzMi4zYzYuMywyMy43LDI0LjgsNDEuNSw0OC4zLDQ3LjgKCQlDMTE3LjIsNDQ4LDI4OCw0NDgsMjg4LDQ0OHMxNzAuOCwwLDIxMy40LTExLjVjMjMuNS02LjMsNDItMjQuMiw0OC4zLTQ3LjhjMTEuNC00Mi45LDExLjQtMTMyLjMsMTEuNC0xMzIuM1M1NjEuMSwxNjcsNTQ5LjcsMTI0LjEKCQlMNTQ5LjcsMTI0LjF6Ii8+Cgk8cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9IjIzMi4yLDMzNy42IDIzMi4yLDE3NS4yIDM3NC45LDI1Ni40IDIzMi4yLDMzNy42IAkiLz4KPC9nPgo8L3N2Zz4=") center center/contain no-repeat;
  width: clamp(78px, 7.5vw, 90px);
  height: clamp(78px, 7.5vw, 90px);
}
.video-item a .video-thumb img {
  display: block;
  object-fit: cover;
  max-width: 100%;
  width: 100%;
  height: 100%;
  transition: scale 0.3s ease-in-out;
}
.video-item a .text-wrap {
  padding: clamp(16px, 2vw, 24px) clamp(12px, 2vw, 24px);
}
.video-item a .text-wrap .video-title {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1em;
}
.video-item a .text-wrap .upload-date {
  font-size: clamp(12px, 1.25vw, 15px);
  text-align: right;
  color: #555;
}

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: absolute;
  z-index: 1001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 90%;
  max-width: 850px;
}
.modal-content iframe {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16/9;
}
.modal-content .close {
  position: absolute;
  right: 1rem;
  top: -3rem;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
}/*# sourceMappingURL=youtube_playlist_search.css.map */