:root {
		  --cyan: #0EA5E9;
		  --green: #34D399;
		  --white: #F1F5F9;
		  --grey: #94A3B8;
		  --background: #0B0F17;
		}

		.roboto-demo {
		  font-family: "Roboto", sans-serif;
		  font-optical-sizing: auto;
		  font-weight: 400;
		  font-style: normal;
		  font-variation-settings:"wdth" 100;
		}

		body{
			background-color: var(--background);
			font-family: Roboto;
			color: #F1F5F9;
			font-family: Arial;
			padding: 20px 2%;
			text-align: center;

		  font-family: "Roboto", sans-serif;
		  font-optical-sizing: auto;
		  font-weight: 500;
		  font-style: normal;
		  font-variation-settings:"wdth" 100;			
		}
		#panels{
			display: flex;			
		}
		.panel{
			background-color: #1E293B;
			border-radius: 10px;			
		}
		.centerpanel{
			flex-grow:1;
			position: relative;
			flex-direction: column;
		}
		.col{
			width: 15%;
		}
		table{
			text-align: center;
			width: 98%;
			margin: 10px auto;
			border:1px solid grey;
			border-radius: 9px;
		}
		th{
			background-color: #444;
		}
		td{
			padding: 3px 0;
			font-size: 14px;
		}
		h1{
			margin: 10px auto;	
		}
		h2{
			color: var(--white);
			margin: 20px auto;
			font-size: 18px;
		}

		.section{
			margin: 10px;			
			border:1px solid grey;
			padding: 0 12px;
			text-align: left;
		}
		#header{
			margin: 10px;
			display: flex;
			flex-direction: row;
			width: auto;
			justify-content: space-between;
			padding: 20px;
			position: relative;
		}
		#header img{			
			display: block;
			height: 50px;
			align-items: center;
		}

		#pickMonth{
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			justify-content: center;
		}
		.month{
			padding: 5px;
			border-radius: 6px;
			border: 1px solid;
			flex-grow: 1;
			cursor: pointer;
			text-align: center;
			width: 20%;
		}
		.month.on{
			background-color: #ffffff40;
    		color: bisque;
		}
		.filter{
			font-size: 14px;
			margin-bottom: 25px;
		}
		.filtername{
			margin-bottom: 10px;
		}
		#search{
			background-color: transparent;
			border-radius: 5px;
			padding: 5px;
			border:1px solid #ccc;
			width: 100%;
			color: var(--white);
		}
		#searchRes{
			display: flex;
			gap: 5px;
			flex-direction: column;
		}

		#createPlan{
			cursor: pointer;
			margin-top: 3px;
		}

		#plans{
			display: flex;
			flex-direction: row;
			gap: 2px;
		}
		.plan{
			border: 1px solid;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			width: auto;
			cursor: pointer;
			padding: 5px 30px;
		}
		.plan.active{
			background-color: var(--cyan);
			color: var(--white);
		}

		.calendarMonth{
			display: flex;
			flex-direction:row;
			width: auto;
			margin: 10px 0;
		}
		.monthNum{
			width: 30px;
			flex-shrink: 0;
		}
		.monthAmount{
			background-color: var(--green);
			height: 20px;
			line-height: 20px;
			margin-left: 15px;
			border-radius: 2px;
			color: var(--background);
			text-align: center;
			font-weight: normal;
			font-size: 14px;
		}

		#centerPanel{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
		}

		#sumupKeys{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		#sumupKeys .value{
			color: var(--cyan);
			font-size: 34px;
			font-weight: bold;
			text-align: center;
		}

		#planSelector{
			position: absolute;
    		right: 10px;
    		top: 15px;			
		}
		#planSelector select{
			display: inline-block;
		}

		wm-oat{
			margin-bottom: 10px;
		}

		.mask{
			opacity: 1;
			background-color:rgba(0, 0, 0, 0.85);
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			position: absolute;			
			display: flex;
  			justify-content: center;
  			align-items: center;			
		}

		.activePop{
			margin-left:auto;
			margin-right: auto;
			border: 2px solid var(--cyan);
			width: 50%;
			border-radius: 20px;
			box-shadow: 0px 1px 20px 1px var(--cyan);
			display: block!important;
		}

		#popOAT{
			line-height: 25px;
		}
		.pop{
			display: none;
			background-color: var(--background);
		    top: 25%;
		    left: 25%;
		    right: 25%;			
		    padding: 0 20px 20px;
		    text-align: left;
		}

		#validAdd{
    		margin: 0 0 0 auto;
    		width: fit-content;
		}

		.hide{
			display: none;
		}

		#planSumup{
			flex:0;
		}


		#loginForm{
			display: flex;
			flex-direction: column;
			width: 50%;
			margin: 50px auto;
			padding: 0 50px 50px;
			gap: 15px;
		}

		#accountPart{
			font-size: 14px;
			display: flex;
			flex-direction: column;
			width: auto;
			position: absolute;
			right: 80px;
			text-align: center;
			gap: 5px;
		}

		a{
			color: var(--cyan);
			cursor: pointer;
		}

		input[type="text"], input[type="password"]{
			border-radius: 10px;
			height: 45px;
			padding: 5px;
			line-height: 35px;
			border: 1px solid;
			font-size: 20px;
		}

		input[type="text"]:focus, input[type="password"]:focus{
			box-shadow: var(--cyan) 0px 0px 8px 1px;
			 outline: none;
		}

	@media (max-width: 990px) {


	}