/*========================================================================================================================================================*/
/*ALL SCREEN RESOLUTIONS (DEFAULT LAYOUT)*/
/*========================================================================================================================================================*/

body {
    /* Default styling for all screen sizes */
    width: 100%; /* Take full width of the viewport */
    max-width: 1280px; /* Maximum width of 1280px */
    margin: 0 auto; /* Center content on larger screens */
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mainform {
    width: 100%;
}

.pagecontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.pageheader {
}

.debugdetails {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    top: 0;
    left: 50%; /* Start positioning from the center of the page */
    transform: translateX(-50%); /* Move the navbar back to be centered */
    white-space: nowrap;
    /*width: 100%;*/
    text-align: center;
    color: green;
    font-size: 10px;
    justify-content: center;
}

    .debugdetails td {
        width: 200px;
    }



/*========================================================================================================================================================*/
/*TABLET AND PORTRAIT*/
/*========================================================================================================================================================*/
@media only screen and (max-width: 800px) {
   /* .divdevice:before {
        content: "tablet-portrait";
    }*/
}

/*========================================================================================================================================================*/
/*PHONE AND PORTRAIT*/
/*========================================================================================================================================================*/
@media (max-width: 980px) and (orientation: portrait) {
    body {
        max-width: 980px;
    }

   /* .divdevice:before {
        content: "phone-portrait";
    }*/
}

@media only screen and (max-width: 480px) {
    body {
        max-width: 360px;
    }

 /*   .divdevice:before {
        content: "phone-portrait2";
    }*/
}