/*********************/
/* nadpisy, odstavce */
/*********************/
h1 {
    font-family: headingFont, Georgia, serif;
    color: var(--color-black);
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 40px;
    margin-top: 30px;
    display: inline-block;
}

h2 {
    font-family: headingFont, Georgia, serif;
    color: var(--color-black);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 15px;
}

h3 {
    font-family: headingFont, Georgia, serif;
    color: var(--color-black);
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: 15px;
}

@media (max-width: 599px) {
    h1 {
        font-size: 2.0rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }
}

p, li {
    color: var(--color-gray-dark);
    font-family: bodyFont, Arial, sans-serif;
    font-size: 18px;
}

/********************/
/* centrovany obsah */
/********************/
.centered {
    text-align: center;
}

.centered table, .centered fieldset,  .centered div {
    margin-left: auto;
    margin-right: auto;
}

/**********/
/* odkazy */
/**********/
.link {
    display: block;
    width: fit-content;
    font-family: bodyFont, Arial, sans-serif;
    text-decoration: none;
    color: var(--color-blue);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 5px;/* 1px 0 1px;*/
    border-radius: 2px;
    margin: 0 0 3px 0;
}

.link:hover {
    background-color: var(--color-blue-light);
}

.link i {
    margin-right: 7px;
}

.link:hover span {
    text-decoration: underline;
}

.instructions-link {
    color: white !important;
    background-color: var(--color-gray-dark) !important;
    padding: 5px 10px;
    border-radius: 5px;
}

.instructions-link:hover {
    background-color: var(--color-black) !important;
}


/*************/
/* formulare */
/*************/
/* error zprava u formulare */
.error {
    display: block;
    text-align: left;
    margin: 5px 0;
    font-family: bodyFont, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    background-color: #fce6e4; /*#fad9d7;*/
    padding: 3px;
    color: var(--color-red);
}

.error:empty {
    padding: 0;
}

form {
    margin-top: 20px;
}

form > table tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

form > table th {
    text-align: left;
}

form td {
    vertical-align: middle;
    padding: 7px 0;
    text-align: left;
}

form label {
    font-family: bodyFont, Arial, sans-serif;
    font-weight: normal;
    color: var(--color-blue);
    font-size: 16px;
}

form input[type="radio"] {
    margin-right: 9px;
}

label:has(input[type="checkbox"]) {
    color: var(--color-gray-dark);
}

label:has(input[type="radio"]) {
    color: var(--color-gray-dark);
}

input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select, form textarea {
    font-family: bodyFont, Arial, sans-serif;
    font-size: 15px;
    color: var(--color-gray-dark);
    background-color: white;
    border: 1px solid var(--color-gray-dark);
    border-radius: 7px;
    padding: 12px;
    outline: none;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus, input[type=number]:focus, select:focus, form textarea:focus {
    outline: 1px solid var(--color-gray-dark);
}

input[type=checkbox] {
    margin-right: 10px;
}

fieldset {
    width: fit-content;
    padding: 30px;
    border: 1px solid var(--color-gray);
    border-radius: 7px;
}

fieldset legend {
    font-family: bodyFont, Arial, sans-serif;
    color: var(--color-gray-dark);
    padding: 0 5px;
}

@media (min-width: 600px) {
    input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select {
        width: 450px;
    }
    
    form textarea {
        width: 450px;
        min-height: 150px;
    }
}

@media (max-width: 599px) {
    form {
        width: 100%;
    }
    form > table {
        width: 100%;
    }
    input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select {
        width: 90%;
    }
    
    form textarea {
        width: 90%;
        min-height: 150px;
    }
    
    fieldset {
        width: 100%;
    }
}

/*************************/
/* formular mimo tabulku */
/*************************/
.hand-drawn-form div {
    width: fit-content;
    margin-bottom: 25px;
}

.hand-drawn-form label {
    display: block;
    margin-bottom: 7px;
    text-align: left;
}

@media (max-width: 599px) {
    .hand-drawn-form div {
        width: 90%;
    }
    
    .hand-drawn-form select, .hand-drawn-form input[type=text] {
        width: 100%;
    }
}


/***********************/
/* formular nova verze */
/***********************/
.wide-input-conteiner {
    width: 90% !important;
    max-width: 1000px !important;
}

.wide-input-conteiner textarea, .wide-input-conteiner input[type=text] {
    width: 100%;
}

#version-body {
    min-height: 600px;
    font-family: monospaceFont, monospace;
}


/***********/
/* buttony */
/***********/
.button, input[type=submit] {
    font-family: bodyFont, Arial, sans-serif;
    font-size: 16px !important;
    display: inline-block;
    text-align: center;
    min-width: 80px;
    font-size: 14px;
    text-decoration: none;
    border: none;
    border-radius: 7px;
    padding: 10px;
    margin-right: 5px;
    cursor: pointer;
    background-color: var(--color-gray-dark);
    color: white;
}

.button:hover, input[type=submit]:hover {
    filter: brightness(120%);
}

.button:focus, input[type=submit]:focus {
    outline: 1px solid var(--color-gray);
}


/***********/
/* tabulky */
/***********/
/****************************************************/
/* tabulka detail                                   */
/* - radky jsou vlastnosti jedne entity             */
/* - ma dva sloupce                                 */
/* - prvni sloupec je nazev vlastnosti (zvyrazneny) */
/* - druhy sloupec je hodnota vlastnosti            */
/* - nema thead                                     */
/****************************************************/
.table-detail {
    border-collapse: collapse;
}

.table-detail td {
    font-family: bodyFont, Arial, sans-serif;
    color: var(--color-black);
    text-align: left;
    font-size: 15px;
    vertical-align: top;
}

.table-detail td:first-child {
    font-family: bodyFont, Arial, sans-serif;
    font-weight: bold;
    color: var(--color-blue);
}

@media (max-width: 599px) {
    .table-detail tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
    }
    
    .table-detail td {
        min-width: 300px;
    }
    
    .table-detail td:first-child {
        font-size: 14px;
    }
}

@media (min-width: 600px) {
    .table-detail tr {
        border-bottom: 1px solid var(--color-gray-light);
    }
    
    .table-detail td {
        padding: 7px;
    }
    
    .table-detail tr:last-child {
        border-bottom: none;
    }
    
    .table-detail td:first-child {
        padding-right: 30px;
    }
}

/**********************************/
/* tabulka prehled                */
/* - pouziva thead                */
/* - radky jsou jednotlive entity */
/* - max zhruba 4 sloupce         */
/**********************************/
.table-overview {
    color: var(--color-black);
    border-collapse: collapse;
    max-width: 100%;
}

.table-overview th {
    font-family: bodyFont, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    padding: 10px;
    color: var(--color-blue);
}

.table-overview tr {
    border-bottom: 1px solid var(--color-gray-light);
}

.table-overview tbody tr:hover {
    background-color: var(--color-blue-light);
}

.table-overview td {
    font-family: bodyFont, Arial, sans-serif;
    text-align: left;
    padding: 7px;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 499px) {
    .table-overview td {
        font-size: 13px;
        max-width: 100px;
    }
    
    .mobile-150 td {
        max-width: 150px !important;
    }
}

@media (min-width: 500px) and (max-width: 799px) {
    .table-overview td {
        font-size: 13px;
        max-width: 150px;
    }
}

@media (min-width: 800px) and (max-width: 1099px) {
    .table-overview td {
        max-width: 200px;
        font-size: 14px;
    }
}

@media (min-width: 1100px) {
    .table-overview td {
        max-width: 270px;
        font-size: 15px;
    }
}


/***********/
/* ostatni */
/***********/
.inactive {
    color: var(--color-gray) !important;
    border-color: var(--color-gray) !important;
}

.inactive:hover {
    background-color: transparent !important;
}

.not-available {
    font-family: bodyFont, Arial, sans-serif;
    color: var(--color-gray);
}

.arrow-reference {
    margin-right: 5px;
    color: var(--color-black);
}

.arrow-reference-small {
    margin-right: 5px;
    color: var(--color-black);
    font-size: 0.8em;
}

.invisible {
    display: none !important;
}

/* emerge (0->1 opacity) animation for dropdown windows */
@keyframes emergeAnimation {
    from { opacity: 0.0; }
    to { opacity: 1.0; }
}

.emerge {
    animation-name: emergeAnimation;
    animation-duration: 0.1s;
}

.detail-reference:hover {
    background-color: var(--color-blue-light);
    cursor: pointer;
}

.detail-reference span {
    color: var(--color-blue);
}

.detail-reference:hover span {
    text-decoration: underline;
}