@import "theme.less";

@blocwidth : 400px;
@doubleblocwidth: (2*@blocwidth + 140px);

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Roboto";
 -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
*{
-webkit-touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
touch-callout: none;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
}
button, input{
outline: none;
}
 input
{
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important;
}
body {
    
}

.messageWindow{
    display : flex;
    align-items: center;
    justify-content: center;
    
    .message{
        font-size: 18pt;
        text-transform: uppercase;
        text-align: center;
        max-width: 70%;
    }
}

a {
    text-decoration: none;
    color: @blue;
}

h1,h2,h3,h4,h5,h6 {
    font-family: Oswald;
    color: @purpleDrk;
}

button{
    background-color: @purple;
    border: none;
    padding : 0.4em 1em;
    color: white;
    cursor : pointer;
    text-transform: uppercase;
    
    &:hover{
      background-color:lighten(@purple,20%);
        }
}

.mainpage {
    background-color: #AAA;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position : relative;
    
    >.toolbar{
        position : absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 60px;
        background-color: @purpleDrk;
        color: white;
        
        .icon{
            width: 60px;
            height: 60px;
            text-align: center;
            cursor : pointer;
            
            i{                
                font-size : 18pt;
                line-height: 60px;
            }
        }
    }
    .pagecontainer{
        position : absolute;
        left: 60px;
        top: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
        
        .pagecontainer-panels{
            position : relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            
            >.panel{
                background-color: #DDD;
                position : absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-transform : translate(0, 20%);
                transform : translate(0,20%);
                opacity : 0;
                transition : opacity 200ms ease-out, transform 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
                z-index: 0;
                
                &.selected{
                    opacity : 1;
                    -webkit-transform : translate(0,0);
                    transform : translate(0,0);
                    z-index: 1;
                }
                
                &.with-header{
                    display : flex;
                    flex-flow : column nowrap;
                    overflow: hidden;
                    
                    >header{
                        flex-shrink: 0;
                        height : 40px;
                        background-color: @purple;
                        color : white;
                        display : flex;
                        flex-flow : row nowrap;
                        align-items: center;
                        padding : 0 20px;
                        
                        .title{
                            flex : 1;
                            text-transform: uppercase;
                        }
                        
                        .actions{
                            display : flex;
                            flex-flow : row nowrap;
                            align-items: center;
                        }
                    }
                    
                    >section{
                        padding : 20px;
                        flex : 1;
                        overflow-x: hidden;
                        overflow-y: auto;
                        
                        .contentbloc{
                            background-color: white;
                            border : 1px solid @blocBorderColor;
                            padding : 20px;
                        }
                    }
                }
            }
            
            
        }
    }
}

.subtitle {
    color: gray;
}

@media screen and (max-width: @doubleblocwidth){
    .mainpage .pagecontainer .content{
        padding : 20px;
        .contentbloc{
            width: 100%;
            height: auto;
        }
    }
}

@media screen and (max-width: @smallwidth){
    .mainpage .pagecontainer .content{
        padding : 10px;
        .contentbloc{
            width: 100%;
            height: auto;
        }
    }
}

@media screen and (max-width: 480px){
    .mainpage .pagecontainer .content{
        padding : 5px;
        .contentbloc{
            margin : 5px;
            width: 100%;
            height: auto;
        }
    }
}