/* BUTTONS */
    .tt-button-standard, .tt-button-reset {
        border-radius: 0px;
        margin: 2px;
    }

    .tt-button-standard {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 5px 10px;
        background-color: #ffa801;
    }


    .tt-button-reset {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 5px 10px;
        background-color: #fff;
        color: #000;
    }

/* INPUT */
    .tt-input-required, .tt-input-optional {
        display: inline-block;
        padding: 5px 10px;
    }

    .tt-input-required {
        border: 2px solid #000;
    }

    .tt-input-optional {
        border: 1px solid ccc;
    }

    .tt-input-textarea {
        /* set height standard to three lines */
        height: 3em;
        width: 100%;
    }
/* SELECT DROPDOWS */

    .tt-dropdown, .tt-dropdown-selected, .tt-dropdown-100 {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 5px 10px;
        background: #fff;
    }
    .tt-dropdown {    
    }
    .tt-dropdown-100 {    
        width: 100%;
    }

    .tt-dropdown-selected {
        background-color: #ffa801;
        color: #000;
    }


/* TABLES */

    .tt-table-list {
        width: 100%;
        border-collapse: collapse;
    }

    .tt-table-list thead {
        background-color: #666;
        color: white;
    }
    .tt-table-list tbody tr {
        border-top: 1px solid #666;
    }
    /* tbody tr uneven background #ccc; */


    .tt-table-list tbody tr:nth-child(even) {
        background-color: #ddd;
    }


    /* LINES */

        .tt-hr-standard {
            border: 1px solid #ccc;
        }


.tt-file-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin-bottom: 15px;
        }

        .tt-file-item {
            position: relative;
            width: 100%;
            padding-top: 100%; /* perfect square */
            overflow: hidden;
            border-radius: 8px;
            background: #f1f1f1;
        }

        .tt-file-item img,
        .tt-file-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .tt-file-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
        }

        .tt-file-overlay {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 4px;
            font-size: 11px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            text-align: center;
        }
        .tt-lightbox {
            display: none;
            position: fixed;
            z-index: 9999;
            inset: 0;
            background: rgba(0,0,0,0.9);
            justify-content: center;
            align-items: center;
        }

        .tt-lightbox-img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
        }

        .tt-lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 30px;
            color: #fff;
            cursor: pointer;
        }