/*
 * GROUPE_FG SimpleSAMLphp theme
 * Generated by: spp-theme-generator.sh
 * At: Wed Jan 22 22:45:31 CET 2020
 *
 * This CSS file incorporates SimpleSAMLphp's default CSS and merely
 * overrides elements to style this theme.
 */
@import url('../../resources/default.css');

body {
    /*
     * specify the background colour of the entire page as a very light
     * colour, since most corporate image colours are designed to work on
     * paper and thus with a white background.
     */
    background: #fafafa;
}

#wrap {
    /* center the main block within the page */
    margin: 20px auto;
    /*
     * specify the border around the main block as a complementary colour.
     * by default this is the +30' adjacent and the header border is the
     * corresponding -30' adjacent. You can also try swapping them, or if
     * your corporate style guide specifies complementary colours, use them.
     */
    border: 1px solid #606060;
}

#header {
    /* set the background of the header block to our corporate colour */
    background: #000000;
    /* and set the bottom border to complement the #wrap border colour */
    border-bottom: 1px solid #606060;
}

/* if we have a logo, put it on the right and fit it in the header */
#header img {
    float: right;
    display: inline;
    border: none;
    height: 64px;
    margin: 4px 12px;
}

/* put our name in small words on the bottom of every page */
#footer {
    font-size: smaller;
    padding-bottom: 0.1rem;
}

/* make small screens use the corporate colour as a background */
@media handheld,
only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {
    body {
        background: #FF0000 !important; 
        width: 100vw !important;
        height: 100vh !important;
        padding: 20px !important;
    }
    #wrap{
        width: calc(100% - 40px);
        display: block;
        padding:5px;
    }

    /* make the header display only the logo over the h1 instead of next to it */
    #header img {
        float: none;
        display: block;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #header {
        display: block;
        text-align: center;
    }

    #header h1 {
        display: none;
    }

    /* make the footer display on small screens */
    #footer {
        display: block;
        text-align: center;
    }
    #content {
        margin: 0 auto;
        width: 100%;
        display: block;
        padding: unset !important;
    }
    /* center inputs from the content block */

    /* Make sure the inputs are not too wide  and displayed on one line even if there is some content before */
    #content input {
        width: calc(100% - 30px);
        display: block;
        margin: 0 auto;
    }

    /* change the tr to be displayed as a block so that the inputs are displayed on one line */
    #content tr {
        display: block;
    }

    /* change the td to be displayed as a block so that the inputs are displayed on one line */
    #content td {
        display: block;
    }

    #content tbody {
        width: 100%;
        display: block;
    }

    #content table {
        width: 100%;
        margin-right:20px;
        display: block;
    }
    #content #submit{
        padding-top:20px;
        text-align: center;
    }
    ;

}