/* Aditional styling specific to this project */

/* I can find no other way to ensure each project has its own background */
body {
    background: url(./images/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


@media (max-width: 1000px){
    #dashboard.sys-dashboard {
        width: 100%;
    }
    #dashboard.sys-dashboard .grid-stack {
        height: auto!important;
    }
    #dashboard.sys-dashboard .grid-stack .grid-stack-item {
        position: relative!important;
        width: auto!important;
        left: 0!important;
        top: auto!important;
        margin-bottom: 20px;
    }
}
@media (min-width: 1000px){
    #dashboard.sys-dashboard {
        width: 1000px;
    }
    #dashboard.sys-dashboard .tile-segment.icon-width {
        max-width: 90px;
        min-width: 60px;
    }
}
@media (min-width: 1300px){
    #dashboard.sys-dashboard {
        width: 1275px;
    }
    #dashboard.sys-dashboard .tile-segment.icon-width {
        max-width: 90px;
        min-width: 85px;
    }
}

.sys-dashboard .tile-segment .icon-title{
    max-width: 100%; /* Fix for if hyphens property is not recognised. Has been put in css but avoiding to republish package for demo update*/
}