@charset "utf-8";
html { box-sizing:border-box; width:100%; height:100%; }
*, *:before, *:after { box-sizing:inherit;}
body{ background:#ffffff; margin:0px; padding:0px; width:100%; height:100%; color:#000000; font-size:100%; }
html, input, textarea { font-size:15px; line-height:22px;}
input, select { vertical-align:middle; font-weight:normal;}
a {color:#0A2E82; outline:none; text-decoration:none;}
a:hover{text-decoration:underline;}

.header { background: #f0f0f0;}

.f11 { font-size:11px !important; line-height: 14px !important;}
.f12 { font-size:12px !important; line-height: 16px !important;}
.f13 { font-size:13px !important; line-height: 18px !important;}
.f14 { font-size:14px !important; line-height: 20px !important;}
.f16 { font-size:16px !important; line-height: 24px !important;}
.f18 { font-size:18px !important; line-height: 25px !important;}
.f21 { font-size:21px !important; line-height: 29px !important;}
.f28 { font-size:28px !important; line-height: 40px !important;}
.fw600 { font-weight:600; }
.fw500 { font-weight:500;}
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.w-90 { width: 90%;}
.op50 { opacity: 0.5; }
.font-italic { font-style: italic; }
.form-control::placeholder { font-weight: normal;}

.float-left { float: left !important; }
.float-right { float: right !important; }

.cursor-pointer { cursor: pointer; }

.mt-0 { margin-top: 0px !important;}
.mb-0 { margin-bottom: 0px !important;}
.mt-1 { margin-top: 4px !important;}
.mb-1 { margin-bottom: 4px !important;}
.ml-1 { margin-left: 4px !important;}
.mr-1 { margin-right: 4px !important;}
.mt-2 { margin-top: 8px !important;}
.mb-2 { margin-bottom: 8px !important;}
.ml-2 { margin-left: 8px !important;}
.mr-2 { margin-right: 8px !important;}
.mt-3 { margin-top: 16px !important;}
.mb-3 { margin-bottom: 16px !important;}
.mr-3 { margin-right: 16px !important;}
.ml-3 { margin-left: 16px !important;}
.mt-4 { margin-top: 32px !important;}
.mb-4 { margin-bottom: 32px !important;}
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.pl-0 { padding-left: 0px !important;}
.pr-0 { padding-right: 0px !important;}
.pt-0 { padding-top: 0px !important;}
.pb-0 { padding-bottom: 0px !important;}
.p-1 { padding: 4px !important;}
.pl-1 { padding-left: 4px !important;}
.pr-1 { padding-right: 4px !important;}
.px-1 { padding-right: 4px !important; padding-left: 4px !important; }
.p-2 { padding: 8px !important;}
.pl-2 { padding-left: 8px !important;}
.pr-2 { padding-right: 8px !important;}
.pt-2 { padding-top: 8px !important;}
.pb-2 { padding-bottom: 8px !important;}
.px-2 { padding-right: 8px !important; padding-left: 8px !important; }
.p-3 { padding: 16px !important;}
.pl-3 { padding-left: 16px !important;}
.pr-3 { padding-right: 16px !important;}
.pt-3 { padding-top: 16px !important;}
.pb-3 { padding-bottom: 16px !important;}
.p-4 { padding: 32px !important;}
.pl-4 { padding-left: 32px !important;}
.pr-4 { padding-right: 32px !important;}
.pt-4 { padding-top: 32px !important;}
.pb-4 { padding-bottom: 32px !important;}

.top-menu .fas { font-size: 24px; padding: 12px 12px 3px 12px; }
.top-menu a.d-inline-block { text-align: center; min-width: 60px; }

.answer-selected { border-color: #19872A !important; background-color: #DDEFE0 !important;}

.points-count { display: inline-block;  font-size: 11px; line-height: 11px; padding: 0px;  color: #ffffff; position: absolute; margin: 8px 0px 0px -8px; }
.points-count > span { padding: 2px 6px;}
.points-count .points-found { border-radius: 3px 0px 0px 3px;  background: #449044; } 
.points-count .points-total { border-left: solid 1px #ffffff; background: #505050; border-radius: 0px 3px 3px 0px; }

.gameLinkSample { display: inline-block; width: 54px; height: 54px; background: #fff; border-radius: 6px; text-align: center; margin: 4px auto; }
.gameLinkSample:before { content: ''; display: inline-block; width: 48px; height: 48px; 
    background-image: url('/favicon.svg'); background-size: 42px 42px; background-repeat: no-repeat; background-position: center center; }
.gameLinkTextSample { text-align: center; margin: 0 auto; }