.HEADER {
    width: 100%;
    margin-bottom: 1em;
    border: 1px solid;
    border-radius: 1em;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-gap: 0;
    grid-auto-rows: minmax(0, auto);  
}


.HEADER .HEADSCREENSHOT {
    border-radius: 1em 0 0 1em;
    grid-column: 1;
    grid-row: 1 / span 3;
    position: relative;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

.HEADER .HEADSCREENSHOT>img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
}



.HEADER .LOGO {
    grid-column: 2;
    grid-row: 1 / span 1;
    text-align: right;
}

.HEADER .LOGO>img {
    padding: 0.5em;
    max-width: 100%;
}

.HEADER .HEADINFOTEXT {
    grid-column: 2;
    grid-row: 2 / span 1;
    margin: 5px;
}

.HEADINFOTEXT_TABLE {
    width: 100%;
    float: right;
    border-collapse: collapse;
}

.HEADER .HEADINFOTEXT_TABLE td {
    border-bottom: 1px solid;
}

.HEADER .HEADINFOTEXT_TABLE td:nth-child(odd) {
    font-weight: bold;
}

.HEADER .HEADINFOTEXT_TABLE td:empty {
    margin: 0;
    padding: 0;
    border: none;
}

.HEADER .COMMENT {
    margin: 5px;
    grid-column: 2;
    grid-row: 3 / span 1;
}

.HEADER .COMMENT_NAME {
    font-weight: bold;
    border-bottom: 1px solid;
}

.HEADER .COMMENT p {
    margin: 0;
}


/*  rules for the operation list  */

/* content caption - default text */
.CONTENT_TABLE caption
{
	font-size: 3em;
}

/* --------- hide all cells  ----------- */
.CONTENT_TABLE_HEADER th, .CONTENT_TABLE_BODY td{
    display:none;
}

/* show these cells only */
.CONTENT_TABLE .th_29, .CONTENT_TABLE .td_29	/* Op No. */
, .CONTENT_TABLE .th_30 , .CONTENT_TABLE .td_30	/* Operation type */
, .CONTENT_TABLE .th_21 , .CONTENT_TABLE .td_21	/* Comment */
, .CONTENT_TABLE .th_37 , .CONTENT_TABLE .td_37	/* Stock XY */
, .CONTENT_TABLE .th_38 , .CONTENT_TABLE .td_38	/* Stock Z */
, .CONTENT_TABLE .th_20 , .CONTENT_TABLE .td_20	/* Cutter comp */
, .CONTENT_TABLE .th_112 , .CONTENT_TABLE .td_112	/* Tl # */
, .CONTENT_TABLE .th_111 , .CONTENT_TABLE .td_111	/* Tl name */
, .CONTENT_TABLE .th_118 , .CONTENT_TABLE .td_118	/* Tl type */
, .CONTENT_TABLE .th_102 , .CONTENT_TABLE .td_102	/* Tl diam. */
, .CONTENT_TABLE .th_114 , .CONTENT_TABLE .td_114	/* Tl corner rad */
, .CONTENT_TABLE .th_127 , .CONTENT_TABLE .td_127	/* Tl OA length */
, .CONTENT_TABLE .th_22 , .CONTENT_TABLE .td_22	/* Coolant */
, .CONTENT_TABLE .th_106 , .CONTENT_TABLE .td_106	/* Holder (new) */
, .CONTENT_TABLE .th_120 , .CONTENT_TABLE .td_120	/* Z-Min */
, .CONTENT_TABLE .th_24 , .CONTENT_TABLE .td_24	/* Cycle time */
{
	display:table-cell;
}




.CONTENT_TOOLS thead{
    page-break-inside: avoid;
}

.CONTENT_TOOLS caption:before{
    text-transform: uppercase;
    content:"tool list";
    font-size: larger;
}

/* --------- hide all cells  ----------- */
.CONTENT_TOOLS th, .CONTENT_TOOLS td{
    display:none;
}


/* show these tool cells only */
.CONTENT_TOOLS .th_112, .CONTENT_TOOLS .td_112  /*  Tl # */
, .CONTENT_TOOLS .th_111, .CONTENT_TOOLS .td_111  /*  Tl name */
, .CONTENT_TOOLS .th_118, .CONTENT_TOOLS .td_118  /*  Tl type */
, .CONTENT_TOOLS .th_102, .CONTENT_TOOLS .td_102  /*  Tl diam. */
, .CONTENT_TOOLS .th_114, .CONTENT_TOOLS .td_114  /* Tl corner rad  */
, .CONTENT_TOOLS .th_100, .CONTENT_TOOLS .td_100 /*   Tl BMP */
, .CONTENT_TOOLS .th_101, .CONTENT_TOOLS .td_101 /*   Tl Cutlength */
, .CONTENT_TOOLS .th_103, .CONTENT_TOOLS .td_103 /*   Tl D# */
, .CONTENT_TOOLS .th_138, .CONTENT_TOOLS .td_138 /*   Tl description */
, .CONTENT_TOOLS .th_121, .CONTENT_TOOLS .td_121 /*   Tl flutes */
, .CONTENT_TOOLS .th_109, .CONTENT_TOOLS .td_109 /*   Tl L# */
, .CONTENT_TOOLS .th_108, .CONTENT_TOOLS .td_108 /*   Tl length */
, .CONTENT_TOOLS .th_110, .CONTENT_TOOLS .td_110 /*   Tl manufacturer */
, .CONTENT_TOOLS .th_125, .CONTENT_TOOLS .td_125 /*   Tl Mfg code */
, .CONTENT_TOOLS .th_116, .CONTENT_TOOLS .td_116 /*   Tl shldr length */
, .CONTENT_TOOLS .th_24, .CONTENT_TOOLS .td_24 /*  cycle time */
, .CONTENT_TOOLS .th_120, .CONTENT_TOOLS .td_120 /* Z-MIN */
{
    display:table-cell;
}


/* cards  */
.cards{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
    gap:1rem;
    margin-top:2rem;
}

.card
{
    display:flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    min-width:23rem;
    box-shadow: 0px 0px 15px rgb(63, 63, 63);
    background-color: rgb(49, 50, 58);
    color:aliceblue;
}

.card-caption{
    text-align: right;
    padding-right:1rem;
    font-weight: bolder;
    font-size: 2rem;
    background-color: rgb(27, 28, 34);
    color:rgb(255, 162, 0);
}

.card-tool-img img{
    max-width: 100%;
    filter: invert(1);
}

.card-body{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
}

.card-body > div{
    flex:1;
}

/* tool infos  */
.card-info-row{
    display:flex;
    justify-content:space-between;
    font-size: small;
    margin-right: 1rem;
}

.card-info-row:not(:last-child)
{
    border-bottom: 1px solid rgb(100, 100, 100);
}

.card-info-row div:first-child::after{
    content:":";
}

.card-info-row div{
    padding-block: 5px;
}

  /* print  */
@media print  
{
    .hn_15, .hv_15{display:none;}

    .card{
        page-break-inside: avoid;

        box-shadow: none;
        background-color: rgb(255, 255, 255);
        color:rgb(41, 41, 41);
        border:1px solid gray;
    }

    .card-caption{
        background-color: rgb(224, 224, 224);
        color:rgb(0, 0, 0);
    }

    .card-tool-img img{
        filter: invert(0);
    }
}


/* ------ common styles ----- */
* {
    box-sizing: border-box;
}

body{
	font-family: 'calibri light', arial, sans-serif;
    font-size: 1.25rem;
}

/* ------------ common styles for content  -------------  */

div[class^="CONTENT"]{
	margin-block:2rem;
}

[class^="CONTENT"] img
{
	max-width:100px;
	max-height:100px;
}


/* table content <table> - general table format of content */
table[class^="CONTENT"]{
	width:100%;
	font: 12px Arial;
	text-align: left;
	margin-right:5px;
	margin-bottom:5px;
	border:1px solid black;
    border-spacing: 0px;
    border-collapse: collapse;
}

/* content caption  */
caption
{
	font: 14px Arial;
	font-weight:bold;
	padding:5px;
}

/* content cell <td> - general format of content cells */
table[class^="CONTENT"] td{
	padding:3px;
	border:1px solid black;
}

/* content head <th> - column header */
table[class^="CONTENT"] th{
	text-align: center;
	padding:5px;
	border:1px solid black;
}

/* foot note <tfoot> - overall cycle time */
table[class^="CONTENT"] tfoot{
	text-align:center;
	font-weight:bold;
}

/* darker background for odd rows  */
tbody[class^="CONTENT"] tr:nth-child(odd) {background: #EEE;}

/* content column <td> - center numbers */
.td_29,
.td_72,
.td_40,
.td_80,
.td_37,
.td_38,
.td_24,
.td_62,
.td_74,
.td_35,
.td_36,
.td_37,
.td_47,
.td_63,
.td_60,
.td_81,
.td_112,
.td_101,
.td_102,
.td_103,
.td_108,
.td_109,
.td_100,
.td_114,
.td_116,
.td_120,
.td_121,
.td_127
{
	text-align:center;
}


/* toggle display via script */
.hidden{
	display:none;
}

/* tool image pop up */
#THBMP{
    position: absolute;
    border: 1px solid gray;
    background-color: rgba(255, 219, 190, 0.9);
    box-shadow: 0px 0px 15px rgb(63, 63, 63);
    display:none;
    border-radius: 1rem;
    overflow: hidden;
}

.CONTENT caption{
	font-size: 2em;
}