/* Load the defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/src/uib-styles.css` 
@import url("./uib-styles.css");*/

/* Cloak elements on initial load to hide the possible display of {{ ... }} 
 * Add to the app tag or to specific tags
 * To display "loading...", change to the following:
 *    [v-cloak] > * { display:none }
 *    [v-cloak]::before { content: "loading…" }
 */
[v-cloak] {
    display: none;
}

body {
    font-size: 16px;
}

.page {
    margin-top: 75px;
}

.adminpage {
    margin-top: 75px;
}

#navbar,
#footer {
    background-color: white;
}

#jumbo-bg {
    background-image: url('./images/rocks.jpeg');
    background-position: 0 -200px;
    background-repeat: no-repeat;
    height: 40vw;
}

/* small devices */
@media (max-width: 700px) {
    #jumbo-bg {
        background-position: 0 0px;
        height: 80vw;
    }
}

@media (max-width: 800px) and (min-width: 700px) {
    #jumbo-bg {
        background-position: 0 0px;
        height: 60vw;
    }
}

@media (max-width: 900px) and (min-width: 800px) {
    #jumbo-bg {
        background-position: 0 0px;
        height: 50vw;
    }
}

#jumbotron {
    background: none;
    text-align: center;
    text-shadow: 2px 2px 9px black, 2px 2px 9px black;
}

#jumbotron p {
    font-size: 2em;
    margin-top: 10%;
}

.full {
    padding: 0 !important;
    margin: 60px auto !important;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.jumbo-copyright {
    position: absolute;
    bottom: 0px;
    color: white;
    text-shadow: 1px 1px 3px black, 1px 1px 3px black;
    margin-left: 10px;
}

.shadow {
    text-shadow: 2px 2px 3px #000;
}

#bottomfiller {
    height: 60px;
}

div [role|="alert"] {
    text-align: center;
}