/**
 *
 * @author TB 1.8.2025
 *
 */

@charset "UTF-8";


body.bg-teeth,
body.cekarna.bg-teeth,
.bg-teeth {
    background-image: url('../img/bg-teeth.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}

.bg-teeth.page-404 {
    background-image: url('../img/404-bg.jpg');
}

.header .header-logo {
    padding: 40px;
}

.header .header-logo img {
    width: auto;
    height: 45px;
}

.card.card-login.card-callout {
    overflow: hidden;
}

.card.card-login.card-ecekarna,
.card.card-login.card-callout,
.card.card-callout-timer {
    padding: 0;
}

.card.card-login {
    --size-circle: calc(100vw / 3);
}

.card.card-login.card-ecekarna {
    --size-circle: 52rem;
}

.card.card-login.card-callout {
    --size-circle: 24rem;
    margin-bottom: 10rem;
}

.card.card-login.card-callout,
.card.card-login {

    border-radius: .5rem .5rem 2rem .5rem;

    background-image: url('../img/bg-circles.png');
    background-repeat: no-repeat;
    background-size: var(--size-circle);
    background-position-x: calc(100% + (var(--size-circle) / 2));
    background-position-y: -250px;



    --primary: #00ace6;


    --ff-lato: 'Lato';
    --ff-gantari: 'Gantari';

    font-family: var(--ff-gantari), sans-serif;

}

.card.card-login.card-callout {
    background-position-y: -200px;
}

.card.card-login .icon-login {
    --top: -65px;
    --size: 110px;
    --border-width: 10px;
    --border-color: #e8f6fc;

    position: absolute;
    top: var(--top);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--size);
    height: var(--size);

    border: var(--border-width) solid var(--border-color);
    border-radius: 50%;
    background-color: #fff;

    overflow: hidden;
}

.card.card-login .icon-login .uil,
.card.card-login .icon-login .fa {
    font-size: 3rem;
    color: #00a19a;
}

.card.card-login .icon-login > img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

.bg-teeth {
    --primary: #00ace6;
    --ff-lato: 'Lato';
}

.card-callout h3,
.ecekarna-modal h2,
.card.card-login h2,
h2.public-form-heading {
    margin: 1rem 0 .5rem;
    font-family: var(--ff-lato), sans-serif;
    font-weight: 900;
    font-size: 2rem;
    line-height: 1.5;
    text-align: center;
    color: var(--primary);
}

.card.card-login .icon-login ~ h2 {
    margin: 4.5rem 0 .5rem;
}

.ecekarna-modal h2 {
    font-size: 2rem !important;
    line-height: 1.2;
}

.card.card-login.card-callout h2 {
    font-size: 3rem;
}

.card-callout h3 {
    color: #00a19a;
    margin-bottom: 0;
}

.card-callout h3 ~ h2 {
    margin-top: 0 !important;
}

.card.card-login .formular.login {
    padding: 0;
    background: none;
    box-shadow: none;
    width: 70%;
    margin: 2rem auto 0;
}

.card.card-login.card-ecekarna .formular.login {
    width: 100%;
}

.card.card-login .formular.login .form-main {
    width: 90%;
    margin: 0 auto;
}

.card.card-login .formular.login.forgot_passwd .form-main {
    width: 100%;
}

.card.card-login.card-ecekarna .formular.login .form-main {
    width: calc(100% - 3rem);
}

.card.card-login .formular.login td.label,
.card.card-login .formular.login td.label + td {
    vertical-align: middle;
    padding: .5rem 0;
}

.card.card-login .formular.login td.label {
    padding-right: .75rem;
    width: 3.5rem;
    height: auto;
}

.card.card-login .formular.login td.label label {
    position: static;
    top: auto;
}

.card.card-login .formular.login input[type="text"],
.card.card-login .formular.login input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    line-height: 1.5;
    border-radius: 100px;
    border-color: #ededed;
    padding: .45rem .75rem;
}

.dotaznik .card.card-login.card-ecekarna #rodne_cislo,
.dotaznik .card.card-login.card-ecekarna #telefon,
.dotaznik .card.card-login.card-ecekarna #pin,
.dotaznik .card.card-login.card-ecekarna #datum_narozeni,
.card.card-login.card-ecekarna .formular.login input[type="text"] {
    width: 100%;
    border-radius: 1rem;
    font-size: 4.0rem !important;
}

.card.card-login .formular.login input[type="text"].login-code {
    border-radius: 1rem;
}

.bg-teeth .ecekarna-modal .btn-primary,
.bg-teeth .page-404 .btn-primary,
.bg-teeth .btn.btn-secondary,
.card.card-login .formular.login button.bt-prihlasit,
.card.card-login .btn-primary {
    border-radius: 100px !important;
    text-transform: uppercase;
    background-color: var(--primary);
    font-size: .75rem !important;
    font-weight: 700;

    --px: 1.8rem;
    --py: .65rem;
    padding-left: var(--px) !important;
    padding-right: calc(var(--px) - .5rem) !important;
    padding-top: var(--py) !important;
    padding-bottom: var(--py) !important;

    height: auto !important;
    line-height: 1.5 !important;
}

.bg-teeth .ecekarna-modal .btn-primary {
    width: auto;
    display: inline-block;
}

.bg-teeth .ecekarna-modal .btn-primary * {
    font-size: initial !important;
}

.card.card-login .formular.login .submitForm {
    padding-top: 0 !important;
    padding-bottom: .75rem !important;
}

.card.card-login.card-ecekarna .formular.login .submitForm {
    display: none;
}

.card.card-login .formular.login .forgot-password-link,
.card.card-login .formular.login .forgot-password-link:hover {
    color: var(--primary);
}

.card.card-login .formular.login .bs-checkbox-wrapper {
    padding: 0;
    letter-spacing: -5px;
}

.card.card-login .formular.login .bs-checkbox-wrapper * {
    letter-spacing: initial;
}

.card.card-login .formular.login .bs-checkbox-wrapper > label {
    font-size: .875rem;
}

.card.card-login .form-link {
    color: var(--primary);
    text-decoration: none;
}

.bg-teeth .btn.btn-secondary:hover,
.bg-teeth .btn.btn-secondary,
.bg-teeth .btn.btn-secondary:hover a,
.bg-teeth .btn.btn-secondary a {
    --secondary: #c6ecf7;
    background: var(--secondary);
    color: var(--primary) !important;
    box-shadow: 0 0 1px 0px rgba(0, 0, 0, .05);
    display: inline-block;
}



.form-error-wrapper {
    width: 100%;
}

.form-error-wrapper.form-login {
    margin-bottom: 5rem;
}

.form-error-wrapper .error,
.form-error-wrapper .error .alert {
    box-sizing: border-box;
    width: 100%;
}




.card.card-login.card-ecekarna .ecekarna-keyboard {
    width: calc(100% - 2rem);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-spacing: .5rem;
}

.card.card-login.card-ecekarna .ecekarna-keyboard td {
    border-radius: 1rem;
    color: var(--primary);
    font-family: var(--ff-lato), sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
}

.card.card-login.card-ecekarna .ecekarna-keyboard td.ecekarna-key.submit-key {
    --bg: #00a19b;
    border-color: var(--bg);
    background-color: var(--bg);
    color: #fff;
    font-size: 3rem;
    line-height: 2rem;
}

.card.card-login.card-ecekarna .text-ecekarna-info {
    font-size: 1rem;
}

.card.card-login.card-ecekarna .text-success {
    color: #2aaa6b;
}

.card.card-login.card-ecekarna .text-please-wait {
    font-size: 2rem;
    font-family: var(--ff-lato), sans-serif;
    font-weight: 900;
}

.card.card-login.card-ecekarna .ecekarna-eta {
    background: var(--primary);
    border-radius: 1.0rem;
    color: #fff;
    gap: .75rem;
}

.card.card-login.card-ecekarna .ecekarna-eta .ecekarna-eta-text {

}

.card.card-login.card-ecekarna .ecekarna-eta .ecekarna-eta-time {
    font-size: 3rem;
    font-family: var(--ff-lato), sans-serif;
    font-weight: 900;
}

.bg-teeth .ecekarna-modal {

    --ff-gantari: 'Gantari';
    --size-circle: calc(100vh * 1.2);

    background-image: url('../img/bg-circles.png');
    background-repeat: no-repeat;
    background-size: var(--size-circle);
    background-position-x: calc(100% + (var(--size-circle) / 2));
    background-position-y: -250px;

    border-radius: 1rem;

    font-family: var(--ff-gantari), sans-serif;
}

.bg-teeth .ecekarna-modal .bClose {

    right: 1.0rem;
    top: 1.5rem;
    font-size: 1.2rem !important;

    --color: #000;
    --bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    --opacity: 0.5;
    --hover-opacity: 0.75;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    color: var(--color);
    background: transparent var(--bg) center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--opacity);
}

.bg-teeth .ecekarna-modal .bClose:hover {
    opacity: var(--hover-opacity);
}

.bg-teeth .ecekarna-modal .telefon-client-table {
    background: none;
}

.card.card-callout-timer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

.card.card-callout-timer .timer {
    position: static;
    color: #00a19a;
    font-size: 1.6rem;
}

.card.card-login.card-callout div.tab,
.card.card-login.card-callout div.tab div.body {
    float: none;
}

.card.card-login.card-callout div.tab {
    margin: 0 !important;
}



.card.card-login.card-callout table,
.card.card-login.card-callout table * {
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

.card.card-login.card-callout table {
    width: 100%;
}

.card.card-login.card-callout table tr {
    background-color: #fff;
}

.card.card-login.card-callout table tr:nth-child(even) {
    background-color: #f2fbfe;
}

.card.card-login.card-callout table th,
.card.card-login.card-callout table td {
    padding: 1.5rem 3rem;
    font-family: var(--ff-lato), sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #00a19a;
}

.card.card-login.card-callout table td {
   color: #00ace6;
}

.card.card-login.card-callout p {
    font-size: 1.5rem;
}

.bg-teeth .page-404-img-wrapper {
    height: calc(100vh - 23rem);
    position: relative;
}

/*.bg-teeth .page-404-img-wrapper::after {
    content: "";
    display: block;
    height: 33.333333%;
    width: 100%;
    position: absolute;
    bottom: 0;
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
    background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
}*/

.bg-teeth .page-404-img-wrapper > img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}












@media (max-width: 1599px) {

    .card.card-login .formular.login {
        width: 90%;
    }

}

@media (max-width: 1399px) {

    .card.card-login .formular.login {
        width: 70%;
    }

}

@media (max-width: 1199px) {

    .card.card-login .formular.login {
        width: 90%;
    }

}

@media (max-width: 767px) {

    .card.card-login .formular.login {
        width: 70%;
    }

    .card.card-login .formular.login .form-main {
        width: 100%;
    }

    .card.card-login .formular.login td.label {
        width: 4rem;
    }

}

@media (max-width: 575px) {

    .card.card-login .formular.login {
        width: 100%;
    }

    .card.card-login .formular.login .form-main {
        width: 80%;
    }

    .card.card-login .formular.login .form-main > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .card.card-login .formular.login td.label,
    .card.card-login .formular.login td.label ~ td {
        display: block;
        width: 100%;
    }

    .card.card-login .formular.login td.label {
        padding: 1rem .75rem 0;
        text-align: left;
    }

    .bg-teeth .page-404-img-wrapper {
        height: calc(100vh - 30rem);
    }

}

@media (max-width: 399px) {

    .card.card-login .formular.login .form-main {
        width: 100%;
    }

}

.help-content{
    border-radius: .5rem;
    box-shadow: 0 0 .875rem 0 rgba(53,64,82,.05);
    
    
    --size-circle: 40rem;
  background-image: url('../img/bg-circles.png');
  background-repeat: no-repeat;
  background-size: var(--size-circle);
  background-position-x: calc(100% + (var(--size-circle) / 2));
  background-position-y: -300px;
    
}


















@media (max-width: 1199px) and (orientation: portrait) {

    .table-cekarna-invited {
        --fs: clamp(10px, 2vw + .5rem, 24px);
        --p: 1rem 1.5rem;
    }

    .table-cekarna-invited th,
    .table-cekarna-invited td {
        font-size: var(--fs) !important;
        padding: var(--p) !important;
    }

}

@media (max-width: 991px) and (orientation: portrait) {

    .table-cekarna-invited {
        --fs: clamp(10px, 1.8vw + .5rem, 24px);
        --p: 1rem 1.5rem;
    }

    .table-cekarna-invited th,
    .table-cekarna-invited td {
        font-size: var(--fs) !important;
        padding: var(--p) !important;
    }

}

@media (max-width: 767px) and (orientation: portrait) {

    .table-cekarna-invited {
        --fs: clamp(10px, 1.5vw + 0.5rem, 24px);
        --p: 1rem 1.5rem;
    }

    .table-cekarna-invited th,
    .table-cekarna-invited td {
        font-size: var(--fs) !important;
        padding: var(--p) !important;
    }

}