/*
    FoosFit Progressive Web App
	Developed by Aptus Engineering, Inc. for WeFoos LLC
	Author(s): Narendran Muraleedharan <narendran.m@aptus.aero>
			   Rakshith Subramanyam <rakshith.s@aptus.aero>
			   James Guerra <james.g@aptus.aero>

	__DISCLAIMER__
	THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESSED OR IMPLIED WARRANTIES,
	INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
	AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
	REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
	SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
	PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
	WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
	OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
	ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

/*---------------------------------------------------------------------------------*/
/* Begin of Dynamic FOOSEVENTS Data */
/*---------------------------------------------------------------------------------*/


.database-foosevents-eventtype-search-div-class {
	position:relative;
	display:block;
	margin-top:1%;
	margin-bottom:1%;
	margin-left:1%;
	margin-right:1%;
	padding-top:0%;
	padding-bottom:0%;
}

.database-foosevents-eventtype-search-ul-class {
	margin:0px;
	padding:0px;
	width:100%;
	height:30px;
	list-style: none;
	text-decoration:none;	
}

.database-foosevents-eventtype-search-ul-class > li {
    float:left;
	margin:0px;
	padding:0px;
	text-decoration:none;
	list-style: none;
	font-size:8px;
	white-space: wrap;
	text-align:right;
}

.select-foosevents-et-tables-class {
	font-size:8px;
}

#database-foosevents-search-button-id {
	font-size:8px;
	text-decoration:none;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:10px;
	padding-right:10px;
	color: #fff;
    font-weight: bold;
    background-color: #538fbe;
    border: 1px solid #2d6898;
    background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(73,132,180)),
        color-stop(1, rgb(97,155,203))
    );
}

#database-foosevents-createnewevent-button-id {
	font-size:8px;
	text-decoration:none;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:2px;
	padding-right:2px;
	color: #fff;
    font-weight: bold;
    background-color: #538fbe;
    border: 1px solid #2d6898;
    background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(73,132,180)),
        color-stop(1, rgb(97,155,203))
    );
}

.database-fe-evtheader-ul-class {
	display:flex;
	list-style: none;
	background-color:rgb(107, 170, 199);
	margin:0;
	padding:0;
	margin-left:0;
	padding-bottom:8px;
	height:12px;
}

.database-fe-evtheader-ul-class > li {
	float:left;
	overflow:hidden;
	color:white;
	font-size:9px;
	text-align:center;
	margin:0;
	padding:0;
	list-style-type:none;
	height:12px;

}

#database-fe-evt-evtidheader-li-id{margin-left:1px; margin-right:0px; padding-left:0px; padding-right:0px;}
#database-fe-evt-evtnameheader-li-id{margin-left:7px; margin-right:0px; padding-left:0px; padding-right:0px;}
#database-fe-evt-foosernameheader-li-id{margin-left:5px; margin-right:0px; padding-left:0px; padding-right:0px;}

#database-fe-evt-activeheader-li-id{ margin-left:5px; margin-right:0px; padding-left:0px; padding-right:0px;}
#database-fe-evt-appliedheader-li-id{ margin-left:5px; margin-right:2px; padding-left:0px; padding-right:0px;}

#database-fe-evt-evtidheader-li-id {
	width:10%;
	max-width:10%;
}

#database-fe-evt-evtnameheader-li-id {
	width:36%;
	max-width:36%;
}

#database-fe-evt-foosernameheader-li-id {
	width:30%;
	max-width:30%;
}

#database-fe-evt-activeheader-li-id {
	width:11%;
	max-width:11%;
}

#database-fe-evt-appliedheader-li-id {
	width:13%;
	max-width:13%;
}



.database-fe-evt-div-class {
	position:relative;
	margin:0;
	padding:0;
	margin-left:0;
	height:200px;
	background-color:rgba(242,242,242, .2);
	overflow:auto;

}

.database-fe-evt-ul-class {
	display:flex;
	list-style: none;
	margin:0;
	padding:0;
	margin-bottom:5px;
}

.database-fe-evt-ul-class > li {
	float:left;
	overflow: auto;
	color:black;
	font-size:10px;
	text-align:center;
	margin-right:1%;
	padding:0;
	list-style-type:none;
}

#database-fe-evtid-li-id{margin-left:1px; margin-right:0px; padding-left:0px; padding-right:0px;}
#database-fe-evt-evtname-li-id{margin-left:7px; margin-right:0px; padding-left:0px; padding-right:0px;}
#database-fe-evt-foosername-li-id{margin-left:5px; margin-right:0px; padding-left:0px; padding-right:0px;}

#database-fe-evt-active-li-id{ margin-left:5px; margin-right:0px; padding-left:0px; padding-right:0px;}
#database-fe-evt-applied-li-id{ margin-left:5px; margin-right:2px; padding-left:0px; padding-right:0px;}


#database-fe-evtid-li-id {
	width:10%;
	max-width:10%;
}

#database-fe-evt-evtname-li-id {
	width:36%;
	max-width:36%;
}

#database-fe-evt-foosername-li-id {
	width:30%;
	max-width:30%;
}

#database-fe-evt-active-li-id {
	width:11%;
	max-width:11%;
}

#database-fe-evt-active-img-id {
	height:10px;
	background-color: blue;
}

#database-fe-evt-applied-li-id {
	width:13%;
	max-width:13%;
}

#database-fe-evt-applied-img-id {
	height:10px;
}

.database-fe-evt-update-div-class {
	position:fixed;
	display:block;
	overflow: auto;
	margin-top:0px;
	top: 58%;	
	margin-left:3%;
	margin-right:10%;
	background-color: rgba(230, 204, 179, 1);
}

.database-fe-update-header-div-class {
    text-align:center;
	font-size: 10px;
	color:white;
	height:13px;
    background-color: rgba(107, 170, 199, 1);
}

/* Position the close button (top right corner) */
.database-fe-evt-update-div-class .closeupdateeventbtn {
    position: absolute;
	color:white;
	margin:0px;
	padding:0px;
    top:-6px;
    right: 3px;
	z-index: 8; /* Sit on top */
    font-size: 20px;
	text-decoration:none;
}

.database-fe-evt-info-div-class {
	font-size:10px;
	margin-top:1px;
	margin-bottom:5px;
	margin-left:0%;
	margin-right:0%;
	padding-left:3px;
	border: 1px solid tan;
	background-color: rgba(194, 194, 214, .5);
}

#database-fe-evt-description-label-id {
	font-size:10px;
	margin-left:10%;
}

.database-fe-evt-description-textarea-class {
	font-size:10px;
	margin-left:10%;
	margin-right:10%;
	margin-bottom:3px;
	width:80%;
	min-height:40px;
	padding-left:3px;
	overflow-wrap: break-word;
	border: 1px solid rgba(230, 204, 179, .9);
	background-color: white;	
}

.database-fe-evt-update-button-class {
	font-size:10px;
	margin-left:1%;
	text-decoration:none;
	padding-top:1px;
	padding-bottom:1px;
	padding-left:8px;
	padding-right:8px;
	color:black;
    font-weight: bold;
    background-color: rgb(192, 192, 192);
    border: 1px solid #2d6898;
}

.database-fe-evt-delete-button-class {
	font-size:10px;
	margin-left:1%;
	text-decoration:none;
	padding-top:1px;
	padding-bottom:1px;
	padding-left:8px;
	padding-right:8px;
	color:black;
    font-weight: bold;
    background-color: rgb(255, 0, 0);
    border: 1px solid #2d6898;
}
.database-fe-evt-activate-button-class {
	font-size:10px;
	margin-left:1%;
	margin-bottom:1%;
	text-decoration:none;
	padding-top:1px;
	padding-bottom:1px;
	padding-left:8px;
	padding-right:8px;
	color:black;
    font-weight: bold;
    background-color: rgb(204, 255, 153);
    border: 1px solid #2d6898;
}

.database-fe-evt-setpublic-button-class {
	font-size:10px;
	margin-left:1%;
	margin-bottom:1%;
	text-decoration:none;
	padding-top:1px;
	padding-bottom:1px;
	padding-left:8px;
	padding-right:8px;
	color:black;
    font-weight: bold;
    background-color: rgb(50, 160, 168);
    border: 1px solid #2d6898;
}

.database-fe-newevent-div-class {
	position:fixed;
	display:block;
	margin-top:0px;
	top: 58%;	
	margin-left:3%;
	margin-right:10%;
	background-color: rgba(230, 204, 179, 1);
}


.database-fe-newevent-header-div-class {
	text-align:center;
	font-size: 10px;
	color:white;
	height:13px;
    background-color: rgba(107, 170, 199, 1);
}

/* Position the close button (top right corner) */
.database-fe-newevent-div-class .closecreateneweventbtn {
    position: absolute;
	color:white;
	margin:0px;
	padding:0px;
    top:-6px;
    right: 3px;
	z-index: 8; /* Sit on top */
    font-size: 20px;
	text-decoration:none;
}

#database-fe-newevent-name-label-id {
	font-size:13px;
	margin-left:5%;
}

.database-fe-newevent-name-input-class {
	font-size:12px;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:3px;
	width:80%;
	padding-left:3px;
	border: 1px solid rgba(230, 204, 179, .9);
	background-color: white;	
}

#database-fe-newevent-description-label-id {
	font-size:13px;
	margin-left:10%;
}

.database-fe-newevent-description-textarea-class {
	font-size:12px;
	margin-left:10%;
	margin-right:10%;
	margin-bottom:3px;
	width:80%;
	min-height:40px;
	padding-left:3px;
	border: 1px solid rgba(230, 204, 179, .9);
	background-color: white;	
}

.database-fe-evt-newevent-button-class {
	font-size:12px;
	margin-left:10%;
	margin-bottom:10px;
	text-decoration:none;
	padding-top:1px;
	padding-bottom:1px;
	padding-left:12px;
	padding-right:12px;
	color:black;
    font-weight: bold;
    background-color: rgb(255, 255, 0);
    border: 1px solid #2d6898;
}

/*---------------------------------------------------------------------------------*/
/* End of Dynamic FOOSEVENTS Data */
/*---------------------------------------------------------------------------------*/



/******************************************************************************/
/********** REPSONSIVE SECTION BELOW ******************************************/
/******************************************************************************/
	
@media screen and (min-width: 200px) {
	
	#database-foosevents-eventtype-li-dropdown-id {margin-left:1px;}
	#select-foosevents-et-tables-id {font-size:8px;}
	#database-foosevents-search-button-id {font-size:8px;}
	#database-foosevents-createnewevent-li-dropdown-id {margin-left:2px; padding-left:5px; padding-right:5px;}
	#database-foosevents-createnewevent-button-id {font-size:8px;}	
	
	.database-fe-evt-ul-class > li {
		font-size:9px;
	}

	.database-fe-evtheader-ul-class > li {
		font-size:9px;
	}

	.database-fe-evt-ul-class > li {
		font-size:9px;
	}

	#database-fe-evt-evtidheader-li-id{margin-left:1px; margin-right:0px; padding-left:0px; padding-right:0px;}
	#database-fe-evt-evtnameheader-li-id{margin-left:7px; margin-right:0px; padding-left:0px; padding-right:0px;}
	#database-fe-evt-foosernameheader-li-id{margin-left:5px; margin-right:0px; padding-left:0px; padding-right:0px;}
	#database-fe-evt-activeheader-li-id{ margin-left:5px; margin-right:0px; padding-left:0px; padding-right:0px;}
	#database-fe-evt-appliedheader-li-id{ margin-left:5px; margin-right:2px; padding-left:0px; padding-right:0px;} 
 
	#database-fe-evtid-li-id{margin-left:1px; margin-right:0px; padding-left:0px; padding-right:0px;}
	#database-fe-evt-evtname-li-id{margin-left:7px; margin-right:0px; padding-left:0px; padding-right:0px;}
	#database-fe-evt-foosername-li-id{margin-left:5px; margin-right:0px; padding-left:0px; padding-right:0px;}
	#database-fe-evt-active-li-id{ margin-left:5px; margin-right:0px; padding-left:0px; padding-right:0px;}
	#database-fe-evt-applied-li-id{ margin-left:5px; margin-right:2px; padding-left:0px; padding-right:0px;} 
		
}


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

	/* dynamic Database area*/

	#database-foosevents-eventtype-li-dropdown-id {margin-left:5px;}
	#select-foosevents-et-tables-id {font-size:9px;}
	#database-foosevents-search-button-id {font-size:9px;}
	#database-foosevents-createnewevent-li-dropdown-id {margin-left:10px;}
	#database-foosevents-createnewevent-button-id {font-size:9px;}

	.database-fe-evtheader-ul-class > li {
		font-size:10px;
	}

	.database-fe-evt-ul-class > li {
		font-size:10px;
	}

}


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

	/* dynamic Database area*/

	#database-foosevents-eventtype-li-dropdown-id {margin-left:40px;}
	#select-foosevents-et-tables-id {font-size:10px;}
	#database-foosevents-search-button-id {font-size:10px;}
	#database-foosevents-createnewevent-li-dropdown-id {margin-left:20px;}
	#database-foosevents-createnewevent-button-id {font-size:10px;}	
	
	.database-attempts-save-button-class {
		margin-left:10px;
	} 

	.database-fe-evtheader-ul-class > li {
		font-size:10px;
	}

	.database-fe-evt-ul-class > li {
		font-size:10px;
	}

}


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


	/* dynamic Database area*/

	#database-foosevents-eventtype-li-dropdown-id {margin-left:50px;}
	#select-foosevents-et-tables-id {font-size:10px;}
	#database-foosevents-search-button-id {font-size:10px;}
	#database-foosevents-createnewevent-li-dropdown-id {margin-left:10px;}
	#database-foosevents-createnewevent-button-id {font-size:10px;}

}


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

	/* dynamic Database area*/

	#database-foosevents-eventtype-li-dropdown-id {margin-left:157px;}
	#select-foosevents-et-tables-id {font-size:10px;}
	#database-foosevents-search-button-id {font-size:10px;}
	#database-foosevents-createnewevent-li-dropdown-id {margin-left:20px; font-size:10px;}
	#database-foosevents-createnewevent-button-id {font-size:10px;}

}


@media screen and (min-width: 560px) {
	
	/* dynamic Database area*/

	#database-foosevents-eventtype-li-dropdown-id {margin-left:178px;}
	#select-foosevents-et-tables-id {font-size:10px;}
	#database-foosevents-search-button-id {font-size:10px;}
	#database-foosevents-createnewevent-li-dropdown-id {margin-left:20px; font-size:10px;}
	#database-foosevents-createnewevent-button-id {font-size:10px;}

}