/* //////////////////////////////////////////////////
//////////////   Mogul LIST VIEW   /////////////// 
//////////////////////////////////////////////////*/
:root{
   
/* ================== User ================== */
    --thumb-cell-w: 150px;
    --name-cell-w: 120px;
    --email-cell-w: 330px;
    --location-cell-w: 110px;
    --organization-cell-w: 90px;
    --registered-cell-w: 120px;
    --lastlogin-cell-w: 110px;
    --totalVideos-cell-w: 180px;
    --lastSaved-cell-w: 162px;
    --linksClicked-cell-w: 131px;
    --videoViews-cell-w: 172px;
    --uniqueViews-cell-w: 137px;
    --fbPosts-cell-w: 161px;
    --MaximumVideosAllowed-cell-w: 244px;
    --active-cell-w: 90px;
    --role-cell-w: 140px;
    --editUsers-cell-w: 110px;
    

/* ================== Bonks ================== */

    --BonksThumb-cell-w: 150px;
    --BonksOrganization-cell-w: 110px;
    --BonksMostPopular-cell-w: 190px;
    --BonksFileName-cell-w: 175px;
    --BonksUploadedDate-cell-w: 190px;
    --BonksUploadedBy-cell-w: 165px;
    --BonksWidth-cell-w: 110px;
    --BonksHeight-cell-w: 110px;
    --BonksFileSize-cell-w: 120px;
    --BonksPrice-cell-w: 120px;


/* ================== Mogul Videos ================== */

    --activeThumb-cell-w: 180px;
    --activeTitle-cell-w: 165px;
    --activeOwner-cell-w: 120px;
    --activeOrgName-cell-w: 100px;
    --activeVisibility-cell-w: 135px;
    --activeViewable-cell-w: 135px;
    
    --activeCreated-cell-w: 150px;
    --activeModified-cell-w: 150px;
    --activeLast-Published-cell-w:150px;
    --activeLastViewed-cell-w: 150px;
    --activeClicks-cell-w: 100px;
    --activeViews-cell-w: 100px;
    --activeUniqueViews-cell-w: 155px;
    --activeDwellTime-cell-w: 120px;
    --activeVideo-Width-cell-w:80px;
    --activeVideo-Hight-cell-w:80px;
    --activeVideo-Size-cell-w:100px;
    --activeVideo-Length-cell-w:100px;
    --activeVideo-Fps-cell-w:80px;
    --activeVideo-BitRate-cell-w:80px;
    --activeVideo-Views-cell-w:80px;
    --activeId-cell-w:80px;
    --activeVideo-Path-cell-w: 200px;



    --stagedThumb-cell-w: 180px;
    --stagedTitle-cell-w: 165px;
    --stagedOrgName-cell-w: 100px;
    --stagedOwner-cell-w: 120px;
    --stagedVisibility-cell-w: 135px;
    --stagedViewable-cell-w: 135px;
    --stagedCreated-cell-w: 150px;
    --stagedModified-cell-w: 150px;
    --stagedLast-Published-cell-w: 160px;
    --stagedVideo-Width-cell-w: 120px;
    --stagedVideo-Hight-cell-w: 120px;
    --stagedVideo-Size-cell-w: 120px;
    --stagedVideo-Length-cell-w: 120px;
    --stagedVideo-Fps-cell-w: 120px;
    --stagedVideo-BitRate-cell-w: 120px;
    --stagedVideo-Views-cell-w:80px;
    --stagedId-cell-w:80px;
    --stagedVideo-Path-cell-w: 200px;
    /* ================== Mogul Organization ================== */


    --OrgId-cell-w: 120px;
    --OrgName-cell-w: 300px;
    --OrgLogo-cell-w: 200px;
    --OrgLink-cell-w: 350px;
    --OrgColor-cell-w: 225px;
    --album-cell-w: 300px;

    /* ================== Mogul Invited User ================== */


    --invID-cell-w: 120px;
    --invOrgName-cell-w: 255px;
    --invEmail-cell-w: 420px;
    --invProgress-cell-w: 145px;
    --invRole-cell-w: 145px;
    --invLink-cell-w: 120px;
}

.table-list{
    display: table;
    width: 100%;
  }
  
.table-row{
    display: flex;
}

.table-row:hover .bodyTable-cell{
    background-color: #d9d9d9;
}
.table-row:hover .bodyTable-cell i{
color: black !important;

}
.table-header{
    width: 100%;
    color: #fff;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 10;

}
#stagedTable-header,#activeTable-header{
    padding: 0 10px;
}
.table-header .table-cell{
    resize: horizontal;
    overflow: auto;
    background-color: #353535;
    display: flex ;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

.table-body .table-cell{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    text-align: center;
    background: #ffffff;
    overflow: hidden;
    border: 1px solid #353535;
}
.dropVidTxt{
    /* color: white; */
    padding-left: 1rem;
}
.header-row .name-cell{
    background: var(--projectAccent);
    filter: invert(100%);
    color: #fff;
}
.table-cell img{
  
    background: white;
    padding: 5px;
}
/* =============================================
========== Mogul User Table Cell Width =========
================================================ */

.thumb-cell{
    width: var(--thumb-cell-w);
    display: table-cell ;
}
.name-cell{
    width: var(--name-cell-w);
}
.email-cell{
    width: var(--email-cell-w);
}
.location-cell{
    width: var(--location-cell-w);
}
.organization-cell{
    width: var(--organization-cell-w);
}
.registered-cell{
    width: var(--registered-cell-w);
}
.lastlogin-cell{
    width: var(--lastlogin-cell-w);
}
.totalVideos-cell{
    width: var(--totalVideos-cell-w);
}
.lastSaved-cell{
    width: var(--lastSaved-cell-w);
}
.linksClicked-cell{
    width: var(--linksClicked-cell-w);
}
.videoViews-cell{
    width: var(--videoViews-cell-w);
}
.uniqueViews-cell{
    width: var(--uniqueViews-cell-w);
}
.fbPosts-cell{
    width: var(--fbPosts-cell-w);
}
.MaximumVideosAllowed-cell{
    width: var(--MaximumVideosAllowed-cell-w);
}
.active-cell{
    width: var(--active-cell-w);
}
.role-cell{
    width: var(--role-cell-w);
}
.editUsers-cell{
    width: var(--editUsers-cell-w);
}


/* =============================================
========== Mogul Bonks Table Cell Width ========
================================================ */


.BonksThumb-cell{
    width: var(--BonksThumb-cell-w);
    display: table-cell ;
}
.BonksOrganization-cell{
    width: var(--BonksOrganization-cell-w);
}
.BonksMostPopular-cell{
    width: var(--BonksMostPopular-cell-w);
}
.BonksFileName-cell{
    width: var(--BonksFileName-cell-w);
}
.BonksUploadedDate-cell{
    width: var(--BonksUploadedDate-cell-w);
}
.BonksUploadedBy-cell{
    width: var(--BonksUploadedBy-cell-w);
}
.BonksWidth-cell{
    width: var(--BonksWidth-cell-w);
}
.BonksHeight-cell{
    width: var(--BonksHeight-cell-w);
}
.BonksFileSize-cell{
    width: var(--BonksFileSize-cell-w);
}
.BonksPrice-cell{
    width: var(--BonksPrice-cell-w);
}



/* =============================================
========= Mogul Videos Table Cell Width ========
================================================ */

.activeId-cell{
    width: var(--activeId-cell-w);
}
.activeThumb-cell{
    width: var(--activeThumb-cell-w);
}
.table-body .activeThumb-cell{
    display: table-cell;
    overflow: unset ;
}
.activeTitle-cell{
    width: var(--activeTitle-cell-w);
}
.activeOrgName-cell{
    width: var(--activeOrgName-cell-w);
}
.activeVisibility-cell{
    width: var(--activeVisibility-cell-w);
}
.activeOwner-cell{
    width: var(--activeOwner-cell-w);
}
.activeViewable-cell{
    width: var(--activeViewable-cell-w);
}
.activeLast-Published-cell{
    width: var(--activeLast-Published-cell-w);
}
.activeCreated-cell{
    width: var(--activeCreated-cell-w);
}
.activeModified-cell{
    width: var(--activeModified-cell-w);
}
.activeLast-Published-cell{
    width: var(--activeLast-Published-cell-w);
}

.activeLastViewed-cell{
    width: var(--activeLastViewed-cell-w);
}
.activeClicks-cell{
    width: var(--activeClicks-cell-w);
}
.activeViews-cell{
    width: var(--activeViews-cell-w);
}
.activeUniqueViews-cell{
    width: var(--activeUniqueViews-cell-w);
}
.activeDwellTime-cell{
    width: var(--activeDwellTime-cell-w);
}
.activeVideo-Width-cell{
    width: var(--activeVideo-Width-cell-w);
}
.activeVideo-Hight-cell{
    width: var(--activeVideo-Hight-cell-w);
}
.activeVideo-Size-cell{
    width: var(--activeVideo-Size-cell-w);
}
.activeVideo-Length-cell{
    width: var(--activeVideo-Length-cell-w);
}
.activeVideo-Fps-cell{
    width: var(--activeVideo-Fps-cell-w);
}
.activeVideo-BitRate-cell{
    width: var(--activeVideo-BitRate-cell-w);
}
.activeVideo-Views-cell{
    width: var(--activeVideo-Views-cell-w);
}
.activeVideo-Path-cell{
    width: var(--activeVideo-Path-cell-w);
}

.stagedId-cell{
    width: var(--stagedId-cell-w);
}
.stagedThumb-cell{
    width: var(--stagedThumb-cell-w);
}
.stagedOrgName-cell{
    width: var(--stagedOrgName-cell-w);
}
.table-body .stagedThumb-cell{
    display: table-cell ;
    overflow: unset !important;
}
.stagedTitle-cell{
    width: var(--stagedTitle-cell-w);
}
.stagedOwner-cell{
    width: var(--stagedOwner-cell-w);
}
.stagedVisibility-cell{
    width: var(--stagedVisibility-cell-w);
}
.stagedViewable-cell{
    width: var(--stagedViewable-cell-w);
}
.stagedCreated-cell{
    width: var(--stagedCreated-cell-w);
}
.stagedModified-cell{
    width: var(--stagedModified-cell-w);
}
.stagedLast-Published-cell{
    width: var(--stagedLast-Published-cell-w);
}
.stagedVideo-Width-cell{
    width: var(--stagedVideo-Width-cell-w);
}
.stagedVideo-Hight-cell{
    width: var(--stagedVideo-Hight-cell-w);
}
.stagedVideo-Size-cell{
    width: var(--stagedVideo-Size-cell-w);
}
.stagedVideo-Length-cell{
    width: var(--stagedVideo-Length-cell-w);
}
.stagedVideo-Fps-cell{
    width: var(--stagedVideo-Fps-cell-w);
}
.stagedVideo-BitRate-cell{
    width: var(--stagedVideo-BitRate-cell-w);
}
.stagedVideo-Views-cell{
    width: var(--stagedVideo-Views-cell-w);
}
.stagedVideo-Path-cell{
    width: var(--stagedVideo-Path-cell-w);
}
/* =============================================
========= Mogul Organization Table Cell Width ========
================================================ */

.OrgId-cell{
    width: var(--OrgId-cell-w);
}
.OrgName-cell{
    width: var(--OrgName-cell-w);
}
.OrgLogo-cell{
    width: var(--OrgLogo-cell-w);
}
.OrgLink-cell{
    width: var(--OrgLink-cell-w);
}
.OrgColor-cell{
    width: var(--OrgColor-cell-w);
}
.action-cell {
    width: var(--action-cell-w);
}


/* =============================================
====== Mogul Invited User Table Cell Width =====
================================================ */

.invID-cell{
    width: var(--invID-cell-w);
}
.invOrgName-cell{
    width: var(--invOrgName-cell-w);
}
.invEmail-cell{
    width: var(--invEmail-cell-w);
}
.invProgress-cell{
    width: var(--invProgress-cell-w);
}
.invRole-cell{
    width: var(--invRole-cell-w);
}
.invLink-cell{
    width: var(--invLink-cell-w);
}