.mediabx_wrp {
position: fixed;
width: 100%;
height: 100vh;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.43);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
display: none;
opacity: 0%;
transition-duration: 0.1s;
}

.mediabx_bx {
width: 1100px;
height: 600px;
margin-top: 60px;
background-color: white;
}

.mediabx_bx .pnl_hdbx {
width: 100%;
height: 90px;
background-image: url("../static/setup.png");
border-bottom: 2px rgb(237, 237, 237) solid;
}

.mediabx_mnbx {
width: 100%;
height: 510px;
display: flex;
}

/* LEFT BOX  */
.mediabx_viewbx {
width: 800px;
height: 470px;
overflow-y: scroll;
overflow-x: hidden;
}

.mediabx_viewbx::-webkit-scrollbar {
  width: 8px;
}

.mediabx_viewbx::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.mediabx_viewbx::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.mediabx_viewbx::-webkit-scrollbar-track {
  background: transparent;
}

.mediabx_conbx {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 10px;
padding-left: 15px;
/* display: none; */
}

.mediabx_viewbx .pntb_ftbx {
display: none;
}

/* EACH IMAGE  */
.mediabx_conbx img {
width: 140px;
height: 140px;
margin: 6px;
border-radius: 3px;
transition: 0.2s;
transform: scale(100%);
}

.mediabx_conbx img:hover {
transform: scale(103%);
border: 5px rgb(3, 88, 180) solid;
}

.mediabx_conbx_active {
transform: scale(103%);
border: 5px rgb(3, 88, 180) solid;    
}

.yt-preview {
width: 140px;
height: 140px;
margin: 6px;
aspect-ratio: 16 / 9;
background: #000 center/cover no-repeat;
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 3px;
transition: 0.2s;
transform: scale(100%);
}

.yt-preview:hover {
transform: scale(103%);
border: 5px rgb(3, 88, 180) solid;
}


.yt-preview::after {
content: "▶";
font-size: 2rem;
color: white;
text-shadow: 0 0 5px black;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}


.mediabx_lmrbtn {
margin-left: auto;
margin-right: auto;
display: block;
}


/* RIGHT BOX  */
.mediabx_metadatabx {
width: 300px;
height: 510px;
background-image: url("../static/setup.png");
overflow-y: scroll;
overflow-x: hidden;
border-left: 2px rgb(237, 237, 237) solid;
}

.mediabx_metadatabx::-webkit-scrollbar {
  width: 8px;             /* scrollbar width */
}

.mediabx_metadatabx::-webkit-scrollbar-thumb {
  background: #ccc;        /* scrollbar thumb color */
  border-radius: 4px;      /* rounded corners */
}

.mediabx_metadatabx::-webkit-scrollbar-thumb:hover {
  background: #999;        /* hover effect */
}

.mediabx_metadatabx::-webkit-scrollbar-track {
  background: transparent; /* track behind scrollbar */
}


.mediabx_mtd_imig {
max-width: 250px;
height: 180px;
margin-left: 15px;
margin-bottom: 10px;
margin-top: 15px;
}

.mediabx_mtd_p {
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
margin-left: 15px;
margin-top: 4px;
color: grey;
}

.mediabx_mtd_frm {
width: 100%;
height: auto;
margin-top: 20px;
display: none;
}

.mediabx_mtd_ininp {
position: relative;
cursor: text;
font-size: 13px;
line-height: 20px;
padding: 5px;
height: 80px;
background-color: #fff;
border: 1px solid #d6d6e7;
border-radius: 3px;
color: rgb(35, 38, 59);
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
overflow: hidden;
transition: all 100ms ease-in-out;
outline: none;
font-family: 'Inter', sans-serif; 
width: 90%;
margin-left: 5%;
margin-right: 5%;
padding-left: 10px;
padding-right: 10px;
appearance: none; /* Remove default arrow */
-webkit-appearance: none;
-moz-appearance: none;
margin-bottom: 10px;
resize: vertical;
}

.mediabx_mtd_ctrl {
width: 100%;
height: 80px;
display: flex;
padding-right: 10px;
justify-content: end;
align-items: center;
}

.mediabx_mtd_ctrl button {
padding: 5px;
padding-bottom: 8px;
margin-right: 3px;
margin-left: 3px;
}

.mdiclns {
width: 25px;
height: 25px;
background-color: red;
color: white;
font-family: 'Inter', sans-serif; 
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;
}

.mdiclns:hover {
opacity: 50%;
}


/* INSERT YOUTUBE SECTION  */
.mediabx_conbx_ytadcn {
width: 800px;
height: auto;
display: none;
}

/* ADD YT LINK WRAPPER  */
.preview_add {
width: 400px;
height: 250px;
aspect-ratio: 16 / 9;
background: #000 center/cover no-repeat;
position: relative;
cursor: pointer;
overflow: hidden;
margin: 5px;
border-radius: 3px;
transition: 0.2s;
transform: scale(100%);
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
position: relative;
}

.mediabx_inbx_ytadcn {
width: 440px;
height: auto;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}

.mediabx_inbx_ytadcn .ath_fm_inp {
padding: 3px;
height: 40px;
padding-left: 6px;
width: 300px;
margin-top: 1px;
margin-right: 0px;
}

.djs945 {
width: 40px;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 30px;
visibility: hidden;
}

.mediabx_inbx_ytadcn .btn08 {
margin-left: 10px;
} 

/* SKILITON LOADER  */
.mediabx_ldr {
width: 140px;
height: 140px;
margin: 6px;
border-radius: 3px;
background-color: rgb(238 238 238);
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, .5) 50%,
rgba(255, 255, 255, 0) 60%
) rgb(238 238 238);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading2 ease-in-out infinite;
transition-duration: 0.15s;
}
@keyframes loading2 {
  to {
    background-position-x: -20%;
  }
}

/* YOUTUBE VIDEO PREVIEW  */
#yt76 {
display: none;
margin-left: 15px;
margin-bottom: 10px;
margin-top: 15px;
}

.mediabx_conbx [data-media] {
transition: all 0.5s ease;
transform-origin: center center;
}

/* NO DATA FOUND IMG  */
.ssedf35 {
width: 40%;
margin-left: 25%;
margin-right: 25%;
margin-top: 50px;
display: none;
}




/* IMAGE UPLOAD SECTION  */
.fm_pdimbx {
width: 98%;
margin-left: 1%;
margin-right: 1%;
height: auto;
display: flex;
justify-content: start;
align-items: end;
margin-top: 10px;
margin-bottom: 30px;
}

/* MAIN IMAGE CONTAINER  */
.fr_pdecimbx_poster {
width: 25%;
height: 220px;
border: 2px rgb(156 163 175 / var(--tw-border-opacity, 1)) dashed;
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
margin-left: 5px;
margin-right: 5px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

/* ITEM CONTAINER  */
.fr_pdecimbx_prodcn {
width: 100%;
height:150px;
display: flex;
}

/* ITEM EACBOX  */
.fr_pdecimbx_pitem {
position: relative;
width: 150px;
height: 150px;
border: 2px rgb(156 163 175 / var(--tw-border-opacity, 1)) dashed;
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); 
margin-left: 5px;
margin-right: 5px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

/* CROSS  */
.fr_pdcrs {
position: absolute;
height: 22px;
width: 22px;
display: flex;
justify-content: center;
align-items: center;
top: 10px;
padding: 4px;
right: 10px;
border-radius: 50%;
background-color: rgb(246, 0, 0);
color: white;
cursor: default;
z-index: 400;
display: none;
z-index: 1500;
}
.fr_pdcrs:hover {
opacity: 50%;
}

.fr_pdcrs i {
font-size: 15px;
}

/* CLICK TO UPLOAD MEDIA - TEXT */
.fr_pdntc {
background-color: rgba(137, 137, 137, 0.586);
color: white;
font-family: 'Inter', sans-serif; 
cursor: default;
z-index: 600;
font-size: 15px;
position: absolute;
width: 100%;
padding-top: 40%;
text-align: center;
opacity: 0%;
transition-duration: 0.5s;
height: 100%;
}
.fr_pdntc:hover {
opacity: 90%;
}

.fr_pdecimbx_poster .fr_pdntc {
padding-top: 48%;
}

.fr_pdecimbx_banner  .fr_pdntc {
padding-top: 15%;
}

/* DEFAULT IMAGE  */
.fr_pddfim { 
height: 100%;
width: 100%;
}

/* UPLOADED IMAGE/VIDEO  */
.fr_pdecimg {
width: 100%;
padding: 2px;
transition-duration: 0.5s;
position: absolute;
z-index: 300;
}
.fr_pdecimg:hover {
transform: scale(130%);
opacity: 50%;
}