* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
  }
  
  button,
  input {
	outline: none;
	border: none;
  }
  
  button {
	cursor: pointer;
  }
  
  body {
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.5rem;
  }
  
  body nav {
	display: flex;
	gap: 0.25rem;
	border: 1px solid #9a9a9a;
	background: #e9e9e9;
	border-radius: 0.5rem;
	padding: 0.25rem;
	margin: 20px 0px;
  }
  
  body nav button {
	padding: 10px;
	border-radius: 0.5rem;
	font-weight: 500;
  }
  
  body nav button.active {
	font-weight: 600;
	background: #bde2ff;
  }
  
  body nav button:hover {
	background: #bde2ff;
  }
  
  .screen {
	display: none;
  }
  .screen.active {
	display: block;
  }
  
  .app {
	width: 100%;
	height: 100%;
	max-width: 500px;
	border: 1px dashed #ffa6a6;
	border-radius: 0.5rem;
	padding: 0.25rem;
  }
  
  .create_section .join-screen .form .form-btn button,
  .join_section .join-screen .form #paste-join-code-con-btn {
	padding: 0.5rem;
	border-radius: 0.5rem;
	font-weight: 500;
	font-size: 1rem;
	background: #bde2ff;
  }
  
  /* create section */
  
  .create_section .join-screen .form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
  }
  
  .create_section .join-screen .form .form-btn {
	display: none;
	border: 1px solid #d8d8d8;
	background: #f0f0f0;
	border-radius: 0.5rem;
	padding: 0.25rem;
	margin: 20px 0px;
	width: fit-content;
	align-items: center;
  }
  
  .create_section .join-screen .form .form-btn > h6 {
	font-size: 1.2rem;
	font-weight: 600;
	margin-right: 1rem;
  }
  
  .create_section .join-screen .form .form-btn button:hover {
	background: #acd6f7;
  }
  
  .create_section .join-screen .form .form-input button {
	background: #111;
	color: #fff;
	padding: 0.5rem 1rem;
	border: none;
	outline: none;
	font-size: 16px;
	font-weight: 600;
	border-radius: 0.25rem;
  }
  
  .create_section .join-screen .form .form-input #sender-start-con-btn {
	background: #111;
	color: #fff;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 0.5rem;
  }
  
  /*join section */
  
  .join_section .join-screen .form #join-id b {
	color: #222;
	display: block;
	margin-top: 20px;
  }
  .join_section .join-screen .form #join-id span {
	display: inline-block;
	font-size: 25px;
	font-family: monospace;
	color: #111;
	padding: 10px;
	border: 1px solid #111;
	margin-top: 5px;
  }
  
  .join_section .join-screen .form {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	margin-top: 20px;
  }
  
  .join_section .join-screen .form input {
	margin: 10px 0px;
	width: 100%;
	max-width: 10rem;
	border: 1px solid #c5c5c5;
	color: #111;
	font-size: 1.2rem;
    font-weight: 600;
	padding: 0.4rem 1rem;
	border-radius: 0.35rem;
  }
  
  .join_section .join-screen .form #receiver-start-con-btn {
	background: #111;
	color: #fff;
	padding: 0.5rem;
	font-size: 16px;
	border-radius: 0.5rem;
  }
  
  /* center main section */
  
  .fs-screen {
	padding: 20px;
  }
  .fs-screen .file-input {
	width: 100%;
	border: 2px dashed #838383;
    border-radius: 0.25rem;
  }
  .fs-screen .file-input label {
	display: block;
	width: 100%;
	padding: 40px 50px;
	text-align: center;
	color: #111;
	font-size: 18px;
  }
  .fs-screen .file-input input {
	display: none;
  }
  .fs-screen .files-list {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
  }
  .fs-screen .files-list .title {
	width: 100%;
	margin: 20px 0px;
  }
  .fs-screen .files-list .item {
	width: 33%;
	min-width: 12rem;
	border: 1px solid #ffe0e0;
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
	border-radius: 0.5rem;
  }
  .fs-screen .files-list .item .progress {
	padding: 30px;
	text-align: center;
	font-size: 50px;
	color: #222;
	font-family: 'Montserrat';
  }
  .fs-screen .files-list .item .filename {
	padding: 5px;
	font-size: 18px;
	border-top: 1px solid #eee;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }