body { padding: 0; margin: 0; background-color: #d7d7d7; font-family: Quicksand, sans-serif; }
.page-header .logged-in-user { float: right; margin: 10px; display: none;}
.page-header .selection { float: right; margin: 10px;}
.page-header .sel-count { color: rgb(51, 122, 183) !important; border: none; background: none !important; cursor: pointer;  }
.page-header .sel-count:hover { text-decoration: underline; color:rgb(241, 101, 73); }
.page-header .logo {width:64px; vertical-align: middle; margin: 5px; float: left;} 
.page-header button { padding: 10px; text-align: center; display: inline-block; color: white; 
                      font-weight: bold; background-color: rgb(51, 122, 183); border: none;
                      margin: 0; border-radius: 3px; cursor: pointer; }
.page-header button:hover { background-color: rgb(241, 101, 73); }
.page-header .ieps-name { display: inline-block; margin: 10px 0 0 0; }
.page-header .ieps-name+br+span { display: inline-block; font-size: 12px;}
.page-header .ieps-name+br+span > a { text-decoration: none; color: black;}
.page-header .ieps-name+br+span > a:hover { text-decoration: underline;}

.container { display: flex; justify-content: center !important; margin: 100px auto; }

@media (max-width:599px){
    .page-header { background-color: white; margin: 0; left:0; top: 0; width: 100%; min-height: 80px; }
    .auth { margin-top: 5px; background-color: white; padding: 5px; }
    .container { margin: 0;}
}
@media (min-width:600px){
    .page-header { position: fixed; background-color: white; margin: 0; left:0; top: 0; width: 100%;  }
    .auth { margin-top: 30px; width: 450px; background-color: white; padding: 5px; }
}
.auth h1, .auth h3 { text-align: center; margin: 0;}
.auth p { text-align: justify;}
.auth .error, .create-account .error { color: red; display: none; margin-bottom: 10px;}
.auth .error a, .create-account .error a { color: red; }
.auth .error.success, .create-account .error.success { color: rgb(51, 122, 183); display: none; margin-bottom: 10px;}
.auth label { font-weight: bold;}
.auth .link { padding: 10px 5px; cursor:pointer; color: rgb(51, 122, 183);  }
.auth .link:hover { text-decoration: underline;}

.auth input { display: block; width: 100%; margin: 5px 0 20px; border: none; border-bottom: solid 1.5px #ccc; }
.auth button { padding: 20px 0; text-align: center; display: block; color: white; 
               font-weight: bold; background-color: rgb(241, 101, 73); border: none;
               width: 100%; margin: 20px 0; border-radius: 3px; cursor: pointer; }
.auth button:hover { background-color: rgb(51, 122, 183); }

.recover-password { display: none; }

.profile { margin-top: 30px; max-width: calc(100% - 60px); display: none; background-color: white; }
.profile h1 { text-align: center; margin: 0;}
.profile main { background-color: white; padding: 10px; margin-bottom: 30px;}
.profile label { font-weight: bold; font-size: 14px;}
.profile input { display: block; width: calc(100% - 50px); margin: 5px 0 20px; border: solid 1.5px #ccc; border-radius: 2px; margin: 5px; padding: 8px 10px; }
.profile select { display: block; width: calc(100% - 50px); margin: 5px 0 20px; border: solid 1.5px #ccc; border-radius: 2px; margin: 5px; padding: 8px 10px; }
.profile button:not(.req-mail-check) { padding: 20px 0; text-align: center; display: block; color: white; 
               font-weight: bold; background-color: rgb(241, 101, 73); border: none;
               width: 100%; margin: 20px 0; border-radius: 3px; cursor: pointer; }
.profile button:hover { background-color: rgb(51, 122, 183); }
.profile .link { padding: 10px 5px; cursor:pointer; color: rgb(51, 122, 183);  }
.profile .link:hover { text-decoration: underline;}

.emojifont { font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols,EmojiOne Mozilla !important; }

@media (max-width:849px){
    .profile main .row:not(.req-mail-check) {display: block; flex-direction: row; width: 100%; margin-bottom: 20px;}
    .profile main .row  .w100,
    .profile main .row  .w75,
    .profile main .row  .w66,
    .profile main .row  .w50,
    .profile main .row  .w45,
    .profile main .row  .w33,
    .profile main .row  .w20 { display: block; }
}
@media (min-width:850px){
    .profile main .row:not(.req-mail-check) {display: flex; flex-direction: row; width: 800px; margin-bottom: 20px;}
    .profile main .row  .w100 { flex: 0 0 100%;}
    .profile main .row  .w75 { flex: 0 0 75%;}
    .profile main .row  .w66 { flex: 0 0 66%;}
    .profile main .row  .w50 { flex: 0 0 50%;}
    .profile main .row  .w45 { flex: 0 0 45%;}
    .profile main .row  .w33 { flex: 0 0 33.33%;}
    .profile main .row  .w20 { flex: 0 0 20%;}
    .profile main .row  .niss-explain { padding-top: 16px;}
}

.reg-confirmed { background: white; margin-top: 100px; padding: 20px; max-width: 1000px;}
.reg-confirmed h2 { margin-bottom: 40px; }
.reg-confirmed p { text-align: justified; }

.verified-email { color: darkgreen; font-weight: bold;}

.cost-unofficial { display: none; color: darkred; font-weight: bold; border: solid 2px darkred; padding: 3px 8px; background-color: #f0a8a8;}
.roi-accept { background-color: white; padding: 10px;}
.chk-roi { transform: scale(1.5); margin:  20px;}
.link-roi { color: #555;}

.email-verify, #send-email-challenge  { display: none; }
.req-mail-check  { display: none; }
input[name='mail-verif-code'] { font-size: 26px; text-align: center; width: 100px; font-family: quicksand; }

span.mf { color: red; }
#msgBoxROI { display: none; }
#msgBoxROI > div { background-color: white; padding: 20px 10px; height: calc(100% - 50px);}

button#docs-upload { padding: 20px 0; text-align: center; display: block; color: white; 
               font-weight: bold; background-color: rgb(241, 101, 73); border: none;
               width: 100%; margin: 20px 0; border-radius: 3px; cursor: pointer; }
button#docs-upload:hover { background-color: rgb(51, 122, 183); }