* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    background: #f5f5f5;
}

#app {
    min-height: 100vh;
}

/* HEADER */

.header {
    background: #003b64;
    color: white;

    padding: 16px;
}

.header h1 {
    margin: 0;
    font-size: 22px;
}

/* CONTENT */

.content {
    padding: 16px;
}

/* BUTTONS */

.btn {
    display: inline-block;

    border: none;

    background: #0066aa;
    color: white;

    padding: 12px 16px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 16px;
}

.btn:hover {
    background: #00528a;
}

/* PROJECT LIST */

.project-list {
    margin-top: 20px;
}

.project-card {
    background: white;

    border-radius: 10px;

    padding: 14px;

    margin-bottom: 17px;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.1);

    cursor: pointer;
}

.project-card:hover {
    background: #f0f8ff;
}

.project-name {
    font-size: 18px;
    font-weight: bold;
}

.project-actions {
    margin-top: 10px;
}

.project-actions button {
    margin-right: 10px;
}

.pdf-container {

    margin-top: 20px;

	overflow: auto;

    touch-action: pan-x pan-y;

	height: calc(100vh - 120px);
}

.pdf-page {

    margin-bottom: 20px;
 	position: relative;
    width: fit-content;   
}

.pdf-page canvas {
    border: 1px solid #ccc;

    display: block;
}

.pdf-page {
    position: relative;
}

.pdf-link {

    position: absolute;

    cursor: pointer;

    background:
        rgba(
            255,
            0,
            0,
            0.15
        );
}

#offlineReady {

    position: fixed;

    top: 10px;

    right: 20px;

    background: #28a745;

    color: white;

    padding: 10px 15px;

    border-radius: 6px;

    z-index: 9999;
}

.project-header {

    display: flex;

    justify-content: space-between;

    align-items: center;


}

.delete-btn {

    border: none;

    background: transparent;

    color: #c62828;

    font-size: 22px;

    cursor: pointer;

    padding: 4px 8px;

    line-height: 1;

}

.delete-btn:hover {

    color: red;

}

.open-btn {

    width: 100%;

}

.project-link {

    font-size: 18px;

    font-weight: 600;

    text-decoration: none;

    color: #1976d2;

    cursor: pointer;

}

.project-link:hover {

    text-decoration: underline;

}

#installBtn
{
	margin-top:10px;
}