/* ################################################################## */
/* Standards, could be that some are not used */
/* ################################################################## */
body{
	margin:0;
	font-family:Verdana,sans-serif;
	font-size:15px;
	line-height:1.5
}
html{
	font-family:Verdana,sans-serif;
	font-size:15px;
	line-height:1.5;
	overflow-x:hidden
}
h1{
	font-size:36px;
	font-family:"Segoe UI",Arial,sans-serif;
	font-weight:400;
	margin:10px 0;
}
h2{
	font-size:30px;
	font-family:"Segoe UI",Arial,sans-serif;
	font-weight:400;
	margin:10px 0;
}
h3{
	font-size:24px;
	font-family:"Segoe UI",Arial,sans-serif;
	font-weight:400;
	margin:10px 0;
}
h4{
	font-size:20px;
	font-family:"Segoe UI",Arial,sans-serif;
	font-weight:400;
	margin:10px 0;
}
h5{
	font-size:18px;
	font-family:"Segoe UI",Arial,sans-serif;
	font-weight:400;
	margin:10px 0;
}
h6{
	font-size:16px;
	font-family:"Segoe UI",Arial,sans-serif;
	font-weight:400;
	margin:10px 0;
}



/* ################################################################## */
/* Navbar left */
/* ################################################################## */
 /* Add a black background color to the top navigation */
.cl_Navbar {
  background-color: #757575; /* color: middle grey */
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.cl_Navbar a {
  float: left;
  color: white; /* #f2f2f2 color: very light grey */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #1919FF; /* color: MSCE blue */
  color: white;
}

/* Hide the link that should open and close the Navbar on small screens */
.cl_Navbar .cl_NavbarIcon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.cl_NavbarDropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the Navbar */
.cl_NavbarDropdown .cl_NavbarDropdownButton {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.cl_NavbarDropdownContent {
  display: none;
  position: absolute;
  background-color: #f2f2f2; /* color: very light grey */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.cl_NavbarDropdownContent a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on Navbar links and the dropdown button on hover */
.cl_Navbar a:hover, .cl_NavbarDropdown:hover .cl_NavbarDropdownButton {
  background-color: #555; /* color: dark grey */
  color: white;
}

/* Add a grey background to dropdown links on hover */
.cl_NavbarDropdownContent a:hover {
  background-color: #ddd; /* color: light grey */
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.cl_NavbarDropdown:hover .cl_NavbarDropdownContent {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the Navbar (.cl_NavbarIcon) */
@media screen and (max-width: 600px) {
  .cl_Navbar a:not(:first-child), .cl_NavbarDropdown .cl_NavbarDropdownButton {
    display: none;
  }
  .cl_Navbar a.cl_NavbarIcon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the Navbar with JavaScript when the user clicks on the NavbarIcon. This class makes the Navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .cl_Navbar.responsive {
	  position: relative;
	}
  .cl_Navbar.responsive a.cl_NavbarIcon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .cl_Navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .cl_Navbar.responsive .cl_NavbarDropdown {
	  float: none;
	}
  .cl_Navbar.responsive .cl_NavbarDropdownContent {
	  position: relative;
	}
  .cl_Navbar.responsive .cl_NavbarDropdown .cl_NavbarDropdownButton {
    display: block;
    width: 100%;
    text-align: left;
  }
} 

/* ################################################################## */
/* Navbar right */
/* ################################################################## */


/* Create a right-aligned (split) link inside the navigation bar */
.cl_Navbar a.cl_NavbarRight {
  float: right;
  background-color: #FFFA14; /* color: MSCE yellow */
  color: black;
}

/* ################################################################## */
/* Header */
/* ################################################################## */


/* Create grey box for the quote */
.cl_Header {
	display:inline-block;
	width:100%;
	text-align:center;
	color:#fff; /* color: white */
	background-color:#1919FF; /* color: msce blue */
	padding:15px 16px;
}

.cl_Header h1 {

	margin:16px;
	font-size:50px;
}

.cl_Header p {
	font-size:22px;
}

/* ################################################################## */
/* Quote in footer */
/* ################################################################## */


/* Create grey box for the quote */
.cl_Quote {
  background-color: #757575; /* color: middle grey */
}

.cl_Quote h1 {
  color: #f2f2f2; /* color: very light grey */
  text-align: center;
  padding: 40px 20px;
  text-decoration: none;
  font-size: 30px;
}

/* ################################################################## */
/* All Pages */
/* ################################################################## */

.containerX{
	padding-top:64px;
	padding-bottom:64px;
	padding-right:8px;
	padding-left:8px
}

/* ################################################################## */
/* UserHome.php */
/* ################################################################## */

.cl_1columns {
/*	column-count: 1; */
/* column-gap: 10px; */
/* column-width: 120px; */
/*	overflow: hidden; */
	/* margin: 10px; */
	/* padding: 10px; */
}

.cl_UserDetails {
	border: 1px solid grey;
	margin: 10px;
	padding: 10px;
	/* float:left; */
	/* width:66.66666%;" */
}

.cl_Details {
	border: 1px solid grey;
	margin: 10px;
	padding: 10px;
}

.cl_tblUserHome {
	padding: 2px 10px;
	text-align: center;
}

.cl_field {
	
}

.cl_fieldControl {

}

/* ################################################################## */
/* UserEvent.php */
/* ################################################################## */

.cl_Events {
	border: 1px solid grey;
	margin: 10px;
	padding: 10px;
}

.cl_EventsDetails {
	/*background-color: #757575; /* color: middle grey +- 45%*/
	background-color: #a6a6a6; /* color: middle grey +- 65%*/
	border: 1px solid grey;
	margin: 10px;
	padding: 10px;
}

/* ################################################################## */
/* UserLoginResgistration.php */
/* ################################################################## */
.login-box{
	max-width: 700px;
	float: none;
	margin: 50px auto;
}

.login-left{
	background: rgba(211, 211, 211, 0.5);
	padding: 5px;
}

.login-right{
	background: #fff;
	padding: 5px;
}

.form-control{
	background-color: transparent !important;
	
}

.align-right{
	/*float: right;*/
}

/* ################################################################## */
/* UserHome.php */
/* ################################################################## */
.cl_Popup{
	width: 300px;
	background: #fff;
	border-radius: 6px;
	border-color: red;
	border-style: solid;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.1);
	text-align: center;
	padding: 0 30px 30px;
	color: #333;
	visibility: hidden;
	transition: transform 0.4s, top 0.4s;
}

.cl_PopupOpen{
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	visibility: visible;
}

.cl_PopupImg{
	width: 100px;
	margin-top: -10%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.cl_PopupButton{
	width: 100%;
	margin-top: 50px;
	padding: 10px 0;
	background: #6fd649;
	color: #fff;
	border: 0;
	outline: none;
	font-size: 18px;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* ################################################################## */
/* ******.html */
/* ################################################################## */