body.index #layout.login {display:flex; align-items:center; justify-content:center; padding-top:0; overflow:auto;}
.btn.cancel {background-color:#ee1773; border-color:#ee1773; color:var(--hfcolor);}
.btn.submit {background-color:#91d75b; border-color:#91d75b; color:var(--hfcolor);}
.btn.submit.waiting:after {top:0.15em;}
#loginform {width:85%; max-width:500px; margin:0 auto; padding:110px 0 10px 0; position:relative; background-color:var(--hfcolor);/*rgba(255,255,255,.7);*/ border-radius:2%; box-shadow:12px 12px 22px rgba(255,50,50,0.12); display:flex; align-items:center; justify-content:center;}
#loginform:before {content:"\e900"; font-family:icomoon; color:rgba(255,255,255,0.7); display:block; position:absolute; z-index:1; top:-100px; left:50%; transform:translate(-50%, 0); width:200px; height:200px; border-radius:50%; background-color:rgba(60,60,60,0.9); text-align:center; font-size:110px; line-height:190px;}
#loginform > form {display:block; width:90%; max-width:400px; margin:0 auto; padding:0;}
#loginform .row {width:100%; height:auto; padding:10px 0; /*margin-top:20px;*/ border-width:0; position:relative;}
#loginform .row:first-of-type {padding-bottom:0;}
#loginform .row:first-of-type .mt:before {content:"\e901"; font-family:icomoon; font-size:80%; padding-right:8px; opacity:1; transition:font-size .3s ease-in-out,padding-right .3s ease-in-out,opacity .3s ease-in-out;}
#loginform .row:nth-child(2) .mt:before {content:"\e98f"; font-family:icomoon; font-size:80%; padding-right:5px; opacity:1; transition:font-size .3s ease-in-out,padding-right .3s ease-in-out,opacity .3s ease-in-out;}
#loginform .row .mi {display:block; height:80%; font-size:26px; position:absolute; left:0; bottom:0; width:100%; z-index:2; padding:0 15px; width:100%; background-color:rgba(136,139,144,0.3); border:3px solid var(--bordercolor); border-radius:6px; transition:border-color .3s ease-in-out,background-color .3s ease-in-out;}
#loginform .row .mi:focus {border-color:var(--outside); background-color:rgba(136,139,144,0.1);}
#loginform .row .mt {color:var(--outside); font-size:22px; height:auto; position:absolute; top:39%; font-weight:300; transition:font-size .3s ease-in-out,top .3s ease-in-out;}
#loginform .row .focus .mt:before {font-size:0; padding-right:0; opacity:0;}
#loginform .row .btn {width:100%; margin-top:5px; font-size:100%; font-weight:300; text-transform:uppercase; padding-top:12px; padding-bottom:12px;}
#loginform .row .modinput.focus .mt {font-size:16px; top:-10px;}
#loginform.failure {animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform:translate3d(0,0,0);}

#content .note {flex:2; position:relative; min-width:2.5em; max-width:2.5em; transition:background-color .3s ease-in-out,color .3s ease-in-out;}
#content .note:before {content:"\e601"; font-family:icomoon; display:flex; flex-direction:row; justify-content:center; align-items:center; height:100%; width:100%; text-align:center; font-size:140%; cursor:pointer;}
#content .note ul {list-style-type:none; margin:0; padding:0; display:block; position:absolute; z-index:2; max-height:0; width:0; overflow:hidden; top:calc(50% + 1em); right:5px; background-color:var(--gfcolor); box-shadow:0 0 10px rgba(0,0,0,0.3); transition:max-height .2s ease-in-out;}
#content .note li {text-align:center; padding:0.6em 1em 0.6em 3em; font-size:90%; color:var(--hfcolor); white-space:nowrap; position:relative; background-color:rgba(255,255,255,0); transition:color .3s ease-in-out,background-color .3s ease-in-out;}
#content .note li.title {padding:0.3em 0; font-size:80%; color:var(--textcolor); border-bottom:1px solid rgba(255,255,255,0.2);}
#content .note li.title:nth-child(n+1) {border-top:1px solid rgba(255,255,255,0.2);}
#content .note li.menu {font-weight:300; cursor:pointer;}
#content .note li.menu:hover {color:var(--inside); background-color:rgba(255,255,255,0.15);}
#content .note .menu:before {content:"\e96e"; font-family:icomoon; font-size:120%; padding-right:0.5em; position:relative; position:absolute; left:0.8em;}
#content .note .public:before {content:"\e96f";}
#content .note .save:before {display:none;}
#content .note .save > a {color:inherit;}
#content .note .save > a:before {content:"\e9c5"; background-color:transparent !important;}
#content .note.open {background-color:var(--outside); color:var(--hfcolor);}
#content .note.open ul {max-height:14em; width:auto;}
#content .note.open:after {content:""; display:block; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%;}
#content > ul > li:last-of-type .note ul {bottom:2.4em; top:auto;}
#content > ul > li:first-of-type .note ul {bottom:auto; top:calc(50% + 1em);}
#content .notearea {flex:3; min-width:100%; max-width:100%; padding:0.6rem 0.2rem 0.6rem 6rem; position:relative; position:relative; top:0.2rem; font-size:90%; border-top:1px solid rgba(255,255,255,0.5);}
#content .notearea:before {content:"\e96e"; font-family:icomoon; font-size:180%; display:block; position:absolute; top:calc(50% - 0.8rem); left:2.3rem; width:2rem; height:2rem;}
#content .notearea.public:before {content:"\e96f";}
#content .notearea textarea {width:100%; min-width:100%; max-width:100%; height:7rem; min-height:4rem; max-height:18rem; font-family:inherit; font-size:100%; font-weight:300; background-color:rgba(255,255,255,0.8); border-width:0; padding:0.3rem;}
#content .notearea .save {padding:0.3em 0; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center;}
#content .notearea .btn {display:block; position:relative; font-size:120%; color:var(--hfcolor); padding:0.4em 2em 0.4em 1.5em; border-width:0; margin-right:4em;}
#content .notearea .btn:before {content:"\e905"; font-family:icomoon; padding-right:0.5em;}
#content .notearea .btn.cancel {margin-right:0; margin-left:4em; background-color:#ee1773;}
#content .notearea .btn.cancel:before {content:"\e903"; position:relative; top:0.05em;}
#content .notearea .btn .submit {position:absolute; z-index:2; top:0.25em; left:100%; overflow:hidden; max-width:0; min-width:0; padding:0.2em 0; text-align:center; background-color:#91d75b; font-weight:bold; border-top-right-radius:0.3em; border-bottom-right-radius:0.3em; box-shadow:0 0 0 rgba(0,0,0,0); transition:max-width .3s ease-in-out,min-width .3s ease-in-out,background-color .3s ease-in-out,box-shadow .3s ease-in-out;}
#content .notearea .btn.cancel .submit {left:auto; right:100%; border-radius:0.3em; border-top-right-radius:0; border-bottom-right-radius:0;}
#content .notearea .btn .submit:hover {background-color:#74cd32; box-shadow:0 0 6px rgba(0,0,0,0.4);}
#content .notearea .btn.open .submit {max-width:8em; min-width:5em; box-shadow:0 0 6px rgba(0,0,0,0.3);}
#content .notearea .btn.waiting:after {font-size:70%; left:0.4em;}
#content .notearea.public {flex:4;}
#content .notearea.public ul {margin:0; padding:0; list-style-type:none;}
#content .notearea.public li {margin:0; padding:0.2rem 0; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start;}
#content .notearea.public li span {display:block; font-weight:300;}
#content .notearea.public li span.date,
#content .notearea.public li span.author {padding-right:0.5rem;}
#content .notearea.public li span.date {opacity:0.8; font-size:90%; padding-top:0.05rem; min-width:6.2em;}
#content .notearea.public li span.author {font-weight:400;}
#content .notearea.public li span.text {white-space:pre-line;}
#content .notearea .head {padding:0.3em 2em 0.3em 1em; position:relative; z-index:1; top:0.2em; margin:0; background-color:var(--gfcolor); color:var(--textcolor);}
#content .notearea .head .close {width:1em; height:1em; position:absolute; right:0.5em; top:calc(50% - 0.5em); color:var(--hfcolor);}

#edit-password .outer {max-width:500px; height:auto;}
#edit-password .container {background-color:var(--outside); padding:2em; box-shadow:0 0 12px rgba(0,0,0,0.35); position:relative; padding-top:5em; border-radius:0.5em;}
#edit-password p.title {display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; top:-5.5em; left:calc(50% - 6em); z-index:1; text-align:center; color:black; font-size:80%; font-weight:300; background-color:rgba(255,255,255,0.9); width:12em; height:12em; border-radius:50%;}
#edit-password p.title:before {display:block; width:100%; text-align:center; content:"\e900"; font-family:icomoon; font-size:600%; opacity:0.6; padding-bottom:0.1em;}
#edit-password .mt {color:var(--hfcolor); font-weight:400;}
#edit-password .mi {background-color:rgba(255,255,255,0.2); border-width:3px; border-width:0; color:var(--hfcolor);}
#edit-password .modinput {height:75px;}
#edit-password .action {padding-top:20px; margin-top:20px; border-top:1px solid var(--gfcolor);}
#edit-password .action .btn {display:block; width:100%; max-width:12em; padding-top:0.6em; padding-bottom:0.6em; margin:0 auto; border:3px solid #7c7c7c; background-color:var(--inside); color:black; text-align:center;}
#edit-password .action .btn:hover {background-color:#d7d7d7; color:black !important; border-color:#d7d7d7;}
#edit-password .progressbar {width:calc(100% + 6px); height:7px; position:absolute; z-index:1; bottom:-12px; margin:0 -3px; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:stretch; align-items:center;}
#edit-password .progressbar .progress {background-color:#7c7c7c; height:100%; flex:1; margin:0 3px; border-radius:4px; transition:background-color .4s ease-in-out;}
#edit-password .fail .progress.fail {background-color:#e32f6e;}
#edit-password .weak .progress.fail,
#edit-password .weak .progress.weak {background-color:#f5b51d;}
#edit-password .good .progress.fail,
#edit-password .good .progress.weak,
#edit-password .good .progress.good {background-color:#f7e71c;}
#edit-password .strong .progress.fail,
#edit-password .strong .progress.weak,
#edit-password .strong .progress.good,
#edit-password .strong .progress.strong {background-color:#99f71c;}
#edit-password .renewlogin {margin-top:12px;}
#edit-password .btn.waiting:after {top:0.3em; left:0.5em;}

#vote #subject .voting-form {display:none; min-height:9rem; max-width:40rem; width:100%; padding:10px; flex-direction:row; flex-wrap:nowrap; justify-content:space-around; align-items:center;}
#vote #subject .voting-form .vbtn {display:none; height:6rem; width:6rem; background-color:rgba(255,255,255,0.1); border-radius:50%; margin:5px 5px 20px 5px; cursor:pointer; border:0.3rem solid var(--inside); position:relative; transition:background-color .3s ease-in-out,border-color .3s ease-in-out;}
#vote #subject .voting-form .vbtn:before {font-family:icomoon; display:block; text-align:center; line-height:5.5rem; font-size:3.5rem; text-shadow:0 0 8px rgba(0,0,0,0.3); transition:text-shadow .1s ease-in-out;}
#vote #subject .voting-form .vbtn:hover:before {text-shadow:0 0 12px rgba(0,0,0,0.6);}
#vote #subject .voting-form .vbtn:after {display:block; text-align:center; width:100%; padding-top:0.4rem; white-space:nowrap;}
/*#vote #subject .voting-form .vbtn.discusion:hover,*/
#vote #subject .voting-form .vbtn.agree.select {background-color:rgba(190,232,159,0.4); border-color:#91d75b;}
#vote #subject .voting-form .vbtn.agree:before,
#vote #subject .voting-form .vbtn.discusion:before {content:"\e906"; color:#91d75b;}
#vote #subject .voting-form .vbtn.agree:after {content:"PRO";}
#vote #subject .voting-form .vbtn.disagree.select {background-color:rgba(251,145,185,0.4); border-color:#f61768;}
#vote #subject .voting-form .vbtn.disagree:before {content:"\e907"; color:#f61768;}
#vote #subject .voting-form .vbtn.disagree:after {content:"PROTI";}
/*#vote #subject .voting-form .vbtn.note:hover,*/
#vote #subject .voting-form .vbtn.delay.select {background-color:rgba(147,234,255,0.4); border-color:#00c3f1;}
#vote #subject .voting-form .vbtn.delay:before,
#vote #subject .voting-form .vbtn.note:before {content:"\e908"; color:#00c3f1;}
#vote #subject .voting-form .vbtn.delay:after {content:"ZDRŽET SE";}
#vote #subject .voting-form .vbtn.discusion:before {content:"\e904";}
#vote #subject .voting-form .vbtn.discusion:after {content:"DISKUSE";}
#vote #subject .voting-form .vbtn.note:before {content:"\e96f";}
#vote #subject .voting-form .vbtn.note:after {content:"POZNÁMKA";}
/*#vote #subject .voting-form .vbtn.cancel:hover {background-color:rgba(189,189,189,0.4); border-color:#818181;}*/
#vote #subject .voting-form .vbtn.cancel:before {content:"\e90a"; font-size:3rem; color:#818181;}
#vote #subject .voting-form .vbtn.cancel:after {content:"ZRUŠIT";}
#vote #subject .voting-form .vbtn.waiting {border-color:#aaaaaa;}
#vote #subject .voting-form .vbtn.waiting:before,
#vote #subject .voting-form .vbtn.waiting:hover:before {color:#aaaaaa; text-shadow:none;}
#vote #subject .voting-form .vbtn.waiting:after {content:""; width:4rem; height:4rem; padding:0; border-width:0.3rem 0;  position:absolute; top:calc(50% - 2.2rem); left:calc(50% - 2rem);}
#vote.diskuse #subject .voting-form,
#vote.odhlasovani #subject .voting-form {display:flex !important;}
#vote.diskuse .voting-form .vbtn.discusion,
#vote.diskuse .voting-form .vbtn.note,
#vote.diskuse .voting-form .vbtn.cancel,
#vote.odhlasovani .voting-form .vbtn.agree,
#vote.odhlasovani .voting-form .vbtn.disagree,
#vote.odhlasovani .voting-form .vbtn.delay,
#vote.odhlasovani .voting-form .vbtn.cancel {display:block !important;}

#topmenu #video-modul {width:3rem; height:100%; position:relative; display:flex; flex-direction:row; justify-content:center; align-items:center; color:var(--hfcolor); background-color:#00c3f1; transition:height .3s ease-in-out,background-color .3s ease-in-out;}
#topmenu #video-modul:hover {background-color:#91d75b; background-image:none; height:130%;}
#topmenu #video-modul:before {content:"Využijte přihlášení do videokonference."; background-color:#00c3f1; color:var(--hfcolor); width:0; height:0; display:block; overflow:hidden; position:absolute; z-index:-10; top:-7rem; left:-2rem; opacity:0; padding:0; margin:0; text-align:center; line-height:130%; font-weight:300; border-radius:8px; animation:buble 5s 1s linear;}
#topmenu #video-modul[target="_blank"]:before {content:"Využijte přihlášení do videokonference, které bude zobrazono v nové záložce prohlížeče."}
#topmenu #video-modul:after {content:"\e602"; font-family:icomoon; color:#00c3f1; position:absolute; top:-7rem; font-size:0; opacity:0; padding:0; margin:0; animation:buble-arrow 5s 1s linear;}

@media (hover: hover) {
  a:hover { color: blue; }
}

@media (max-width: 800px) {
  #content .notearea {padding-left:3.4rem;}
  #content .notearea:before {left:1rem; font-size:140%; width:1.6rem; height:1.6rem; top:calc(50% - 0.8rem);}
  #content .notearea.public li {flex-wrap:wrap;}
  #content .notearea.public li span.text {min-width:100%; max-width:100%;}
  #content .notearea .save {flex-direction:column; justify-content:center;}
  #content .notearea .btn {margin:0.5em !important;}
  #content .notearea .btn .submit {left:auto; right:100%; border-radius:0.3em; border-top-right-radius:0; border-bottom-right-radius:0;}
}

@media (max-width: 450px) {
  #vote #subject .voting-form .vbtn {height:5rem; width:5rem; margin-bottom:30px;}
  #vote #subject .voting-form .vbtn:before {line-height:4.5rem; font-size:2.5rem !important;}
  #vote #subject .voting-form .vbtn:after {font-size:90%;}
}

@media (max-width: 400px) {
  #vote #subject .voting-form .vbtn {height:4.5rem; width:4.5rem;}
  #vote #subject .voting-form .vbtn:before {line-height:4rem;}
}

@keyframes buble {
  0% {width:auto; height:auto; min-width:10rem; padding:0.6rem 1.5rem; opacity:0; margin-top:2.5rem; z-index:-1; box-shadow:0 0 0 rgba(0,0,0,0);}
  8% {opacity:0; box-shadow:0 0 10px rgba(0,0,0,0.3);}
  15% {top:50%; z-index:0;}
  20%,85% {opacity:1; box-shadow:0 0 10px rgba(0,0,0,0.3);}
  99% {width:auto; height:auto; padding:0.6rem 1.5rem; min-width:10rem; opacity:0; margin-top:2.5rem; top:50%; box-shadow:0 0 0 rgba(0,0,0,0);}
  100% {width:0; height:0; padding:0; min-width:0; opacity:0; margin-top:0;}
}

@keyframes buble-arrow {
  0%,20% {top:-7rem; font-size:0; opacity:0; margin-top:3rem;}
  21% {top:50%; margin-top:3rem;}
  33%,43%,53%,63%,73%,83% {margin-top:1.5rem;}
  38%,48%,58%,68%,78% {margin-top:1.8rem;}
  22%,85% {opacity:1; font-size:180%;}
  99% {opacity:0; margin-top:1.5rem; top:50%}
  100% {margin-top:0; top:-7rem;}
}