/*
 *  Copyright (C) SCHUNK GmbH & Co. KG - All Rights Reserved
 *  Unauthorized copying of this file, via any medium is strictly prohibited
 *  Proprietary and confidential
 *  Written by Thomas Rutschke thomas.rutschke@rutschkeconsulting.com, November 2022
 */
/*
    Contains header css
    Created on : 26.07.2024, 08:20:03
    Author     : ThomasRutschke
*/

.page-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem;
    margin: 4rem;
}

.page-content h2 {
    grid-column: 1;
    /*grid-row: 1;*/
}


.page-content .mandatoryFieldLine {
    grid-column: 2;
    /*    grid-row: 1;*/
    color:#929292;
    text-align: right;
    font-size: 1.2rem;
    margin: 0;
}

.page-content .load-save-container {
    grid-column: 2;
    /*    grid-row: 1;*/
    font-size: 1.2rem;
    margin-top:1.5rem;
}

/*.load-save-container:has('> schunk-btn-link-file-save'){*/ 
.load-save-container:has(> schunk-btn-link-file-save) {
    text-align: right;
}

.page-content .left {
    grid-column: 1;
    display: grid;
    grid-row-gap: 3rem;
    /*grid-template-rows: repeat(2, 1fr);*/
    grid-template-rows: repeat(3, 1fr);
}

.page-content .right {
    grid-column: 2;
    display: grid;
    grid-row-gap: 3rem;
    /*grid-template-rows: repeat(2, 1fr);*/
    grid-template-rows: repeat(3, 1fr);

}

.page-content .complete {
    grid-column: 1 / span 2;
    display: grid;
    /*grid-row-gap: 6rem;*/
    /*grid-template-rows: repeat(2, 1fr);*/
    /*grid-row: 2;*/
    /*overflow-x: scroll;*/
}

.page-content .left article {
    display: grid;
    row-gap: 1.5rem;
}

.page-content .right article {
    display: grid;
    grid-row-gap: 1.5rem;
}

/*.page-content .right article:first-child {
    height: 400px;
}*/

.page-content .complete .frame-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/*
.imgLeft {
    width: 100%;
    height: 93%;
    padding: 20px;
    font-size: 1.4rem;
    font-weight: bold;

    background-image: linear-gradient(45deg, #f4f2f2 25%, transparent 25%), 
        linear-gradient(-45deg, #f4f2f2 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #f4f2f2 75%), 
        linear-gradient(-45deg, transparent 75%, #f4f2f2 75%);
    background-size: 100px 100px;
    background-position: 0 0, 0 50px, 50px -50px, -50px 0px;
}
*/

.imgLeft {
    font-size: 1.4rem;
    font-weight: bold;
 }

/* move to Schunk Input*/
.schunk-select, .schunk-physical-value, .schunk-physical-vector {
    display: grid;
    grid-template-columns: 5% 30% 15% 10%;
    row-gap: 5px;
    margin-bottom: 10px;
    border: lightgrey dotted 1px;
}

.filter-container {
    grid-column: 1;
    grid-row-end: auto;
    /*    grid-row-end: span 4;*/
}

.left-side-container {
    grid-column: 1;
    grid-row-end: auto;
    /*    grid-row-end: span 4;*/
}

.right-side-container {
    grid-column: 2;
    grid-row-end: auto;
    /*    grid-row-end: span 4;*/
}

.recommendation-container {
    grid-column: 2;
    /*    grid-row: 1;*/
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.recommendation-container .h3 {
    /*    grid-row: 1;*/
}

.head-results-container {
    grid-column: 2;
    /*    grid-row: 2;*/
    /* to fit the data-table */
    overflow: hidden;
}

.btn-container-choice-cs {
    grid-column: 2;
}

.adapter-results-container {
    grid-column: 2;
    /*    grid-row: 3;*/
}

.disclaimer-container {
    grid-column: 2;
    z-index: 3; /* !!! must have greater z-index, than datatable fixed columns */
    /*    grid-row: 4;*/
}

.detailed-results-container {
    grid-column: 2;
    /*    grid-row: 4;*/
}

.recommendation-element {
    grid-row: 2;
    width: 80%;
    height: 200px;
    border: solid grey 2px;
    border-radius: 10%;
    margin: 10%; 
}

.head-adapter-icon {
    width: 90%;
    /*width: 160px;*/
}

.grid-row-1 {
    grid-row: 1;
}

.grid-row-2 {
    grid-row: 2;
}

.grid-row-3 {
    grid-row: 3;
}

.grid-row-4 {
    grid-row: 4;
}

.grid-row-5 {
    grid-row: 5;
}

.grid-row-6 {
    grid-row: 6;
}

.grid-row-7 {
    grid-row: 7;
}

.grid-row-8 {
    grid-row: 8;
}

.grid-row-9 {
    grid-row: 9;
}

.grid-row-10 {
    grid-row: 10;
}

.grid-row-11 {
    grid-row: 11;
}

.grid-row-12 {
    grid-row: 12;
}

.grid-row-13 {
    grid-row: 13;
}

.hidden {
    display: none;

}.imgSP {
    border: 2px solid lightgrey;
    aspect-ratio: 67 / 31;
    /* height: 80%; */
    width: 100%;
}