body{
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
		text-align:center;
		margin: 0px 0px 80px 0px;
		height: 100%;
    	color:#333;
   		background-color: #F2F2F2;
	}

	body h1{
		font-weight:300;
		margin-bottom:0px;
		padding-bottom:0px;
		color:#000;
	}

	body a{
		color:#06F;
	}

	.navigation-bar {
    display: table;
    background-color: rgba(255, 255, 255, 0.7);
		height: 52px;
		width: 98%;
    padding: 0 1% 0 1%;
		top: 0;
		position: fixed;
		z-index: 2147483647;
	}

  .navigation-bar .border {
    display:none;
    position: absolute;
    left:0px;
    bottom:-1px;
    width: 100%;
		height: 1px;
    background-color: #ddd;
	}

  .navigation-bar .left-bar-items {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    padding-left: 8px;
  }

  .navigation-bar .right-bar-items {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
  }

  .navigation-bar button, .navigation-bar button:hover {
    border: none;
    background: none;
    outline:none;
    cursor:pointer;
    font-size: 12px;
    margin-left: 20px;
    color: #333;
  }

  .navigation-bar button:hover {
    color:#8013DF;
  }

  .navigation-bar svg {
    height: auto;
    margin-bottom: -2px;
    margin-right: 5px;
  }

  .navigation-bar svg path {
    fill: currentcolor;
  }

  .navigation-bar #pdf-button svg {
    width: 13px;
  }

  .navigation-bar #print-button svg {
    width: 17px;
  }

  .navigation-bar #appearance-button svg {
    width: 15px;
  }


    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
      .navigation-bar, .navigation-bar .border {
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
      }
    }

    body.dark-mode { background-color: #1D1E1F; color:#e8e8e8;}
    .dark-mode .navigation-bar,
    .dark-mode .navigation-bar .border { background-color: rgba(46, 47, 48, 0.7); }
    .dark-mode .navigation-bar button { color: #E8E8E8; }
    .dark-mode .navigation-bar button:hover { color:#8F45FD;}
	.dark-mode .footer a#powered-by,
	.dark-mode .footer a:link#powered-by,
  	.dark-mode .footer a:visited#powered-by { color:#ccc; }


  .footer {
    margin-top: 60px;
  }

  .footer a {
    text-decoration: none;
  }

  .footer a#powered-by,
  .footer a:link#powered-by,
  .footer a:visited#powered-by { color:#666; }

  .footer a#powered-by {
    display: inline-block;
    margin-bottom: 12px;
  }

	.powered-by-logo {
        margin: 0 auto 8px auto;
        vertical-align: middle;
    	display: block;
    	width: 40px;
    	height: 40px;
    	background: black;
    	background: url("/images/powered.by.logo-x3.png") no-repeat top left;
    	background-size: 40px 40px;
	}
    
  	.footer {
  	  font-size: 13px;
 	 }
 	 
 	 #pay-button, 
 	 #accept-button, 
 	 #decline-button {
 	    font-size: 13px;
 	    border-radius: 25px;
 	    margin-right: 8px;
  		padding: 6px 12px 6px 8px;
  		font-weight: bold;
  		color: white;
  		background: #8013DF;
 	 }
	
	#pay-button .symbol, 
	#accept-button .symbol {
  		color: #8013DF !important;
 	 }  
 	 
 	 #decline-button {
 	 	margin-left: 4px;
 	 	text-align: center !important;
 	 	padding: 6px 12px !important;
 	 	border: 1px #8013DF solid;
 	 	color: #8013DF !important;
  		background: transparent !important;
 	 }  
 	 
 	 .dark-mode #decline-button {
 	 	border: 1px white solid;
 	 	color: white !important;
  		background: transparent !important;
 	 }  
 	 
	#decline-button .symbol {
  		color: #8013DF !important;
  		background: transparent !important;
 	 } 
 	 
 	 .dark-mode #decline-button .symbol {
  		color: white !important;
  		background: transparent !important;
 	 }  
  
 	 #status {
 	   	font-size: 13px;
 	    border-radius: 25px;
 	    margin-right: 8px;
  		padding: 6px 12px 6px 8px;
  		font-weight: bold;
  		color: white;
 	 }
  
  	#status .symbol, 
  	#pay-button .symbol, 
  	#accept-button .symbol,
  	#decline-button .symbol {
  		display:inline-block;
  		text-align: center;
  		width: 16px;
  		margin-right: 5px;
 	    border-radius: 25px;
  		background-color: white;
  	}
  	
  	.status-paid .symbol {
  		color: black;
	}
	
	.status-paid {
		font-size: 14px;
	}
	
  	.status-paid #status {
  		color: white;
  		background-color: #111;
  	}
  	
  	.status-paid .currency {
		font-size: 12px;
  		color: #999;
  	}

	.status-late #status {
		color: white;
  		background-color: #E44657;
	}
	
	.status-late {
		font-size: 14px;
		color: #E44657;
	}
	
	.status-late .symbol {
		color: #E44657;
	}

	.status-written-off {
		font-size: 14px;
	}

	.status-written-off #status {
  		background-color: #666;
	}
	
	.status-written-off .symbol {
  		color: #666;
	}
		
	.icon-hero {
    position: relative;
    margin: 0 auto 0 auto;
    display: block;
    width: 74px;
    height: 74px;
    background: black;
    background: url("/images/icon.hero-x3.png") no-repeat top left;
    background-size: 74px 74px;
}
	
	#not-found {
		margin: 20vh auto 0 auto;
		width: 50vw;
	}
	
	#not-found h1 {
		font-weight: bold;
	}
	
    @media only screen and (max-width: 600px) {
		.navigation-bar { 
			height: 64px;
		}
	}
	
	@media only screen and (max-width: 500px) {
		
		.navigation-bar button, .navigation-bar button:hover {
    		margin-left: 0px;
    	}
    	
    	.navigation-bar button span {
    		display: none;
    	}
    
		.status-info {
  			visibility: hidden; display: none;
		}
		
		#not-found {
			width: 65vw;
		}
	
		#not-found h1 {
			font-size: 24px;
		}
		
		#not-found p {
			font-size: 12px;
		}

	}
	
	@media only print {
    @page {
      size: auto;   /* auto is the initial value */
      margin: 0;  /* this affects the margin in the printer settings */
    }
    header,footer { display: none; }
    body { color:#000; }
    .navigation-bar { display:none; }
    .footer { display:none; }
	}