@import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);

body{
	margin: 0;
	padding: 0;
	background: #fff;

	color: #fff;
	font-family: 'Open Sans';
	font-size: 12px;
}

.body{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 550px;
	bottom: 0px;
	width: auto;
	height: auto;
	background-color:#FFFFFF;
	background-image:url(../Images/Background.jpg);
	background-size: cover;
	-webkit-filter: blur(0px);
	z-index: 0;
}

.header{
	position: absolute;
	top: calc(52% - 50px);
	left: calc(74% - 0px);
	z-index: 2;
}

.header div{
	float: center;
	color: #B804B0;
	font-family: Open Sans;
	font-size: 50px;
	font-weight: 200;
}

.header div span{
	color: #B804B0 !important;
}
.header2{
	position: absolute;
	top: calc(62% - 42px);
	left: calc(65% - 0px);
	z-index: 2;
}

.header2 div{
	float: center;
	color: #000000;
	font-family: Open Sans;
	font-size: 20px;
	font-weight: 100;
}

.header2 div span{
	color: #808080 !important;
}

.logo{
	position: absolute;
	top: calc(50% - 165px);
	left: calc(75% - 0px);
	z-index: 2;
}

.logo div{
	float: left;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 35px;
	font-weight: 200;
}

.logo div span{
	color: #5379fa !important;
}

.login{
	position: absolute;
	top: calc(58% - 0px);
	left: calc(64% - 0px);
	height: 150px;
	width: 350px;
	padding: 15px;
	z-index: 2;
}

.login input[type=text]{
	width: 410px;
	height: 30px;
	background: transparent;
	border: 2px solid #FF5900;
	border-radius: 2px;
	color: #000000;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 4px;
}

.login input[type=password]{
	width: 410px;
	height: 30px;
	background: transparent;
	border: 2px solid #FF5900;
	border-radius: 2px;
	color: #000000;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 0px;
	margin-top: 10px;
}

.login input[type=submit]{
	width: 100px;
	height: 35px;
	background: #FFFFFF;
	border: 2px solid #FF5900;
	cursor: pointer;
	border-radius: 4px;
	color: #FF5900;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 0px;
	margin-top: 10px;
}

.login input[type=submit1]:hover{
	opacity: 0.8;
	background: #FF5900;
	color: #FFFFFF;
}

.login input[type=submit]:active{
	opacity: 0.6;
	color: #FF0000;
}

.login input[type=text]:focus{
	outline: none;
	border: 2px solid #FFD100;
}

.login input[type=password]:focus{
	outline: none;
	border: 2px solid #FFD100;
}

.login input[type=submit]:focus{
	outline: none;
}

::-webkit-input-placeholder{
   color: rgba(255,255,255,0.6);
}

::-moz-input-placeholder{
   color: rgba(255,255,255,0.6);
}
#divOnTop { z-index: 1000; }
hr { 
		position: absolute;
		top: calc(51% - 0px);
		left: calc(70.5% - 0px);
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    width: 18%;
} 

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;800&display=swap");

h1 {
	font-weight: 800;
	margin: 1rem 0 0;
}

ui {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	flex-wrap: wrap;
	list-style: none;

	li {
		display: flex;
		width: 10rem;
		height: 10rem;
		margin: 0.25rem;
		flex-flow: column;
		border-radius: 0.2rem;
		padding: 1rem;
		font-weight: 300;
		font-size: 0.8rem;
		box-sizing: border-box;
		background: #E5E5E5;
		-webkit-backdrop-filter: blur(4px);
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.18);
                font-family:Calibri;
                color: #000000;

		time {
			font-size: 2rem;
			//margin: 0 0 1rem 0;
			font-weight: 500;
		}
	}
	.today {
		time {
			font-weight: 800;
		}
		background: #FF6800;
                color: #000000;
	}
}
    li {
        position: relative;
    }
    .add-event-button {
        position: absolute;
        top: 5px;
        right: 5px;
        text-decoration: none;
        background-color: #FF6800;
        color: white;
        border-radius: 30%;
        padding: 1px 5px;
    }
    .add-event-button:hover {
        background-color: #0056b3;
    }
.top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 1.5cm; /* Height set to 1cm */
            background-color: #FF6800;
            color: white;
            display: flex;
            align-items: center;
            justify-content: left;
            z-index: 1000; /* Ensure it stays on top of other content */
        }
        .content {
            padding-top: 2cm; /* Padding to avoid content being hidden behind the top bar */
        }