@import url('https://fonts.googleapis.com/css2?family=Dosis&family=DynaPuff&display=swap');


:root {

    /* --primary: #ff6600; */

    /* Light Colour Scheme */
    --primary: #0089ff;
    --primary-dark: #016cc9;
    --primary-transparent: #0089ff3b;

    --background:#F7F7F7;
    --foreground: white;
    --forground-shadow: 0px 0px 10px #0000002e;
    --background-dark: #e1e1e1;


    /* Dark Colour Scheme */
    /* --primary: #0089ff;
    --primary-dark: #016cc9;

    --background:#F7F7F7;
    --foreground: white;
    --forground-shadow: 0px 0px 10px #cfcfcf; */
}


html, body {
    height: 100%;
}

body {
    background: var(--background);
    font-family: 'Dosis', sans-serif;
}

    div.screen {
        height:100%;
        /* height: 100vh;  
        height: -webkit-fill-available; */
        /* height: calc(100vh - calc(100vh - 100%)); */
        width:100vw;
        display:flex;
        flex-direction: column;
    }

        /* div[zone]{

        } */

        div[zone="head"], div[zone="foot"]{
            background: var(--foreground);
            box-shadow: var(--forground-shadow);
            z-index:20;
        }

        div[zone="head"]{
            display:flex;
            font-size:1.2em;
            padding:0.3em 0.5em;
        }
        

        div[zone="page-container"]{
            flex:1;
            display: flex;
            flex-direction: column;
            overflow-y: hidden;
        }

            div[zone="content-container"]{
                overflow-y: auto;
                flex:1;
                display:flex;
                flex-direction: column;
            }

            div[zone="foot"]{
                font-size:1.8em;
            }


        body.hide-menus div[zone="head"], body.hide-menus div[zone="foot"] {
            display:none;
        }
        

/* === HEAD === */

div[zone="head"] div.title, div.title{
    font-family: 'DynaPuff', cursive;
    padding:0.1em 0;
    color:var(--primary);
}

div[zone="head"] div.sep{
    flex:1;
}

div[zone="head"] div.hamburger{
    
    position:relative;
}


    div[zone="head"] div.hamburger div.hamburger-icon {
        padding:0.1em 0.3em;
        border-radius: 0.5em;
    }

    div[zone="head"] div.hamburger.selected div.hamburger-icon {
        background:var(--background);
    }


    div[zone="head"] div.hamburger div.hamburger-dropdown {
        position:absolute;
        top:2em;
        right:0em;
        background:var(--foreground);
        box-shadow: var(--forground-shadow);
        display:none;
        z-index:1000;
    }

    div[zone="head"] div.hamburger.selected div.hamburger-dropdown {
        display:flex;
        flex-direction: column;
    }

        div[zone="head"] div.hamburger div.hamburger-dropdown div.hamburger-option {
            padding: 0.25em 2em;
            text-align: center;
            cursor: pointer;
            /* font-size:0.8em; */
        }

        div[zone="head"] div.hamburger div.hamburger-dropdown div.hamburger-option:hover {
            background:var(--background);
        }

        div[zone="head"] div.hamburger div.hamburger-dropdown div.hamburger-option:not(:last-child) {
            border-bottom:1px solid #cdcdcd;
        }



/* === CONTENT === */

div[zone="content"]{
    display:flex;
    flex:1;
    flex-direction: column;
    padding:0.5em;
    padding-bottom:0;
    overflow-y: auto;

    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
     -ms-animation: fadein 1s; /* Internet Explorer */
      -o-animation: fadein 1s; /* Opera < 12.1 */
         animation: fadein 1s;
}


    div.loading {
        flex:1;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

        div.loading img{
            width:4em;
            margin:auto;
        }

    div[zone="content"][page-id="LOGIN"] div.title,
    div[zone="content"][page-id="REGISTER"] div.title {
        text-align: center;
        font-size: 1.4em;
        padding: 0.2em;
    }

    div[zone="content"][page-id="LOGIN"] div.loading img,
    div[zone="content"][page-id="REGISTER"] div.loading img{
        height: 38px;
        width: auto;    
    }
    

    div[zone="content"] div.content-centering {
        flex:1;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
    }


    div[zone="content"] div.content-pane {
        background:var(--foreground);
        box-shadow: var(--forground-shadow);
        margin-bottom:0.5em;
        padding:0.3em;
        border-radius: 0.3em;
    }

    div[zone="content"] div.content-pane.content-pane-accent {
        background:var(--primary-transparent);
        color:var(--primary-dark);
        text-align: center;
    }

    div[zone="content"] div.content-pane.shared {
        /* border: 3px solid var(--primary); */
        background: linear-gradient(to right, var(--primary-dark), var(--primary));
    }

    div[zone="content"] div.content-pane.content-pane-dynamic {
        max-height:100vh;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        transition: all 300ms linear;
    }

    div[zone="content"] div.content-pane.content-pane-dynamic.hide {
        margin-bottom:0;
        padding-top:0;
        padding-bottom:0;
        max-height: 0;
        overflow-y: hidden;
    }

        div[zone="content"] div.content-pane.content-pane-action {
            cursor:pointer;
        }

        div[zone="content"] div.content-pane.content-pane-action:hover {
            background: var(--background);
        }

        div[zone="content"] div.content-pane.blank {
            height:0;
            padding: 0;
            margin: 0;
        }

        div[zone="content"] div.content-pane form{
            margin: 0.5em;
        }

        div[zone="content"] div.content-pane h2 {
            /* font-size: calc(1.025rem + .9vw); */
            font-size: 1em;
            font-weight: bold;
            margin-bottom:0.3rem;
        }

        div[zone="content"] div.content-pane p {
            margin:0;
        }

        div[zone="content"] div.content-pane span.click-text {
            color:var(--primary);
            font-weight: bold;
        }

        div[zone="content"] div.content-pane .preview {
            display:flex;
        }

        div[zone="content"] div.content-pane .preview:not(:last-child) {
            margin-bottom: 0.3em;
        }

            div[zone="content"] div.content-pane .preview .preview-picture-container{
                /* flex:1; */
                margin-right:0.8em;
            }

                div[zone="content"] div.content-pane .preview .preview-picture-container .preview-picture{
                    width:3em;
                    height:3em;
                    background:var(--background-dark);
                    border-radius: 10em;
                    background-position: center !important;
                    background-size: cover !important;
                }

                div[zone="content"] div.content-pane .preview.preview-large .preview-picture-container .preview-picture{
                    width:7em;
                    height:7em;
                }


                    div[zone="content"] div.content-pane .preview .preview-picture-container .preview-picture div.loading {
                        display:flex;
                        flex-direction: column;
                        justify-content: space-around;
                        height:100%;
                    }

                        div[zone="content"] div.content-pane .preview .preview-picture-container .preview-picture div.loading img{
                            width:1.85em;

                        }

            div[zone="content"] div.content-pane .preview .preview-text-container {
                flex:1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }

                /* div[zone="content"] div.content-pane .preview .preview-text-container .preview-text {

                } */

                div[zone="content"] div.content-pane .preview .text-large {
                    font-size:1.6em;
                }

                div[zone="content"] div.content-pane .preview .text-bold {
                    font-weight: bold;
                }

                div[zone="content"] div.stats {
                    flex:1;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    /* text-transform: uppercase; */
                    margin-top: 1rem;
                }

                    div[zone="content"] div.stats div.stat{
                        display:flex;
                        flex-direction: column;
                        text-align: center;
                    }

                        div[zone="content"] div.stats div.stat div.label {
                            font-size:13px;
                            flex:1;
                        }

                        div[zone="content"] div.stats div.stat div.value {
                            font-weight: bold;
                            font-size:28px;
                            color:var(--primary);
                        }
                

    div[zone="content"] div.tile-options {
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: column;
        flex:1;
    }

        div[zone="content"] div.tile-options div.option {
            display: flex;
            flex-direction: column;
            text-align: center;
            background: var(--foreground);
            box-shadow: var(--forground-shadow);
            flex: 1;
            padding: 0.5em;
            margin-bottom:0.5em;
            border-radius: 0.3em;
            cursor: pointer;
            max-height: 6em;
            overflow-y: hidden;

            -webkit-transition: all 300ms linear;
            -moz-transition: all 300ms linear;
            -ms-transition: all 300ms linear;
            -o-transition: all 300ms linear;
            transition: all 300ms linear;
        }

        div[zone="content"] div.tile-options div.option.hide {
            margin-bottom:0;
            padding-top:0;
            padding-bottom:0;
            max-height: 0;
        }

        div[zone="content"] div.tile-options div.option:hover {
            background: var(--background);
        }

            div[zone="content"] div.tile-options div.option div.icon{
                flex:2;
                font-size:2em;
            }

            div[zone="content"] div.tile-options div.option div.text{
                flex:1;
            }

    /* Mini Library */

    div.mini-photo-library {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;

    }


        div.mini-photo-library div.library-tile{
            background:var(--background-dark);
            width:30vw;
            height:30vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-bottom:0.4em;

            background-position: center !important;
            background-size: cover !important;

            cursor: pointer;
        }

        div.mini-photo-library div.library-tile.blank {
            background: var(--foreground);
        }

        div.mini-photo-library div.library-tile:nth-last-child(-n+3) {
            margin-bottom:0;
        }

        div.mini-photo-library div.library-tile.selected {
            border: 4px solid var(--primary);
        }


    /* Combo Panel */
    div[zone="content"] div.combo-panel {
        display:flex;
    }

        div[zone="content"] div.combo-panel div.combo-panel-primary {
            flex:5
        }

        /* div[zone="content"] div.combo-panel div.combo-panel-thin{
        
        } */


        div[zone="content"] div.hamburger{
            position:relative;
        }
        
        /* div[zone="content"] div.hamburger:hover {
            
        } */

            div[zone="content"] div.hamburger div.hamburger-icon {
                padding:0.1em 0.3em;
                border-radius: 0.5em;
            }

            div[zone="content"] div.hamburger.selected div.hamburger-icon {
                background:var(--background);
            }
        
            div[zone="content"] div.hamburger div.hamburger-dropdown {
                position:absolute;
                top:2em;
                right:0em;
                background:var(--foreground);
                box-shadow: var(--forground-shadow);
                display:none;
                z-index:1000;
            }
        
            div[zone="content"] div.hamburger.selected div.hamburger-dropdown {
                display:flex;
                flex-direction: column;
            }
        
                div[zone="content"] div.hamburger div.hamburger-dropdown div.hamburger-option {
                    padding: 0.25em 2em;
                    text-align: center;
                    cursor: pointer;
                    white-space: nowrap;
                    /* font-size:0.8em; */
                }
        
                div[zone="content"] div.hamburger div.hamburger-dropdown div.hamburger-option:hover {
                    background:var(--background);
                }
        
                div[zone="content"] div.hamburger div.hamburger-dropdown div.hamburger-option:not(:last-child) {
                    border-bottom:1px solid #cdcdcd;
                }
        

    /* Stack */                
    div.stack {
        text-align: center;
        /* font-weight: bold; */
    }

        /* div.stack { */

    /* Big Tile View */

    div[zone="content"] .big-tile-container {
        display: inline-block;
        position: relative;
        width: 100%;
        max-width:700px;
        box-shadow: var(--forground-shadow);
        margin-bottom:0.5em;
        overflow: hidden;
        border-radius:0.3em;
    }

        div[zone="content"] .big-tile-container img{
            width:100%;
        }

        div[zone="content"] .big-tile-container .big-tile-container-dummy {
            margin-top: 100%;
        }

            div[zone="content"] .big-tile-container .big-tile-container-dummy .big-tile-content{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: var(--background-dark);
                background-size: cover !important;
                background-position: center !important;
                display:flex;
                flex-direction: column;
                justify-content: space-around;
            }

    /* Tags */

    div[zone="content"] span[photo="tags"] {
        padding-left: 0.3em;
    }

        div[zone="content"] span[photo="tags"] span.tag {
            display:inline-block;
            border: 1px solid var(--primary-dark);
            padding: 0 0.6em;
            border-radius: 1em;
            color: var(--primary-dark);
            background: var(--primary-transparent);
            font-size: 0.8em;
            cursor: pointer;
            margin-right: 0.3em;
        }

        div[zone="content"] span[photo="tags"] span.tag:hover {
            background: var(--primary-dark);
            color:white;
        }


    /* Groups */
    div[zone="content"] span[member="groups"] span.group,
    .group-list-item
    {
        display:inline-block;
        /* border: 1px solid var(--primary-dark); */
        padding: 0 0.6em;
        /* border-radius: 1em; */
        color: var(--primary-dark);
        background: var(--primary-transparent);
        font-size: 0.8em;
        cursor: pointer;
        margin-right: 0.3em;
    }

    div[zone="content"] span[member="groups"] span.group:hover {
        background: var(--primary-dark);
        color:white;
    }

     


    /* Search */

    div[zone="content"] div.search-form {
        display:flex;
    }

        div[zone="content"] div.search-form input {
            width:auto !important;
            flex:1;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        div[zone="content"] div.search-form div.search-button {
            margin-left: 0.2em;
            background: var(--primary);
            color: white;
            padding: 0.15em 0.4em;
            font-size: 1.3em;
            border-top-right-radius: 0.2em;
            border-bottom-right-radius: 0.2em;
        }

        div[zone="content"] div.search-form div.search-button:hover {
            background: var(--primary-dark);
        }

/* === FOOT === */

div.page-actions {
    display:flex;
    justify-content: space-around;
    padding:0.3em;
    margin: 0.2em 0 0.5em 0;
}

    div.page-actions div.action {
        cursor: pointer;
        padding:0.1em 0.3em;
        border-radius: 0.5em;
    }

        div.page-actions div.action span.full-text {
            display:none;
        }

    div.page-actions div.action.selected {
        background:var(--primary);
        color:white;
    }

    div.page-actions div.action.selected:hover {
        background:var(--primary-dark);
    }

    div.page-actions div.action:hover {
        background:var(--background);
    }


/* === COMMON === */

/* span.accent {
    font-weight: bold;
    color:var(--primary);
} */

div.form-group {
    margin-bottom: 0.3em;
}



/* === Annimations === */


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



/* == TABLET INTERFACE == */

@media only screen and (min-width: 600px) {
    div[zone="page-container"]{
        flex-direction: row-reverse;
        overflow: hidden;
        /* min-height: 100%; */
    }

        div[zone="content-container"]{
            /* min-height: 100%; */
            overflow-y: hidden;
        }

            div[zone="content"] div.tile-options {
                display:flex;
            }

    div[zone="foot"] {
        background:0;
        box-shadow: none;
    }

        div[zone="foot"] div.page-actions {
            flex-direction: column;
            background:var(--foreground);
            box-shadow: var(--forground-shadow);
            margin-top: 0.3em;
            margin-left: 0.3em;
            border-radius: 0.16666em;
        }

            div.page-actions div.action {
                border-radius:0.2em;   
            }

            div.page-actions div.action:not(:last-child) {
                margin-bottom:0.3em;
            }

                div.page-actions div.action span.full-text {
                    display:inline;
                    font-size: 0.7em;
                    margin-left: 0.4em;
                }
}


/* @media only screen and (min-width: 600px) {
    div[zone="content"] .content-pane:not(.content-pane-full){
        width:calc(33% - 0.1em);
    }
} */


@media only screen and (min-width: 800px) {
    div[zone="content"]{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
        div[zone="content"] .content-pane.content-pane-full{
            width:100%
        }

        div[zone="content"] .content-pane:not(.content-pane-full){
            width:calc(33% - 0.1em);
        }

}


@media only screen and (min-width: 1500px) {
    div[zone="content"] .content-pane:not(.content-pane-full){
        width:calc(20% - 0.4em);
    }

    div[zone="content"] div.content-pane .preview .preview-picture-container .preview-picture {
        border-radius: 0.3em;
    }
}