/* main */
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
    line-height: 1.5;
}

img{
    max-width:100%;
}

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    max-width: calc(100% - 2rem);
    margin:0 auto;
    background-color: #b3cce6;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap:1rem;
}

button{
    padding:1rem;
}

/* add a logo  */
body::before{
    display:block;
    content:'';
    background-image: url('https://www.gmccs.de/media/img/gmccs/gmccs_de.svg');
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    height:50px;
    margin: 1rem;
    grid-column: 1 / -1;
}

/* report  */
.report{
    grid-column: 1/-1;;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap:1rem;
}

/*  header layout */
.part_screenshot{grid-area:screenshot;}
.date{grid-area:date;}
.user{grid-area:user;}
.part_file_path{grid-area:part_file_path;}
.part_file_name{grid-area:part_file_name;}
.report_header{
    display:grid;
    grid-template-areas:
    'screenshot screenshot header header header'
    'screenshot screenshot date date date'
    'screenshot screenshot user user user'
    'screenshot screenshot part_file_path part_file_path part_file_path'
    'screenshot screenshot part_file_name part_file_name part_file_name';
    gap:1rem;
    border:1px solid gray;
    border-radius: 1rem;
    padding:1rem;
    justify-items: center;
    align-items: center;
    background-color: white;
}

/* screenshot  */
.electrode_screenshot{
    display:flex;
    justify-content: center;
}

.date, .part_file_name, .part_file_path, .user{
    justify-self: left;
}

.report_header::before
{
    content:'X+ Elektroden Report / Ingersoll';
    font-weight: 600;
    font-size: large;
    grid-area: header;
    justify-self: left;
}
.date::before{
    content:'Datum: ';
}
.user::before{
    content:'User: ';
}
.part_file_path::before{
    content:'Datei-Pfad: ';
}
.part_file_name::before{
    content:'Mastercam Datei: ';
}
/* -------------------------------- */

/* notes  */
.notes{
    display:grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap:1rem;
    padding: 1rem;
    border:1px solid gray;
    border-radius: 1rem;
    background-color: white;
}
.notes::before{
    content: "Notes";
    font-weight: 600;
    font-size: large;
}
.note:empty{
    display:none;
}
/* ------------------------------ */
/* -------------- java script created elements ----------------- */
table{
    border-collapse: collapse;
}

th, td{text-align: center;}
th, td, caption{border:1px solid gray;}
.el-header, caption{text-transform:uppercase;font-weight: 600;}

.el-header{
    grid-area: header;
    text-align: center;
    font-size: 2rem;
    align-self: center;
    justify-self: center;
}

.el-screenshot{
    grid-area: screenshot;
    align-self: center;
    justify-self: center;
}

.el-technology{grid-area: technology;}

.el-positions{grid-area: positions;}

.el-card{
    display:grid;
    grid-template-areas:
    'screenshot screenshot header header header'
    'screenshot screenshot technology technology technology'
    'screenshot screenshot positions positions positions';

    border:1px solid gray;
    border-radius: 1rem;
    /* margin:1rem; */
    padding:1rem;
    gap:1rem;
    background-color: white;
}

.el-technology td:not(:first-child)::after{content:'mm';}



.el-positions tbody tr:hover{
    cursor: pointer;
    background-color: aquamarine;
}

.el-positions tbody td{
    padding-inline: 5px;
}
/* ---------------------------------- */



/* print  */
@media print{
    body{
        background-color: white;
    }

    .el-card{
        page-break-inside: avoid;
    }
}