text/css style.css ( ASCII text )
body {
	background: #f6f6f6;
	font-family: "SF UI Text Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, Verdana, sans-serif;
	color: #4c4c4c;
}

form {
	margin: 0px;
}

table {
	width: 100%;
}

td{
	padding: 6px 12px;
	font-size: 12px;
	font-weight: bold;
	color: rgba(0,0,0,0.54);
}

th {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: left;
	font-size: 18px;
	font-weight: bold;
}

input, select {
	background: #f3f5f6;
	border: 1px solid #f3f5f6;
	border-radius: 22px;
	padding: 3px;
	width: 50%;
	transition: 300ms ease-in-out;
	outline: none;
}

input:hover, select:hover {
	background: #e3e5e6;
	border: 1px solid #e3e5e6;
}

input:focus, select:focus {
	background: white;
	border: 1px solid #42a5f5;
}

input:disabled, select:disabled {
	background: #e6e6e6;
	border: 1px solid #e6e6e6;
	color: #42a5f5;
	font-size: 12px;
	font-weight: bold;
	cursor: not-allowed;
}

input:invalid {
	border: 1px solid #db4437;
}

/* Container */

#setting , #info , #result, #login, #logout{
	background: white;
	border-radius: 4px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

#result {
	vertical-align: bottom;
}

#info td {
	text-align: center;
	padding: 10px;
}

#info th {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 24px;
	padding-right: 24px;
	font-size: 12px;
	text-align: center;
	color: rgba(0,0,0,0.54);
}

#version {
	color: #42a5f5;
	font-weight: bold;
	font-size: 14px;
}

#background:hover {
	background-color: #eeeeee;
	border-radius: 22px;
	transition: 300ms ease-in-out;
}

#logout {
	position: absolute;
}

/* Modal */

.modal{
	position: fixed;
	visibility: hidden;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1;
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
	-webkit-animation: fadeOut 300ms;
	animation: fadeOut 300ms;
}

.modal-content {
	padding: 35px 15px;
	width: 300px;
	-webkit-animation: fadeOut 300ms;
	animation: fadeOut 300ms;
}

.modal.scale {
	visibility: visible;
	-webkit-animation: fadeIn 300ms;
	animation: fadeIn 300ms;
}

/* Image */

.material-icons { 
	font-size: 16px;
	vertical-align: text-bottom;
}

.material-icons.md18 { 
	font-size: 18px;
}

.material-icons.md100 { 
	font-size: 100px;
	margin-bottom: 20px;
}

.material-icons.check {	color: #0f9d58; }
.material-icons.optional {	color: #f4b400; }
.material-icons.block {
	color: #db4437;
	font-weight: bold;
}

.material-icons.help {
	transition: 300ms ease-in-out;
}
.material-icons.help:hover {
	color: #42a5f5;
}

.material-icons.showpassword {
	visibility: hidden;
	position: absolute;
	padding: 12px;
	top: 0px;
	right: 0px;
	-webkit-animation: fadeOut 300ms;
	animation: fadeOut 300ms;
}

.material-icons.visible{
	visibility: visible;
	-webkit-animation: fadeIn 300ms;
	animation: fadeIn 300ms;
}

.material-icons.login { 
	display: flex;
	position: absolute;
	padding: 12px;
}

.material-icons.logout { 
	display: flex;
	position: absolute;
	font-size: 3em;
}

#qrcode{
	background: white;
	border-radius: 4px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

#badge{
	background: white;
	border-radius: 4px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	width: auto;
	height: 35px;
	transition: 300ms ease-in-out;
}

#badge:hover{
	box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2), 0px 1px 20px 1px rgba(0, 0, 0, 0.14), 0px 4px 10px 2px rgba(0, 0, 0, 0.12);
}

/* Button */

.button {
	padding: 8px 16px;
	outline: none;
	border: none;
	border-radius: 3px;
	line-height: 20px;
	min-width: 88px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	transition: 300ms ease-in-out;
	
	background-color: rgba(153,153,153,0.102);
	color: rgba(68,68,68,0.502);
}

.button:hover {
	background-color: #42a5f5;
	color: white;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,0.14), 0 3px 0px -2px rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.2);
}

.button.red:hover{
	background-color: #db4437;
}

.imagebutton {
	padding: 0px;
	margin: 0px;
	background: transparent;
	border: 0px;
	display: flex;
	position: absolute;
	outline: none;
	font-weight: bold;
	color: rgba(0,0,0,0.54);
	cursor: pointer;
	z-index: 1;
	transition: 300ms ease-in-out;
}

.imagebutton:hover {
	color: #42a5f5;
}

.color {
	color: #42a5f5;
	position: fixed;
}

/* Popup */

.popup {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.popup .popuptext {
	visibility: hidden;
	background-color: #ffffff;
	position: absolute;
	box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
	cursor: default;
	z-index: 100000000;
	padding: 15px;
	width: 400px;
	text-align: center;
	border-radius: 5px;
	left: 100%;
	font-weight: 100;
	font-size: 16px;
	transition: 250ms ease-in-out;
	-webkit-animation: fadeOut 250ms;
	animation: fadeOut 250ms;
}

.popup .show {
	visibility: visible;
	-webkit-animation: fadeIn 250ms;
	animation: fadeIn 250ms;
}

/* Animation */

@-webkit-keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;}
}

@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
}

@-webkit-keyframes fadeOut {
	from {opacity: 1;} 
	to {opacity: 0;}
}

@keyframes fadeOut {
	from {opacity: 1;}
	to {opacity: 0 ;}
}


/* Radio Buttons */

.inputGroup {
	padding: 0px;
}

.inputGroup label {
	font-size: 16px;
	font-weight: 100;
	cursor: pointer;
}

.inputGroup label:before {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 10px;
	content: '';
	border: 1px solid #D1D7DC;
	background-color: #fff;
	border-radius: 50%;
	transition: all 300ms ease-in-out;
}

.inputGroup input:checked ~ label:before {
	background-color: #42a5f5;
	border-color: #42a5f5;
}

.inputGroup input {
	visibility: hidden;
	width: 0px;
}
@media only screen and (min-width:0px) and (max-width:991px) 
{
    .modal-content {
        width: 100%;
        padding: 53px 0px;
    }
    
    .material-icons.md100 {
        font-size: 200px;
    }
    
    .material-icons {
        font-size: 72px;
    }
    i.material-icons.help {
        font-size: 60px;
    }
    #inputUsername, #inputPassword{
        width: 100% !important;
        height: 100px !important;
        padding-left: 10% !important;
        margin-bottom: 20px;
    }
    
    input:disabled, select:disabled,input, select {
        font-size: 40px;
        border-radius: 44px;
    }
    
    .imagebutton{
        top: 6px !important;
        right: 12px !important;
        width: 100px !important;
        height: 100px !important;
        cursor: auto !important;
    }
    
    .button{
        font-size: 34px;
        padding: 4% 16px;
    }
    
    .material-icons.md18 {
        font-size: 40px;
    }
    
    .titolo {
        font-size: 43px;
    }
    
    td {
        font-size: 34px;
    }
    
    #badge {
        height: 60px;
    }
    tr.qrSettings td {
        width: 100%;
        display: block;
    }
    input, select {
        width: 93%;
    }

    .inputGroup label {
        font-size: 44px;
    }
    
    th {
        font-size: 40px;
    }
    
    .qrTable  tr {
        display: initial;
    }
    .header{
        display:block;   
    }
        
    .header h1 {
        font-size: 44px;
        margin-top: 47px;
    }

    #qrcode {
        margin-bottom: 4%;
        width: 50%;
    }

    .settings select,  .settings input {
        height: 80px;
    }
    
    .genera, .download {
        margin: 24px 0px 24px 0px;
        width: 100%;
    }
    
    .tdGenera, .tdDownload {
        padding: 0px;
        display: block;
    }
    
    input#list {
        height: auto;
    }
    
    #info {
        display: none;
    }    
    #result {
        width: 100%;
        display: inline-table;
        vertical-align: bottom;
    }
    .inputGroup label:before {
        width: 24px;
        height: 24px;
    }
    .popup .popuptext {
        width: 500px;
        font-size: 34px;
    }
    .inputGroup label {
    font-weight: 400;
    }
}