/* Estilos para o Gerador de RFC */
#rfc-generator {
	margin: 2em auto;
	padding: 20px;
	background-color: #eee;
	text-align: center;
}

#rfc-generator label {
	display: inline-block;
	margin: 10px;
	font-size: 16px;
	color: #333;
}

#rfc-generator input[type="radio"] {
	margin-right: 5px;
}

#rfc-result {
	margin-top: 20px;
	padding: 10px;

	border-radius: 5px;
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

#rfc-result span {
	display: inline-block;
	margin-left: 10px;
	padding: 5px 10px;
	font-size: 30px;
}

button {
	margin-top: 20px;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	background-color: #007bff;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s;
}

button:hover {
	background-color: #0056b3;
}

button:focus {
	outline: none;
}


/* Estilo para o botão Gerar outro */
#rfc-generator button.generar {
    background-color: #17a2b8;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: auto;
	    margin-top: 20px;
}

#rfc-generator button.generar svg {
	width: 20px;
}

#rfc-generator button.generar:hover {
	background-color: #138496;
}

#rfc-type-buttons .rfc-type-button {
	padding: 10px 20px;
	border: 2px solid #eeeeee;
	border-radius: 5px;
	background-color: #fff;
	color: #007bff;
	font-size: 16px;
	cursor: pointer;
	margin: 0;
	transition: background-color 0.3s, color 0.3s;
}

#rfc-type-buttons .rfc-type-button.active .svgShape {
	fill: #fff;
}

#rfc-type-buttons .rfc-type-button:hover .svgShape  {
	fill: #fff;
}

#rfc-generator #rfc-type-buttons button {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
}

#rfc-generator #rfc-type-buttons button svg {
	width: 30px;
}

div#rfc-type-buttons {
	display: flex;

}


#rfc-type-buttons .rfc-type-button img {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

#rfc-type-buttons .rfc-type-button.active {
	background-color: #007bff;
	color: #fff;
}

#rfc-type-buttons .rfc-type-button:focus {
	outline: none;

}

#rfc-type-buttons .rfc-type-button:hover {
	background-color: #0056b3;
	color: #fff;
}

#copy-button {
	border: none;
	background: none;
	cursor: pointer;
}

#copy-button svg {
	width: 24px;

	height: 24px;

}

div#rfc-result {
	display: flex;
	flex-direction: column;
}

.rfc-result {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom:1px solid #999 ;

}

button#copy-button {
	margin: 0;
	padding: 0;
	line-height: 0;
}

p.nota {
	    background-color: #f2f2f2;
    border-left: 5px solid #ff7d00;
    border-radius: 4px;
    color: #1f1f1f;
    min-height: initial;
    padding: 1rem 1rem 1rem 3.5rem;
    position: relative;
    margin-bottom: 2em;
}

p.nota:before {
background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGZpbGw9IiNmMGMzMzAiIGQ9Ik0zNywxOGMwLTcuMzU3LTYuMTExLTEzLjI4Ni0xMy41MzMtMTIuOTg5Yy02LjU2LDAuMjYyLTEyLjAyNSw1LjU5My0xMi40NCwxMi4xNDUKCWMtMC4yMjEsMy40OTIsMC45NDIsNi43MDMsMi45OSw5LjE1M2MxLjY1NCwxLjk3OSwyLjk0Niw0LjIzNCwzLjY4OCw2LjcwNUwxOCwzNGgxMmwwLjI5Ni0wLjk4NwoJYzAuNzM5LTIuNDYyLDIuMDE5LTQuNzE1LDMuNjcxLTYuNjg0QzM1Ljg1OCwyNC4wNzUsMzcsMjEuMTczLDM3LDE4eiIvPjxwYXRoIGZpbGw9IiNmZmY5YzQiIGQ9Ik0xNiwxOWMtMC41NTIsMC0xLTAuNDQ4LTEtMWMwLTQuOTYyLDQuMDM4LTksOS05YzAuNTUyLDAsMSwwLjQ0OCwxLDFzLTAuNDQ4LDEtMSwxCgljLTMuODYsMC03LDMuMTQtNyw3QzE3LDE4LjU1MiwxNi41NTIsMTksMTYsMTl6Ii8+PGNpcmNsZSBjeD0iMjQiIGN5PSIzOS44MzMiIHI9IjMuMTY3IiBmaWxsPSIjNjA3ZDhiIi8+PHBhdGggZmlsbD0iIzkwYTRhZSIgZD0iTTI3LjI2NSw0MWgtNi41MzFjLTAuOTk1LDAtMS44MzktMC43MzItMS45OC0xLjcxN0wxOCwzNGgxMmwtMC43NTUsNS4yODMKCUMyOS4xMDUsNDAuMjY4LDI4LjI2MSw0MSwyNy4yNjUsNDF6Ii8+PHBhdGggZmlsbD0iIzYwN2Q4YiIgZD0iTTI5LjU0MiwzNy4yMDhMMTguNjgsMzguNzZsMC4wNzUsMC41MjNjMC4wMjMsMC4xNTgsMC4wNjksMC4zMDYsMC4xMjUsMC40NDlsMTAuNTE2LTEuNTAyCgkJTDI5LjU0MiwzNy4yMDh6Ii8+PHBvbHlnb24gZmlsbD0iIzYwN2Q4YiIgcG9pbnRzPSIxOC4zNTMgMzYuNDcgMTguNDkzIDM3LjQ1IDI5LjczNyAzNS44NDMgMjkuODgzIDM0LjgyMiIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    content: '';
    height: 24px;
    margin-left: -40px;
    margin-top: 0.125rem;
    position: absolute;
    width: 24px;
}

@media (max-width:900px){ 
#rfc-generator {
	margin: 2em 15px;
	padding: 20px;
	background-color: #eee;
	text-align: center;
}
	div#rfc-type-buttons {

    flex-direction: column;
}
}