/* ==================
CLIPS
====================*/

ul, li{
   margin:0;
   padding: 0;
   text-indent: 0;
   list-style-type: none;
}
li::marker{
   content: "";
}

/* ==================
content, header, list box, buttons
====================*/
.clip_cont{
   position: relative;
   flex-grow: 1;
   background: #fff;
   margin-top: 10px;
   overflow: hidden;
}
.clip_head{
   width: 100%;
   height: 2.2rem;
   margin: 0 0 10px 0;
   background: #9E8FB2;
   border-bottom: 1px solid #333;
   color: #fff;
}
/* cam buttons */
#clb_box{
	height: 3rem;
   display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
#clb_box .cam_button{
	background: #A7ACD9;
   background: #999;
   color: #000;
}
.dev1 #clb_box .cam_button{
   width: 170px;
}
#clb_box[data-v="1"] #clb_1,
#clb_box[data-v="2"] #clb_2,
#clb_box[data-v="3"] #clb_3{
   background:#4F6869;
   color:#fff;
}

#list{
   position: relative;
   width: 100%;
   flex-grow: 1;
   display: flex;
	flex-direction: column;
   justify-content: center;
   overflow-y: auto;
   background: #fff;
}
.list_ct{
   position: absolute;
   width: 100%;
   top: 0;
}


/* ==================
cam month day hour boxes
====================*/
#cll_box{
   background: #fff;
   padding: 10px 10px 30px 10px;
   min-width: 30%;
}
.cl-mw,
.cl-dw,
.cl-hw{
   display: block;
   flex: 1 1 0px;
   height: 2rem;
   margin: 0 0 5px 0;
   border-radius: 5px;
   text-align: center;
   line-height: 2rem;
   white-space: nowrap;

   font-weight: 500;
	box-shadow: inset -3px -3px 6px 0px rgba(0,0,0,0.4);
   cursor: pointer;
}
.cl-hw::before{
   content: "►";
   position: absolute;
   margin-top: 0.25rem;
   display: flex;
   justify-content: center;
	align-items: center;   
	left: calc( 14px + 20%);   
   height: 1.4rem;
   width: 1.4rem;
   font-size: 0.8rem;
   background: #fff;
   color: green;
	box-shadow: inset -3px -3px 6px 0px rgba(0,0,0,0.4);
   border-radius: 1.35rem;
}

.cl-mw{
   background: #4F6869;
   color: #fff;
   font-size: 1.3rem;
   font-variant: small-caps;
}
.cl-m ul{
   box-sizing: border-box;
   padding: 0 0 0 10%;
}

.cl-dw{
   background: #82AEB1;
   font-size: 1rem;
}



.cl-hw{
   background: #93C6D6;
   font-size: 1rem;
}



/* ==================
DISPLAYS
====================*/

/* CAM LIJSTEN , display by CLL_BOX data-dc */
#cll_box .cl_list{display:none;}
#cll_box[data-dc="1"] #cll_1{display:block;}
#cll_box[data-dc="2"] #cll_2{display:block;}
#cll_box[data-dc="3"] #cll_3{display:block;}

/* OPEN / CLOSE UL/LI maand,dag */
.list ul{
  display: none;
}
.uncol>ul{
   display:block;
}

/* NDS: Hoster en/of Server */
#clip_cont[data-v="0"]{
   display:none;
}
/* NDS: Hoster en/of Server */
.nds{display:none;}
#clip_cont[data-v="2"] .nds{
   display:block;
}


/* ==================
CLIP PLAYER
====================*/
#clip_player{
   position: absolute;
   top: 0;
   left:0;
   right:0;
   bottom: 0;
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
   background:#000
}
#clip_player figure{
   position: relative;
   display: flex;
   justify-content: center;
   margin: 0;
   padding: 0;
   width: auto;
   height: auto;
   max-height: 98%;
   aspect-ratio: auto;
}
#clip_player video{
   max-width: 100%;
   max-height: 100%;
}
#clip_player figcaption{
   position: absolute;
   top: 5px;
   left:0;
   background: #fff;
   color: #000;
   text-align: center;
}
.clip_close{
   position: absolute;
   top: 10px;
   left:10px;
	width: 40px;
   height: 40px;
   border-radius:20px;
   background: #fff;
   font-weight: 800;
   z-index:100;
	box-shadow: inset -3px -3px 6px 0px rgba(0,0,0,0.4);
   cursor:pointer;
}