/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Carousel */
/*.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}*/

/*768          992                1200
'     '     '     '     '     '     '     '     '
<---------^------------^------------------^--------->
     xs         sm              md             lg
   (phone)   (tablet)        (laptop)       (desktop)*/

/*@media (max-width: 767px) {
    body {
        font-size: 10px;
    }
}

@media (max-width: 992px) {
    body {
        font-size: 12px;
    }
}

@media (max-width: 1200px) {
    body {
        font-size: 14px;
    }
}*/

/* Hide/rearrange for smaller screens */
/*@media screen and (max-width: 767px) {  
    .header-grid-logo {
        display: none;
    }
}*/

/*h1 {
    border-bottom: 3px solid #cc9900;
    font: 2.75em/1.75em Georgia, serif;    
    color: #000000;
}

h2 {
    font: 2.75em/1.75em Georgia, serif;
    color: #000000;
}

ul {
    list-style-type: none;
}*/

body {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font: 75%/1.75em "Segoe UI";
    /*font: 4vw "Segoe UI";*/
    color: #000000;
}

/*#list {
    margin: 1em 0 7em -3em;
    padding: 1em 0 0 0;
    background-color: #ffffff;
    color: #996600;
    width: 25%;
    float: left;
}*/

header, footer {
    margin: 0;
    background-color: #dddddd;
    /*
        The sequence for padding is top->right->bottom->left. 
        Please note that the right padding has to take the grid-column-gap into consideration.
    */
    padding: 10px 10px 10px 10px;
    /*text-align: left;
    font-size: 15px;
    color: black;*/
}

.header-grid-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 90% 10%;
    grid-template-columns: 90% 10%;
    /*grid-row-gap: 0px;
    grid-column-gap: 20px;*/
    background-color: #dddddd;
    grid-template-areas: "header-grid-info PDI-logo";
}

    .header-grid-container > div {
        background-color: #dddddd;
        padding: 0px;
        text-align: left;
        font-size: 15px;
    }

.header-grid-logo {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: PDI-logo;
}

    .header-grid-logo img {
        width: 100%;
        height: auto;
    }

.header-grid-info-container {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(max-content, 20%) auto;
    grid-template-columns: minmax(max-content, 20%) auto;
    /*grid-auto-columns: max-content auto;*/
    /*grid-row-gap: 0px;
    grid-column-gap: 20px;*/
    grid-area: header-grid-info;
    grid-template-areas: "header-item1 header-item2" "header-item3 header-item4" "header-item5 header-item6" "header-item7 header-item8" "header-item9 header-item10" "header-item11 header-item12";
}

    .header-grid-info-container > div {
        /*background-color: #dddddd;*/
        padding: 5px;
        text-align: left;
        font-size: 15px;
    }

.header-grid-item1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: header-item1;
}

.header-grid-item2 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: header-item2;
}

.header-grid-item3 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: header-item3;
}

.header-grid-item4 {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: header-item4;
}

.header-grid-item5 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: header-item5;
}

.header-grid-item6 {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    grid-area: header-item6;
}

.header-grid-item7 {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    grid-area: header-item7;
}

.header-grid-item8 {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
    grid-area: header-item8;
}

.header-grid-item9 {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-area: header-item9;
}

.header-grid-item10 {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
    grid-area: header-item10;
}

.header-grid-item11 {
    -ms-grid-row: 6;
    -ms-grid-column: 1;
    grid-area: header-item11;
}

.header-grid-item12 {
    -ms-grid-row: 6;
    -ms-grid-column: 2;
    grid-area: header-item12;
    /*word-wrap: break-word;*/
    word-break: break-all;
}

.section-grid-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(max-content, 30fr) minmax(max-content, 40fr) minmax(max-content, 30fr);
    grid-template-columns: minmax(max-content, 30fr) minmax(max-content, 40fr) minmax(max-content, 30fr);
    /*-ms-grid-columns: max-content max-content auto;
    grid-auto-columns: max-content max-content auto;*/
    margin: 50px 10px 10px 10px;
    /*grid-row-gap: 0px;
    grid-column-gap: 20px;*/
    grid-template-areas: "section-item1 section-item2 section-item3" "section-item4 section-item5 section-item6" "section-item7 section-item8 section-item9" "section-item10 section-item11 section-item12" "section-item13 section-item14 section-item15" "section-item16 section-item17 section-item18" "section-item19 section-item20 section-item21" "section-item22 section-item23 section-item24" "section-item25 section-item26 section-item27" "section-item28 section-item29 section-item30" "section-item31 section-item32 section-item33" "section-item34 section-item35 section-item36" "section-item37 section-item38 section-item39" "section-item40 section-item41 section-item42" "section-item43 section-item44 section-item45";
}

    .section-grid-container > div {
        padding: 5px;
        text-align: left;
        font-size: 15px;
    }

.section-grid-item1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: section-item1;
}

.section-grid-item2 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: section-item2;
}

.section-grid-item3 {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: section-item3;
}

.section-grid-item4 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: section-item4;
}

.section-grid-item5 {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: section-item5;
}

.section-grid-item6 {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    grid-area: section-item6;
}

.section-grid-item7 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: section-item7;
}

.section-grid-item8 {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    grid-area: section-item8;
}

.section-grid-item9 {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: section-item9;
}

.section-grid-item10 {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    grid-area: section-item10;
}

.section-grid-item11 {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
    grid-area: section-item11;
}

.section-grid-item12 {
    -ms-grid-row: 4;
    -ms-grid-column: 3;
    grid-area: section-item12;
}

.section-grid-item13 {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-area: section-item13;
}

.section-grid-item14 {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
    grid-area: section-item14;
}

.section-grid-item15 {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    grid-area: section-item15;
}

.section-grid-item16 {
    -ms-grid-row: 6;
    -ms-grid-column: 1;
    grid-area: section-item16;
}

.section-grid-item17 {
    -ms-grid-row: 6;
    -ms-grid-column: 2;
    grid-area: section-item17;
}

.section-grid-item18 {
    -ms-grid-row: 6;
    -ms-grid-column: 3;
    grid-area: section-item18;
}

.section-grid-item19 {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    grid-area: section-item19;
}

.section-grid-item20 {
    -ms-grid-row: 7;
    -ms-grid-column: 2;
    grid-area: section-item20;
}

.section-grid-item21 {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
    grid-area: section-item21;
}

.section-grid-item22 {
    -ms-grid-row: 8;
    -ms-grid-column: 1;
    grid-area: section-item22;
}

.section-grid-item23 {
    -ms-grid-row: 8;
    -ms-grid-column: 2;
    grid-area: section-item23;
}

.section-grid-item24 {
    -ms-grid-row: 8;
    -ms-grid-column: 3;
    grid-area: section-item24;
}

.section-grid-item25 {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
    grid-area: section-item25;
}

.section-grid-item26 {
    -ms-grid-row: 9;
    -ms-grid-column: 2;
    grid-area: section-item26;
}

.section-grid-item27 {
    -ms-grid-row: 9;
    -ms-grid-column: 3;
    grid-area: section-item27;
}

.section-grid-item28 {
    -ms-grid-row: 10;
    -ms-grid-column: 1;
    grid-area: section-item28;
}

.section-grid-item29 {
    -ms-grid-row: 10;
    -ms-grid-column: 2;
    grid-area: section-item29;
}

.section-grid-item30 {
    -ms-grid-row: 10;
    -ms-grid-column: 3;
    grid-area: section-item30;
}

.section-grid-item31 {
    -ms-grid-row: 11;
    -ms-grid-column: 1;
    grid-area: section-item31;
}

.section-grid-item32 {
    -ms-grid-row: 11;
    -ms-grid-column: 2;
    grid-area: section-item32;
}

.section-grid-item33 {
    -ms-grid-row: 11;
    -ms-grid-column: 3;
    grid-area: section-item33;
}

.section-grid-item34 {
    -ms-grid-row: 12;
    -ms-grid-column: 1;
    grid-area: section-item34;
}

.section-grid-item35 {
    -ms-grid-row: 12;
    -ms-grid-column: 2;
    grid-area: section-item35;
}

.section-grid-item36 {
    -ms-grid-row: 12;
    -ms-grid-column: 3;
    grid-area: section-item36;
}

.section-grid-item37 {
    -ms-grid-row: 13;
    -ms-grid-column: 1;
    grid-area: section-item37;
}

.section-grid-item38 {
    -ms-grid-row: 13;
    -ms-grid-column: 2;
    grid-area: section-item38;
}

.section-grid-item39 {
    -ms-grid-row: 13;
    -ms-grid-column: 3;
    grid-area: section-item39;
}

.section-grid-item40 {
    -ms-grid-row: 14;
    -ms-grid-column: 1;
    grid-area: section-item40;
}

.section-grid-item41 {
    -ms-grid-row: 14;
    -ms-grid-column: 2;
    grid-area: section-item41;
}

.section-grid-item42 {
    -ms-grid-row: 14;
    -ms-grid-column: 3;
    grid-area: section-item42;
}

.section-grid-item43 {
    -ms-grid-row: 15;
    -ms-grid-column: 1;
    grid-area: section-item43;
}

.section-grid-item44 {
    -ms-grid-row: 15;
    -ms-grid-column: 2;
    grid-area: section-item44;
}

.section-grid-item45 {
    -ms-grid-row: 15;
    -ms-grid-column: 3;
    grid-area: section-item45;
}

.canvas-button-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 91% 9%;
    grid-auto-columns: 91% 9%;
    /*margin: 50px 10px 10px 10px;*/
    /*grid-row-gap: 0px;*/
    /*grid-column-gap: 20px;*/
    grid-template-areas: "canvas-region form-button-region"
}

    .canvas-button-container > div {
        padding: 5px;
        /*text-align: left;
        font-size: 15px;*/
    }

.canvas-container {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: canvas-region;
    width: 92%;
    /*height: 400px;*/
}

.form-button-grid-container {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: form-button-region;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 5% 95%;
    grid-template-rows: 5% 95%;
    grid-template-areas: "goto-region" "button-region";
    /*grid-row-gap: 5px;*/
    /*grid-column-gap: 5px;*/
    /*background-color: #ffffff;*/
    padding: 60px 0px 0px 0px;
}

.Goto {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: goto-region;
}

.button-grid-container {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: button-region;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 5% 20% 5% 20% 5% 20% 5% 20%;
    grid-template-rows: 5% 20% 5% 20% 5% 20% 5% 20%;
    grid-template-areas: "gap1" "prev-region" "gap2" "next-region" "gap3" "resetZoom-region" "gap4" "unit-region";
    /*grid-row-gap: 5px;*/
    /*grid-column-gap: 5px;*/
    /*background-color: #ffffff;*/
    padding: 30px 0px 0px 0px;
}

.Prev {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: prev-region;
}

.Next {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    grid-area: next-region;
}

.ResetZoom {
    -ms-grid-row: 6;
    -ms-grid-column: 1;
    grid-area: resetZoom-region;
}

.Unit {
    -ms-grid-row: 8;
    -ms-grid-column: 1;
    grid-area: unit-region;
}

img {
    height: 100%;
    width: 100%;
}

#outer {
    position: relative;
}

#inner {
    position: absolute;
    left: 20%;
    right: 20%;
    top: 20%;
    bottom: 20%;
}

#inner-unit {
    position: absolute;
    left: 0%;
    right: 0%;
    top: 20%;
    bottom: 20%;
}

.footer-copyright {
    text-align: center;
}