/* ============================================================
   Source Sans Pro font
   ============================================================ */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,500,600,700&display=fallback&subset=latin-ext');

/* ============================================================
   Base
   ============================================================ */
html, body {
    border: 0;
    margin: 0;
    padding: 0;
    font-family: Source Sans Pro, sans-serif;
}

/* ============================================================
   Font Awesome (fa-spinner only)
   ============================================================ */
@font-face {
    font-family: FontAwesome;
    src: url('fonts/fontawesome-webfont3e6e.eot?v=4.7.0');
    src: url('fonts/fontawesome-webfontd41d.eot?#iefix&v=4.7.0') format('embedded-opentype'),
         url('fonts/fontawesome-webfont3e6e.woff2?v=4.7.0') format('woff2'),
         url('fonts/fontawesome-webfont3e6e.woff?v=4.7.0') format('woff'),
         url('fonts/fontawesome-webfont3e6e.ttf?v=4.7.0') format('truetype'),
         url('fonts/fontawesome-webfont3e6e.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: 400;
    font-style: normal;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-spinner:before { content: "\f110"; }
.fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; }
@-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@keyframes fa-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }

/* ============================================================
   Bakaláři webicons (ico32-menu-napoveda only)
   ============================================================ */
@font-face {
    font-family: baka-webicons;
    src: url('icons/baka-webiconsa09a.eot?kqak09');
    src: url('icons/baka-webiconsa09a.eot?kqak09#iefix') format('embedded-opentype'),
         url('icons/baka-webiconsa09a.ttf?kqak09') format('truetype'),
         url('icons/baka-webiconsa09a.woff?kqak09') format('woff'),
         url('icons/baka-webiconsa09a.svg?kqak09#baka-webicons') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
[class*=" ico32-"]:not([class*=" ico32-modul-"]),
[class^=ico32-]:not([class^=ico32-modul-]) {
    font-family: baka-webicons !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ico32-menu-napoveda:before { content: "\e96b"; }

/* ============================================================
   jQuery UI dialog
   ============================================================ */
.ui-front { z-index: 100; }
.ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #aaa; opacity: .003; }
.ui-widget { font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
.ui-widget.ui-widget-content { border: 1px solid #c5c5c5; }
.ui-widget-content { border: 1px solid #ddd; background: #fff; color: #333; }
.ui-widget-header { border: 1px solid #ddd; background: #e9e9e9; color: #333; font-weight: 700; }
.ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; outline: 0; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: 0 0; overflow: auto; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-widget-shadow { -webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666; }
.no-titlebar .ui-dialog-titlebar { display: none; }

/* ============================================================
   CapsLock indicator
   ============================================================ */
.ls-capslock { position: relative !important; }
.ls-capslock-active {
    border-color: #C20E1A;
    outline: 0 none;
    -webkit-box-shadow: 0 0 3px rgba(194, 14, 26, 0.75);
    -moz-box-shadow: 0 0 3px rgba(194, 14, 26, 0.75);
    box-shadow: 0 0 3px rgba(194, 14, 26, 0.75);
}
.ls-capslock-message {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    color: #C20E1A;
    font-size: 12px;
    padding-top: 3px;
}
.ls-capslock-message-showed { display: inherit; }

/* ============================================================
   Login page
   ============================================================ */
body {
    height: 100%;
    width: 100%;
    color: #566971;
    font-family: Source Sans Pro;
}

.link { cursor: pointer; }

.question-container { position: relative; }
.question-container .ico32-menu-napoveda {
    position: absolute;
    top: 3px;
    right: 15px;
    font-size: 25px;
    color: #fff;
    background-color: #00a2e2;
    clip-path: inset(20% round 10px);
}

.login-popup .block-style { text-align: center; width: 100%; }
.login-popup .block-style.title { font-size: 16px; font-weight: bold; margin-bottom: 20px; }
.login-popup .block-style.info { font-size: 13px; margin-bottom: 20px; }
.login-popup .block-style.help { min-width: 224px; padding: 8px 2px; }
.login-popup .block-style.bottom { font-size: 11px; font-weight: 600; }
.login-popup#info_popUp { padding: 10px; display: flex; flex-direction: column; justify-content: space-around; }

.bk-login-schoolName {
    font-size: 17px;
    color: #555555;
    text-align: center;
    font-weight: 500;
    margin: 35px 0 20px 0;
}

#outer {
    height: 100vh;
    width: 100%;
    background-image: url('images/baka-webapp-bg-min.jpg');
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
    position: relative;
}
#outer[id] { display: table; position: static; user-select: none; }
#middle[id] { display: table-cell; vertical-align: middle; width: 100%; position: relative; padding: 20px 0; }

#inner { width: 324px; margin-left: auto; margin-right: auto; text-align: center; }

img#loginLogo { height: 63px; margin-bottom: 10px; }

#loginBox {
    background: rgba(255, 255, 255, .9);
    padding-bottom: 20px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.20);
}

#info {
    height: 16px;
    width: 16px;
    background: #00a2e2;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 8px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
}
#info:hover { background-color: #0090C9; }

.space-top-40 { padding-top: 40px; }

.stay-logged-in { font-size: 13px; font-weight: 600; line-height: 22px; display: inline-block; }
.stay-logged-in > span { margin-left: 5px; line-height: 22px; }

#loginBox a.forgotten-password {
    font-size: 13px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: underline;
    margin: 0;
    margin-left: auto;
}
#loginBox a.forgotten-password:focus { outline: none; }

/* Form fields */
.inputLogin, button {
    margin: 0 auto;
    background: #F7F7F7;
    color: #70706E;
    border: 1px solid #AFAFAF;
    width: 222px;
    padding: 0 8px;
    margin-bottom: 16px;
    -webkit-appearance: none;
    border-radius: 0;
}
.inputLogin {
    border-radius: 3px;
    border: 1px solid #ABB9BF;
    background: #fff;
    height: 30px;
    font-size: 14px;
    color: #566971;
}
.inputLogin:focus {
    border-color: #00a2e2;
    box-shadow: 0 0 0 3px rgba(0, 162, 226, 0.15);
    outline: none;
    color: #0090C9;
}
input.inputLogin::-webkit-input-placeholder { font-size: 14px; color: #ABB9BF; font-style: italic; }
input.inputLogin::-moz-placeholder { font-size: 14px; color: #ABB9BF; font-style: italic; }
input.inputLogin:-ms-input-placeholder { font-size: 14px; color: #ABB9BF; font-style: italic; }

button { cursor: pointer; }

/* Login button */
.btn-login {
    width: 238px;
    height: 40px;
    background: linear-gradient(-180deg, #70E617 0%, #57BA0C 93%);
    border: 1px solid #68BF27;
    color: #fff;
    margin-bottom: 10px;
    border-radius: 3px;
    font-size: 15px;
    font-family: Source Sans Pro;
    font-weight: bold;
    letter-spacing: 0.2px;
}
.btn-login:hover { background: #398A25; border-color: #398A25; }
.btn-login:focus { border-color: #43A22B; box-shadow: 0 0 0 3px rgba(67, 162, 43, 0.15); outline: none; }
.btn-login:active { background: #2F701E; border-color: #2F701E; }
.btn-login:disabled { cursor: default; pointer-events: none; background: #398A25; border-color: #398A25; }
.btn-login .btn-login-loader { display: none; }
.btn-login .btn-login-loader i { margin-right: 10px; }

/* Checkbox */
.checkbox-wrap {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 240px;
    margin-bottom: 30px;
}
label { font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; margin-top: 10px; }
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked { position: absolute; left: -9999px; }
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label { position: relative; padding-left: 20px; cursor: pointer; }
[type="checkbox"]:not(:checked) + label:hover:before { border: 2px solid #0090C9; }
[type="checkbox"]:not(:checked) + label:active:before { border: 2px solid #007EB0; }
[type="checkbox"]:not(:checked) + label:focus:before,
[type="checkbox"]:checked + label:focus:before { border: 2px solid #0090C9; box-shadow: 0 0 0 3px rgba(0, 162, 226, 0.15); }
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #00a2e2;
    background-color: #ffffff;
    box-sizing: border-box;
    border-radius: 3px;
}
[type="checkbox"]:checked + label:before { border: 1px solid transparent; }
[type="checkbox"]:checked + label:hover:before { background: #0090C9; }
[type="checkbox"]:checked + label:active:before { background: #007EB0; }
[type="checkbox"]:checked + label:after {
    content: url(images/checkbox-ano-blue.png);
    position: absolute;
    top: 4px;
    left: 0;
    height: 18px;
    width: 18px;
}
[type="checkbox"]:checked + label:hover:after,
[type="checkbox"]:checked + label:active:after { content: url(images/checkbox-ano-white.png); }

/* Info panel */
.bk-infoPanel {
    width: 240px;
    min-height: 50px;
    color: #fff;
    border-radius: 3px;
    display: flex;
    margin: 0 auto 15px;
}
.bk-infoPanel.error { background-color: #c20e1a; }
.bk-infoPanel.success { background-color: #398A25; }
.bk-infoPanel .bk-infoPanel-icon { font-size: 32px; float: left; margin: 8px; }
.bk-infoPanel .bk-infoPanel-text { color: #fff; font-size: 12px; line-height: 14px; text-align: left; float: right; margin: auto; padding: 10px 10px 10px 0; }

#labelpersistent { padding-top: 1px; margin: 0; line-height: 18px; }

#loginBox a {
    font-weight: 400;
    font-size: 14px;
    color: #70706E;
    text-decoration: none;
    margin-top: 25px;
}
#loginBox a:hover { text-decoration: underline; }

.chyba { color: rgb(194, 14, 26); margin-bottom: 5px; }
.chyba #cphmain_labelerror { color: rgb(194, 14, 26); }

.both { clear: both; }

/* General warning banner */
.general-warning {
    font-weight: 500;
    font-size: 13px;
    position: absolute;
    display: block;
    z-index: 999;
    width: 100%;
    text-align: center;
    padding: 5px;
    color: #a80c16;
    background-color: rgba(219, 15, 29, .4);
    top: 0;
    left: 0;
}
.general-warning a.warning-link { font-size: 13px; color: #A80C16; text-decoration: underline; font-weight: 500; }
.general-warning.visible ~ #inner { padding-top: 30px; }

/* Mobile app links */
.mobile-app { margin-top: 30px; }
.mobile-app-text { font-size: 12px; line-height: 16px; color: #555555; }
.mobile-app-img { margin-top: 10px; }
.mobile-app-img > a > img:first-child { margin-right: 10px; }
.mobile-app-img > a > img:last-child { margin-left: 10px; }

/* Confirm / thank-you states */
.bk-state-box {
    padding: 30px 20px 30px;
    text-align: center;
}
.bk-state-icon {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: #57BA0C;
    color: #fff;
    font-size: 24px;
    margin: 0 auto 16px;
}
.bk-state-title {
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 12px;
}
.bk-state-text {
    font-size: 13px;
    color: #566971;
    line-height: 1.5;
    margin-bottom: 20px;
}
.bk-state-username {
    display: inline-block;
    background: #f0f8ff;
    border: 1px solid #ABB9BF;
    border-radius: 3px;
    padding: 7px 16px;
    font-size: 14px;
    color: #00a2e2;
    font-weight: 600;
    margin-bottom: 24px;
    word-break: break-all;
}
.bk-state-btn {
    display: inline-block;
    text-decoration: none;
    line-height: 40px;
    padding: 0;
}

/* Responsive */
@media all and (max-width: 600px) {
    .general-warning.visible ~ #inner { padding-top: 60px; }
}
@media screen and (max-width: 668px), screen and (max-height: 560px) {
    #inner { width: 308px !important; }
    input { border-radius: 0; }
}
@media (max-width: 640px) {
    #middle { background: rgba(255, 255, 255, .5); }
    #inner { width: 100% !important; position: static; }
    img#loginLogo { margin-top: 50px; }
    .inputLogin { display: block; }
    .btn-login { display: inline-block; }
    #loginBox { background: none; position: static; box-shadow: none; }
    .bk-login-schoolName { margin: 30px 25px 15px 25px; }
    #loginBox > h1 { display: none; }
    #loginBox a#forgotlink { margin-right: 0; }
}