* {
    margin: 0;
    padding: 0;
}

.page {
    width: 210mm;
    height: 105.4mm;
    overflow: hidden;
    position: relative;
}

.page--bg,
.page--pattern,
.page--bg--overlay,
.page--border,
.page--content {
    position: absolute;
    width: 210mm;
    height: 105.4mm;
}

.page--content {
    overflow: hidden;
}

.page--date,
.page--time,
.page--place,
.page--price,
.page--code,
.page--heading,
.page--paragraph,
.page--links,
.page--qr {
    position: absolute;
}

.page--heading {
    font-weight: normal;
    font-style: normal;
    font-family: 'luzankydisplay', 'Poppins', sans-serif;
}

.page--heading__poppins {
    font-weight: 700;
    font-family: 'Poppins', 'luzankydisplay', sans-serif;
}

.page--date,
.page--time,
.page--place,
.page--price,
.page--code,
.page--paragraph,
.page--links {
    font-family: 'Poppins', sans-serif;
}

.page--bg {
    object-fit: cover;
}

.page--bg--overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.page--bg--overlay__0 {
    background-color: rgba(0, 0, 0, 0);
}

.page--bg--overlay__25 {
    background-color: rgba(0, 0, 0, 0.25);
}

.page--bg--overlay__50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.page--bg--overlay__75 {
    background-color: rgba(0, 0, 0, 0.75);
}

.page--logo--container {
    position: absolute;
    height: 18mm;
    width: 42mm;
    bottom: 6mm;
    right: 6mm;
    text-align: center;
    /* For debugging: */
    /*outline: 1px solid red;*/
}

.page--logo {
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

/* Margin top for logos because vertical align is practically impossible in dompdf */
.page--logo__Luzanky_Logo_SVC_RGB,
.page--logo__Labyrint_Logo_SVC_RGB {
    margin-top: 1mm;
}

.page--logo__Klokanuv_kufr_slogan_RGB {
    margin-top: 2mm;
}

.page--logo__Minigolf_Liska_Logo_RGB,
.page--logo__L_Caffe_Logo_RGB,
.page--logo__Klokanovy_skolky_Logo_SVC_RGB,
.page--logo__Klokanovy_kurzy_RGB {
    margin-top: 3mm;
}

.page--logo__Lentilka_Logo_SVC_RGB,
.page--logo__Skladanka_Logo_SVC_RGB {
    margin-top: 4mm;
}

.page--logo__lanove_centrum_logo,
.page--logo__Lampa_Logo_SVC_RGB,
.page--logo__Lumik_Logo_SVC_RGB,
.page--logo__Maceska_Logo_MS_RGB
{
    height: 100%;
}

/* Make some logos a bit smaller */
/*.page--logo__Lidicka_Logo_SVC_RGB {*/
/*    transform: scale(0.85);*/
/*}*/

/*.page--logo__Luzanky_Logo_SVC_RGB {*/
/*    transform: scale(0.95);*/
/*}*/

.page--pattern__off {
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
}

.page--date,
.page--time,
.page--place,
.page--price,
.page--code,
.page--links {
    line-height: 1.1;
}

.page--qr {
    height: 16.9mm;
    right: 9.46mm;
    top: 7.46mm;
}

/* =========================== TEMPLATE A, B =========================== */
.template__A .page--bg {
    height: 78mm;
}

.template__A .page--qr,
.page--qr__0 {
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
}

.template__A .page--date,
.template__B .page--date {
    left: 8.25mm;
    /*top: 58.5mm;*/
    bottom: 40.5mm;
    width: 40mm;
    font-size: 17.19pt;
    font-weight: 700;
}

.template__A .page--date__xs,
.template__B .page--date__xs {
    font-size: 10pt;
}

.template__A .page--date__sm,
.template__B .page--date__sm {
    font-size: 12pt;
}

.template__A .page--date__md,
.template__B .page--date__md {
    font-size: 14pt;
}

.template__A .page--time,
.template__B .page--time {
    left: 8.25mm;
    top: 66mm;
    width: 40mm;
    font-size: 9pt;
    font-weight: 700;
}

.template__A .page--place,
.template__B .page--place {
    left: 54.95mm;
    top: 66mm;
    width: 80mm;
    font-size: 9pt;
    font-weight: 700;
    /*color: #fff;*/
}

.template__A .page--price,
.template__B .page--price {
    left: 54.95mm;
    top: 61.22mm;
    width: 80mm;
    font-size: 9pt;
    font-weight: 700;
}

.template__A .page--code,
.template__B .page--code {
    left: 54.95mm;
    top: 94.02mm;
    width: 80mm;
    font-size: 9pt;
    font-weight: 700;
    color: #202020;
}

.template__A .page--code__code,
.template__B .page--code__code {
    margin-left: 3.2mm;
}

.template__A .page--heading,
.template__B .page--heading {
    left: 16.04mm;
    top: 14mm;
    width: 179mm;
    height: 32mm;
    line-height: 1.35;
    font-size: 45.15pt;
    color: #fff;
    /* This does not work in mpdf */
    /*display: flex;*/
    /*align-items: center;*/
}

.template__A .page--paragraph,
.template__B .page--paragraph {
    left: 8.25mm;
    top: 74.51mm;
    width: 140mm;
    font-size: 10pt;
    line-height: 1.3;
    font-weight: 400;
    color: #1d1d1b;
}

.template__A .page--paragraph__xs,
.template__B .page--paragraph__xs {
    font-size: 8pt;
}

.template__A .page--paragraph__md,
.template__B .page--paragraph__md {
    font-size: 11pt;
}

.template__A .page--paragraph__lg,
.template__B .page--paragraph__lg {
    font-size: 14pt;
}

.template__A .page--links,
.template__B .page--links {
    left: 8.25mm;
    top: 94.02mm;
    width: 40mm;
    font-size: 9pt;
    font-weight: 700;
}

/* ================================================================== */

/* =========================== TEMPLATE B =========================== */

.template__B .page--bg {
    height: 105.4mm;
}

.template__B .page--date,
.template__B .page--time,
.template__B .page--place,
.template__B .page--price,
.template__B .page--code,
.template__B .page--paragraph {
    color: white;
}

.template__B .page--code__code {
    position: absolute;
    z-index: 2;
    background: white;
    width: 49mm;
    height: 8.5mm;
    line-height: 7mm;
    /*line-height: 2.0;*/
    margin-top: -2.75mm;
    text-align: center;
}

.template__B .page--code__code {
    color: #006bcc;
}

.template__B .page--links {
    /*color: #e4be1f;*/
    color: #fff;
}

.template__B .page--logo--container {
    height: 24mm;
    width: 52mm;
}

/* Margin top for logos because vertical align is practically impossible in dompdf */
.template__B .page--logo__Luzanky_Logo_SVC_RGB,
.template__B .page--logo__Labyrint_Logo_SVC_RGB {
    margin-top: 4mm;
}

.template__B .page--logo__Klokanuv_kufr_slogan_RGB {
    margin-top: 5mm;
}

.template__B .page--logo__Minigolf_Liska_Logo_RGB,
.template__B .page--logo__L_Caffe_Logo_RGB,
.template__B .page--logo__Klokanovy_skolky_Logo_SVC_RGB,
.template__B .page--logo__Klokanovy_kurzy_RGB {
    margin-top: 6mm;
}

.template__B .page--logo__Lentilka_Logo_SVC_RGB,
.template__B .page--logo__Skladanka_Logo_SVC_RGB {
    margin-top: 7mm;
}

/*.template__B .page--logo {*/
/*    position: absolute;*/
/*    height: 14.67mm;*/
/*    right: 14.7mm;*/
/*    top: 80.34mm;*/
/*}*/

/*.template__B .page--logo__Minigolf_Liska_Logo_RGB,*/
/*.template__B .page--logo__Skladanka_Logo_SVC_RGB,*/
/*.template__B .page--logo__Klokanovy_skolky_Logo_SVC_RGB,*/
/*.template__B .page--logo__Klokanovy_kurzy_RGB {*/
/*    height: 13mm;*/
/*    right: 11.6mm;*/
/*}*/

.template__B .page--paragraph {
    width: 128mm;
}

/* ================================================================== */

.page--bg__left {
    object-position: left center;
}

.page--bg__center {
    object-position: center center;
}

.page--bg__right {
    object-position: right center;
}

/* ================================================================== */

.text--primary {
    color: #006bcc;
}

.text--secondary {
    color: #e04221;
}

.text--tertiary {
    color: #e5bf1c;
}

.text--quaternary {
    color: #eda375;
}

.text--quinary {
    color: #91c861;
}

.text--labyrint {
    color: #b1a9d4;
}

.text--lampa-lany {
    color: #96cfc1;
}

.text--lata {
    color: #f6b4b2;
}

.text--legato {
    color: #a29dac;
}

.text--lesna {
    color: #72ac74;
}

.text--lidicka {
    color: #e7a91e;
}

.text--linka {
    color: #bebbb7;
}

.text--liska {
    color: #f39562;
}

.text--louka {
    color: #93c462;
}

.text--lumik {
    color: #ef7d18;
}

.text--lyska {
    color: #a29dac;
}

.text--lorien {
    color: #92c8ee;
}

.text--klokani {
    color: #eb803f;
}

.text--l-caffe {
    color: #4c3a34;
}

.text--lentilka-zluta {
    color: #efb40f;
}

.text--lentilka-modra {
    color: #4ccff2;
}

.text--lentilka-cervena {
    color: #ef2039;
}
