:root {

--accent: #191919;
--dark: #000000;
--light: #FFFFFF;
--overlay: rgba(0,0,0,0.7);
--ease: all 0.3s ease 0s;
--lightgray: #dfdfdf; 
}

* {
    box-sizing: borderbox;
    padding: 0;
    margin: 0;
}

body {
background-color: var(--light);
}


.employee_label {
font-family: Arial, Helvetica, sans-serif;
color: var(--light);
font-size: 11px;
background-color: var(--overlay);
height: 13px;
display: table; /* keep the background color wrapped tight */
padding: 4px;
position: absolute;
bottom: 0;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--dark);
    grid-template-areas:
    "videogrid";
}

.Info {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/Info.svg") no-repeat;
    height: 20px;
    display:grid;
    grid-area: Info;
    margin-left: 10px;
    margin-top: 10px;
}

.Info:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/InfoHover.svg") no-repeat;
}

.Info:active {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/InfoGreen.svg") no-repeat;
}

.videogrid {
  grid-area: videogrid;
  background-color: var(--dark);
  display: grid;
  grid-template-columns: 1% 1fr 1%;
  grid-template-areas:
  ". holidayvideos .";
}

.holidayvideos {
    grid-area: holidayvideos;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 12px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.holidayvideo {
    height: 110px;
    grid-column-start: span 2;
    position: relative;
    transition: var(--ease);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.holidayvideo:hover {
    transform: scale(1.02);
}

.videogrid_bottom {
    grid-area: videogrid_bottom;
    background-color: var(--accent);
    display: grid;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas:
    ". holidayicons .";
  }

.holidayicons {
    grid-area: holidayicons;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 12px;
    margin-bottom: 5px;
    grid-template-areas:
    "Unmute StartVideo . . Participants Chat ShareScreen Record Reactions . . Leave";
}

.Unmute {
    grid-area: Unmute;
    height: 70px;
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/Unmute.svg") no-repeat;
}

.StartVideo {
    grid-area: StartVideo;
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/StartVideo.svg") no-repeat;
    height: 70px;
}

.Participants {
    grid-area: Participants;
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/Participants.svg") no-repeat;
    height: 70px;
}
  
.Chat {
    grid-area: Chat;
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/Chat.svg") no-repeat;
    height: 70px;
}
  
.ShareScreen {
    grid-area: ShareScreen;
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/ShareScreen.svg") no-repeat;
    height: 70px;
}
  
.Record {
    grid-area: Record;
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/Record.svg") no-repeat;
    height: 70px;
}
  
.Reactions {
    grid-area: Reactions;
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/Reactions.svg") no-repeat;
    height: 70px;
}
  
.Leave {
    grid-area: Leave;
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/Leave.svg") no-repeat;
    height: 70px;
}

#Reactions {
    display: block;
    height: 70px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

#HolidayAlert {
    display: block;
    height: 70px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.Unmute:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/UnmuteHover.svg") no-repeat;
}

.StartVideo:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/StartVideoHover.svg") no-repeat;
    }

.Participants:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/ParticipantsHover.svg") no-repeat;
    }

.Chat:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/ChatHover.svg") no-repeat;
    }

.ShareScreen:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/ShareScreenHover.svg") no-repeat;
    }

.Record:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/RecordHover.svg") no-repeat;
    }

.Reactions:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/ReactionsHover.svg") no-repeat;
    }

.Leave:hover {
    background: url("https://fpbarch.com/wp-content/themes/fpd/library/images/Holiday2020/LeaveHover.svg") no-repeat;
    }

.Unmute:active, .StartVideo:active, .Participants:active, .Chat:active, .ShareScreen:active, .Record:active, .Reactions:active, .Leave:active {
    transform: scale(1.05);
}

@media only screen and (max-width: 900px) {
.holidayvideo {
    grid-column-start: span 4;
    height: 170px;
}

.holidayicons {
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 12px;
    grid-template-areas:
    "Unmute StartVideo Participants Chat ShareScreen Record Reactions Leave";
}
}

@media only screen and (max-width: 600px) {
    .holidayvideo {
        grid-column-start: span 6;
        height: 170px;
    }

    .holidayicons {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 12px;
        grid-template-areas:
        "Unmute StartVideo Reactions Leave";
    }
    
    #HolidayAlert {
        display:none;
}

.with-action:hover {
    cursor: pointer;
}

.Participants .stafflist {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#ffffff;
    background-color:#242424;
    font-weight:normal;
    font-size: 11px;
    font-family:Arial, Helvetica, sans-serif;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none !important;
}

.Participants:hover .stafflist {
    display:inline-block;
}

.Participants .stafflist i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-10px;
    width:20px;
    height:10px;
    overflow:hidden;
}

.Participants .stafflist i::after {
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#242424;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}