/* Show mobile only notice */
#mobile-only-notice { display: block; }
main, #floating-button { display: none; }
@media only screen and (max-width: 600px) {
    #mobile-only-notice { display: none; }
    main, #floating-button { display: block; }
}

#mobile-only-notice {
    color: darkred;
    text-align: center;
    padding-top: 200px;
    font-size: 28pt;
}

html, dialog {
    background: antiquewhite;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

main h1 {
    text-align: center;
}

main .collection {
    background: navajowhite;
    border: 3px solid #ffd08a;
    border-radius: 20px;
    margin: 1rem;
    padding: 10px;
}

main .collection .content {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

main .collection .title {
    font-size: 14pt;
    margin: 0.7rem 0 0 0.7rem;
    color: #595959;
}

main .collection .content img {
    max-height: 5rem;
    margin: 0.8rem;
}

main .collection .content img:not(.collected), #badge-view-img:not(.collected) {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

dialog {
    text-align: center;
    margin: auto 2rem;
    padding: 2rem;
    border-radius: 20px;
    border: 3px solid navajowhite;
    outline: none;
}

dialog img {
    height: 150px;
}

#badge-view-title {
    font-weight: bold;
    font-size: 16pt;
    margin-top: 5px;
}

#badge-view-write {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
    outline: none;
}

#badge-view-write:active {
    background-color: #0062cc;
    border-color: #005cbf;
}

#badge-view-nfc-password {
    display: block;
    margin-top: 15px;
    font-size: 6pt;
}

#help img {
    filter: brightness(0);
}

#help p {
    text-align: justify;
}

#floating-button {
    position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0AC;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

#floating-button:active {
    background-color: rgb(0, 139, 204);
}

#floating-button img {
    height: 40px;
    margin-top: 10px;
}