/*--------------------------------------START LIST CSS------------------------------------------------*/
/*---------------מספר ויחס הפריטים ברשימת פריטים של מערכת------------------*/
:root {
    --vidsHen_gridGap: 2px;
    --vidsHen_repeat1: auto auto;
    --vidsHen_repeat2: auto auto auto;
    --vidsHen_repeat3: auto auto auto auto;
    --vidsHen_retio: 3; /*1.503759398496241; 1.777777777777778;*/
}
.vidsHen_listTop
{
    width:100%;
    display: grid;
    grid-gap: 7px;
    padding: var(--listTopPadding);
    margin:var(--listTopMargin);
    align-items: center;
    background-color:var(--sysMenuContBgColor);
    grid-template-columns: 86px auto; 
    border-radius:var(--listTopBorRadius);
}
.vidsHen_listSizeCont
{
    display: grid;
    grid-gap: 7px;
    grid-template-columns: 22px 22px 22px;
}
/*---------------מספר ויחס הפריטים ברשימת פריטים של מערכת------------------*/
.vidsHen_listItems-grid{
    width:100%;
    justify-self: center;
    display:grid;
    grid-template-columns:var(--repeat_vidsHen);
    grid-template-rows:auto;
    grid-gap:var(--vidsHen_gridGap);
    padding: 0;
    background-color:var(--listItemsBGcolor);

    /*width: 100%;
    justify-self: center;
    display: grid;
    grid-template-columns:repeat(var(--repeat_vidsHen), 1fr);
    grid-auto-rows: minmax(calc(((100vw - ((var(--repeat_vidsHen) - 1) * var(--vidsHen_gridGap))) / var(--repeat_vidsHen)) / var(--vidsHen_retio)), auto);
    grid-gap: var(--vidsHen_gridGap);
    padding: 0;
    background-color:var(--listItemsBGcolor);*/
}
.vidsHen_grid_item {
    display: block; 
    position: relative;  
    width:100%;
    border:0px solid var(--borderColor1);
    background-color: var(--oneItemBGcolor);
    border-radius: var(--itemBorRadius);

    /*display:grid;
    padding: 0px;
    position: relative;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    background-color: var(--oneItemBGcolor);
    border-radius: var(--itemBorRadius);*/  
}
.vidsHen_botUnderPic, .vidsHen_imgListCont, .vidsHen_topOnPicDiv1, .vidsHen_topOnPicDiv2
{
    width:100%;
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    border-radius: var(--itemBorRadius); 
    overflow:hidden;
}
.vidsHen_imgList { 
    height:102%;width:102%;display:block;position:absolute;top:-2px; object-fit: cover;
}
.vidsHen_imgList2 { 
    width: 100%;
    height:100%; 
    border-radius: var(--itemBorRadius);
}

.vidsHen_botUnderPic { z-index:0; }
.vidsHen_imgListCont { z-index:1; }
.vidsHen_topOnPicDiv1 { z-index:2; }
.vidsHen_topOnPicDiv2 { z-index:3; }
.vidsHen_topOnPicDiv4
{
    width: 100%;
    z-index:40;
    display: grid;
    grid-gap:8px;
    grid-template-columns: 1px 20px auto 30px 1fr 1px;
    justify-content:start;
    position: absolute;
    bottom: 6px;
    direction:ltr;
    margin:0;
    border:none;
    border-bottom-left-radius: var(--itemBorRadius);
    border-bottom-right-radius: var(--itemBorRadius);
}    
/*owumaro.github.io/text-stroke-generator/*/
.vidsHen_textBorder1
{
    text-shadow: rgb(50, 66, 0) 1px 0px 0px, 
        rgb(50, 66, 0) 0.533333px 0.833333px 0px, 
        rgb(50, 66, 0) -0.416667px 0.916667px 0px, 
        rgb(50, 66, 0) -0.983333px 0.133333px 0px, 
        rgb(50, 66, 0) -0.65px -0.75px 0px, 
        rgb(50, 66, 0) 0.283333px -0.966667px 0px, 
        rgb(50, 66, 0) 0.966667px -0.283333px 0px;
}
.vidsHen_textBorder2
{
    text-shadow: rgba(0, 0, 0, 0.2) 2px 0px 0px, 
        rgba(0, 0, 0, 0.2) 1.75px 0.966667px 0px, 
        rgba(0, 0, 0, 0.2) 1.08333px 1.68333px 0px, 
        rgba(0, 0, 0, 0.2) 0.133333px 2px 0px, 
        rgba(0, 0, 0, 0.2) -0.833333px 1.81667px 0px, 
        rgba(0, 0, 0, 0.2) -1.6px 1.2px 0px, 
        rgba(0, 0, 0, 0.2) -1.98333px 0.283333px 0px, 
        rgba(0, 0, 0, 0.2) -1.86667px -0.7px 0px, 
        rgba(0, 0, 0, 0.2) -1.3px -1.51667px 0px, 
        rgba(0, 0, 0, 0.2) -0.416667px -1.95px 0px, 
        rgba(0, 0, 0, 0.2) 0.566667px -1.91667px 0px, 
        rgba(0, 0, 0, 0.2) 1.41667px -1.41667px 0px, 
        rgba(0, 0, 0, 0.2) 1.91667px -0.566667px 0px;
}

.vidsHen_itemMargin1{ 
    justify-self:start;
    grid-column-start:1;
}
.vidsHen_pOnline, .vidsHen_pOffline
{
    justify-self:end;
    grid-column-start:2;
    margin:auto;
    width:20px;height:10px;
    color:var(--iconsColor2);
    font-size:18px;font-weight:bold;
    line-height:8px;
}
.vidsHen_pOnline { color:var(--iconsColor2); }
.vidsHen_pOffline { color:var(--iconsColor3); }
.vidsHen_pNameText
{
    justify-self:start;
    grid-column-start:3;
    min-width:86px;
    text-align:start;
    margin:auto;
    color:var(--textColor1);
}
.vidsHen_perInfo
{
    justify-self:start;
    grid-column-start:4;
    opacity: 0;
}
.vidsHen_itemIconsList
{
    width:100%;
    justify-self: end;
    grid-column-start:5;
    text-align:right;
    /*grid-column-start:1; justify-self:start;*/
    margin:auto;
    font-size:18px;
    font-weight:bold;
    line-height:19px;
    color:var(--iconsColor2);
    opacity: 0;
}
.oneItem:hover > .vidsHen_topOnPicDiv4 .vidsHen_itemIconsList { opacity: 1; }
.oneItem:hover > .vidsHen_topOnPicDiv4 .vidsHen_perInfo { opacity: 1; }
.vidsHen_itemMargin2{
    justify-self:start;
    grid-column-start:6;
}
.vidsHen_infoIconList
{
    width:30px;height:30px;
    border-radius:8px;
    text-align:center;
    background-color:rgba(0, 0, 0, 0.4);
    color:var(--iconsColor1);
    font-size:18px;
    text-shadow: 2px 2px 1px var(--iconsColorBg);
    padding:0px 2px 0px 0px;
    cursor:help;
    padding-top:6px;
}
.vidsHen_infoListBot { font-size:16px; padding-bottom: 5px; color:var(--textColor2); }
/*-------------------------set toolTip parmeters----------www.menucool.com/tooltip/css-tooltip------------*/
.vidsHen_tooltipList {
    display:inline-block;
    position:relative;
}

.vidsHen_tooltipList .vidsHen_top {
    width:290px;
    font-size:14px;
    top:-12px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px;
    color:#FFFFFF;
    background-color:#000000;
    font-weight:normal;
    border-radius:8px;
    position:absolute;
    z-index:999999999999;
    box-sizing:border-box;
    border:1px solid #333333;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);  
    display: none; 
    opacity:0; 
    transition:opacity 0.8s;
}
.vidsHen_tooltipList .vidsHen_top h3{ padding: 0px 0px 6px 0px; margin: 0px; color:var(--textColor2); } 
.vidsHen_tooltipList .vidsHen_top p{ padding: 0px 0px 6px 0px; margin: 0px; text-align: left;} 

@-webkit-keyframes vidsHen_ttFadeIn { from { opacity: 0; } to { opacity: 0.8; } }  
@keyframes vidsHen_ttFadeIn { from { opacity: 0; } to { opacity: 0.8; } }

.vidsHen_tooltipList:hover .vidsHen_top {
    display: grid;   
    justify-items: center;   
    align-items:center;
    -webkit-animation: vidsHen_ttFadeIn 0.5s;
    animation: vidsHen_ttFadeIn 0.5s;
    opacity:0.8;
}

.vidsHen_tooltipList .vidsHen_top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.vidsHen_tooltipList .vidsHen_top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#000000;
    border:1px solid #333333;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
/*-------------------------end toolTip parmeters--------------*/

/*--------------------------------------END LIST CSS------------------------------------------------*/
/*
@media only screen and (max-width: 1650px) {
    :root {
        --vidsHen_repeat1: auto auto auto;
        --vidsHen_repeat2: auto auto auto auto;
        --vidsHen_repeat3: auto auto auto auto auto;
    }
}
*/
@media only screen and (max-width: 1350px) {
    :root {
        --vidsHen_repeat1: auto;
        --vidsHen_repeat2: auto auto;
        --vidsHen_repeat3: auto auto auto;
    }
}
@media only screen and (max-width: 1000px) {
    :root {
        --vidsHen_repeat2: auto;
        --vidsHen_repeat3: auto auto;
    }
}
/*
@media only screen and (max-width: 770px) {
    :root { 
        --vidsHen_repeat1: auto;
        --vidsHen_repeat3: auto auto;
    }
}
*/
@media only screen and (max-width: 510px) {
    .vidsHen_listTop { grid-template-columns: auto; }
    .vidsHen_listSizeCont{ display:none; } 
    :root { --vidsHen_repeat3: auto; } 
}
/*
@media only screen and (max-width: 360px) {
    :root { --vidsHen_repeat3: auto; }
}
*/