@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
	  
	  :root {
		--primary: #f1f1f1;
		--secondary: #191919;
		--accent: #ffc100;
		--accent-grey: #afafaf;
		
		--green:#00ce00;
		--red:#ef1f1f;
	  }

	  body {
		margin: 0;
		font-family: 'Work Sans', sans-serif;
		font-size:16px;
		background:var(--primary);
	  }
	  
	  div.container {
		display:flex;
		flex-direction:column;
		min-height:100vh;
		max-width: 100vw;
		margin: 0;
		padding: 0;
	  }
	  
	  div.header{
		display:flex;
		background:var(--secondary);
		color:white;
		justify-content:space-between;
		font-size:18px;
		border-bottom:5px solid var(--accent);
		margin-bottom: 1em;
	  }
	  
		div.header > div {
		  padding:5px;
		}
		
	  div.page-container {
		display:flex;
		flex:1;
	  }
	
	  
		div.page-container div.page {
		  flex:1;
		  margin: 0 5px;
		}
		
		div.page-container div.page.light {
		  background:white; 
		}
		
		div.page-container div.page.centering {
		  text-align:center;
		}
		
		div.page-container div.page.vertical-centering {
		  display:flex;
		  flex-direction:column;
		  justify-content:center;
		}
		
		div.bubble {
		    background:white;
		    padding:1em;
		    border-radius: 7px;
            border: 1px solid var(--accent);
            margin: 1em 0;
		}
		
		div.collection-group {
			display:flex;
			justify-content: space-evenly;
			
		}
		
		div.action-group {
		  display:flex;
		  justify-content:space-around;
		  margin-bottom:10px;
		}
		
			div.action-group div.action {
				margin: 0px 20px;
				height:70px;
				width:70px;
				font-size:20px;
				padding:20px;
				background:var(--accent);
				border-radius:1000px;
				text-align:center;
				line-height: 35px;
				
				cursor:pointer;
			}
			
			div.action-group div.action:hover {
				background:#f5aa00;
			}
			
		img.small {
			height:21px;
		}
		
		img.medium {
			height:80px;
			width:80px;
		}
		
		div.qr-code img {
		  width:100%;
		}
		
		h2 {
		  font-size: 1.3em;
		  margin: 0.4em 0;
		}
		
		.centering h2 {
			text-align:center;
		}
		
		h3 {
		  margin: 0;
		  font-size: 14px;
		}
		
		input.key {
			margin-top:10px;
		}
		
		table.core {
		  width:100%;
		  border-collapse: collapse;
		  margin-bottom:2em;
		}
		
		  table.core td {
			background:white;
			text-align:center;
		  }
		  
		  table.core th {
			background: var(--secondary);
			color: white;
			font-weight: normal;
			padding: 2px 5px;
			text-align: left;
			font-size: 14px;
			border-bottom: 2px solid var(--accent);
		  }
		  
		  span[peer-function="send"] {
		  	cursor:pointer;
		  	
		  }
		  
		
		div.status-indicator {
		  background:var(--accent);
		  width:10px;
		  height:10px;
		  border-radius:10px;
		  box-shadow: 0px 0px 3px grey;
		  margin:0 auto;
		}
		
		span.status-indicator[connection-status="ACTIVE"] {
		  color:var(--green);
		  
		}
		
		span.status-indicator[connection-status="DISCONNECTED"] {
		  color:var(--red);
		}
		
		span.text-msg {
			display: inline-block;
		    background: var(--primary);
		    padding: 0px 10px;
		    font-family: monospace;
		    text-overflow: ellipsis;
		}
		
		
		div.file-drop-container {
			display: flex;
    		justify-content: space-around;
		}
		
		div.file-drop {
			display:none;
			flex-direction: column;
		    justify-content: space-around;
		    background: white;
		    min-height: 15vh;
		    text-align: center;
		    border-radius: 20px;
		    margin-bottom: 1em;
    		padding: 0 1em 1em 1em;
    		border: 2px solid var(--accent);
		}
		
			div.file-drop [peer-data="share-id"] {
				font-size:2em;	
			}
		
			div.file-drop input[type="file"] {
				border: 1px solid black;
			    padding: 20px;
			    border-radius: 9px;
			}
			
			div.file-drop form {
				display: flex;
    			flex-direction: column;
			}
			
				div.file-drop form > *:not(:last-child) {
					margin-bottom:0.6em;
				}
		
		div.centered-item {
		  display:flex;
		  justify-content:space-around;
		}
	  
	  div.footer {
		font-size:10px;
		display: flex;
		justify-content: space-between;
		color:var(--accent-grey);
		margin-top: 1em;
	  }
	  
		div.footer > div {
		  padding: 5px;
		}
		
		
	span.action {
		cursor:pointer;
	}
	

	  @media (max-width:600px) {
			div.page-container {
				flex-direction:column;
				padding: 0 1em;
			}
			
			div.action-group div.action { 
				margin:0 0.5em;
			}
	  }