.height12 {
height: 12px !important;
}

.dCcontainer {
display: flex;
}

.dCthumbnails {
display: flex;
flex-direction: column;
gap: 5px;
height: 432px;
width: 100px;
overflow: hidden;
transition: transform 0.3s ease;
scrollbar-width: none;
-ms-overflow-style: none;
}

.dCthumbnails img,
.dCthumbnails video {
width: 100px;
height: 100px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
border-radius: 5px;
transition: 0.3s;
}

.dCthumbnails img:hover,
.dCthumbnails video:hover,
.dCthumbnails img.dCactive,
.dCthumbnails video.dCactive {
border-color: #007bff;
}

.dCmain-content {
flex: 1;
position: relative;
overflow: hidden;
}

.dCmain-content img,
.dCmain-content video,
.dCpopup-content img,
.dCpopup-content video {
border-radius: 5px;
transition: transform 0.2s ease;
width: 100%;
}

.dCvideo-container {
display: none;
width: 100%;
height: auto;
}

.dCarrow-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 33px;
background-color: rgb(0 0 0 / 0%);
color: #e5a400;
/* padding: 3px 20px; */
border-radius: 50%;
cursor: pointer;
z-index: 10;
}

.dCprev-btn {
left: 10px;
}

.dCnext-btn {
right: 10px;
}

.dCpopup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
display: none;
justify-content: center;
align-items: center;
z-index: 999999;
}

.dCpopup-content {
display: flex;
background: #00000087;
padding: 20px 50px;
border-radius: 0;
position: relative;
height: 100vh;
}

.dCposition-relative {
position: relative;
}

.dCpopup-thumbnails {
display: flex;
flex-direction: column;
gap: 5px;
width: 100px;
overflow: hidden;
scrollbar-width: thin;
scrollbar-color: #007bff #f4f4f4;
}

.dCpopup-thumbnails img,
.dCpopup-thumbnails video {
width: 100px;
height: 70px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
border-radius: 5px;
transition: 0.3s;
}

.dCpopup-thumbnails img:hover,
.dCpopup-thumbnails video:hover,
.dCpopup-thumbnails img.active,
.dCpopup-thumbnails video.active {
border-color: #007bff;
}

.dCpopup-media {
flex: 1;
text-align: center;
max-width: 500px;
/* height: 550px; */
margin: 8px auto;
display: flex;
justify-content: center;
align-items: center;
}

.dCpopup-media img,
.dCpopup-media video {
max-width: 100%;
max-height: 100%;
}

.dCpopup-close {
position: absolute;
top: 10px;
right: 10px;
color: white;
background: rgb(221 4 4);
padding: 0;
border: none;
cursor: pointer;
font-size: 25px;
border-radius: 50%;
width: 35px;
height: 35px;
font-weight: bold;
line-height: 20px;
z-index: 3;
}

.dCpopup-arrow {
position: absolute;
top: 50%;
font-size: 30px;
color: #ffb700;
background-color: #0d6efd00;
padding: 3px 20px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transform: translateY(-50%);
}

.dCpopup-prev {
left: 10px;
}

.dCpopup-next {
right: 10px;
}

.dCzoom-slider-main {
/* position: absolute; */
bottom: 10px;
left: 10px;
width: 200px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 5px;
margin: 5px auto;
}

.dCzoom-slider-main input {
width: 100%;
}

.dCzoom-slider {
position: absolute;
bottom: 10px;
left: 10px;
width: 200px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 5px;
}

.dCzoom-slider input {
width: 100%;
}

.dCpopupRight {
width: 80%;
position: relative;
overflow: hidden;
margin: 0 auto;
display: flex;
align-items: center;
}

.dCpopupRight-side {
width: 80%;
position: relative;
overflow: hidden;
margin: 0 auto;
}

.dCthumbnails::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}

.dCpopup-thumbnails::-webkit-scrollbar {
width: 6px;
}

.dCpopup-thumbnails::-webkit-scrollbar-thumb {
background: #007bff;
border-radius: 10px;
}

.dCscroll-btn-left,
.dCscroll-btn-right {
color: #e5a400;
border: none;
font-size: 21px;
text-align: center;
margin: 0 auto;
display: block;
line-height: 20px;
}

@media (min-width: 992px) {
.dCscroll-btn-left,
.dCscroll-btn-right {
width: 100%;
font-size: 33px;
height: 33px;
}

.dCscroll-btn-left span,
.dCscroll-btn-right span {
transform: rotate(90deg);
display: block;
}

.dCscroll-btn-right {
position: absolute;
bottom: 0;
}
}

/*.dCscroll-btn-right {
background-color: #ddd;
color: white;
padding: 5px;
border: none;
cursor: pointer;
font-size: 22px;
text-align: center;
border-radius: 5px;
height: 30px;
margin: 0px auto;
display: block;
line-height: 20px;
}*/

.dCthumbnails-container {
position: relative;
}

.dCrightImage {
width: 80%;
position: relative;
overflow: hidden;
margin: 0 auto;
text-align: center;
}

@media (max-width: 1024px) {
.dCcontainer {
flex-direction: column;
align-items: center;
}

.dCmain-content {
max-width: 100%;
width: 100%;
}
}

@media (max-width: 768px) {
.dCthumbnails-container {
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-bottom: 16px;
gap: 12px;
}

.dCcontainer {
width: 100%;
padding: 10px;
}

.dCthumbnails {
flex-wrap: nowrap;
overflow-x: hidden;
flex-direction: row;
justify-content: center;
width: 86%;
margin: 0 auto;
}

.dCthumbnails img,
.dCthumbnails video {
width: 60px;
height: 50px;
}

.dCpopup-content {
flex-direction: column;
align-items: center;
padding: 20px;
width: 100%;
justify-content: center;
height: 100vh;
}

.dCpopup-thumbnails {
flex-direction: row;
overflow-x: hidden;
width: 86%;
justify-content: center;
margin: 0 auto;
margin-bottom: 10px;
}

.dCpopup-thumbnails img,
.dCpopup-thumbnails video {
width: 60px;
height: 50px;
}

.dCpopup-media {
width: 100%;
max-width: 100%;
}

.dCpopup-close {
width: 30px;
height: 30px;
}

.dCpopup-arrow {
padding: 0;
}

.dCpopupRight {
width: 100%;
}

/* .dCscroll-btn-left,
.dCscroll-btn-right {
background-color: #ddd;
color: white;
padding: 5px;
border: none;
cursor: pointer;
font-size: 22px;
text-align: center;
border-radius: 5px;
width: 100%;
height: 33px;
margin: 0px auto;
display: block;
line-height: 20px;
}

.dCscroll-btn-right {
position: absolute;
bottom: 0;
} */

/* .dCpopupRight-side {
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
} */
}

@media (max-width: 480px) {
.dCcontainer {
padding: 5px;
}
.dCzoom-slider-main{
    margin-top: 16px;
}

/* .dCthumbnails img,
.dCthumbnails video {
width: 50px;
height: 40px;
} */

.dCpopup-thumbnails img,
.dCpopup-thumbnails video {
width: 50px;
height: 40px;
}

.dCthumbnails {
height: 50px;
scrollbar-width: none;
-ms-overflow-style: none;
}

.dCthumbnails::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}