html { color: white !important; margin: 0 !important; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
html { width:100%; height:200vh; }
body { width: 100%; }
body { background-image: url('../img/backcard.png') !important; }
.mainBox {width: 400px; border-radius: 15px 15px !important; background-repeat: no-repeat; position: relative; background-image: url('../img/card2415C.webp');  height: 220vh; display:  block; margin-top: 0 !important; margin-left: auto; margin-right: auto; } 
footer {font-size: 0.8em; }
.espaco { color: #ff6633;}
.whatProgressText, .bioText { background-color: #85d1d67c; border-radius: 5px 5px; }
.showWhatIsProgress { display: block; text-align: justify; padding-left: 10px; padding-right: 10px; color:#64E612; }
.showWhatIsProgress a, .showWhatIsProgress a:visited { color:white;}
.hideWhatIsProgress { display: none; }
.bioText { font-size: 0.8em; }
.showBio { display: block; text-align: justify; padding-left: 10px; padding-right: 10px; color: #efefef; }
.hideBio { display: none; }
.questions { text-align: center;; cursor:pointer; color:white; display: block; font-size: 1.2em; }
.qrCard { margin-left:10px; display: block; margin-top:-100px; width: 380px; height: 380px; background-size: cover; background-image: url('../img/QRCodeVCard.png'); }
.country{ display: inline-block; width:24px; margin:10px; height: 24px; }
.meuNome { font-size: 2em; }
.meusAtributos { margin-top: 3px; margin-left: 5px; font-size: 0.98em;}

.bodyIndex { display: block; width: 100vw; height: 200vh; overflow: hidden; }

.links a, .links a:visited { color:white;}
.links { display: inline-block; }
.links, .links a {/* width: 100%; */height: 26px !important;color: white;font-size: 14px;text-align: center;}
 
a, .btn-link { color: #0366d6; }

.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
 
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }

.invalid { outline: 1px solid red; }

.validation-message { color: red; }

#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

a, a span, a:visited { text-decoration: none; color: gray; } 

.buttons { justify-content:center; width: 100%; margin-left: 1px; display: flex;   }
.buttons button { display:block; float:left; }
.nav-link { color: white !important; }
.filY0 { fill: #FF6633 }
.filY1 { fill: #2F4163 }
.filY2 { fill: #2F4163; fill-rule: nonzero }
.filQ0 { fill: #FF6633; fill-rule: nonzero }

.mainPic { text-align: center; margin-top: 10px; display: block; }

@media (device-width: 414px) {    
    .buttons .k-button span img { height: 32px; width: 32px; }  
    .mainBox { width: 100vw;}   
}

@media (device-width: 375px) {    
    .buttons .k-button span img { height: 48px; width: 48px; }    
    .mainBox, .App, body, .bodyIndex { width: 100vw;} 
    .mainBox { background-size:cover; }
    .mainBox, .App, body, .bodyIndex { margin-top: 0 !important; margin-left: 0 !important; }
} 

@media (device-width: 390px) {        
    .buttons .k-button span img { height: 22px; width: 22px; }     
    .mainBox { width: 100vw;} 
}

@media (device-width: 393px) {           
    .buttons .k-button span img { height: 22px; width: 22px; }    
    .mainBox { width: 100vw;}  
}



.colGrade { width: 24%; padding: 3px; }
.colGradeTitle { width: 24%; text-align: center; font-size: 2em; }
.gradeImpar { background-color: #c0c0c0; }
.gradePar { background-color: slategray; }

.boxAppCalc { padding-left: 10px; display: block; width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; padding: 5px; box-shadow: rgba(110,110,110,5) 5px 5px; border: 2px solid black; border-radius: 15px 15px; }

.boxAppCalcInner { padding: 5px; margin-left: 20px; display: block; float: left; }

.resultado { font-size: 16px; width: 110px; display: block; min-height: 28px; height: 28px; text-align: center; background-color: #C0C0C0; color: black; }

.jesus { display: block; position: absolute; bottom: 5px; right: 10%; }
.copyright, .avisos { font-size: 8pt; }
.clear { clear: both; }