/** For the letter query interface */

.letters-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 170px);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

/**Note: this class has a slightly different name and style when used in tables: letter-card-table! */
.letter-card {
    display: flex;
    flex-direction: column;
    width: 150px;
    height: 200px;
    position: relative;
    /*background-color: aqua;*/
}

.letter-card-image {
    height: 175px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: green;*/
}

.letter-card-image-img {
    /*The Indoskript images are typically 100 x 140 (or 50 x 70).*/
    width: 100px !important;
    height: 140px !important;
    display: block;
}

.letter-card-info {
    height: 25px;
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    /*background-color: bisque;*/
}

.letter-card-info img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    flex-shrink: 0;
}

.letter-card-info a {
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.letter-card-info span {
    white-space: nowrap;
    flex-shrink: 0;
}

.letter_info{
	cursor: pointer;
}

/** For the popup window */
.info-tooltip
{
	position: absolute;
	z-index:999;
	padding: 5px;
	max-width:250px;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border:1px solid #000000;
	background:rgba(255, 207, 125, 0.95);
	-webkit-box-shadow: #B3B3B3 5px 5px 5px;
	-moz-box-shadow: #B3B3B3 5px 5px 5px; 
	box-shadow: #B3B3B3 5px 5px 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .letters-container {
        gap: 15px;
    }
}