@charset "utf-8";

*{box-sizing:border-box;}
html{font:400 12px "Segoe UI",Tahoma,sans-serif;}
body{margin:0;padding:80px 0 0;background:#fff;}
header{position:absolute;top:0;left:0;right:0;height:80px;background:#00529b;box-shadow:0 0 50px #00529b60;}
.content{padding:0 2rem;margin:0 auto;width:860px;max-width:100%;}
header a.login{display:block;float:right;color:#fff;text-decoration:none;font:400 1.67rem/40px "Segoe UI",Tahoma,sans-serif;padding:20px 0 20px 20px;text-transform:uppercase;}
header a.login:hover,header a.login:focus,header a.login:active{text-shadow:0 0 2em #ffffff7f;}
header a.close{display:block;float:right;width:60px;height:80px;line-height:80px;text-align:right;color:#fff;text-decoration:none;font-size:36px;}
header a.close::before{content:"×";}
div.nick{transition:opacity .5s,height .3s .5s;height:8em;}
div.nick.nick-hidden{opacity:0;height:0;}
div.nick label{display:block;margin:5rem auto 3rem;width:36rem;max-width:100%;font-size:2rem;font-weight:600;}
div.nick input{display:block;margin:0.5rem 0 0;width:100%;padding:.5em 1em;font-size:2rem;line-height:1em;border:2px solid #00529b;border-radius:.6rem;transition:box-shadow .2s;}
div.nick input:hover,div.nick input:focus,div.nick input:active{outline:none;box-shadow:0 0 50px #00529b60;}
header .epolish-logo{margin:auto;height:60px;width:150px;border-radius:1.25vh;background:#fff url(/dialog/exercise/logo.png) bottom 20% center no-repeat;background-size:75%;z-index:1;display:block;float:left;border:2px solid #97b3cb;margin-top:48px;}

div.quiz-buttons{margin:2rem 0;display:flex;flex-wrap:wrap;justify-content:center;}
div.quiz-buttons button{width:10rem;height:10rem;margin:1rem;background:#7ab7da;border:none;position:relative;overflow:hidden;transition:background .3s,box-shadow .3s,transition .3s;}
div.quiz-buttons button:disabled{background:#c3cace;}
div.quiz-buttons button:not(:disabled){cursor:pointer;}
div.quiz-buttons button:hover,div.quiz-buttons button:focus,div.quiz-buttons button:active{outline:none;}
div.quiz-buttons button:hover:not(:disabled),div.quiz-buttons button:focus:not(:disabled),div.quiz-buttons button:active:not(:disabled){background:#71cbff;box-shadow:0 0 2rem #71cbff7f;transform:scale(1.02);}
div.quiz-buttons button>span{position:absolute;left:.5em;right:.5em;bottom:.7em;color:#fff;text-transform:uppercase;text-align:left;font:700 .9em/1 "Segoe UI",Tahoma,sans-serif;}


.ep-tiles{display:block;margin:80px auto 0;padding:0;text-align:center;width:100%;}
.ep-tiles a:hover{text-decoration:none;}
.ep-tiles>div{display:inline-block;height:207px;width:360px;margin:0 22px 33px;vertical-align:top;}
.ep-tiles>div.disabled{cursor:not-allowed;filter:grayscale(.8) contrast(0.5) brightness(1.33);}
.ep-tiles>div.disabled>*{pointer-events:none;}
.ep-tiles>div>.tile-contents {background:#e2ebf2;border-radius:25px;display:block;height:100%;overflow:hidden;position:relative;width:100%;padding-top:18px;}
.ep-tiles>div>.tile-contents>a { position:absolute;top:0;left:0;height:100%;width:100%;}
.ep-tiles>div>.tile-contents .divider{background:#cfdde8;border-radius:4px;display:block;height:9px;left:calc(50% - 45px);position:absolute;top:125px;width:91px;}

@media only screen and (max-width: 800px) {
    .ep-tiles>div{display:block;margin:0 auto 2rem;max-width:100%;}
}

.ep-tiles>div>.tile-contents .ep-tile-icon{background:url("../../lector/img/icons.tiles.png?7") 0 0 no-repeat;display:block;height:60px;margin:20px auto;width:100px;}
.ep-tiles>div>.tile-contents .ep-tile-icon.icon-quiz-flashcard{background-position:0 -3210px;height:70px;margin-bottom:15px;margin-top:15px;}
.ep-tiles>div>.tile-contents .ep-tile-icon.icon-quiz-choice{background-position:0 -2940px;}
.ep-tiles>div>.tile-contents .ep-tile-icon.icon-quiz-letters{background-position:0 -3000px;width:121px;}
.ep-tiles>div>.tile-contents .ep-tile-icon.icon-quiz-text{background-position:0 -3060px;}
.ep-tiles>div>.tile-contents .ep-tile-icon.icon-quiz-test{background-position:0 -3120px;height:72px;margin-bottom:14px;margin-top:14px;}

.ep-tiles>div>.tile-contents button{height:29px;background:#4d64a7;border:none;color:#fff;text-transform:uppercase;font-weight:700;font-size:14px;border-radius:15px;padding:0 1.5em;margin:0 .4em;}
.ep-tiles>div>.tile-contents button{min-width:136px;margin-top:35px;font-family:"Segoe UI",Tahoma,sans-serif;}
.ep-tiles>div>.tile-contents button:enabled{cursor:pointer;}