body {
		font-family: 'Roboto', sans-serif;
		font-size:16px;
		
		width:100%;
		margin:0;
		padding:0;
		
		overflow-y: auto;
		overflow-x:hidden;
		background-image: linear-gradient(rgba(72, 70, 95, 1) 0%, rgba(72, 70, 95, 0.7) 20%, rgba(72, 70, 95,  0.5) 90%, rgba(72, 70, 95, 0.6) 100%),url('/images/background.jpg');
		background-attachment: fixed;
		background-clip: border-box;
		background-color: rgba(0, 0, 0, 1);
		background-origin: padding-box;
		background-position-x: 50%;
		background-position-y: 0%;
		background-size: cover;
		background-repeat: no-repeat;
	}

	*, *:before, *:after {
		box-sizing: border-box;
	}
	#LoginBackground {
        display: block;
        position: fixed; /* Stay in place */
        z-index: 88; /* Sit on top */
        padding-top: 30px; /* Location of the box  */
        left: 0px;
        top: 62px;
        width: 100%; /* Full width */
        height: calc(100% - 62px); /* Full height */
        overflow: none; /* Enable scroll if needed 
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0); /* Black w/ opacity */
    }
  
	#LoginBody{
		max-width:400px;
		max-height:calc(100% - 30px);
		width:calc(100% - 30px);
		padding:20px;
		display:block;
		background-color:white;
		margin:auto;
		overflow:auto;
		border-radius:4px;
		position: relative;
  }
  	#LoginHeader{
		margin:auto;
		margin-bottom:20px;
		text-align:center;
		font-size: 20px;
		
	}
	#username{
		background-color: white;
		background-image: url('/images/person.svg');
		background-position: 8px;
		background-size: 30px;
		background-repeat: no-repeat;
		padding-left: 48px;
	}

	#username:focus{
		background-image: url('/images/person_focus.svg');
	}
	

	.passwordclass{
		background-color: white;
		background-image: url('/images/lock.svg'), url('/images/visibility.svg');
		background-position: 8px, 97%;
		background-size: 30px, 24px; 
		background-repeat: no-repeat, no-repeat;
		padding-left: 48px;
		padding-right: 48px;
	}
	.passwordclass:focus{
		background-image: url('/images/lock_focus.svg'), url('/images/visibility_focus.svg');
	}
	#login_error{
		height :24px;
		width: calc(100% - 16px);		
		border: 0px solid black;
		position:absolute;
		top:20px;
		left:8px;
		background-color:white;
		display:none;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size:18px;
		color:red;
		text-align:center;
	}

	#showpassword{
		height:52px;
		width:52px;
		border: 0px solid black;
		position:absolute;
		top:134px;
		right:20px;
		cursor:pointer;
	}
	
	#showconfirmpassword{
		height:52px;
		width:52px;
		border: 0px solid black;
		position:absolute;
		top:204px;
		right:20px;
		cursor:pointer;
	}

		 
	.placeholder_text_icon {
		pointer-events: none;
		position:absolute;
		left:0;
		top:0;
		transition: 0.2s;
		transition-timing-function: ease;
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		color: #ccc;
		padding:5px;
		padding-left:48px;
		padding-top:16px;
		height:52px;
	}
	.input_label_icon{
		display: block;
		position: relative;
	}

	.input_label_icon input {
		padding:10px;
		width: 100%;
		margin-bottom: 10px;
		padding: 12px;
		border: 2px solid #ccc;
		border-radius: 4px;
		font-size:16px;
		box-sizing: border-box;
		outline: none;
		transform: none;
		padding-left:48px;
		height:52px;
		padding-right:50px;
	}

	.input_label_icon input:focus {
		border: 2px solid #0070ba;
	}
	.input_label_icon input:not(:placeholder-shown) + .placeholder_text_icon {
		transform: scale(0.8) translateY(-14px) translateX(56px);
		transform-origin: top left;
		background:white;
		color:#ccc;
		padding:5px;
		height:20px;
		left:0px;
	}
	.input_label_icon input:focus + .placeholder_text_icon{
		transform: scale(0.8) translateY(-14px) translateX(56px);
		transform-origin: top left;
		background:white;
		color:#0070ba;
		padding:5px;
		height:20px;
		left:0px;
	}

	.row {
		display: -ms-flexbox; /* IE10 */
		display: flex;
		-ms-flex-wrap: wrap; /* IE10 */
		flex-wrap: wrap;
		align-items:center;
		justify-content:center;
		width: 100%;
	}
	
	.rowhighlight{
		cursor:pointer;
	}
	
	.rowhighlight:hover{
		background-color:rgb(255, 213, 179);
	}

	.StandardButton{
		height:36px;
		/* width: 100%; */
		/* max-width:120px; */
		padding:8px;
		margin:4px;
		z-index: 0;
		font-size: 16px;
		color: white;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		cursor: pointer;
		word-wrap: break-word;       /* Internet Explorer 5.5+ */
		word-break: normal;
		display: flex;
		flex-direction: column;
		justify-content: center;
		vertical-align:middle;
		text-align: center;
		overflow:hidden;
		text-overflow: ellipsis;
		border-radius: 4px;
		cursor: pointer;
		background-color:rgb(255, 143, 51);
	}

	.StandardButton:active{
		opacity:0.3;
	}
	.StandardButton:hover{
		background-color:rgb(255, 129, 26); 
	}

	.StandardButton:focus{
		outline:solid 0px white;
		background-color:rgb(255, 129, 26);
	}

	.LoginOption{
		width:100%;
		margin:auto;
		text-align:center;
		padding-top: 20px;
	}
	.LoginOptionSpan{
		cursor:pointer;
		text-decoration:underline;
		color:#1a73e8;
		text-align:center;
	}
	.LoginOptionSpan:active{
		opacity:0.3;
	}

	#main_header{
		top:0;
		height:48px;
		position:sticky;
		z-index:10;
	}

	.FrontHeader{
		top:0;
		left:0;
		height:48px;
		display:flex;
		position:sticky;
		color: white;
		user-select: none;
		z-index:10;
	}

	.FrontHeaderTitleWrapper{

		display:inline-flex;
		height:32px;
		color: white;
		font-size:26px;
		margin: auto 0;
		text-align:center;
		font-weight:bold;
		z-index:20;
		flex-grow: 1;
		
	}
	.company_name{
		float: right;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: left;
		background: white;
		border-radius: 4px;
		padding: 4px 8px;
		color:black;
		margin:auto;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}	
		
		
	.FrontHeaderTitle{
		display:inline-flex;
		height:32px;
		color: white;
		font-size:26px;
		margin: auto;
		text-align:center;
		font-weight:bold;
		z-index:20;
		text-wrap: nowrap;
		align-items: center;
	}
	@media (max-width: 450px) {
		.FrontHeaderTitle{
			font-size:20px;	
		}
		.company_name{
			font-size:12px;	
		}			
	}

	.FrontHeaderIcon{
		display:inline-block;
		height:32px;
		width:32px;
		color: white;
		font-size:26px;
		margin: auto;
		text-align:center;
		font-weight:bold;
		z-index:20;
	}
	
	#NoInternet{
		margin:auto auto 40px;
		bottom:0px;
		height:60px;
		width:280px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		vertical-align:middle;
		text-align: center;
		border-radius: 4px;
		border: 2px solid white;
		background-color: red;
		color:white;
		font-size:20px;
		
	}
  
	#NoInternetContainer {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 700; /* Sit on top */
		left: 0px;
		top: 0px;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: none; /* Enable scroll if needed 
		background-color: rgb(255,255,255); /* Fallback color */
		background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
	}
	
	#LoadingScreen{
		z-index:200; 
		position:fixed;
		height:100%; 
		width:100%; 
		top:0px; 
		display:none;
		cursor: wait;
	}
	
	
	.dropdown {
		position: sticky;
		top:0;
		display: inline-block;
		z-index:10;
		padding:8px;
	}

	.dropdown-content {
		display: none;
		position: fixed;
		top: 42px;
		background-color: #ffffff;
		max-width: 198px;
		min-width: 180px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
		z-index: 20;
		border-radius:2px;
		margin-top:4px;
		max-height: calc(100vh - 72px);
		overflow: auto;
		display: flex;
		color: black;
		flex-direction: column;
		/* padding: 8px 8px; */
		text-decoration: none;
		align-items: center;
	}

	.dropdown-content-left{
		left: 0;
		margin-left: -200px;
		transition:  margin-left 0.2s;
		
	}
	.dropdown-content-right{
		right: 0;
		margin-right: -200px;
		transition:  margin-right 0.2s;
	}
	
	.dropdown_menu_background_class{
		display:none; 
		top:48px; 
		height:calc(100% - 48px); 
		left:0px; 
		position:fixed; 
		width:100%; 
		background-color:rgba(150,150,150,0);
	}

	.dropdown-divider {
		height: 1px;
		margin: 1px 0;
		overflow: hidden;
		border-top: 1px solid #aaa;
		width: calc(100% - 8px);
	}

	.dropdown-item {
		display: flex;
		padding: 8px 12px;
		width: 100%;
		clear: both;
		font-weight: 400;
		color: #212529;
		text-align: inherit;
		white-space: nowrap;
		background-color: transparent;
		border: 0;
		align-items: center;
		text-decoration: none;
		cursor:pointer;
		user-select: none;
		text-wrap: wrap;
	}

	.dropdown-item:hover, .dropdown-item:focus {
		background-color: #eee;
	}
	.dropdown-item:active{
		background-color: #ddd;
	}
	
	.notvisible{
		visibility:hidden;
	}

	.dropbtn, .image_icon, .table_icon_button, .table_icon_button_disabled, .dropbtnblack {
		background-color: rgb(255, 143, 51);
		color: white;
		display: flex;
		height: 32px;
		width: 32px;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		border: none;
		border-radius:4px;
		cursor:pointer;
		margin:auto;
		user-select: none;
	}
	.dropbtnblack{
		background-color: initial;
		color: black;
	}
	
	.table_icon_button_disabled{
		color:#ffffff;
		background-color:#ffc799;
		cursor:default;
	}

	.table_icon_button:active{
		opacity:0.6
	}

	.image_icon{
		margin:4px;
	}
	
	.dropbtn:hover, .table_icon_button:hover{
		background-color:rgb(255, 129, 26); 
	}


	.page_container{
		position: relative;
		display: flex;
		width: 100%;
		flex-direction: column;
		max-width: 800px;
		margin: auto;
	}
	
	select {
		border:1px solid black;
		border-radius: 4px;
		padding:4px;
	}

.PopupMain {
	position: relative;
	background-color: white;
	margin: auto;
	padding: 0;
	color:black;
	/*padding-bottom:10px;*/
	border: 1px solid #888;
	max-width:600px;
	min-width:200px;
	width: 90%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
	overflow-y:auto;
	border-radius: 5px;
}
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0} 
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}


.message_box_button_group{
    display: flex;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:0px;
	padding-right:0px;
	flex-wrap: wrap;
}


.message_box_button, .message_box_button_outline, .message_box_button_disabled_dark, .message_box_button_disabled_light{
    height:36px;
    width: 100%;
    max-width:100px;
    margin:auto;
	margin-left:4px;
	margin-right:4px;
    z-index: 0;
	/* padding:4px; */
    font-size: 16px;
	font-weight:400;
    background-color:rgb(255, 143, 51);
    color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    word-break: normal;
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align:middle;
    text-align: center;
    overflow:hidden;
    text-overflow: ellipsis;
    border-radius: 5px;
}

.message_box_button_outline{
	background-color:white;
    color: rgb(255, 143, 51);
	border: 2px solid rgb(255, 143, 51);
}

.message_box_button_disabled_dark{
	color:#999999;
	background-color:#8c4f1c;
	cursor:default;
}

.message_box_button_disabled_light{
	color:#ffffff;
	background-color:#ffc799;
	cursor:default;
}

a:active{
	opacity:0.7;
}

.message_box_button:active{
	opacity:0.7;
}

.message_box_button:hover{
	background-color:rgb(255, 129, 26); 
}

.message_box_button_outline:active{
	opacity:0.6;
}

.message_box_button_outline:hover{
	background-color:#f8f8f8; 
}


.form_input_field{
	display: block;
    width: 100%;
	height: 36px;
    background: white;
	border-radius: 2px;
    font-size: 16px;
	border:2px solid #ddd;
	padding-left:8px;
	padding-right:8px;
	margin-bottom: 16px;
}
.form_input_field:focus{

	border:2px solid rgb(255, 143, 51);
}	


.loadingbar {
  
  height: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: rgb(150,217,254);
  z-index: 90;
}
.loadingbar:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 10px;
  background-color: #2980b9;
  animation: loadingbarline 2s linear infinite;
}


@keyframes loadingbarline {
	from {left: -200px; width: 30%;}
	50% {width: 30%;}
	70% {width: 70%;}
	80% {left: 50%;}
	95% {left: 120%;}
	to {left: 100%;}
}


#imagewrapper{
	position:relative;
	/* top:124px; */
	/* width: calc(100% - 8px); */
    aspect-ratio: 16 / 9;
	/* width: 520px; */
	/* height: 296px; */
	/* border: 1px solid #888; */
	background-color: white;
	overflow: hidden;
}
.resizable {
	width: calc(100%);
	height: calc(100%);
	display:block;
	position: absolute;
	outline-color: rgba(72, 70, 95,0.8);
	outline-width: 520px;
	outline-style: solid;
	overflow:hidden;
	top:0px;
	left:0px;
}

.resizable .resizers{
  width: 100%;
  height: 100%;
  border: 4px solid rgb(72, 70, 95);
  box-sizing: border-box;
  top:0px;
   position: absolute;
}

.resizable .resizers .resizer{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: 4px solid rgb(255, 143, 51);
  position: absolute;
}

.resizable .resizers .resizer.bottom-right {
  right: -16px;
  bottom: -16px;
  cursor: nwse-resize;
  background: none;
}

#resizersquare {
	  position: relative;
	  width:56.25%;
	  height:100%;
	  border: 2px solid rgb(255, 143, 51);
	  box-sizing: border-box;
	  cursor: move;
	  margin: auto;
}

.media_box{
	width: calc(14% - 6px);
	aspect-ratio:1/1;
	position: relative;
	display: flex;
	border: 1px solid rgb(220, 220, 222);
	margin: 4px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius:2px;
	background-color: #f0f0f0;
	background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
	background-size: 24px 24px; 
	background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
	
}
@media (max-width: 1100px) {
	.media_box{
		width: calc(16.66% - 8px);
	}
}

@media (max-width: 800px) {
	.media_box{
		width: calc(20% - 8px);
	}
}

@media (max-width: 640px) {
	.media_box{
		width: calc(25% - 8px);
	}
}

@media (max-width: 450px) {
	.media_box{
		width: calc(33.33% - 8px);
	}
}

.OpaqueBackground {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 30; /* Sit on top */
	padding-top: 32px; /* Location of the box  */
	padding-bottom: 32px;
	left: 0px;
	top: 0px;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
	overflow: auto;
}
.z100{
	z-index:100;
}

	.ComboBox{
		display:inline-flex;
		position:relative;
	}
		
	.bank_list_block{
		height: 60px;
		display: flex;
		justify-content: left; 
		align-items: center;
		border-radius:4px; 
		border: 1px solid #ccc;
		margin:4px;
		padding:4px;
		width:300px;
		cursor:pointer;
	}
	
	
	.ComboBoxInput{
		background-color: white;
		background-image: url('/images/keyboard_arrow_down_black_24dp.svg');
		background-position: calc(100% - 4px), center;
		background-size: 24px, 24px; 
		background-repeat: no-repeat, no-repeat;
		padding-right: 32px;
		max-width: 300px;
		margin: auto;
		cursor:pointer;
	}
	.ComboBoxInput:focus{
		border: 2px solid rgb(255, 143, 51);
	}

	
	.ComboBoxDropDown{
		overflow-y:auto;
		overflow-x:hidden;
		max-height:180px;
		position: fixed;
		top:34px;
		display:none;
		margin: 2px auto;
		background:white;
		max-width:300px;
		width: 100%;
		border-radius:4px;
		z-index: 1;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
		
		
	}
	.ComboBoxDropDownRow{
		height: 32px;
		max-width:300px;
		cursor:pointer;
		border-radius:4px;
		font-size: 16px;
		display:flex;
		padding-left:4px;
		align-items:center;
		width:100%;
	
	}

	.ComboBoxDropDownRow:hover{
		background:#eee;
	}
	
	.ComboBoxDropDownRow:active{
		background:#eee;
	}

	#SearchBoxInput{
		background-color: white;
		background-image: url('/images/search-black-24dp.svg');
		background-position: calc(100% - 4px), center;
		background-size: 24px, 24px; 
		background-repeat: no-repeat, no-repeat;
		padding-right: 32px;
		max-width: 300px;
		margin: auto;
	}
	#SearchBoxInput:focus{
		background-image: url('/images/search-black-24dp-focus.svg?v=1');
		border: 2px solid rgb(255, 143, 51);
	}

	#SearchInput{
		width:100%;
		display:inline-flex;
		position:relative;
		margin-top: 8px;
	} 
	
	
  
	.input_label {
		font-size:14px;
		margin:0px auto;
		position:relative;
		display:flex;
		max-width:300px;
		width:100%;
		flex-direction: column;
	}

	.input_label input {
		padding:4px;
		width: 100%;
		margin-bottom: 0px;
		border: 2px solid #ccc;
		border-radius: 3px;
		font-size:16px;
		box-sizing: border-box;
		outline: none;
		transform: none;
		padding-left:8px;
		height:32px;
		padding-right:16px;
	}
	
	.input_label input:focus{
		border: 2px solid rgb(255, 143, 51);
	}

	.circle_wait {
		position: absolute;
		width: 36px;
		height: 36px;
		-webkit-animation: spin 1s linear infinite;
		-moz-animation: spin 1s linear infinite;
		animation: spin 1s linear infinite;
	}

	@-moz-keyframes spin {
	  100% {
		-moz-transform: rotateZ(360deg);
	  }
	}

	@-webkit-keyframes spin {
	  100% {
		-webkit-transform: rotateZ(360deg);
	  }
	}

	@keyframes spin {
	  100% {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	  }
	}
	
	input[type="file"] {
	  display: none;
	}