/* 2 COLUMN GRID 
    2 simple columns
*/

.grid-container-col-2 {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c2-1 c2-2';

    grid-template-rows: repeat(2, auto);
    grid-template-columns: 75% 25%;
}

.grid-col-2-1 { grid-area: c2-1; }
.grid-col-2-2 { grid-area: c2-2; }

/* 2 COLUMN GRID MOD
    2 simple columns
*/

.grid-container-col-2-MOD {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c2-1 c2-2';

    grid-template-rows: repeat(2, auto);
    grid-template-columns: min(20%) auto;
}

.grid-col-2-1 { grid-area: c2-1; }
.grid-col-2-2 { grid-area: c2-2; }

/* 3 COLUMN GRID
    3 simple columns
*/

.grid-container-col-3 {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c3-1 c3-2 c3-3';

    grid-template-rows: repeat(3, auto);
    grid-template-columns: min(20%) auto min(20%);
}

.grid-col-3-1 { grid-area: c3-1; }
.grid-col-3-2 { grid-area: c3-2; }
.grid-col-3-3 { grid-area: c3-3; }

/* 2 COLUMN TRADITIONAL GRID 
    header - 2 columns - footer
*/

.grid-container-col-2t {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c2t-header c2t-header'
    'c2t-1 c2t-2'
    'c2t-footer c2t-footer';

    grid-template-rows: repeat(2, auto);
    grid-template-columns: minmax(20%, 50%) auto;
}

.grid-col-2t-header { grid-area: c2t-header; }
.grid-col-2t-1 { grid-area: c2t-1; }
.grid-col-2t-2 { grid-area: c2t-2; }
.grid-col-2t-footer { grid-area: c2t-footer; }

/* 3 COLUMN TRADITIONAL GRID 
    header - 3 columns - footer
*/

.grid-container-col-3t {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c3t-header c3t-header c3t-header'
    'c3t-1 c3t-2 c3t-3'
    'c3t-footer c3t-footer c3t-footer';

    grid-template-rows: repeat(3, auto);
    grid-template-columns: min(30%) auto min(30%);
}

.grid-col-3t-header { grid-area: c3t-header; }
.grid-col-3t-1 { grid-area: c3t-1; }
.grid-col-3t-2 { grid-area: c3t-2; }
.grid-col-3t-3 { grid-area: c3t-3; }
.grid-col-3t-footer { grid-area: c3t-footer; }

/* 4 COLUMN GRID
    4 simple columns
*/

.grid-container-col-4 {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c4-1 c4-2 c4-3 c4-4';

    grid-template-rows: repeat(3, auto);
    grid-template-columns: 30% 40% 10% 20% ;
}

.grid-col-4-1 { grid-area: c4-1; }
.grid-col-4-2 { grid-area: c4-2; }
.grid-col-4-3 { grid-area: c4-3; }
.grid-col-4-4 { grid-area: c4-3; }

/* INK OVERRIDES */

.grid-container-col-2t-ink-override {
    grid-template-columns: 60% 40%;
}

.grid-col-3-1-ink-override {
    width: calc(100% - 2em);
}

.grid-col-2t-2-child-ink-override {
    width: fit-content;
    float: left;
    padding: .5em;
}

/*  COMPANY GRID 
    3 columns company grid
*/

.grid-container-company {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'company-qr company-upload company-preferences'
    'company-qr company-details company-details'
    'company-qr company-aftercare-tattoo company-aftercare-pmu'
    'company-qr company-email company-email'
    'company-save company-save company-save';

    grid-template-columns: 12% auto 44%;
    grid-gap: 1em;
}

.grid-company-qr { grid-area: company-qr; }
.grid-company-upload { grid-area: company-upload; }

.grid-company-preferences { 
    grid-area: company-preferences;
    display: grid;
    width: 100%;

    grid-template-areas:
    'cp-notation-label cp-notation-select . . .'
    'cp-archive-label cp-archive-button-decrement cp-archive-input cp-archive-button-increment cp-archive-span'
    'cp-consent-label cp-consent-button-decrement cp-consent-input cp-consent-button-increment cp-consent-span';

    grid-gap: 1em;
}

.grid-company-preferences-notation-label { grid-area: cp-notation-label; }
.grid-company-preferences-notation-select { grid-area: cp-notation-select; }
.grid-company-preferences-archive-label { grid-area: cp-archive-label; }
.grid-company-preferences-archive-button-decrement { grid-area: cp-archive-button-decrement; }
.grid-company-preferences-archive-input { grid-area: cp-archive-input; }
.grid-company-preferences-archive-button-increment { grid-area: cp-archive-button-increment; }
.grid-company-preferences-archive-span { grid-area: cp-archive-span; }
.grid-company-preferences-consent-label { grid-area: cp-consent-label; }
.grid-company-preferences-consent-button-decrement { grid-area: cp-consent-button-decrement;}
.grid-company-preferences-consent-input { grid-area: cp-consent-input; }
.grid-company-preferences-consent-button-increment { grid-area: cp-consent-button-increment;}
.grid-company-preferences-consent-span { grid-area: cp-consent-span; }

.grid-company-preferences > label, 
.grid-company-preferences > input, 
.grid-company-preferences > select{
    display: grid;
    min-height: 2em;
    background-color: var(--bg-color-select);
    padding: .5em;
    place-content: space-evenly;
}

.grid-company-preferences > input{
    width: 10vw;
}

.grid-company-details { grid-area: company-details; }
.grid-company-aftercare-tattoo { grid-area: company-aftercare-tattoo; }
.grid-company-aftercare-pmu { grid-area: company-aftercare-pmu; }
.grid-company-email { grid-area: company-email; }
.grid-company-save { grid-area: company-save; }

.grid-container-company > div {
    min-height: 4em;
    background-color: var(--bg-color-select);
    padding: .7em .4em;
}

.grid-company-email{ 
    grid-area: company-email;
    display: grid;
    width: 100%;

    grid-template-areas:
    'ce-email-header ce-email-header ce-email-header ce-email-header'
    'ce-email-label ce-email-input . .'
    'ce-email-send ce-email-textarea ce-email-textarea ce-email-textarea-labels'
    '. ce-email-info ce-email-info ce-email-info';

    grid-template-columns: 10% auto 10% 20%;
    grid-gap: 1em;
}

.grid-company-email-email-header { grid-area: ce-email-header; }
.grid-company-email-email-label { grid-area: ce-email-label; }
.grid-company-email-email-input { grid-area: ce-email-input; }
.grid-company-email-email-send { grid-area: ce-email-send; }
.grid-company-email-email-textarea { grid-area: ce-email-textarea; }
.grid-company-email-email-textarea-label-buttons { grid-area: ce-email-textarea-labels; }
.grid-company-email-email-info { grid-area: ce-email-info; }


.grid-company-email > label, 
.grid-company-email > input, 
.grid-company-email > textarea {
    display: grid;
    min-height: 2em;
    background-color: var(--bg-color-select);
    color: var(--font-color);
    padding: .5em;
    place-content: space-evenly;
}

#companyAftercareUpload {
    height: 12.5em;
}

.aftercare-download
{
    margin-top: 1em;
}