/*The Main outer Panel for the Project Page. The goal would be*/
/*to hide this panel when a user is not logged in, and display*/
/*a message to the user or something*/
.projects-main-outer-panel-class {
    display: block;
    position: relative;
    margin:0;
    padding:0;
    border-radius: 10px;
    width: calc(100% - 5px); 
    min-height: calc(100% - 5px);
    /*background-color: rgba(240,240,240,0.75);*/
    /*opacity: 0;*/
}

.project-space-allocated-div-class {
    font-size:14px;
    font-weight:bold;
    margin-left:20px;
    margin-top:50px;
    margin-bottom:5px;
}

.project-space-available-div-class {
    font-size:12px;
    color:white;
    margin-bottom:5px;
    background-color: rgba(13,151,255,1);
  
}

.project-space-used-div-class {
    font-size:12px;
    color:white;
    background-color: rgba(213,73,94,1);
    
}

#project-createproject-div-id {
    text-align:right;
}

/* Create Project Button*/
.project-createproject-button-class {
    padding-left:15px;
    padding-right:15px;
    margin-bottom:5px;
    font-size:12px;
    background-color: rgb(209, 209, 27);
}


/*Projects List Header*/
.projects-header-ul-class {
    font-size:9px;
    display:block;
    list-style: none;
    background-color:rgb(107, 170, 199);
    margin:0;
    padding:0;
    margin-left:0px;
    padding-left:3px;
    padding-bottom:8px;
    height:25px;
}

.projects-header-ul-class > li {
    float:left;
    overflow:hidden;
    color:white;
    font-weight:bold;
    text-align:center;
    margin:0;
    padding:0;
    list-style-type:none;
    height:25px;
}

#projects-header-projid-li-id {
    width:8%;
    max-width:8%;
}

#projects-header-name-li-id {
    width:30%;
    max-width:30%;
}

#projects-header-description-li-id {
    width:30%;
    max-width:30%;
}

#projects-header-actions-li-id {
    width:32%;
    max-width:32%;
}



/*Projects List (actual projects listed for display)*/
.projects-list-outer-div-class {
    display:block;
    position:relative;
    margin:0px;
    padding:0px;
    margin-bottom:25px;
    width:100%;
}

.projects-list-inner-div-class {
    display:block;
    position:relative;
    overflow-y: auto;  /* Enable or Disable horizontal scroll */
    overflow-x:hidden;
    max-height:120px;
    margin:0;
    padding:0;
    padding-top:1px;
    margin-bottom:25px;
    border-radius:5px;
    background-color:grey;
}

.projects-ul-class {
    display:flex;
    list-style: none;
    background-color:rgb(236, 239, 240);
    margin:0;
    padding:0;
    margin-left:0px;
    padding-left:5px;
    padding-bottom:8px;
    height:35px;
}

.projects-ul-class > li {
    float:left;
    color:black;
    font-size:10px;
    text-align:center;
    margin:0;
    padding:0;
    list-style-type:none;
    height:20px;
}

#projects-projid-li-id {
    width:8%;
}

.projects-name-li-class {
    width:30%;
}

.projects-description-li-class {
    width:30%;
}

#projects-edit-li-id {
    width:7%;
}

#projects-delete-li-id {
    width:7%;
}

#projects-video-li-id {
    width:7%;
}

#projects-select-li-id {
    width:7%;
}



/* Create Project Popup User can input New project details*/
.project-createproject-popup-div-class {
    display:none;
    position:sticky;
    margin-top:-90px;
    margin-left:70px;
    margin-bottom:20px;
    font-size: 12px;
    background-color: rgb(155, 155, 44);
    min-width:300px;
    max-width:300px;
    min-height:150px;
    z-index:20;
}

#project-createproject-close-button-id {
    margin:0px;
    padding:0px;
    margin-left:10px;
    font-size:10px;
    width:25px;
}

#project-createproject-name-input-id {
    font-size:10px;
    margin-bottom:10px;
}

#project-createproject-descr-input-id {
    font-size:10px;

}

.project-createproject-submit-button-class {
    font-size:10px;
    margin-left:200px;
    margin-bottom:5px;
}



/* Edit Project Popup User can input Updated project details*/
.project-editproject-popup-div-class {
    display:none;
    position:sticky;
    margin-top:-90px;
    margin-left:70px;
    margin-bottom:20px;
    font-size: 12px;
    background-color: rgba(150,150,60,1);
    min-width:300px;
    max-width:300px;
    min-height:150px;
    z-index:20;
}

#project-editproject-close-button-id {
    margin:0px;
    padding:0px;
    margin-left:10px;
    font-size:10px;
    width:25px;
}

#project-editproject-name-input-id {
    font-size:10px;
    margin-bottom:10px;
    border-radius: 5px;
    border:white;
    min-height:27px;
    width: calc(100% - 5px); 
}

#project-editproject-descr-input-id {
    font-size:10px;
    border-radius: 5px;
    border:white;
    min-height:27px;
    width: calc(100% - 5px); 
}

.project-editproject-update-button-class {
    font-size:10px;
    margin-left:200px;
    margin-bottom:5px;
}

.project-project-spacer-div-class {
    height:5px;
}

.spacer-div-class {
    min-height:25px;
}


/* Project Upload Video Panel */

#busy-spinner-button-id {
	display:none;
	margin-top:8px;
	margin-bottom:8px;	
}

#busy-spinner-uploadingvideo-button-id {
	display:none;
	margin-top:15px;
	margin-bottom:8px;	
}


.upload-video-panel-class {
	display: block;
	position: relative;
	margin:0;
	padding:0;
	border-width:1px;
	border-style:ridge;
	border-radius:10px;
	min-height: calc(100% - 5px);
	width: calc(100% - 5px); 
	min-height: 200px;
	background-color: rgba(218, 221, 187, 0.75);
	/*opacity: 0;*/
}

#upload-video-title-div-id {
    background:none;
}
.upload-video-title-h1-class {
    /*text-decoration:underline;*/
    font-size:12px;
    background:none;
}

#upload-video-choose-div-id {
    font-size:12px;
    border-width:2px;
    height:35px;
    border-style:solid;
    border-color:rgb(223, 221, 226);
    border-radius:5px;
    background-color:rgb(241, 241, 247);
    padding:7px;
    margin-left:5px;
    margin-bottom:1px;
    width: calc(100% - 10px); 
}

.upload-file-input {
    font-size:10px;
	text-align:left;
}

.upload-submit-file-input {
	font-size:10px;
	text-align:right;
}


/*Projects Video List Header*/
.project-video-header-ul-class {
    display:block;
    list-style: none;
    background-color:rgb(204, 104, 112);
    border-radius:3px;
    margin:0;
    padding:0;
    margin-left:5px;
    padding-left:3px;
    padding-bottom:8px;
    height:18px;
    width: calc(100% - 10px); 

}

.project-video-header-ul-class > li {
    float:left;
    overflow:hidden;
    color:white;
    font-size:12px;
    font-weight:bold;
    text-align:center;
    margin:0;
    padding:0;
    list-style-type:none;
    height:25px;
}

#project-video-header-name-li-id {
    width:50%;
    max-width:50%;
}

#project-video-header-size-li-id {
    width:30%;
    max-width:30%;
}

#project-video-header-actions-li-id {
    width:10%;
    max-width:20%;
}


/* Upload Video Data */
.upload-video-panel-class {
    display:none;
}

.project-video-title-notifier-span-class {
    font-size:14px;
    color:rgb(44, 8, 247);
    font-weight:bold;
    text-align:left;
    font-family:serif;
}

.upload-video-title-h1-class {
    margin-top:-20px;
}

.project-video-data-ul-class {
    display:block;
    color:black;
    list-style: none;
    background:none;
    margin:0;
    padding:0;
    margin-top:5px;
    margin-left:5px;
    padding-left:3px;
    padding-bottom:8px;
    height:25px;
    width: calc(100% - 10px); 
}

.project-video-data-ul-class > li {
    float:left;
    overflow:hidden;
    color:rgb(27, 25, 25);
    font-size:12px;
    font-weight:bold;
    text-align:center;
    margin:0;
    padding:0;
    list-style-type:none;
    height:auto;
}

#project-video-data-name-li-id {
    width:50%;
    max-width:50%;
}

#project-video-data-size-li-id {
    width:30%;
    max-width:30%;
}

#project-video-delete-li-id {
    width:10%;
    max-width:20%;
}









@media screen and (min-width: 200px) {


}


@media screen and (min-width: 325px) {

    #upload-video-choose-div-id {
        margin-bottom:10px;
    }



}


@media screen and (min-width: 400px) {
    .projects-header-ul-class {
        font-size:9px;

}


@media screen and (min-width: 520px) {

    #upload-video-choose-div-id {
        margin-bottom:1px;
    }


}

@media screen and (min-width: 620px) {
    .projects-header-ul-class {
        font-size:12px;

}