html, body {

	height: 100%;
	width: 100%;

	font-size: 16px;
	margin: 0;

	box-sizing: border-box;

}

body {
	display: flex;
	flex-direction: column;
	align-items: center;

	background-color: #f5f5f5;

	padding: 7.5vh 0;
	height: min-content;
}

input {
	border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.logo {
	width: 20%;

	margin-bottom: 2rem;
}

.explain {
	width: 44rem;
    
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    
	padding-bottom: 1rem;    
	margin-bottom: 1rem;
}

.title {
	display: flex;

	font-family: Roboto;
	font-size: 1rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.86);

	margin-bottom: 0.75rem;
}

.flex {
	flex: 1;
}

.title-expiration {
	font-weight: 400;
}

.explain-body {
	font-family: "Roboto";
	font-size: 1rem;

	line-height: 1.5;
}

.sftp-wrap {
	width: 44rem;

	position: relative;
}

.sftp-wrap.bordered:after {
	content: '';

	height: 1px;
	width: 100%;

	background-color: rgba(0, 0, 0, 0.12);

	position: absolute;
	bottom: 1rem;
}

.sftp {
	display: grid;
	grid-template-columns: 1fr 3fr;

	background-color: white;

	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.25rem;
	border-bottom: none;

	margin-bottom: 2rem;
}
/*
.sftp-row {
	display: flex;
	align-items: center;

	padding: 0 1rem;

	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
*/

.sftp-name, .sftp-value {
	text-align: left;

	padding: 1rem;
}

.sftp-name {
	font-family: "Roboto";
	font-weight: 400;
	color: #212121;

	display: flex;
	align-items: center;

	padding-right: 1rem;

	border-bottom: 1px solid rgba(0, 0, 0, 0.12);

}

.sftp-value {
	display: flex;
	align-items: center;

	font-family: "Roboto";
	line-height: 1.5;

	padding-left: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);

}

.sftp-value > input,
.command-line input {
	height: 100%;

	display: flex;
	align-items: center;
	flex: 1;

	font-family: "Cousine";
	font-size: 0.86rem;

	background: #f5f5f5;
	
	border: 1px solid rgba(0, 0, 0 , 0.12);
	border-radius: 0.25rem;

	padding: 0.5rem;
	margin-right: 1rem;
}

.sftp-value > input:focus,
.command-line input:focus {
	border: 1px solid #3F51B5;
}

.sftp-value > button,
.command-line button  {
	height: 2rem;
	width: 2rem;
	

	display: flex;
	align-items: center;
	justify-content: center;

	background: none;
	border: none;
	border-radius: 0.25rem;

	cursor: pointer;

	transition: 0.365s;

	/* For tooltip positioning */
	position: relative;
}

/* CSS-only tooltip for copy buttons */
.sftp-value > button:before {
	display: block;
	content: attr(data-tooltip);

	/* Center vertically and position 12px to the right of the button */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 100%;
	margin-left: 12px;

	/* Style it! */
	border-radius: 4px;
	background-color: #263238;
	color: whitesmoke;
	padding: 6px;
	font-size: 14px;
	white-space: nowrap;
	
	/* Hidden until button is hovered */
	opacity: 0;
	transition: opacity 200ms ease-in;
}

.sftp-value > button:hover {
	background-color: rgba(0, 0, 0, 0.12);
}

.sftp-value > button:hover:before {
	opacity: 1;
}

.strip-bottom-border {
	border-bottom: none !important;
}

.sftp-append {
	font-family: "Roboto";
	font-size: 1rem;

	text-align: center;
}

.sftp-append b {
	color: #3F51B5;
}

.wrap-404 {
	font-family: "Roboto";

	text-align: center;
}

.title-404 {
	font-size: 1.5rem;
	font-weight: 500;

	margin-bottom: 1rem;
}

.body-404 {
	font-size: 1.2rem;
	font-weight: 400;
}

.command-line {
	width: 44rem;
}

.command-line .line {
	width: 100%;

	display: flex;
	align-items: center;

	margin-bottom: 1rem;
}

.command-line .line input {
	background-color: #212121;

	color: white;
}