.agent-list-slide-show {
  position: relative;
  --slide-color: var(--white);
  --thumb-height: 150px;
  --wh-ratio: 1.33;
}

.agent-list-slide-show.slideshow {
  background: var(--dark-color);
}

.agent-list-slide-show .slideshow-content {
  display: none;
}

.agent-list-slide-show.slideshow .slideshow-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.agent-list-slide-show .slideshow-content-inner {
  display: block;
  background: var(--slide-color);
  overflow: auto;
}

.slideshow-content-inner > .agent-container > .ohke-header {
  display: none;
}

.slideshow-content-inner > .agent-container, .slideshow-content-inner > .agent-container > .ohke-content {
  width: 100%;
  height: 100%;
}

.agent-list-slide-show .ss-thumbnail-panel {
  background: var(--dark-color);
  border: 1px solid gray;
  position: fixed;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border-radius: 6px;
  padding: 0 6px;
}

.agent-list-slide-show .ss-control-panel {
  position: fixed;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  top: 0;
  bottom: 0;
  justify-content: center;
}
.agent-list-slide-show .ss-control-panel.h-screen {
  /* flex-direction: row;
  top: 10px;
  left: 0;
  right: 0; */
}

.agent-list-slide-show .ss-control-panel .nav-btn.disable {
  opacity: 0.3;
  cursor: not-allowed;
}

.agent-list-slide-show .ss-control-panel .nav-btn {
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
}

.agent-list-slide-show .ss-control-panel .ratio-btn {
  position: relative;
}
.agent-list-slide-show .ss-control-panel .ratio-btn:before {
  content: "";
  position: absolute;
  inset: 6px;
}
.agent-list-slide-show .ss-control-panel .ratio-4x3-btn:before {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBzdHlsZT0ic2hhcGUtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjt0ZXh0LXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247aW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTtmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZCI+PHBhdGggc3R5bGU9Im9wYWNpdHk6Ljk0NiIgZD0iTTUxMS41IDEwMC41djMwOWMtNS4zOTMgMTkuMjI3LTE4LjA2IDMwLjM5My0zOCAzMy41YTQ3NTAwLjUgNDc1MDAuNSAwIDAgMS00MzYgMGMtMTkuOTQtMy4xMDctMzIuNjA3LTE0LjI3My0zOC0zMy41di0zMDljNS4xNTEtMTYuNjUgMTYuMTUxLTI3LjQ4NCAzMy0zMi41IDE0OC42NjctLjY2NyAyOTcuMzMzLS42NjcgNDQ2IDAgMTYuODQ5IDUuMDE2IDI3Ljg0OSAxNS44NSAzMyAzMi41em0tNDc1LTE1YzE0Ni0uMTY3IDI5MiAwIDQzOCAuNSA5LjUgMi44MzMgMTUuNjY3IDkgMTguNSAxOC41LjY2NyAxMDAuNjY3LjY2NyAyMDEuMzMzIDAgMzAyLTMuMDQ4IDEwLjM4Mi05Ljg4MSAxNi41NDktMjAuNSAxOC41LTE0NC42NjcuNjY3LTI4OS4zMzMuNjY3LTQzNCAwLTEwLjYxOS0xLjk1MS0xNy40NTItOC4xMTgtMjAuNS0xOC41YTIyODAwLjExIDIyODAwLjExIDAgMCAxIDAtMzAyYzMuMDE3LTkuNTE2IDkuMTg0LTE1Ljg1IDE4LjUtMTl6Ii8+PHBhdGggc3R5bGU9Im9wYWNpdHk6LjkzOCIgZD0iTTUyLjUgMTAxLjVjMTcuNjctLjE2NyAzNS4zMzcgMCA1MyAuNSA0LjY1NSAyLjg5NyA2LjE1NSA3LjA2MyA0LjUgMTIuNS0xLjYzNyAyLjMxLTMuODA0IDMuODEtNi41IDQuNWE2MjUuODUgNjI1Ljg1IDAgMCAwLTQ5IDIgNi45NzcgNi45NzcgMCAwIDAtMi41IDMuNWwtMSA0N2MtMS44NDYgNi40OTUtNi4wMTIgOC42NjItMTIuNSA2LjUtMi4xNjctLjgzMy0zLjY2Ny0yLjMzMy00LjUtNC41YTcwMi40NjUgNzAyLjQ2NSAwIDAgMSAwLTUzYzMuMDE3LTkuNTE2IDkuMTg0LTE1Ljg0OSAxOC41LTE5ek00MDUuNSAxMDEuNWMxNy42Ny0uMTY3IDM1LjMzNiAwIDUzIC41IDkuNSAyLjgzMyAxNS42NjcgOSAxOC41IDE4LjVhNzAyLjE1IDcwMi4xNSAwIDAgMSAwIDUzYy0yLjg5NyA0LjY1NS03LjA2MyA2LjE1NS0xMi41IDQuNS0yLjMxLTEuNjM3LTMuODEtMy44MDQtNC41LTYuNWE2MjUuODU0IDYyNS44NTQgMCAwIDAtMi00OSA2Ljk3OCA2Ljk3OCAwIDAgMC0zLjUtMi41Yy0xNi43MzMtLjA0My0zMy40LS43MS01MC0yLTQuMjg4LTMuNzcxLTUuMTIxLTguMjcxLTIuNS0xMy41YTMwLjIzMyAzMC4yMzMgMCAwIDEgMy41LTN6TTIwMy41IDE3Ny41YzcuMjMuNzk4IDEwLjM5NyA0Ljc5OCA5LjUgMTJhMzQyNC4wOTcgMzQyNC4wOTcgMCAwIDEtNTEuNSA4MS41YzguMzI3LjUgMTYuNjYuNjY2IDI1IC41YTgzLjUxNiA4My41MTYgMCAwIDEgMS41LTIxYzMuNzcxLTQuMjg4IDguMjcxLTUuMTIxIDEzLjUtMi41YTYuOTc4IDYuOTc4IDAgMCAxIDIuNSAzLjVjLjUgNi42NTguNjY2IDEzLjMyNS41IDIwYTgzLjUxNiA4My41MTYgMCAwIDEgMjEgMS41YzYuNjUyIDUuMjg1IDYuNjUyIDEwLjYxOSAwIDE2LTYuOTkyLjUtMTMuOTkyLjY2Ni0yMSAuNS4xNjcgMTIuNjcxIDAgMjUuMzM4LS41IDM4LTMuNTEgNC45NDctOC4wMSA2LjExMy0xMy41IDMuNS0xLjk4Ny0xLjMxOS0zLjE1NC0zLjE1Mi0zLjUtNS41YTY0Ny44NTQgNjQ3Ljg1NCAwIDAgMS0uNS0zNmMtMTUuMzM3LjE2Ny0zMC42NyAwLTQ2LS41LTMuMDU4LTEuOTQxLTQuNzI1LTQuNzc0LTUtOC41YTI2LjM3NSAyNi4zNzUgMCAwIDEgNC41LTEwbDU2LTg4YzEuOTEzLTIuNzggNC40MTMtNC40NDcgNy41LTV6Ii8+PHBhdGggc3R5bGU9Im9wYWNpdHk6LjkzNCIgZD0iTTMzMS41IDE3Ny41YzI2Ljc5NCAyLjI5NCA0MS40NiAxNi43OTQgNDQgNDMuNS0uNDM2IDEzLjgyNS01Ljc3IDI1LjMyNS0xNiAzNC41IDE4LjIyIDE3LjkzNiAyMC43MiAzNy45MzYgNy41IDYwLTEzLjMwMiAxNS40NTMtMjkuODAyIDIwLjI4Ny00OS41IDE0LjUtMTkuNDc4LTguNDU0LTI4LjY0NC0yMy4yODgtMjcuNS00NC41IDMuMzY2LTUuMTA5IDcuODY2LTYuMjc2IDEzLjUtMy41IDMuMDk5IDMuODY5IDQuNTk5IDguMzY5IDQuNSAxMy41IDUuNjIyIDE1LjM5NSAxNi40NTUgMjEuMjI5IDMyLjUgMTcuNSAxNy44MjItOS43OSAyMS4zMjItMjMuMjkgMTAuNS00MC41YTEyNC4zNjggMTI0LjM2OCAwIDAgMC0xMi05Yy0zLjI0Ni01LjM2My0zLjI0Ni0xMC42OTcgMC0xNmwxMy0xMWM4LjU5MS0xNC4xMjYgNi40MjUtMjYuMjkyLTYuNS0zNi41LTEyLjg5Mi02LjM3My0yNC4wNTktNC4yMDctMzMuNSA2LjVhMTMxLjMwMiAxMzEuMzAyIDAgMCAwLTcuNSAyMS41Yy01LjQ3NiAzLjI2LTEwLjMwOSAyLjQyNi0xNC41LTIuNS0uMjQyLTI4LjI1MyAxMy41OTEtNDQuMjUzIDQxLjUtNDh6Ii8+PHBhdGggc3R5bGU9Im9wYWNpdHk6Ljg3NiIgZD0iTTI1MS41IDIyOS41YzcuNDE1LTEuNjM3IDExLjc0OCAxLjE5NiAxMyA4LjUtLjQwMSA1LjU2OS0zLjQwMSA4LjczNi05IDkuNS02Ljk3MS0xLjEzLTkuODA0LTUuMTMtOC41LTEyIC44MDQtMi42NDYgMi4zMDQtNC42NDYgNC41LTZ6Ii8+PHBhdGggc3R5bGU9Im9wYWNpdHk6Ljg3OCIgZD0iTTI1NC41IDI3MS41YzcuNDkzLjY1NCAxMC42NiA0LjY1NCA5LjUgMTItMi40MDIgNS41OTItNi41NjkgNy40MjUtMTIuNSA1LjUtNC45NTgtMy40NC02LjEyNS03Ljk0LTMuNS0xMy41IDIuMDEzLTEuNzQ4IDQuMTgtMy4wODIgNi41LTR6Ii8+PHBhdGggc3R5bGU9Im9wYWNpdHk6LjkzOCIgZD0iTTM5LjUgMzMxLjVjNi4zNTYtLjg0IDEwLjE5IDEuODI3IDExLjUgOGE2MjUuNzA4IDYyNS43MDggMCAwIDAgMiA0OSAxNC40NDIgMTQuNDQyIDAgMCAwIDUuNSAyLjVsNDcgMWM0LjY1NSAyLjg5NyA2LjE1NSA3LjA2MyA0LjUgMTIuNS0xLjM3OCAyLjYwOC0zLjU0NSA0LjEwOC02LjUgNC41LTE2IC42NjctMzIgLjY2Ny00OCAwLTExLjMxNi0yLjA1My0xOC40ODMtOC41NTMtMjEuNS0xOS41YTcwMi40NjUgNzAyLjQ2NSAwIDAgMSAwLTUzYzEuNDA2LTIuMjQ0IDMuMjM5LTMuOTEgNS41LTV6Ii8+PHBhdGggc3R5bGU9Im9wYWNpdHk6LjkzOSIgZD0iTTQ2Ni41IDMzMS41YzQuNDg3LS4zMzkgNy45ODcgMS4zMjcgMTAuNSA1YTcwMi4xNSA3MDIuMTUgMCAwIDEgMCA1M2MtMy4zMjMgMTAuNjUzLTEwLjQ4OSAxNy4xNTMtMjEuNSAxOS41LTE2IC42NjctMzIgLjY2Ny00OCAwLTYuNDU1LTEuODE3LTguNjIxLTUuOTg0LTYuNS0xMi41LjgzMy0yLjE2NyAyLjMzMy0zLjY2NyA0LjUtNC41bDQ4LTFjMi40MzktLjc3NCA0LjI3My0yLjI3NCA1LjUtNC41bDEtNDdjLjYxMi00LjA5NyAyLjc3OS02Ljc2NCA2LjUtOHoiLz48L3N2Zz4=") no-repeat center / cover padding-box;
}
.agent-list-slide-show .ss-control-panel .ratio-16x9-btn:before {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBzdHlsZT0ic2hhcGUtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjt0ZXh0LXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247aW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTtmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZCI+PHBhdGggc3R5bGU9Im9wYWNpdHk6Ljk1NyIgZD0iTS0uNSAzODcuNXYtMjY0YzMuNzczLTguMjcgMTAuMTA2LTEzLjQzNyAxOS0xNS41YTE3NjgwLjQxIDE3NjgwLjQxIDAgMCAxIDI2NiAwYzUuOTQ4IDIuNDMzIDcuNDQ4IDYuNiA0LjUgMTIuNWwtMi41IDIuNWMtODkuNDE0LjAwNS0xNzguNzQ4LjY3Mi0yNjggMi0yLjI2OCAxLjU1OC0zLjQzNCAzLjcyNC0zLjUgNi41YTgwMDMuMjU4IDgwMDMuMjU4IDAgMCAwIDEgMjUyIDExLjUzMiAxMS41MzIgMCAwIDAgNC41IDMuNWwxMjcgMWM1LjA2OCAyLjk4MyA2LjIzNSA3LjE0OSAzLjUgMTIuNWEyOS41MTcgMjkuNTE3IDAgMCAxLTQuNSAyLjVjLTQyLjY2Ny42NjctODUuMzMzLjY2Ny0xMjggMC04Ljg5NC0yLjA2My0xNS4yMjctNy4yMy0xOS0xNS41eiIvPjxwYXRoIHN0eWxlPSJvcGFjaXR5Oi45NTQiIGQ9Ik01MTEuNSAxMjMuNXYyNjRjLTMuNzczIDguMjctMTAuMTA2IDEzLjQzNy0xOSAxNS41LTEwNi42NjcuNjY3LTIxMy4zMzMuNjY3LTMyMCAwLTUuNDA2LTEuOTgtNy4yMzktNS44MTQtNS41LTExLjVsMy41LTMuNWMxMDcuNDE0LS4wMDQgMjE0Ljc0Ny0uNjcxIDMyMi0yIDIuMjY4LTEuNTU4IDMuNDM0LTMuNzI0IDMuNS02LjUuOTg5LTg0LjA0NC42NTYtMTY4LjA0NC0xLTI1MmExMS41MzIgMTEuNTMyIDAgMCAwLTQuNS0zLjVsLTE4MS0xYy01LjAzNS0zLjAxMy02LjIwMi03LjE4LTMuNS0xMi41IDEuMTcxLTEuMzkzIDIuNjcxLTIuMjI3IDQuNS0yLjVhODI3Ny4xMTIgODI3Ny4xMTIgMCAwIDEgMTgyIDBjOC44OTQgMi4wNjMgMTUuMjI3IDcuMjMgMTkgMTUuNXoiLz48cGF0aCBzdHlsZT0ib3BhY2l0eTouOTU2IiBkPSJNNDExLjUgMTM3LjVjMjEuNjY5LS4xNjcgNDMuMzM2IDAgNjUgLjVhMTEuNTMyIDExLjUzMiAwIDAgMSA0LjUgMy41Yy42NjcgMjIuNjY3LjY2NyA0NS4zMzMgMCA2OC0yLjUxMyAzLjcxMi02LjAxMyA0Ljg3OC0xMC41IDMuNS0xLjgzMy0uNS0zLTEuNjY3LTMuNS0zLjUtLjUtMTguNjY0LS42NjctMzcuMzMtLjUtNTYtMTguNjcuMTY3LTM3LjMzNiAwLTU2LS41LTMuMDE2LTEuNTI5LTQuMzQ5LTQuMDI5LTQtNy41LjA0Ni0zLjcwNyAxLjcxMy02LjM3MyA1LTh6Ii8+PHBhdGggc3R5bGU9Im9wYWNpdHk6LjkzIiBkPSJNMTE3LjUgMTkzLjVjMTAuMDA2LS4xNjYgMjAuMDA2IDAgMzAgLjUgMi4xNjcuODMzIDMuNjY3IDIuMzMzIDQuNSA0LjUuNjY3IDM4IC42NjcgNzYgMCAxMTQtMi41NDEgNC41NjktNi4zNzUgNi4wNjktMTEuNSA0LjVsLTMuNS0zLjVjLS41LTM0LjY2NS0uNjY3LTY5LjMzMi0uNS0xMDQtNi43ODQuNDItMTMuNDUtLjA4LTIwLTEuNS00LjIzMi01LjE5MS0zLjg5OS0xMC4wMjUgMS0xNC41eiIvPjxwYXRoIHN0eWxlPSJvcGFjaXR5Oi45MjciIGQ9Ik0yMTAuNSAxOTQuNWM5LjUxLS4zMDIgMTIuNjc3IDQuMDMxIDkuNSAxMy0xMS4wNDQgOS4wNDMtMTkuODc3IDE5Ljg3Ni0yNi41IDMyLjUgMTkuNzkxLTQuMTg5IDM1LjI5MSAxLjk3OCA0Ni41IDE4LjUgOS4wODcgMTkuNzI1IDUuNTg3IDM2Ljg5Mi0xMC41IDUxLjUtMTYuNTUzIDEwLjIzLTMyLjg4NyA5Ljg5Ni00OS0xLTExLjQ1Ni0xMC43LTE1Ljk1Ni0yMy44NjYtMTMuNS0zOS41IDQuNzY4LTMwLjg5OCAxOS4yNjgtNTUuODk4IDQzLjUtNzV6bS0xMSA2MWMyMS4zOTktMS4xMDQgMzAuODk5IDguODk2IDI4LjUgMzAtOC43OTkgMTYuNjU4LTIxLjI5OSAyMC4xNTgtMzcuNSAxMC41LTExLjEzOC0xMi45NTYtMTAuNDcyLTI1LjI4OSAyLTM3bDctMy41ek0zNTIuNSAxOTQuNWMyNy44OTMtLjYgNDIuODkzIDEyLjkgNDUgNDAuNS0yLjU0MyAzMi43NTUtMTYuMjEgNTkuNzU1LTQxIDgxLTguNzUgMy41NTMtMTMuMjUuNzE5LTEzLjUtOC41YTE2OS4zMjMgMTY5LjMyMyAwIDAgMSAxNS0xNiAxNDMuMDg2IDE0My4wODYgMCAwIDAgMTIuNS0xOWMtMjAuNjg1IDMuOTM5LTM2LjUxOS0zLjA2MS00Ny41LTIxLTguMzA0LTIxLjk3Ny0yLjgwNC0zOS40NzcgMTYuNS01Mi41YTEwMC43MzUgMTAwLjczNSAwIDAgMSAxMy00LjV6bTEgMTZjMTkuNjMxLS4yMDMgMjguNzk4IDkuNDYzIDI3LjUgMjktNi4xOTMgMTUuMDE0LTE3LjAyNiAyMC4xOC0zMi41IDE1LjUtMTIuNDk5LTcuODMxLTE1Ljk5OS0xOC42NjQtMTAuNS0zMi41IDMuNjU5LTYuMDY1IDguODI2LTEwLjA2NSAxNS41LTEyeiIvPjxwYXRoIHN0eWxlPSJvcGFjaXR5Oi44NTciIGQ9Ik0yNzguNSAyMzYuNWM5LjE1OC0xLjAwOSAxMi45OTIgMi45OTEgMTEuNSAxMi01Ljc5MiA2LjkwOC0xMS4xMjYgNi41NzQtMTYtMS0xLjIyNC00Ljg3NC4yNzYtOC41NDEgNC41LTExek0yNzguNSAyNjYuNWM5LjE1OC0xLjAwOSAxMi45OTIgMi45OTEgMTEuNSAxMi01Ljc5MiA2LjkwOC0xMS4xMjYgNi41NzQtMTYtMS0xLjIyNC00Ljg3NC4yNzYtOC41NDEgNC41LTExeiIvPjxwYXRoIHN0eWxlPSJvcGFjaXR5Oi45NTYiIGQ9Ik0zMy41IDI5Ny41YzIuMzU3LS4xNjMgNC42OS4wMDMgNyAuNSAxLjgzMy41IDMgMS42NjcgMy41IDMuNS41IDE4LjY2NC42NjcgMzcuMzMuNSA1NiAxOC42Ny0uMTY3IDM3LjMzNiAwIDU2IC41IDEuODMzLjUgMyAxLjY2NyAzLjUgMy41IDEuNzI0IDUuMjMxLjIyNCA5LjA2NS00LjUgMTEuNWE1NzAuNTc0IDU3MC41NzQgMCAwIDEtNjctMWwtMi41LTIuNWExMTU2LjE5MiAxMTU2LjE5MiAwIDAgMSAwLTY4Yy42OS0xLjg1IDEuODU2LTMuMTg0IDMuNS00eiIvPjwvc3ZnPg==") no-repeat center / cover padding-box;
}

.agent-list-slide-show .ss-thumbnail-panel .prev-btn {
  left: 20px;
}

.agent-list-slide-show .ss-thumbnail-panel .next-btn {
  right: 20px;
}

.agent-list-slide-show .ss-thumbnail-panel .thumbnail-outer {
  overflow: hidden;
  margin: 0 auto;
}

.agent-list-slide-show .ss-thumbnail-panel .thumbnail::-webkit-scrollbar {
  display: none;
}

.agent-list-slide-show .ss-thumbnail-panel .thumbnail {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  user-select: none;
}

.agent-list-slide-show .ss-thumbnail-panel .thumb-item.active .name {
  color: var(--white);
  background: var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

.agent-list-slide-show .ss-thumbnail-panel .thumb-item.active {
  border-color: var(--light-color);
  box-shadow: 0 0 4px var(--light-color);
}

.agent-list-slide-show .ss-thumbnail-panel .thumb-item-outer {
  height: calc(var(--thumb-height) - 10px);
  width: calc((var(--thumb-height) - 10px) * var(--wh-ratio));
  max-width: 100vw;
  padding: 6px;
  flex-shrink: 0;
}

.agent-list-slide-show .ss-thumbnail-panel .thumb-item {
  background: var(--slide-color);
  height: 100%;
  width: 100%;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.agent-list-slide-show .ss-thumbnail-panel .name {
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  border-bottom: 1px solid gray;
}

.agent-list-slide-show .ss-thumbnail-panel .content {
  overflow: hidden;
  white-space: pre;
}