:root {
		--blue: #007aff;
		--light_blue: #00bcd4;
		--light_gray: #505050;
		--bg: #2b2b2b;
		--dark_gray: #222222;
	}
	
	html {
		overflow-x: scroll;
		//zoom: 2.5;
		font-size: large;
	}
	
	a {
		color: var(--blue);
		text-decoration: none;
	}
	
	.submit, .panel_btn {
		padding: 7px;
		display: inline-block;
		background-color: var(--blue);
		border-radius: 30px;
		position: relative;
		top: 11px;
		margin-left: 5px;
		min-width: 72px;
		color: #fff;
		text-align: center;
		box-shadow: 0px 0px 6px #000;
		border: 1px solid var(--light_blue);
		vertical-align: top;
	}
	
	.panel_btn {
		display: block;
		width: 140px;
		margin: auto;
		margin-bottom: 42px;
		margin-top: 18px;
	}
	
	.search_icon {
	    width: 24px;
		height: 24px;
		display: inline-block;
		background-image: url(icons/search.png);
		background-size: contain;
		position: fixed;
		left: 18px;
		top: 21px;
		z-index: 2;
	}
	
	.add_icon {
		width: 24px;
		height: 24px;
		z-index: 6;
		position: fixed;
		right: 18px;
		top: 21px;
		background-image: url(icons/add.png);
		background-size: contain;
		border: 0px;
	}
	
	.title {
		text-align: center;
		width: 90%;
		border: 1px solid var(--light_blue);
		margin: auto;
		background-color: var(--blue);
		border-radius: 30px;
		padding: 10px;
		margin-bottom: 8px;
		color: #fff;
		box-shadow: 0px 0px 11px #000;
		margin-top: 12px;
		position: relative;
		z-index: 1;
		max-width: 396px;
	}
	
	.client_panel {
		width: -webkit-fill-available;
		height: 108px;
		display: block;
		margin: auto;
		padding: 6px;
		background-color: #222831;
		background-image: url(vanessa.jpg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: calc(100% - 10px);
		position: fixed;
		color: #e0e0e0;
		border-top: 1px solid #03a9f4;
		border-bottom: 1px solid #03a9f4;
		max-width: 396px;
		z-index: 100;
	}
	
	.box {
		display: inline-block;
		width: 160px;
		height: 120px;
		align-items: baseline;
		vertical-align: middle;
		text-align: center;
		border-radius: 12px;
		margin-bottom: 10px;
	}
	
	
	.window {
		min-width: 388px;
		margin: auto;
		max-width: 388px;
		height: 100%;
		overflow: scroll;
		min-height: auto;
		display: inline-block;
		overflow-x: hidden;
		scroll-snap-align: center;
		overflow-y: scroll;
	}
	
	.window2 {
		min-width: 388px;
		margin: auto;
		max-width: 388px;
		height: 100%;
		overflow: scroll;
		min-height: auto;
		overflow-x: hidden;
		scroll-snap-align: center;
		overflow-y: scroll;
		display: none;
	}
	
	.icon {
		display: inline-block;
		align-items: baseline;
		vertical-align: middle;
		text-align: center;
		width: 72px;
		height: 72px;
		margin-top: 12px;
		background-size: 72px;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.icon_text {
	    margin-top: 12px;
	}
	
	.btn_grid {
	    width: calc(100% - 32px);
		margin: auto;
		display: none;
		flex-wrap: wrap;
		justify-content: space-evenly;
		background-color: #e5e5e5;
		padding-top: 20px;
		margin-top: -20px;
		position: relative;
		box-shadow: 0px 4px 12px #333333;
		border-radius: 12px;
		max-width: 396px;
	}
	
	body {
	    margin: 0px;
		overflow: hidden;
		font-family: sans-serif;
		background-color: var(--bg);
		letter-spacing: 1.5px;
		overflow-x: scroll;
		zoom: 2.5;
	}
	
	.client_panel span {
		margin-top: 7px;
		margin-left: 8px;
		display: block;
	}
	
	.header_search_block {
		width: 100%;
		height: 60px;
		z-index: 10;
		left: 56px;
		position: fixed;
		display: none;
		top: 5px;
		background-color: var(--dark_gray);
	}
	
	.header_text {
		padding: 6px;
		width:100%;
		background-color: var(--dark_gray);
		margin-bottom: 8px;
		text-align: center;
		padding-top: 30px;
		font-size: x-large;
		color: #fff;
		padding-bottom: 10px;
		letter-spacing: 4px;
		text-transform: uppercase;
		z-index: 1;
		position: fixed;
		top: 0px;
		border-bottom: 1px solid var(--blue);
		max-width: 396px;
	}
	
	.header_add_block {
		width: 24px;
		height: 24px;
		z-index: 6;
		position: fixed;
		right: 18px;
		top: 18px;
		background-image: url(icons/add.png);
		background-size: contain;
		border: 0px;
	}
	
	.menu_block {
		width: 100%;
		height: 48px;
		position: fixed;
		margin-top: auto;
		z-index: 1;
		display: flex;
		justify-content: space-evenly;
		padding-bottom: 9px;
		background-color: var(--dark_gray);
		padding-top: 8px;
		padding-right: 1px;
		border-top: 1px solid var(--blue);
		bottom: 0px;
		max-width: 396px;
	}
	
	.menu_item {
		width: 32px;
		height: 32px;
		background-size: cover;
		filter: drop-shadow(2px 4px 6px black);
		margin-top: 8px;
	}
	
	.edit_icon {
		float: right;
		display: block;
		width: 18px;
		height: 18px;
		background-image: url(icons/edit_icon.png);
		background-size: contain;
	}
	
	.window_container {
		overflow: scroll;
		height: calc(100% - 140px);
		width: max-content;
		display: block;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		position: relative;
		top: 67px;
		padding-bottom: 120px;
		overflow-y: hidden;
	}
	
	.right_arrow, .down_arrow {
		width: 24px;
		height: 24px;
		background-image: url(icons/right_arrow.png);
		background-size: contain;
		position: relative;
		vertical-align: middle;
		right: 0px;
		display: inline-block;
	}
	
	.down_arrow {
		background-image: url(icons/down_arrow.png);
	}
	
	.list_grid {
		width: 100%;
		height: fit-content;
	}
	
	.list_row {
		min-height: 104px;
		display: block;
		width: 100%;
		color: #fff;
		border-bottom: 1px solid #03a9f4;
		overflow: hidden;
		max-height: 104px;
	}
	
	.maximized {
		max-height: unset;
	}
	
	.client_icon {
	    width: 64px;
		height: 64px;
		background-image: url(icons/user_color.png);
		border-radius: 50%;
		vertical-align: middle;
		background-size: contain;
		margin: 18px;
		display: inline-block;
	}
	
	.client_text {
		display: inline-block;
		height: auto;
		width: calc(100% - 156px);
		vertical-align: top;
		margin-top: 18px;
	}
	
	.settings_text {
		display: inline-block;
		height: auto;
		width: calc(100% - 156px);
		vertical-align: middle;
	}
	
	.client_text span {
		display: block;
		padding: 2px;
	}
	
	.client_text span:nth-child(1) {
		font-size: larger;
	}
	
	.client_text span:nth-child(2) {
		color: #03a9f4;
	}
	
	.cal_week_day {
		background-color: var(--dark_gray);
		display: flex;
		justify-content: space-evenly;
		position: fixed;
		width: 100%;
		flex-wrap: wrap;
		padding-bottom: 8px;
		z-index: 100;
		top: 0px;
		left: 0px; 
		color: #fff;
	}
	
	.cal_week_day span {
		margin-top: 18px;
		width: 36px;
		height: 36px;
		display: block;
		text-align: center;
		color: #fff;
		font-size: smaller;
	}
	
	.cal_margin {
		width: 100%;
		height: 104px;
		display: block;
	}
	
	.grid_row {
		display: block;
		width: 100%;
		min-height: 80px;
		padding-left: 18px;
	}
	
	select, textarea, input {
		width: calc(100% - 58px);
		margin-left: 20px;
		font-size: unset;
		border-radius: 4px;
		padding: 4px;
	}
	
	input[type=date] {
		width: 109px;
		display: inline-block;
	}
	
	.edit_icon_overlay {
	    display: inline-block;
		position: relative;
		width: 18px;
		height: 18px;
		left: -18px;
		top: 26px;
		background-image: url(icons/edit_icon.png);
		background-size: contain;
		margin-right: -18px;
	}
	
	wh {
		color: #fff;
	}
	
	sm {
		font-size: smaller;
		color: #b0b0b0;
	}
	
	.delete_32 {
		display: block;
		width: 32px; 
		height: 32px;
		background-image: url(icons/trash_icon.png);
		margin: auto;
		background-size: contain;
		margin-bottom: 24px;
	}
	
	.invoice_templates {
		width: auto;
		min-height: 320px;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
	}
	
	.invoice_templates img {
		height: 320px;
		margin: 24px;
		border: 4px solid var(--bg);
		scroll-snap-align: center;
	}
	
	.center_text {
		width: fit-content;
		display: block;
		margin: auto;
		margin-top: 8px;
		margin-bottom: 8px;
	}
	
	input[type=checkbox] {
		font-size: smaller;
		width: 24px;
		height: 24px;
		vertical-align: middle;
		margin-right: 18px;
	}
	
	.add_btn {
		width: 32px;
		height: 32px;
		background-image: url(icons/add.png);
		background-size: contain;
		vertical-align: middle;
		margin: 12px;
		display: inline-block;
	}
	
	.x {
		width: 18px;
		height: 18px;
		background-image: url(icons/x.png);
		background-size: contain;
		display: inline-block;
		margin-left: 18px;
		margin-right: 12px;
		vertical-align: text-top;
	}
	
	ul {
		list-style: none;
		color: bisque;
		-webkit-padding-start: 0;
		display: flex;
		flex-wrap: wrap;
		margin: 12px;
	}
	
	ul li {
		font-size: smaller;
		margin: 4px;
	}
	
	.list_row input[type=password] {
		width: 200px;
		display: inline-block;
	}
		
	.image_auth {
		display: block;
		width: 96px;
		height: 96px;
		margin: auto;
		border: 0px;
	}
	
	.list_row_logo {
		width: 320px;
		height: auto;
		display: block;
		margin: auto;
		margin-top: 18px;
	}
	
	.clock_job_list {
	    display: block;
		width: 80%;
		border: 1px solid;
		color: #8BC34A;
		margin: auto;
		text-align: center;
		background-color: var(--light_gray);
		padding: 10px;
		border-radius: 4px;
	}
	
	.clock_job_list a {
		display: block;
	}
	
	.btn_grid table {
		width: calc(100% - 8px);
		margin: 4wpx;
		padding: 12px;
	}
	
	.btn_grid tbody {
		display: block;
		max-height: 250px;
		overflow-y: scroll;
		border: 1px solid;
	}
	
	.btn_grid table tr {
		line-height: 24px;
	}
	
	.btn_grid td:first-child {
		width: 96px;
		font-size: smaller;
	}
	
	.btn_grid td:last-child {
		width: 18px;
		text-align: right;
	}