/* Special import css project styles */
/* old way - after implement 0.4.1 can be deleted */
/*@import url('project_digi_v039.css');*/
/* END of IMPORT */
:root {
    /* Global colors */
    --clr: #2f3640; /* wet asphalt */
    --clr-live: #c0392b; /* pomegranate */
    --clr-soft-lighter: #f5f6fa; /* AKED */
    --clr-soft: #f0f0f0; /* clouds */
    --clr-soft-darker: #cccccc; /* silver */
    --clr-soft-darkest: gray;
    --clr-blank: white;
    --clr-used-link: #551a8b;
    /*--clr-shadow-info: #bebebe;*/
    --clr-shadow-info: #aeaeae; /* test more dark for google */
    --clr-gold-text: #e1b12c;
    /* Table colors */
    --clr-table-strip-1: #ecf0f1; /* altern #f5f6fa */
    --clr-table-strip-2: white;
    --clr-table-bor: #ecf0f1;

    /* Fonts*/
    /* old way - after implement 0.4.1 can be deleted */
    /*--fnt-prim: "Abhaya Libre";
    --fnt-sec: "Press Start 2P";
    --fnt-ter: "Roboto Mono";*/
    --fnt-prim: "Press Start 2P";
    --fnt-sec: "Roboto Mono";
    --fnt-ter: "Abhaya Libre";
}


/* GENERAL STYLEs FOR ALL */
body, html {
    height: 100%;
}

.gold-text {
    color: #e1b12c;
}

/* ##### STYLES for DIGI FRONTEND ##### */
div.cover-digi {
    font-family: var(--fnt-prim);
    font-size: 20px;
	color: var(--clr);
    /*min-width: 1000px;*/
/*    max-width: 1200px;*/
/*    margin: 0 auto;*/
}

/* Main bottom fixed panel spec edition for cover digi */
div.cover-digi div.sk_main-bottom-fixed-panel > div {
    font-size: 12px;
    font-family: var(--fnt-sec);
}
div.cover-digi div.sk_main-bottom-fixed-panel > div > div {
}
div.cover-digi div.sk_main-bottom-fixed-panel button.retro-btn {
    /*padding: 8px 14px 6px 14px!important;*/
    padding: 8px 14px 6px 14px;
    font-size: 12px;
}

/* Header */
div.cover-digi .cover-header {
    padding: 30px 0px 30px 0px;
    /*padding: 10px 0px 10px 0px;*/
    /*margin: 0px 0px 30px 0px;*/
    border-bottom: 2px dashed var(--clr);
    /* FLEX CONTAINER */
    display: flex;
    flex-flow: row wrap;
    column-gap: 90px;
    row-gap: 15px;
    justify-content: center;
    align-items: center;
}
div.cover-digi .cover-header a {
    text-decoration: none;
    color: inherit;
}
div.cover-digi .logo-textb .first-letter {
    font-size: 0.8em;
    color: var(--clr-gold-text);
}
div.cover-digi .logo-textb > .name {
    font-size: 1.6em;
    letter-spacing: 1.0em;
}
div.cover-digi .logo-textb > .desc {
    font-size: 0.5em;
    /*letter-spacing: 1.0em;*/ /* it was for digitalni */
    letter-spacing: 1.3em;
    /*color: var(--clr-soft-darker);*/
}

div.cover-digi .logo-aked {
    font-family: var(--fnt-sec);
    font-size: 0.6em;
    letter-spacing: 2px;
    margin-right: 25px;
    /* FLEX CONTAINER */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
div.cover-digi a.logo-aked:hover span {
    color: var(--clr-gold-text);
}
div.cover-digi .logo-btn {
    /* FLEX CONTAINER */
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
div.cover-digi .price-container {
    padding: 0px 0px 0px 10px;
    transform: rotate(345deg);
}
div.cover-digi .price-box {
    color: var(--clr-gold-text);
    /*color: var(--clr-soft-darker);*/
    /* FLEX CONTAINER */
    display: flex;
    flex-flow: column;
}
div.cover-digi .text {
    font-size: 1.1em;
    /*text-align: center;*/
    text-align: center;
}
div.cover-digi .number {
    font-size: 0.9em; 
}

div.cover-digi h1 {
    margin-top: 40px;
    margin-bottom: 15px;
    
    font-size: 0.85em;
    letter-spacing: 1px;
    text-align: center;
}
div.cover-digi h2 {
    font-size: 0.75em;
}
div.cover-digi h3 {
    font-size: 0.65em;
}
/* tips */
div.cover-tips-thumbnail {
    margin-top: 20px;
    text-align: center;
    font-family: var(--fnt-sec);
}
/* paragraph info */
div.cover-para {
    font-family: var(--fnt-sec);
    margin-top: 10px;
    font-size: 0.7em;
    /*letter-spacing: 1px;*/
    line-height: 2;
    /* FLEX CONTAINER */
    display: flex;
    flex-flow: row nowrap;
    column-gap: 25px;
    justify-content: center;
    align-items: center;
}
div.para-left {
    text-align: right;
    vertical-align: center; 
}
div.para-center {
    font-size: 5em; 
    padding-top: 5px;
    font-family: var(--fnt-ter);
}
div.para-right {
    text-align: left;
}
div.cover-digi .headline-question {
    margin-bottom: 5px;
}
div.cover-digi .headline-question.detail {
    margin-bottom: 15px;
}
div.headline-question-info {
    font-family: var(--fnt-sec);
    font-size: 0.65em;
    text-align: center;
    margin-bottom: 10px;
    /*padding-left: 20%;*/
}
h2.headline-question-info.detail {
    margin-top: 30px;
    text-align: center;
    font-size: 0.75em;
    /*font-size: 1.0em;*/
    /*font-family: var(--fnt-prim);*/
}
h3.headline-question-info-desc {
    margin-top: 10px;
    font-family: var(--fnt-sec);
    text-align: center;
}

button:hover .red {
  color: red;
}

div.cover-digi div.pattern {
    margin-top: 10px;
    text-align: center;
    color: var(--clr-used-link);
}

/* Messages from System - redesing skeleton */
div.cover-digi .sk_notif-box {
    margin-top: 30px;
    /*margin-bottom: 10px;*/
    text-align: center;
}

div.cover-digi .sk_notif-err {
    text-shadow: 0.1em 0.1em 0px var(--clr-notif-err-border);
}
div.cover-digi .sk_notif-ok {
    text-shadow: 0.1em 0.1em 0px var(--clr-notif-ok-border);
}

/* Buttons - general style for all */ 
div.cover-digi button.retro-btn {
    border: 2px solid var(--clr);   
    font-family: var(--fnt-prim);
    color: var(--clr);
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    padding: 12px 20px 9px 20px;
}
div.cover-digi button.retro-active-btn {
    /*box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);*/
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
    background-color: var(--clr-soft-darkest);
    color: var(--clr-soft);
}
div.cover-digi button.retro-btn:hover:not([disabled]) {
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
    background-color: var(--clr-soft-darker);
}
div.cover-digi button.retro-active-btn:hover {
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    background-color: var(--clr-soft);
    color: var(--clr);
}
div.cover-digi button.go-up-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
}
/* Links as retro btn */
div.cover-digi a.retro-btn {
    border: 2px solid var(--clr);   
    font-family: var(--fnt-prim);
    font-size: 0.67em;
    color: var(--clr);
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    padding: 12px 20px 9px 20px;
    background-color: #e9e9ed;
    text-decoration: none;
}
div.cover-digi a.retro-btn:hover {
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
    background-color: var(--clr-soft-darker);
}
/* Root */
div.cover-digi > div.cover-root {
    margin: 0 auto;
    max-width: 1000px;
}

/* QR link in Root */
div.cover-qr-link {
    /*margin-top: 25px;*/
    margin-top: 25px;
    font-size: 0.6em;
    letter-spacing: 2px;
    /*opacity: 0.8;*/ /*test design*/
    /* FLEX CONTAINER */
    /*
    display: flex;
    flex-flow: row wrap;
    /*justify-content: space-around;*/
    /*
    justify-content: center;
    gap: 30px;
    */
}
div.cover-qr-link a {
    text-decoration: none;
    color: var(--clr);
    flex-basis: 40%;
}
div.cover-qr-link fieldset {
    border: 3px solid var(--clr);
    padding: 10px 25px 15px 25px;
    line-height: 1.5;
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    /*background-color: var(--clr-soft);*/
}
div.cover-qr-link fieldset legend {
    /*padding: 0px 30px 0px 30px;*/
    padding: 0px 10px 0px 10px;
    margin-left: 10px;
    font-size: 1.1em;
    background-color: var(--clr-blank);
}
div.cover-qr-link fieldset span.qr-link-show-info {
    /*color: var(--clr-soft);*/
    display: none;
}
div.cover-qr-link fieldset:hover > legend {
    /*color: var(--clr-gold-text);*/
}
div.cover-qr-link span.qr-link-name {
    font-size: 1.2em;
}
div.cover-qr-link fieldset:hover > span.qr-link-show-info {
    color: var(--clr-gold-text);
    display: inline!important;
}

div.cover-qr-link fieldset:hover {
    /*opacity: 0.6;*/
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
    /*background-color: var(--clr-soft-darker);*/}

/* Contracts in Root as right btn */
div.cover-contracts-btn {
    margin-bottom: 20px;
    font-size: 0.6em;
    /*text-align: right;*/
    /* FLEX CONTAINER */
    display: flex;
    justify-content: flex-end;
}
div.cover-contracts-btn div.left {
    flex: 1;
    text-align: center;
    color: var(--clr-soft-darker);   
    font-size: 0.9em;
    padding: 8px 0px 6px 0px;
}
div.cover-contracts-btn div.right {
    border-left: 2px dashed var(--clr);
    border-bottom: 2px dashed var(--clr);
    letter-spacing: 2px;
    padding: 8px 0px 6px 0px;
    /*padding: 8px 5px 5px 5px;*/
}
div.cover-contracts-btn div.right span:not(span.arrow) {
    color: var(--clr-soft-darker);   
}
div.cover-contracts-btn div.right:hover {
    border-bottom: 2px dashed var(--clr-soft-darker);
    border-left: 2px dashed var(--clr-soft-darker);
}
div.cover-contracts-btn div.right:hover span.arrow {
    color: var(--clr-soft-darker)!important;
}
/* Contracts in Root with legend */
div.cover-contracts {
    margin-top: 25px;
    margin-bottom: 35px;
    font-size: 0.6em;
    letter-spacing: 2px;
    /*opacity: 0.8;*/ /*test design*/
    /*transition: 0.6s;*/
}
div.cover-contracts fieldset {
    border: 3px solid var(--clr);
    padding: 15px;
    line-height: 1.5;
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
}
div.cover-contracts fieldset.contracts-fieldset-clickable:hover {
    /*opacity: 0.6;*/
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
}
div.cover-contracts fieldset legend {
    /*padding: 0px 30px 0px 30px;*/
    padding: 0px 10px 0px 10px;
    margin-left: 10px;
    font-size: 1.1em;
    background-color: var(--clr-blank);
}
div.cover-contracts fieldset.contracts-fieldset-clickable:hover legend {
    opacity: 1.0;
}
div.cover-contracts fieldset.contracts-fieldset-clickable:hover span {
    color: var(--clr);
}
span.contracts-show-info {
    color: var(--clr-soft-darker);
}
span.contracts-hide-btn:hover {
    color: var(--clr);
}

div.cover-contracts ul {
    margin: 10px 10px 0px 10px;
    /* FLEX CONTAINER */
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
}

/* Cats in Root */
div.cats {
    margin-top: 30px;
    /* FLEX CONTAINER */
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
    justify-content: center;
}

/* Search in Root */
div.search {
    margin-top: 30px;
/*    min-width: 100%;
    height: 40px;*/
    /* FLEX CONTAINER */
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
/*    justify-content: space-around;*/
    justify-content: center;
}
div.search-inp-cover {
    position: relative;
    flex-grow: 1;
    /* FLEX CONTAINER */
    display: flex;
}
.search-inp {
    padding: 0px 1.2em 0px 1em;
    font-family: monospace;
    flex-grow: 1;
    border: none;
    border-bottom: 2px solid var(--clr-soft);
}
.search-inp:focus {
    border-bottom: 2px solid var(--clr);
}
.search-clear-inp {
    position: absolute;
    font-size: 0.6em;
/*    top: 0;
    left: 0;*/
    bottom: 0.9em;
    right: 0;
    color: var(--clr-soft-darker); 
}
.search-clear-inp:hover {
    color: var(--clr);
}

/* Advices in Root */
div.cover-root .advices {
    margin-top: 30px;
    /* FLEX CONTAINER */
    display: flex;
    flex-direction: column;
    gap: 15px;
}
div.cover-root .question-info-category,
div.cover-root .answer-info-keywords {
    display: inline-block;
    /*color: var(--clr-soft-darker);*/
    letter-spacing: 2px;
}
div.cover-root .question-info-category {
    color: var(--clr-shadow-info);
}
div.cover-root .answer-info-keywords {
    text-decoration: underline;
}
div.cover-root .answer-info-keywords-detail {
    text-decoration: none;
}
div.cover-root .answer {
    margin-left: 10%;
/*    border-bottom: 1px dashed black;*/
}

div.cover-root .answer a,
div.cover-root .answer a {
    color: var(--clr-used-link);
}
div.cover-root .answer a:hover, 
div.cover-root .answer a:hover > span {
    text-decoration: none;
}
div.cover-root p {
    text-align: justify;
    font-family: var(--fnt-sec);
    font-size: 13px;
    line-height: 1.7;
    padding: 10px;
}
div.cover-root .separator {
    text-align: center;
}
/*
div.cover-root div.publicqa-share-link {
    text-align: right;
    margin-top: -15px;
    padding-right: 3%;
}
div.cover-root div.publicqa-share-link a {
    color: #551a8b;
    font-family: var(--fnt-sec);
}
*/
div.cover-root div.other-question-cover {
    margin: 10px 0px 20px 0px;
    background-color: var(--clr-soft);
    border: 2px dashed var(--clr-soft-darker);
    padding: 15px;
}
div.cover-root div.other-question-head {
    margin-bottom: 10px;  
}
div.cover-root div.other-question-head-cat {
    font-family: var(--fnt-sec);
    font-size: 0.55em;
}
div.cover-root div.other-question-head h5 {
    font-size: 0.7em; 
}
div.cover-root div.other-question-link-cover {
    padding-left: 15px;
    /* FLEXBOX container */
    display: flex;
    flex-flow: column;
    gap: 15px;
}
div.cover-root div.other-question-link-cover a {
    color: #551a8b;
    font-size: 0.7em;
    font-family: var(--fnt-sec);
}
div.cover-root div.other-question-footer {
    margin-top: 15px;
    /* FLEXBOX CONTAINER */
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
div.cover-root div.other-question-footer div {
   text-align: left; 
}
div.cover-root div.other-question-footer-desc {
    font-family: var(--fnt-sec);
    font-size: 0.5em;
}
div.cover-root .info-more-answers {
    color: var(--clr-shadow-info);
    text-align: center;
    margin-bottom: 20px;
}
/* General style for modal */
div.cover-modal {
    position: fixed;
    padding: 40px 10%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overscroll-behavior: contain;
}
div.modal {
    padding: 20px;
    background-color: var(--clr-blank);
    border: 2px solid var(--clr);   
    font-family: var(--fnt-prim);
    color: var(--clr);
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    /* FLEX CONTAINER */
    display: flex;
    gap: 20px;
    flex-flow: row wrap;
}

/* Question form */
div.question-form div.close {
    text-align: right;
    width: 100%;
}
div.question-form div.how-works {
    font-size: 0.6em;
    letter-spacing: 1px;
}
div.question-form span.how-works-price {
    font-size: 1.2em;
    color: var(--clr-gold-text);
    letter-spacing: normal;
}
div.question-form div.how-works .how-works-info {
    color: var(--clr-soft-darker);
    font-size: 0.9em;
}
div.question-form .question-form-textarea {
    resize: vertical;
}
div.question-form .question-form-cover-textarea {
    width: 100%;
    position: relative;
}
div.question-form .question-form-textarea-notice {
    width: 100%;
    color: var(--clr-soft-darker);    
    position: absolute;
    bottom: -15px;
    text-align: right;
}
div.question-form .question-form-notice-attention {
    color: red;
}
div.question-form .info-text {
    text-align: left;
    width: 100%;
    flex-grow: 1;
    font-family: var(--fnt-sec);
    /* FLEX CONTAINER */
    display: flex;
    gap: 10px;
    align-items: center;
}
div.question-form button {
    flex: 1;
}
div.question-form button:disabled,
div.question-form input:read-only:not([type='checkbox']) {
    opacity: 0.2;
}
div.question-form span {
    flex: 4;
}
div.question-form textarea,
div.question-form input,
div.question-form select {
    width: 100%;
    padding: 10px;
    background-color: var(--clr-soft);
    font-family: var(--fnt-sec);
    color: var(--clr);
}
div.question-form textarea {
    height: 200px;
    font-weight: bold;
}
div.question-form input,
div.question-form select {
    height: 50px;
    font-family: var(--fnt-prim);
}
/* spec style for voucher */
div.question-form .question-form-btn-voucher {
    font-size: 0.5em;
}
div.question-form .question-form-input-voucher {
    width: 88%; /* it has spec for mobile */
}
div.question-form .question-form-btn-voucher-valid {
    /*box-shadow: 2px 2px var(--clr-notif-ok), -2px -2px var(--clr-soft-darker)!important;*/
    color: green!important;
}
div.question-form .question-form-btn-voucher-nonvalid {
    /*box-shadow: 2px 2px var(--clr-notif-err), -2px -2px var(--clr-soft-darker)!important;*/
    color: red!important;
}

/* Question form - validation */
div.question-form textarea:invalid,
div.question-form input:invalid,
div.question-form select:invalid {
    border: 2px dashed red;
}

/* question form - condition box */
div.question-form div.question-form-condition-header {
    font-size: 1.3em;
    font-family: var(--fnt-prim);
}
div.question-form .question-form-hide-condition-btn {
    text-align: right;
    font-family: var(--fnt-prim);
}
div.question-form .question-form-condition-box p {
    margin-top: 10px;
    padding: 0px 5px;
    text-align: justify;
}
div.question-form .question-form-condition-box ul {
    padding: 0px 10px;
    text-align: justify;
}
div.question-form .question-form-as-link {
    color: #551a8b;
    text-decoration: underline;
}
div.question-form .question-form-as-link:hover {
    text-decoration: none;
}
/* Question form - custom checkbox */
label.question-form-publishable {
/*
    font-size: 1em;
    font-weight: bold;
    line-height: 1.1;
    font-family: var(--fnt-sec);
*/
    font-size: 0.6em;
    line-height: 2.1;
    color: var(--clr-soft-darkest);        

    display: flex;
/*    grid-template-columns: 1em auto;*/
    gap: 1em;
    
}

/*
.question-form-publishable + .quiestion-form-publishable {
    margin-top: 1em;
}
*/

label.question-form-publishable > input[type="checkbox"] {
    appearance: none;
    background-color: var(--clr-blank);
    margin: 0;
/*
    width: 1.25em;
    height: 1.25em;
*/
    width: 1.5em;
    height: 1.5em;
    border-top: 0.15em solid #959595;
    border-left: 0.15em solid #959595;
    border-right: 0.15em solid #e0e0e0;
    border-bottom: 0.15em solid #e0e0e0;
/*
    border-radius: 0.15em;
*/    
    transform: translateY(-0.075em);
    

    display: grid;
    place-content: center;
}

label.question-form-publishable > input[type="checkbox"]::before {
  content: "";
/*
  width: 0.65em;
  height: 0.65em;
*/
  width: 0.8em;
  height: 0.8em;
  transform: scale(0);
/*
  transition: 120ms transform ease-in-out;
*/
  /*box-shadow: inset 1em 1em var(--clr-soft-darker);*/
  box-shadow: inset 2em 2em var(--clr);
}
/*label.question-form-publishable > input[type="checkbox"]:checked + label.question-form-publishable {*/
input[type="checkbox"]:checked + span::before {
    content: "- 10% ";
}
input[type="checkbox"]:checked + span {
    color: black;
}

label.question-form-publishable > input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* Question form - STYLE for CUSTOM CHECKBOXES as BTN */
/* Buttons - general style for all */ 
/*
div.cover-digi button.retro-btn {
    border: 2px solid var(--clr);   
    font-family: var(--fnt-prim);
    color: var(--clr);
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    padding: 12px 20px 9px 20px;
}
div.cover-digi button.retro-active-btn {
    /*box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);*/
/*
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
    background-color: var(--clr-soft-darkest);
    color: var(--clr-soft);
}
div.cover-digi button.retro-btn:hover:not([disabled]) {
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
    background-color: var(--clr-soft-darker);
}
div.cover-digi button.retro-active-btn:hover {
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    background-color: var(--clr-soft);
    color: var(--clr);
}
*/

/* FAQ */
div.spec-modal-box {
    /* FLEX CONTAINER */
    gap: 0px;
}
div.cover-spec-modal div.close {
    text-align: right;
    width: 100%;
}
div.cover-spec-modal div.spec-modal-text-header {
    margin: 0px 0px 20px 0px;
    text-align: center; 
}
div.cover-spec-modal div.spec-modal-text-header-question {
    font-size: 0.65em;
    letter-spacing: 1px;
    padding: 2px 5px;
    /*padding: 20px 0px 10px 0px;*/
}
div.cover-spec-modal div.spec-modal-text-box p {
    line-height: 1.5;
    font-size: 0.6em;
    /*background-color: var(--clr-soft);*/
    padding: 10px 15px 30px 15px;
    font-family: var(--fnt-sec);
    text-align: justify;
}

/* CATS */
div.cats > input[type="checkbox"] {
/*    appearance: none;*/
    display: none; /* test */
    background-color: var(--clr-blank);
    margin: 0;
}    
div.cats > label {
    border: 2px solid var(--clr);   
    font-family: var(--fnt-prim);
    font-size: 0.67em;
    color: var(--clr);
    background-color: var(--clr-soft);
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    padding: 12px 20px 9px 20px;
}
div.cats > label:hover {
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
    background-color: var(--clr-soft-darker);
}
div.cats > input[type="checkbox"]:checked + label {
    /*box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);*/

    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px var(--clr);
    background-color: var(--clr-soft-darkest);
    color: var(--clr-soft);
}
/*
div.cats > input[type="checkbox"]:checked + label:hover {
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    background-color: var(--clr-soft);
    color: var(--clr);
}
*/

/* QR GENERATOR part */
div.cover-qrgenerator div.cover-qr-info-text {
    text-align: center;
    font-size: 0.6em;
    letter-spacing: 2px;
    line-height: 1.5;
}
div.cover-qrgenerator div.cover-manual {
    margin-top: 40px;
    padding: 15px;
    border: 2px solid var(--clr);
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    font-size: 0.6em;
}
div.cover-qrgenerator div.cover-manual:hover {
    box-shadow: 2px 2px var(--clr-soft-darker), -2px -2px 
}
div.cover-qrgenerator div.cover-manual-active {
    background-color: var(--clr-soft);
}
div.cover-qrgenerator div.qr-manual-headline {
    letter-spacing: 1px;
    line-height: 1.4;
}
div.cover-qrgenerator div.qr-manual-headline h1 {
    font-size: 1.0em;
}
/*
div.cover-qrgenerator div.cover-manual:hover > div.qr-manual-head > div.qr-manual-headline > span.qr-manual-lamp {
    color: var(--clr-gold-text);
}
*/
div.cover-qrgenerator span.qr-manual-lamp-on {
    color: var(--clr-gold-text);
}
div.cover-qrgenerator div.qr-manual-show-close {
    font-size: 0.8em;
}
div.cover-qrgenerator div.qr-manual-text {
    margin: 15px 5px 5px 5px;
    padding: 10px;
    border: 2px dashed var(--clr-soft-darker);
    font-family: var(--fnt-sec);
}
div.cover-qrgenerator div.qr-manual-text p {
    font-size: 1em;
    padding: 10px 10px 0px 10px;
}

/* qr share link */
div.cover-qrgenerator div.cover-share-link {
    text-align: right; 
    margin-bottom: 40px;
}
div.cover-qrgenerator div.cover-share-link a {
    color: #551a8b;
    font-size: 0.6em;
}
/* payment details and form */
div.cover-qrgenerator div.cover-payment-details {
    margin-top: 20px;
    /* FLEX Container */
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
}

div.cover-qrgenerator div.cover-input {
    /* FLEX Container */
    display: flex;
    flex-flow: column nowrap;
    /*flex-basis: 80%;*/
    flex-grow: 1;
}
div.cover-qrgenerator div.cover-input label {
    font-size: 0.7em;
    opacity: 0.6;
    text-align: right;
    flex-grow: 1;
}
div.cover-qrgenerator div.cover-input input {
    padding: 5px;
    height: 40px; 
    background-color: var(--clr-soft);
    color: var(--clr);
    text-align: right;
    font-size: 0.75em;
    font-family: var(--fnt-prim);
    flex-grow: 1; 
}

div.cover-qrgenerator button:disabled, 
div.cover-qrgenerator input:read-only:not([type="checkbox"]) {
    opacity: 0.2;
}
/* QR - validation */
div.cover-qrgenerator textarea:invalid,
div.cover-qrgenerator input:invalid,
div.cover-qrgenerator select:invalid {
    border: 2px dashed red;
}
div.cover-qrgenerator div.cover-payment-manage {
    text-align: right;
    font-size: 0.6em;    
    margin-bottom: 40px;
}
div.cover-qrgenerator div.cover-price {
    /* FLEX Container */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
div.cover-qrgenerator div.cover-price label {
    font-size: 0.8em;
    text-align: right;
}
div.cover-qrgenerator div.cover-price input {
    height: 70px; 
    background-color: var(--clr-soft);
    color: var(--clr);
    text-align: center;
    font-size: 1.2em;
    font-family: var(--fnt-prim);
}
div.cover-qrgenerator div.cover-submit {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    /* FLEX container */
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    justify-content: center;
}
div.cover-qrgenerator div.cover-qr-generated {
    margin-top: 40px;
    text-align: center;
}
div.cover-qrgenerator div.cover-qr-generated a {
    font-size: 0.9em;    
    padding-bottom: 20px;
}
div.cover-qrgenerator div.cover-qr-generated fieldset {
    width: 100px;
    padding: 20px;
    border: 2px solid var(--clr);
    box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
    text-align: center;
    margin: auto;
    position: relative;
}
div.cover-qrgenerator div.cover-qr-generated legend {
    padding: 0px 15px 0px 15px;
    position: absolute;
    bottom: -14px;
    right: 20px;
    background-color: var(--clr-blank);
    /*text-shadow: 0.1em 0.1em 0px var(--clr-gold-text);*/
}

div.cover-qrgenerator div.cover-payment-info {
    margin-top: 40px;
    text-align: center;
    line-height: 1.5;
}
div.cover-qrgenerator div.cover-payment-info span {
    letter-spacing: 3px;
}
div.cover-qrgenerator div.cover-payment-info a {
    font-size: 0.7em;
}   
div.cover-qrgenerator div.cover-disclaimer {
    margin-top: 50px;
    margin-bottom: 40px;
    padding: 10px;
    border: 2px dashed var(--clr-soft-darker);
    background-color: var(--clr-soft);
    font-size: 0.4em;
}
div.cover-qrgenerator div.cover-disclaimer h2 {
    line-height: 1.5;
    font-size: 1.2em;
}
div.cover-qrgenerator div.cover-disclaimer p {
    font-size: 1.5em;
    font-family: var(--fnt-sec);
}
/* END of QR GENERATOR part */

/* Footer part */
div.footer {
    text-align: center;
    /*margin: 15px 0px;*/
    padding: 15px 0px;
    /*font-size: 0.7em;*/
    font-size: 0.6em;
}
div.footer span.footer-no-select {
    user-select: none;
}
a.footer-link-social {
    font-size: 1.4em;
    color: var(--clr);
}
/*
div.footer a {
    letter-spacing: 1px;
}
*/
/* div.footer div.cover-help-kids img { */
div.footer div.cover-help-kids {
    margin: 0 auto;
    width: 400px;
    height: 200px;
}
div.footer div.cover-help-kids img {
    max-width: 100%;
    height: auto;
}

/* MOBILE VIEW for DIGI */
@media (max-width: 1000px) {
    div.cover-digi div.cover-header {
        text-align: center;
    }
    div.cover-digi .logo-textb > .name > .first-letter {
        font-size: 0.7em;
    }
    div.cover-digi .logo-textb > .name {
        text-align: center;
        font-size: 1.25em;
        letter-spacing: 0.65em;
    }
    div.cover-digi .logo-textb > .desc {
        text-align: left;
        font-size: 0.4em;
        letter-spacing: 0.6em; /* it was for digitalni */
        letter-spacing: 0.85em;
        /*color: var(--clr-soft-darker);*/
        /*color: var(--clr-soft-darker);*/
    }
    div.cover-digi .logo-aked {
        letter-spacing: 1px;
        margin-right: 15px;
    }
    div.cover-modal {
        position: fixed;
        padding: 20px 5%;
    }
    div.cover-digi h2 {
        font-size: 0.65em;
    }
    div.cover-digi h3 {
        font-size: 0.55em;
    }
    h2.headline-question-info.detail {
        /*font-size: 0.8em;*/
        font-size: 0.6em;
    }
    div.cover-digi div.cover-root {
        margin: 5px;
    }
    div.cover-para {
        /*font-size: 0.5em;*/
        font-size: 0.6em;
        /*letter-spacing: 1px;*/
        /*line-height: 1.8;*/
        line-height: 1.9;
        /* FLEX CONTAINER */
        flex-flow: column;
        /*align-items: normal;*/
    }
    div.cover-para li {
        /*list-style: square;*/
    }
    div.para-left,
    div.para-right {
        /*padding-left: 50px;*/
        text-align: center;
    }
    div.para-center {
        display: none;
    }
    div.cover-digi h1 {
        font-size: 0.6em;
    }
    div.headline-question-info {
        font-size: 0.55em;
    }
    /* Buttons - general style for all */ 
    /*
    div.cover-digi button.retro-btn {
        border: 2px solid var(--clr);   
        font-family: var(--fnt-prim);
        font-size: 0.5em;
        color: var(--clr);
        box-shadow: 2px 2px var(--clr), -2px -2px var(--clr-soft-darker);
        padding: 11px 18px 8px 18px;
    }
    */
    /* qr link */
    div.cover-qr-link {
        font-size: 0.5em;
    }
    div.cats > label {
        font-size: 0.5em;
        padding: 11px 18px 8px 18px;
    }
    /* Question form */
    div.question-form div.how-works {
        font-size: 0.6em;
        line-height: 1.8;
        letter-spacing: normal;
        text-align: justify;
    }
    div.cover-digi div.info-text {
        text-align: center;
        /* FLEX CONTAINER */
        flex-flow: column;
    }
    div.cover-question-form div.question-form {
        padding: 15px;
    }
    div.cover-digi div.question-form {
        font-size: 0.7em;
    }
    div.cover-digi div.question-form button {
/*        font-size: 0.7em;*/
    }
    div.cover-digi div.question-form button,
    div.question-form textarea {
        font-size: 0.7em;
    }
    div.cover-digi div.question-form input,
    div.question-form select {
        font-size: 0.6em;
    }
    div.question-form .question-form-btn-voucher {
        font-size: 0.6em!important;
    }
    div.question-form .question-form-input-voucher {
        width: 52%;
    }
    label.question-form-publishable > input[type="checkbox"] {
        padding: 0px;
        font-size: 1.4em!important;
        border-top: 0.25em solid #959595;
        border-left: 0.25em solid #959595;
        border-right: 0.25em solid #e0e0e0;
        border-bottom: 0.25em solid #e0e0e0;
    }
    label.question-form-publishable > input[type="checkbox"]::before {
        width: 0.7em;
        height: 0.7em;
    }
    /* FAQ */
    div.cover-spec-modal div.spec-modal-text-header-question {
        font-size: 0.55em;
        line-height: 1.5;
        letter-spacing: normal;
        padding: 2px 0px;
        /*padding: 20px 0px 10px 0px;*/
    }
    div.cover-spec-modal div.spec-modal-text-header-question span {
        display: none;
    } 
    div.cover-spec-modal div.spec-modal-text-box p {
        line-height: 1.3;
        font-size: 0.6em;
        /*background-color: var(--clr-soft);*/
        padding: 10px 15px 30px 15px;
        font-family: var(--fnt-sec);
        text-align: justify;
    }
    /* QR generator */
    div.cover-qrgenerator div.cover-manual {
        font-size: 0.6em;
    }
    div.cover-qrgenerator div.cover-payment-details {
        /* FLEX Container */
        flex-flow: column nowrap;
    }
    div.cover-qrgenerator div.cover-price input {
        font-size: 0.8em;
    }
    div.cover-qrgenerator div.cover-payment-info {
        line-height: 1.5;
        font-size: 0.8em;
        word-wrap: break-word;
    }
    div.cover-qrgenerator div.cover-payment-info span {
        letter-spacing: 2px;
    }
    div.cover-qrgenerator div.cover-payment-info a {
        font-size: 0.7em;
    }   
    /* Footer */
    div.footer {
        font-size: 0.4em;
    }
    /*div.footer div.cover-help-kids img { */
    div.footer div.cover-help-kids {
        width: 350px;
        height: 175px;
    }
}