@import url('reset.css');
@import url('normalize.css');

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Roboto+Slab:wght@100..900&family=Rokkitt:ital,wght@0,100..900;1,100..900&family=Slabo+13px&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Rokkitt:ital,wght@0,100..900;1,100..900&family=Slabo+13px&display=swap');

.dataTableForm {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*font*/
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 4mm;
    /*font*/
}

    .dataTableForm #chyba {
        color: red;
    }

        .dataTableForm #chyba .cell {
            height: auto;
        }

    .dataTableForm > .row {
        display: flex;
    }

        .dataTableForm > .row .cell {
            display: flex;
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            width: 200px;
            word-wrap: break-word;
            align-items: center;
            height: 55px;
            /*border: 1px dotted blue;*/
        }

        .dataTableForm > .row > .cell:first-child {
            max-width: 200px;
            display: flex;
            justify-content: right;
        }

        .dataTableForm > .row > .checkBox {
            max-width: 55px;
            display: flex;
            justify-content: right;
        }

            .dataTableForm > .row > .checkBox input {
                display: none;
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }


        .dataTableForm > .row > .cell:last-child {
            display: flex;
            justify-content: left;
            width: auto;
        }

        .dataTableForm > .row > .cell:not(:last-child):not(:first-child):not(.checkBox) {
            max-width: 280px;
            min-width: 280px;
        }

        .dataTableForm > .row .cell .textbox {
            border: 1px solid #000;
            padding: 7px;
            box-sizing: border-box;
        }


            .dataTableForm > .row .cell .textbox:focus {
                border: 1px solid #3AA599;
                outline: #3AA599;
            }

        .dataTableForm > .row .cell img {
            padding: 0 5px;
        }

        .dataTableForm > .row .cell .selectlist {
            border: 1px solid #000;
            padding: 7px;
            box-sizing: border-box;
            background-color: white;
        }

            .dataTableForm > .row .cell .selectlist:focus {
                border: 1px solid #3AA599;
                outline: #3AA599;
            }

            .dataTableForm > .row .cell .selectlist option {
                padding: 7px;
                height: 50px;
            }

        .dataTableForm > .row .cell > input {
            height: 100%;
            width: 250px;
            padding: 0px 8px;
            box-shadow: none !important; /* Odstranění případného stínu */
            border-radius: 0;
            border: 1.5px solid black;
        }



        .dataTableForm > .row .cell > label {
            font-size: 4.5mm;
        }

        .dataTableForm > .row .cell > span {
            color: black;
            padding-left: 10px;
            text-decoration: none;
        }

        .dataTableForm > .row .cell > input:focus {
            height: 100%;
            width: 250px;
            border-radius: 0;
            outline: none;
            box-shadow: none;
            border: 2px solid #ff008d;
        }

        .dataTableForm > .row .cell > select {
            height: 100%;
            width: 250px;
            padding: 0px 8px;
            border: 1.5px solid black;
            border-radius: 0;
            background-color: #ffffff;
            color: #333;
            font-size: 16px;
            cursor: pointer;
            appearance: none; /* Skryje nativní šipku (Chrome, Firefox) */
            -webkit-appearance: none; /* Safari */
            -moz-appearance: none; /* Firefox */
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D'10'%20height%3D'6'%20viewBox%3D'0%200%2010%206'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M0%200l5%206%205-6z'%20fill%3D'%232a73b8'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 10px 6px;
        }

            .dataTableForm > .row .cell > select:focus {
                height: 100%;
                width: 250px;
                border-radius: 0;
                outline: none;
                box-shadow: none;
                border: 2px solid #ff008d;
            }



.input-validation-error {
    border: 1px solid #c33;
}

.dataTableForm > .row .cell .field-validation-error {
    font-size: 80%;
    color: #c33;
}


.dataTable {
    width: 100%;
    margin: 20px auto;
    border-radius: 10px;
}


    .dataTable > .header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-weight: bold;
        text-align: center;
        color: black;
        border-bottom: 2px solid #ff008d;
    }

    .dataTable .header > div {
        flex: 1;
        max-height: 18px;
        font-family: "Roboto Slab", serif;
        font-optical-sizing: auto;
        font-size: 5mm;
        font-style: normal;
    }

        .dataTable .header > div:last-child {
            max-width: 50px;
        }


    .dataTable > .row {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-top: 1px solid #2a73b8;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .dataTable > .firstRow {
        border: none;
    }

  
    .dataTable > .row:hover {
        background-color: #c6c6c637;
        /*box-shadow: 0 0 10px rgba(173, 216, 230, 0.7);*/
    }

    .dataTable > .row > div {
        flex: 1;
        text-align: center;
        font-size: 14px;
        padding: 5px;
        border-right: 2px solid #ddd;
        border-radius: 2px;
        color: #333;
        align-self: center;
    }

        .dataTable > .row > div.bezCary {
            border-right: 0px solid #ddd;
            border-radius: 0px;
        }

        .dataTable > .row > div:last-child {
            border-right: none;
            max-width: 50px;
            min-width: 50px;
            padding: 0px;
        }
/*
div.deleteElement {
    max-width: 50px;
    min-width: 50px;
    padding: 0px;
}
*/


/*tlačitko uložit*/
.btnSave {
    background-color: white;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.2em;
    height: 40px;
    width: 206px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 0 0 0 0;
    font-family: 'HK Grotesk Light', sans-serif;
    font-weight: 100;
    font-variant: small-caps;
    color: #ff008d;
    border: 2px solid #ff008d;
}

    .btnSave span {
        cursor: pointer;
        position: relative;
        transition: 0.5s;
    }

        .btnSave span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .btnSave:hover span {
        padding-right: 30px;
    }

        .btnSave:hover span:after {
            opacity: 1;
            right: 0;
        }
/*tlačitko uložit*/

/*tlačitko uložit 2 - fill verze*/
.btnSave2 {
    background-color: white;
    color: #ff008d;
    text-align: center;
    font-size: 1.2em;
    height: 100%;
    width: 150px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'HK Grotesk Light', sans-serif;
    font-weight: 500;
    font-variant: small-caps;
    border: none;
    /*border-radius: 8px;*/
    /* vnitřní "růžový rámeček" */
    box-shadow: inset 0 0 0 2px #ff008d;
}

    /* Hover efekt – růžová výplň a bílý text */
    .btnSave2:hover {
        background-color: #ff008d;
        color: white;
        box-shadow: inset 0 0 0 2px #ff008d;
    }

/*tlačitko uložit 2 - fill verze*/
.uvitani {
    margin-bottom: 40px
}

    .uvitani h1 {
        font-family: "Roboto Slab", serif;
        font-optical-sizing: auto;
        font-size: 9mm;
        font-style: normal;
        margin-top: 0.67em;
        margin-bottom: 10px
    }



    .uvitani p {
        font-family: "Slabo 13px", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 5mm;
    }



.dataTableForm .row .cell > a {
    color: black; /* Nastavení barvy textu */
    text-decoration: none; /* Odstranění podtržení */
}

    .dataTableForm .row .cell > a span {
        text-decoration: underline #ff008d 2px;
    }

    .dataTableForm .row .cell > a:hover span {
        text-decoration: none;
        color: #ff008d;
    }

.spaceBetweenRows {
    height: 30px;
}

.spaceBetweenRows15px {
    height: 15px;
}

.nadpisDataTable {
}

    .nadpisDataTable > .mainText {
        /*font*/
        font-family: "Roboto Slab", serif;
        font-optical-sizing: auto;
        font-size: 9mm;
        font-style: normal;
        /*font*/
        margin-top: 0.67em;
        margin-bottom: 10px
    }

    .nadpisDataTable > .underText {
        font-family: "Slabo 13px", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 5mm;
    }

/*Zobrazení vytvoření*/
.buttonHide {
    all: unset;
    cursor: pointer;
}

.size18x18px {
    height: 18px;
    width: 18px;
}


/*Adam*/


.adam > h1 {
    font-size: 50px;
    text-decoration: underline 3px;
}


.adam > p {
    font-size: 100px;
}


.adam > a {
    border: solid darkblue;
    border-radius: 7px;
    text-decoration: none;
    color: black;
    padding: 10px;
    background-color: rgb(1, 167, 167);
    transition: all 0.5s ease;
}


    .adam > a:hover {
        text-decoration: underline;
        background-color: rgb(0, 107, 107);
    }

.credit {
    display: flex;
    flex-direction: column;
    width: 250px;
    margin: 0 auto; /* zarovná na střed */
}

    .credit ul {
        list-style-type: none;
        padding: 0;
    }

@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

.credit p {
    position: relative;
    font-family: 'Sour Gummy', sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

    .credit p::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 5px; /* výška trojúhelníku */
        background: linear-gradient(to right, #ff008d 100%, transparent 100%);
        clip-path: polygon(0% 100%, 25% 80%, 50% 50%, 75% 80%, 100% 100%);
        /* rovnostranný trojúhelník */
    }

/*Editace testů*/
.create {
    position: fixed; /* musí mít pozici, jinak z-index nefunguje */
    transform: translate(-50%, -50%); /*Posune prvek o půlku své šířky a výšky zpět.*/
    z-index: 3;
    /*Vycentruje na levý horní roh*/
    top: 50%;
    left: 50%;
    max-width: 542px;
    display: none;
    background: white;
    padding: 1em;
    border-radius: 8px;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #4d4d4d87;
    backdrop-filter: blur(4px);
    z-index: 1;
}

.widthAuto {
    display: none;
}

.stredVertical {
    justify-self: center;
}

.odpovediCreate {
    display: none;
    margin: 0px;
    padding: 0px;
}

/* CUSTOM CHECKBOX */
.checkBox {
    position: relative; /* Needed for absolute positioning of children */
    max-width: 55px;
    display: flex;
    justify-content: flex-end;
}

    .checkBox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 2; /* Make sure the input is above the checkmark */
    }

    .checkBox .checkmark {
        width: 35px;
        height: 35px;
        background-image: url('../images/false-checkmark.png');
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;
        position: relative;
        z-index: 1;
        border: 1px solid #000;
    }

    /* Checked state */
    .checkBox input:checked + .checkmark {
        background-image: url('../images/true-checkmark.png');
        border: 1px solid #000;
    }

.edit {
    max-width: 50px !important;
  
    display: flex;
    justify-content: center;
    padding: 0 !important;
}


    .edit a {
    }