* {
    box-sizing: border-box;
}

body{
    font-family: calibri, arial, sans;
    font-size: 1.25vw;
}

.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);
}



.HEADSCREENSHOT {
    grid-column: 1;
    grid-row: 1 / span 3;
    text-align: center;
}

.HEADSCREENSHOT > img {
		padding:0.5em;
    max-width: 100%;
    max-height: 100%;
}

.LOGO {
    grid-column: 2;
    grid-row: 1 / span 1;
    text-align: right;
}

.LOGO > img {
	padding:0.5em;
    max-width: 100%;
}

.HEADINFOTEXT {
    grid-column: 2;
    grid-row: 2 / span 1;
}

.HEADINFOTEXT_TABLE {
    width: 100%;
    float: right;
    border-collapse: collapse;
}

.HEADINFOTEXT_TABLE td {
    border-bottom: 1px solid;
}

.HEADINFOTEXT_TABLE td:nth-child(odd) {
    font-weight: bold;
}

.HEADINFOTEXT_TABLE td:empty {
    margin:0;
    padding:0;
    border: none;
}

.COMMENT {
    grid-column: 2;
    grid-row: 3 / span 1;
}
.COMMENT_NAME{
   font-weight: bold;
   border-bottom: 1px solid;
}
.COMMENT p {
	margin:0;
}

/* content container <div> - general format */

.CONTENT {
    clear: both;
    padding-top: 10px;
}

.CONTENT img {
    max-width: 96px;
    max-height: 96px;
}


/* table content <table> - general table format of content */

.CONTENT_TABLE {
    width: 100%;
    text-align: left;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid black;
    border-collapse: collapse;
}


/* content cell <td> - general format of content cells */

.CONTENT_TABLE td {
    padding: 0 3px;
    border: 1px solid black;
}


/* content head <th> - column heading */

.CONTENT_TABLE th {
    text-align: center;
    padding: 0 3px;
    border: 1px solid black;
}


/* foot note <tfoot> - overall cycle time */

.CONTENT_TABLE tfoot {
    display: none;
}


/* content column <td> - center numbers */

.td_112,
.td_111,
.td_118,
.td_110,
.td_102,
.td_114,
.td_108,
.td_120,
.td_24 {
    text-align: center;
}


/* hide elements */


/* .th_112, .td_112,
.th_111, .td_111,
.th_118, .td_118,
.th_110, .td_110,
.th_102, .td_102,
.th_114, .td_114,
.th_108, .td_108,
.th_120, .td_120,
.th_24,  .td_24,     */

.th_122,
.td_122,
.th_22,
.td_22,
.th_104,
.td_104,
.th_113,
.td_113,
.th_115,
.td_115,
.th_106,
.td_106,
.th_105,
.td_105,
.th_126,
.td_126,
.th_123,
.td_123,
.th_107,
.td_107,
.th_117,
.td_117,
.th_100,
.td_100,
.th_124,
.td_124,
.th_101,
.td_101,
.th_103,
.td_103,
.th_121,
.td_121,
.th_109,
.td_109,
.th_125,
.td_125,
.th_116,
.td_116,
.th_119,
.td_119 {
    display: none;
}


/* 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);
    }
}