/*
@media only screen and (max-width: 500px), only screen and (orientation: portrait) {      
@media only screen and (min-width: 500px), only screen and (orientation: landscape) {
        */

/* if portrait mode is detected, rotate the entire site -90 degrees to hint rotating to landscape */


        select {
            font-size: 1.5em;
            background-color: #333333;
            color: #ffffff;
            overflow: hidden;
        }

        input {
            font-size: 1.5em;
            color: #ffffff;
            background-color: #333333;
            visibility: visible;
        }

        .hidden {
            font-size: 1.5em;
            /*            visibility: hidden;*/
            display: none;
        }

        .disabled {
            font-size: 1.5em;
            color: #ffffff;
            background-color: #333333;
            visibility: visible;
        }

        /*
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 16px;
        }
*/

        /* Large rounded green border */
        hr.new1 {
            border: 4px solid grey;
            border-radius: 5px;
            width: 80%;
        }

        img {
            opacity: 1.0;
            filter: alpha(opacity=80);
            /* For IE8 and earlier */
        }

        .opClass {
            visibility: hidden;
            opacity: 0.4;
            filter: alpha(opacity=40);
            /* For IE8 and earlier */
        }

        img:hover {
            opacity: 0.8;
            filter: alpha(opacity=100);
            /* For IE8 and earlier */
        }

        body {
            background-color: #333333;
            color: white;
            font-family: sans-serif;
            font-size: 14px;

        }

        table {
            text-align: right;
            color: #000000;
            width: 100%;
            border-collapse: collapse;
        }

        th {
            text-align: center;
            background-color: #4286f4;
            color: white;
            border: 1px solid #ddd;
            padding: 2px;
        }

        td {
            border: 1px solid #ddd;
            padding-left: 15px;
            padding-right: 7%;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:nth-child(odd) {
            background-color: #ffffff;
        }


        table.ptable {
            color: #000000;
            border-collapse: collapse;
            font-size: 1em;
        }

        table.ptable th {
            text-align: left;
            background-color: #4286f4;
            color: black;
            border: 1px solid #ddd;
            padding-left: 15px;
        }

        table.ptable td {
            border: 1px solid #ddd;
            padding-left: 15px;
        }



        H2 {
            display: inline;
            font-size: 1em;
            /*
            margin-block-start: 0.0em;
            margin-block-end: 0;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
*/
            font-weight: bold;
        }


        p {
            color: #000000;
            white-space: nowrap;
        }

        .pvalues {
            padding-right: 7%;
            text-align: right;
        }





/*        @media only screen and (min-width: 361px),*/
        @media only screen and (min-width: 421px),
        only screen and (orientation: landscape) {

            .item1 {
                grid-area: a1;
            }

            .item2 {
                grid-area: a4;
            }

            .item3 {
                grid-area: a5;
            }

            .item4 {
                grid-area: a6;
            }

            .item5 {
                grid-area: a7;
            }

            .item6 {
                grid-area: a8;
            }

            .item7 {
                grid-area: a9;
            }

            .item8 {
                grid-area: a10;
            }

            .item9 {
                grid-area: a11;
            }

             .item666 {
                display: none;
            }
            
            .grid-container {
                display: grid;
                grid-template-areas:
                    'a1 a1 a1'
                    'a4 a5 a6'
                    'a7 a8 a9'
                    'a10 a11 a12';
                grid-gap: 0px;
                background-image: linear-gradient(to top, #000046 0%, #1cb5e0 100%);
                padding: 2px;
                width: 100%;
/*                background-color: #2196F3;*/
/*                height: 100%;*/
            } 

            .grid-container > div {
                /*                background-color: rgba(255, 255, 255, 0.8);*/
                text-align: center;
                padding: 20px 0;
                font-size: 20px;
                padding: 1px;
            }

            .bos1 {
                /*                background-color: greenyellow;*/
                display: inline-block;
                height: 60px;
                width: 49.5%;
                /*                max-height: 100px;*/
                white-space: nowrap;
                text-align: right;
            }

            .bos2 {
                /*                background-color: yellow;*/
                display: inline-block;
                height: 60px;
                width: 49.5%;
                /*                max-height: 100px;*/
                white-space: nowrap;
                text-align: left;
            }

            .imgball {
                max-width: 11%;
                /*                         min-height: 70px; */
                height: 80%;
                object-fit: contain;
            }

            .select {
                opacity: 1.0;
                filter: alpha(opacity=100);
                /* For IE8 and earlier */
                -webkit-transform: scale(1.4);
                transform: scale(1.4);
            }

            .button {
                background-color: #000046;
                border: none;
                color: white;
                padding: 12px 26px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                border-radius: 16px;
            }

            #confirmation {
                display: none;
                font-size: 1.5em;
                position: absolute;
                left: 10%;
                top: 10%;
                /*            vertical-align: center;*/
                /*            top: calc(20% - 25px);*/
                /*            left: calc(50% - 200px);*/
                background: linear-gradient(to bottom, #00b4db, #0083b0);
                border-radius: 16px;
                border: 2px solid white;
                padding: 3px;
                text-align: center;
                width: 80%;
                height: 80%;
                /*                            max-width: 600px;*/
                /*                            max-height: 450px;*/
                z-index: 10;
            }
        }

/*        @media only screen and (max-width: 500px),*/
        @media only screen and (orientation: portrait) {
            .item1 {
/*                grid-area: a1;*/
                display: none;
            }

            .item2 {
/*                grid-area: a2;*/
                display: none;
            }

            .item3 {
/*                grid-area: a3;*/
                display: none;
            }

            .item4 {
/*                grid-area: a4;*/
                display: none;
            }

            .item5 {
                display: none;
            }

            .item6 {
/*                grid-area: a6;*/
                display: none;
            }

            .item7 {
                display: none;
            }

            .item8 {
                display: none;
            }

            .item9 {
                display: none;
            }

            
             .item666 {
                grid-area: b1;
                background-image: linear-gradient(to top, #000046 0%, #1cb5e0 100%);
            }

            
            .grid-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "b1";
}
            
            
            
/*
            .grid-container {
                display: grid;
                grid-template-areas:
                    'b1 b2 b3';
                background-image: linear-gradient(to top, #000046 0%, #1cb5e0 100%);
                width: 100%;
                height: 100%;
                background-color: #2196F3;
            }
            
*/
            
/*
            .grid-container {
                display: grid;
                grid-template-areas:
                    'a2 a2 a2'
                    'a1 a1 a1'
                    'a3 a3 a3'
                    'a6 a6 a6'
                    'a4 a4 a4';
                grid-gap: 0px;
                background-image: linear-gradient(to top, #000046 0%, #1cb5e0 100%);
                padding: 2px;
                height: 100%;
                //                background-color: #2196F3;
                //                height: auto;     was voorheen 100%
                //                background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            }
*/

            .grid-container > div {
/*                                background-color: rgba(255, 255, 255, 0.8);*/
                text-align: center;
                padding: 20px 0;
                font-size: 30px;
                padding: 1px;
            }

            .bos1 {
                /*                background-color: blue;*/
                display: inline-block;
                height: 100px;
                width: 100%;
                /*            max-height: 100px;*/
                white-space: nowrap;
                text-align: center;
            }

            .bos2 {
                /*                background-color: blue;*/
                display: inline-block;
                height: 100px;
                width: 100%;
                /*            max-height: 100px;*/
                white-space: nowrap;
                text-align: center;
            }

            .imgball {
                /*         max-width: 10%;*/
                height: 80%;
                object-fit: contain;
            }

            .select {
                opacity: 1.0;
                filter: alpha(opacity=100);
                /* For IE8 and earlier */
                -webkit-transform: scale(1.7);
                transform: scale(1.7);
            }

            .button {
                background-color: #000046;
                border: none;
                color: white;
                padding: 12px 26px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 2.0em;
                border-radius: 16px;
            }

            #confirmation {
                display: none;
                font-size: 3.0em;
                position: absolute;
                left: 5%;
                top: 20%;
                background: linear-gradient(to bottom, #00b4db, #0083b0);
                border-radius: 16px;
                border: 2px solid white;
                padding: 40px;
                text-align: center;
                width: 80%;
                height: 60%;
                z-index: 10;
            }


        }